Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mandate of Heaven</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| background-color: #f9f9f9; | |
| } | |
| .logos { | |
| display: flex; | |
| gap: 20px; | |
| margin: 20px 0; | |
| } | |
| .logo { | |
| width: 50px; | |
| height: auto; | |
| } | |
| .timeline { | |
| position: relative; | |
| width: 300px; | |
| height: 50px; | |
| } | |
| .line { | |
| position: absolute; | |
| top: 20px; | |
| width: 100%; | |
| border-top: 2px dashed #ccc; | |
| } | |
| .dot { | |
| position: absolute; | |
| top: 10px; | |
| width: 20px; | |
| height: 20px; | |
| background-color: #333; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| } | |
| .position { | |
| position: absolute; | |
| top: 30px; | |
| width: 10px; | |
| height: 10px; | |
| background-color: #ccc; | |
| border-radius: 50%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Mandate of Heaven</h1> | |
| <div class="logos"> | |
| <img src="https://via.placeholder.com/50?text=Logo1" alt="Logo 1" class="logo"> | |
| <img src="https://via.placeholder.com/50?text=Google" alt="Google" class="logo"> | |
| <img src="https://via.placeholder.com/50?text=Anthropic" alt="Anthropic" class="logo"> | |
| <img src="https://via.placeholder.com/50?text=xAI" alt="xAI" class="logo"> | |
| </div> | |
| <div class="timeline"> | |
| <div class="line"></div> | |
| <div class="dot" id="movingDot" onclick="moveDot()"></div> | |
| <div class="position" style="left: 33%;"></div> | |
| <div class="position" style="left: 66%;"></div> | |
| <div class="position" style="left: 100%;"></div> | |
| </div> | |
| <script> | |
| let currentPosition = 0; | |
| const positions = [0, 33, 66, 100]; | |
| const dot = document.getElementById('movingDot'); | |
| function moveDot() { | |
| currentPosition = (currentPosition + 1) % positions.length; | |
| dot.style.left = positions[currentPosition] + '%'; | |
| } | |
| </script> | |
| </body> | |
| </html> |