175 lines
No EOL
4.9 KiB
HTML
175 lines
No EOL
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Tuto Riichi</title>
|
|
<link rel="stylesheet" href="/frontend/css/style.css">
|
|
<link rel="stylesheet" href="/frontend/css/speech-bubble.css">
|
|
<link rel="stylesheet" href="/frontend/css/hand.css">
|
|
<style>
|
|
#menu {
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
#mascotte {
|
|
position: absolute;
|
|
top: 670px;
|
|
right: 100px;
|
|
z-index: 999;
|
|
transform: scaleX(-1);
|
|
cursor: pointer;
|
|
}
|
|
|
|
#mascotte img {
|
|
width: 250px;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
.speech-bubble {
|
|
position: absolute;
|
|
top: 100px;
|
|
right: 170px;
|
|
z-index: 1;
|
|
display: none;
|
|
}
|
|
|
|
.speech-bubble.visible {
|
|
display: flex;
|
|
}
|
|
|
|
h2 {
|
|
position: absolute;
|
|
text-align: center;
|
|
margin-top: 40px;
|
|
margin-bottom: 20px;
|
|
color: white;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#winds-box {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
top: 200px;
|
|
left: 50px;
|
|
width: 200px;
|
|
height: 200px;
|
|
background: rgba(30, 30, 50, 0.9);
|
|
border: 3px solid rgba(150, 180, 220, 0.8);
|
|
border-radius: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.wind {
|
|
position: absolute;
|
|
width: 55px;
|
|
height: 55px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.wind:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.wind.north { top: 5px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #ff6b6b, #ff8787); }
|
|
.wind.east { left: 5px; top: 50%; transform: translateY(-50%); background: linear-gradient(135deg, #4ecdc4, #44a08d); }
|
|
.wind.south { bottom: 5px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #f9ca24, #f0932b); }
|
|
.wind.west { right: 5px; top: 50%; transform: translateY(-50%); background: linear-gradient(135deg, #a29bfe, #6c5ce7); }
|
|
|
|
.arrow {
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 250px;
|
|
background: rgb(231, 142, 224);
|
|
left: 50%;
|
|
top: 20px;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.arrow::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 20px solid transparent;
|
|
border-right: 20px solid transparent;
|
|
border-top: 25px solid rgb(231, 142, 224);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="menu"></div>
|
|
<div class="speech-bubble">
|
|
<div class="speech-text" id="speech-text"></div>
|
|
</div>
|
|
<div id="mascotte"></div>
|
|
|
|
<!-- schema -->
|
|
<div id="winds-box" style="position: absolute; top:200px; left: 850px">
|
|
<div class="wind east">E</div>
|
|
<div class="wind south">S</div>
|
|
<div class="wind west">O</div>
|
|
<div class="wind north">N</div>
|
|
</div>
|
|
|
|
<div id="winds-box" style="position: absolute; top:700px; left: 400px">
|
|
<div class="wind east">E</div>
|
|
<div class="wind south">S</div>
|
|
<div class="wind west">O</div>
|
|
<div class="wind north">N</div>
|
|
</div>
|
|
|
|
<div id="winds-box" style="position: absolute; top:700px; left: 1300px">
|
|
<div class="wind east">N</div>
|
|
<div class="wind south">E</div>
|
|
<div class="wind west">S</div>
|
|
<div class="wind north">O</div>
|
|
</div>
|
|
|
|
<!-- flèches -->
|
|
<div class="arrow" style="top: 420px; left: 700px; transform: rotate(45deg)"></div>
|
|
<div class="arrow" style="top: 420px; left: 1200px; transform: rotate(-45deg)"></div>
|
|
|
|
<!-- textes -->
|
|
<h2 style="position: absolute; top: 100px; left: 860px">Position initiale</h2>
|
|
<h2 style="position: absolute; top: 900px; left: 370px">L'Est gagne la manche</h2>
|
|
<h2 style="position: absolute; top: 900px; left: 1230px">L'Est ne gagne pas la manche</h2>
|
|
|
|
<script src="/frontend/js/fr/texts.js"></script>
|
|
<script>
|
|
// Charger le menu
|
|
fetch('/components/menu.html')
|
|
.then(r => r.text())
|
|
.then(html => document.getElementById('menu').innerHTML = html);
|
|
|
|
// Afficher la mascotte et le texte
|
|
const mascolteEl = document.getElementById('mascotte');
|
|
mascolteEl.innerHTML = '<img src="/img/tilineau/idle.png" alt="Tilineau">';
|
|
document.getElementById('speech-text').innerHTML = texts.riichi.chap7;
|
|
|
|
// Toggle bulle de dialogue au clic sur la mascotte
|
|
const speechBubble = document.querySelector('.speech-bubble');
|
|
mascolteEl.addEventListener('click', () => {
|
|
speechBubble.classList.toggle('visible');
|
|
mascolteEl.innerHTML = speechBubble.classList.contains('visible')
|
|
? '<img class="explaining" src="/img/tilineau/speaking.png" alt="Tilineau">'
|
|
: '<img src="/img/tilineau/idle.png" alt="Tilineau">';
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |