Skip to content

Instantly share code, notes, and snippets.

@Fortyseven

Fortyseven/psycho-clock-qwen3-30b.html

Created November 16, 2025 16:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Fortyseven/00b723d818d7b8e5213bd84869def7b7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Fortyseven/00b723d818d7b8e5213bd84869def7b7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
psycho-clock-qwen3-30b.html
<DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: white;
font-family: 'Arial', sans-serif;
overflow: hidden;
}
.clock {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(circle, #3f00ff, #ff00ff);
box-shadow: 0 0 30px rgba(255, 0, 255, 0.6);
border: 2px solid rgba(255, 255, 255, 0.2);
animation: colorShift 12s infinite alternate;
}
.numbers {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.num {
position: absolute;
color: #ff00ff;
font-size: 18px;
font-weight: bold;
text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
}
/* 12 positions for numbers (1-12) */
.num:nth-child(1) { top: 10%; left: 50%; } /* 12 */
.num:nth-child(2) { top: 20%; left: 65%; } /* 1 */
.num:nth-child(3) { top: 35%; left: 75%; } /* 2 */
.num:nth-child(4) { top: 55%; left: 85%; } /* 3 */
.num:nth-child(5) { top: 75%; left: 75%; } /* 4 */
.num:nth-child(6) { top: 85%; left: 65%; } /* 5 */
.num:nth-child(7) { top: 90%; left: 50%; } /* 6 */
.num:nth-child(8) { top: 85%; left: 35%; } /* 7 */
.num:nth-child(9) { top: 75%; left: 25%; } /* 8 */
.num:nth-child(10) { top: 55%; left: 15%; } /* 9 */
.num:nth-child(11) { top: 35%; left: 25%; } /* 10 */
.num:nth-child(12) { top: 20%; left: 35%; } /* 11 */
.hour-hand, .minute-hand, .second-hand {
position: absolute;
top: 50%;
left: 50%;
transform-origin: top center;
width: 3px;
background: #ffff00;
border-radius: 50%;
}
.hour-hand {
height: 60px;
transform: translateX(-50%) rotate(130deg);
animation: pulse 4s infinite alternate;
}
.minute-hand {
height: 80px;
transform: translateX(-50%) rotate(120deg);
background: #00ff00;
animation: pulse 3s infinite alternate;
}
.second-hand {
height: 100px;
transform: translateX(-50%) rotate(0deg);
background: #00ffff;
animation: secondRotate 60s linear infinite;
}
@keyframes secondRotate {
to { transform: translateX(-50%) rotate(360deg); }
}
@keyframes colorShift {
0% { background: radial-gradient(circle, #3f00ff, #ff00ff); }
25% { background: radial-gradient(circle, #ff00ff, #00ffff); }
50% { background: radial-gradient(circle, #00ffff, #ff00ff); }
75% { background: radial-gradient(circle, #ff00ff, #3f00ff); }
100% { background: radial-gradient(circle, #3f00ff, #ff00ff); }
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 15px rgba(255, 255, 0, 0.4), 0 0 30px rgba(255, 255, 0, 0.2); }
50% { box-shadow: 0 0 25px rgba(255, 255, 0, 0.7), 0 0 50px rgba(255, 255, 0, 0.4); }
}
</style>
</head>
<body>
<div class="clock">
<div class="numbers">
<span class="num">12</span>
<span class="num">1</span>
<span class="num">2</span>
<span class="num">3</span>
<span class="num">4</span>
<span class="num">5</span>
<span class="num">6</span>
<span class="num">7</span>
<span class="num">8</span>
<span class="num">9</span>
<span class="num">10</span>
<span class="num">11</span>
</div>
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment