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: #fff; | |
| margin: 0; | |
| padding: 20px; | |
| } | |
| h1 { | |
| font-size: 36px; | |
| font-weight: bold; | |
| margin: 20px 0; | |
| color: #000; | |
| text-align: center; | |
| line-height: 1.2; | |
| } | |
| .logos { | |
| display: flex; | |
| gap: 30px; | |
| margin-bottom: 40px; | |
| } | |
| .logo { | |
| width: 50px; | |
| height: auto; | |
| } | |
| .timeline { | |
| position: relative; | |
| width: 400px; | |
| height: 60px; | |
| } | |
| .line { | |
| position: absolute; | |
| top: 25px; | |
| width: 100%; | |
| border-top: 2px dashed #ccc; | |
| } | |
| .dot { | |
| position: absolute; | |
| top: 15px; | |
| width: 20px; | |
| height: 20px; | |
| background-color: #333; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| transition: left 0.3s ease; | |
| left: 0%; | |
| } | |
| .position { | |
| position: absolute; | |
| top: 20px; | |
| width: 10px; | |
| height: 10px; | |
| background-color: #ccc; | |
| border-radius: 50%; | |
| } | |
| #pos1 { left: 0%; } | |
| #pos2 { left: 33%; } | |
| #pos3 { left: 66%; } | |
| #pos4 { left: 100%; margin-left: -5px; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Mandate of Heaven<br>Mandate of Heaven</h1> | |
| <div class="logos"> | |
| <!-- ChatGPT Symbol (Simplified SVG) --> | |
| <svg class="logo" viewBox="0 0 100 100"> | |
| <path d="M20 20 L80 80 M80 20 L20 80" stroke="#000" stroke-width="10" fill="none"/> | |
| <circle cx="50" cy="50" r="40" fill="none" stroke="#000" stroke-width="5"/> | |
| </svg> | |
| <!-- Google Rainbow 'G' (Simplified SVG) --> | |
| <svg class="logo" viewBox="0 0 100 100"> | |
| <path d="M30 20 Q40 10 50 20 Q60 10 70 20 V80 Q60 90 50 80 Q40 90 30 80 Z" fill="#4285f4"/> | |
| <path d="M40 30 Q50 20 60 30 V70 Q50 80 40 70 Z" fill="#34a853"/> | |
| <path d="M60 30 Q70 20 80 30 V70 Q70 80 60 70 Z" fill="#fbbc05"/> | |
| <path d="M30 40 Q40 30 50 40 Q60 30 70 40 V60 Q60 70 50 60 Q40 70 30 60 Z" fill="#ea4335"/> | |
| </svg> | |
| <!-- ANTHROPIC Text --> | |
| <svg class="logo" viewBox="0 0 200 100"> | |
| <text x="0" y="70" font-size="40" fill="#000">ANTHROPIC</text> | |
| </svg> | |
| <!-- XAI Text --> | |
| <svg class="logo" viewBox="0 0 150 100"> | |
| <text x="0" y="70" font-size="40" fill="#000">XAI</text> | |
| </svg> | |
| </div> | |
| <div class="timeline"> | |
| <div class="line"></div> | |
| <div class="dot" id="movingDot"></div> | |
| <div class="position" id="pos1"></div> | |
| <div class="position" id="pos2"></div> | |
| <div class="position" id="pos3"></div> | |
| <div class="position" id="pos4"></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] + '%'; | |
| } | |
| // Add click event listener | |
| dot.addEventListener('click', moveDot); | |
| </script> | |
| </body> | |
| </html> |