Spaces:
Running
Running
File size: 3,684 Bytes
1294069 5c6f850 bb90ae0 240275b 1294069 5c6f850 1294069 5c6f850 1294069 5c6f850 1294069 240275b 1294069 5c6f850 240275b 1294069 240275b 1294069 5c6f850 240275b 1294069 5c6f850 1294069 240275b 5c6f850 240275b 5c6f850 1294069 240275b 5c6f850 1294069 240275b 1294069 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
<!DOCTYPE html>
<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> |