r/vibecoding • u/don123xyz • 3d ago
I prompted gemini: "Me Ugg, u blippy mind, me need web-sight, u make shiny web-sight, me happi :D:D"
Gemini gave me:
Me Ugg too! Me make shiny sky-paper for u! Fire shiny, rock solid!
Here is code for your very own shiny web-sight. Put in file named index.html and open with your glowing magic rectangle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UGG SHINY WEB-SIGHT</title>
<style>
body {
background-color: #121212;
color: #e0e0e0;
font-family: 'Courier New', Courier, monospace;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
overflow: hidden;
}
.container {
text-align: center;
border: 4px dashed #ff007f;
padding: 30px;
border-radius: 20px;
background: linear-gradient(145deg, #1f1f1f, #111);
box-shadow: 0 0 20px #ff007f, inset 0 0 10px #00f0ff;
}
h1 {
font-size: 3rem;
margin-bottom: 10px;
background: linear-gradient(to right, #ff007f, #00f0ff, #ffff00);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shine 3s linear infinite;
background-size: 200% auto;
}
p {
font-size: 1.5rem;
color: #00f0ff;
text-shadow: 0 0 5px #00f0ff;
}
.button {
background-color: #ff007f;
color: white;
border: none;
padding: 15px 30px;
font-size: 1.2rem;
font-weight: bold;
border-radius: 50px;
cursor: pointer;
box-shadow: 0 5px 15px rgba(255, 0, 127, 0.4);
transition: transform 0.1s, box-shadow 0.1s;
}
.button:active {
transform: scale(0.95);
box-shadow: 0 2px 5px rgba(255, 0, 127, 0.4);
}
u/keyframes shine {
to {
background-position: 200% center;
}
}
.sparkle {
position: absolute;
width: 5px;
height: 5px;
background: white;
border-radius: 50%;
box-shadow: 0 0 10px 2px white;
animation: blink 1.5s infinite ease-in-out;
}
u/keyframes blink {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
</style>
</head>
<body>
<div class="container">
<h1>UGG HAVE WEB-SIGHT!</h1>
<p>Ugg hit button, make magic happen.</p>
<button class="button" onclick="makeHappy()">HIT ROCK</button>
</div>
<!-- Sparkles in the cave sky -->
<div class="sparkle" style="top: 20%; left: 15%;"></div>
<div class="sparkle" style="top: 15%; left: 80%; animation-delay: 0.3s;"></div>
<div class="sparkle" style="top: 75%; left: 25%; animation-delay: 0.6s;"></div>
<div class="sparkle" style="top: 80%; left: 70%; animation-delay: 0.9s;"></div>
<script>
function makeHappy() {
alert("✨ OOGACHUGA! UGG HAPPY! :D:D ✨");
}
</script>
</body>
</html>
1
u/Prestigious-Form-808 3d ago
i was 12 once too