File size: 14,657 Bytes
2a96bdf |
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 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>cool1 — Interactive UI Experiments</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body class="min-h-screen bg-slate-50 text-slate-800 antialiased selection:bg-slate-200 selection:text-slate-900">
<!-- Top Navigation -->
<header class="sticky top-0 z-30 border-b border-slate-200 bg-white/80 backdrop-blur">
<nav class="container mx-auto flex items-center justify-between px-4 py-3">
<div class="flex items-center gap-3">
<span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-slate-500 text-white shadow-md shadow-slate-300/50">C1</span>
<span class="text-lg font-extrabold tracking-tight">cool<span class="text-slate-500">1</span></span>
</div>
<ul class="hidden items-center gap-6 md:flex">
<li><a href="#features" class="text-slate-700 hover:text-slate-900">Features</a></li>
<li><a href="#demo" class="text-slate-700 hover:text-slate-900">Demo</a></li>
<li><a href="#signup" class="text-slate-700 hover:text-slate-900">Get updates</a></li>
</ul>
<div class="hidden md:flex items-center gap-3">
<button id="magneticBtn" class="magnetic-button relative inline-flex items-center gap-2 overflow-hidden rounded-xl bg-slate-500 px-5 py-2.5 font-semibold text-white shadow-lg shadow-slate-400/40 transition-colors hover:bg-slate-600 focus:outline-none focus:ring-4 focus:ring-slate-300">
<span>Try magnetic</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-90" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5-5 5M6 7l5 5-5 5" />
</svg>
<span class="ripple" aria-hidden="true"></span>
</button>
<button id="ringReset" class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-slate-200">
Reset ring
</button>
</div>
</nav>
</header>
<!-- Hero -->
<section class="relative overflow-hidden">
<div class="pointer-events-none absolute inset-0 -z-10">
<div class="absolute -left-24 -top-24 h-72 w-72 rounded-full bg-slate-400/30 blur-3xl"></div>
<div class="absolute right-0 top-16 h-80 w-80 rounded-full bg-black/5 blur-3xl"></div>
</div>
<div class="container mx-auto px-4 py-16">
<div class="grid items-center gap-10 md:grid-cols-2">
<div>
<h1 class="text-4xl font-extrabold leading-tight tracking-tight sm:text-5xl">
Playful UI experiments with
<span class="relative inline-block">
<span class="bg-slate-500 bg-clip-text text-transparent">slate</span>
<svg class="absolute -bottom-1 left-0 w-full text-slate-500" viewBox="0 0 200 8" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M0 6c30-5 60-5 90 0s60 5 90 0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</span>
+ <span class="text-black">black</span>
</h1>
<p class="mt-4 max-w-prose text-slate-600">
A light-mode, interactive showcase featuring 3D tilt, magnetic hover, ripple clicks, animated progress ring, and animated form labels. Minimal dependencies, maximum fun.
</p>
<div class="mt-8 flex flex-wrap items-center gap-3">
<a href="#demo" class="inline-flex items-center gap-2 rounded-xl bg-slate-500 px-5 py-2.5 font-semibold text-white shadow-lg shadow-slate-400/40 transition hover:bg-slate-600 focus:outline-none focus:ring-4 focus:ring-slate-300">
Open demo
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-90" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5-5 5M6 7l5 5-5 5" />
</svg>
</a>
<a href="#signup" class="inline-flex items-center gap-2 rounded-xl border border-slate-300 bg-white px-5 py-2.5 font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-slate-200">
Get updates
</a>
</div>
</div>
<!-- 3D Tilt Glass Card -->
<div class="relative">
<div id="tiltCard" class="tilt-card group relative mx-auto w-full max-w-md overflow-hidden rounded-2xl border border-slate-200 bg-white/70 p-6 shadow-xl shadow-slate-300/30 backdrop-blur">
<div class="pointer-events-none absolute -left-16 -top-16 h-36 w-36 rounded-full bg-slate-400/30 blur-2xl transition-transform duration-700 group-hover:translate-x-2 group-hover:translate-y-2"></div>
<div class="pointer-events-none absolute -bottom-12 -right-12 h-40 w-40 rounded-full bg-black/5 blur-2xl transition-transform duration-700 group-hover:-translate-x-1 group-hover:-translate-y-1"></div>
<h3 class="text-xl font-bold">3D Tilt + Glass</h3>
<p class="mt-1 text-slate-600">Hover or move your cursor to see a smooth 3D transform.</p>
<div class="mt-6 grid grid-cols-3 gap-3">
<div class="rounded-xl border border-slate-200 bg-slate-50/60 p-4 text-center shadow-sm">
<div class="text-2xl font-extrabold text-slate-800">99%</div>
<div class="text-xs uppercase tracking-wide text-slate-500">Uptime</div>
</div>
<div class="rounded-xl border border-slate-200 bg-slate-50/60 p-4 text-center shadow-sm">
<div class="text-2xl font-extrabold text-slate-800">24ms</div>
<div class="text-xs uppercase tracking-wide text-slate-500">Latency</div>
</div>
<div class="rounded-xl border border-slate-200 bg-slate-50/60 p-4 text-center shadow-sm">
<div class="text-2xl font-extrabold text-slate-800">2048</div>
<div class="text-xs uppercase tracking-wide text-slate-500">Keys</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Interactive Demo -->
<section id="demo" class="container mx-auto px-4 py-12">
<div class="grid gap-8 md:grid-cols-2">
<!-- Activity Ring -->
<div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
<div class="mb-4 flex items-center justify-between">
<h3 class="text-lg font-semibold">Activity ring</h3>
<span class="text-xs uppercase tracking-wide text-slate-500">Conic gradient</span>
</div>
<div class="flex flex-col items-center gap-6 sm:flex-row sm:items-center sm:gap-10">
<div class="relative h-40 w-40">
<div class="absolute inset-0 rounded-full bg-white"></div>
<div id="ringProgress" class="ring-progress relative z-10 h-40 w-40 rounded-full">
<div class="absolute inset-4 rounded-full bg-white">
<div id="ringLabel" class="grid h-full place-content-center text-center">
<div id="ringPercent" class="text-2xl font-extrabold text-slate-900">0%</div>
<div class="text-xs uppercase tracking-wide text-slate-500">Progress</div>
</div>
</div>
</div>
<div class="absolute inset-0 -z-10 rounded-full bg-slate-200/60 blur-sm"></div>
</div>
<div class="w-full max-w-sm">
<label for="ringInput" class="mb-2 block text-sm font-medium text-slate-700">Type to update</label>
<input id="ringInput" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="0-100" class="w-full rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-slate-900 shadow-sm outline-none ring-0 transition focus:border-slate-500 focus:ring-4 focus:ring-slate-200" />
<p class="mt-2 text-sm text-slate-500">Enter a value from 0 to 100.</p>
</div>
</div>
</div>
<!-- Ripple + Magnetic Buttons -->
<div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
<div class="mb-4 flex items-center justify-between">
<h3 class="text-lg font-semibold">Buttons</h3>
<span class="text-xs uppercase tracking-wide text-slate-500">Magnetic + Ripple</span>
</div>
<div class="flex flex-wrap items-center gap-3">
<button class="ripple-button relative overflow-hidden rounded-xl bg-slate-500 px-5 py-3 font-semibold text-white shadow-lg shadow-slate-400/40 transition hover:bg-slate-600 focus:outline-none focus:ring-4 focus:ring-slate-300">
Ripple
</button>
<button class="magnetic-button relative inline-flex items-center gap-2 overflow-hidden rounded-xl border border-slate-300 bg-white px-5 py-3 font-semibold text-slate-800 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-slate-200">
Magnetic
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
</svg>
</button>
</div>
<p class="mt-4 text-sm text-slate-600">Click "Ripple" to see a material ripple. Hover "Magnetic" to attract it toward your cursor.</p>
</div>
</div>
</section>
<!-- Animated Form -->
<section id="signup" class="container mx-auto px-4 pb-20">
<div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
<div class="mb-6">
<h3 class="text-lg font-semibold">Get notified</h3>
<p class="text-sm text-slate-600">Minimal form with animated labels and a live progress indicator.</p>
</div>
<form id="notifyForm" class="grid gap-5 sm:grid-cols-2" novalidate>
<div class="relative">
<input id="name" type="text" required class="peer w-full rounded-xl border border-slate-300 bg-white px-4 pt-6 pb-2 text-slate-900 shadow-sm outline-none focus:border-slate-500 focus:ring-4 focus:ring-slate-200" placeholder=" " />
<label for="name" class="animated-label">Name</label>
</div>
<div class="relative">
<input id="email" type="email" required class="peer w-full rounded-xl border border-slate-300 bg-white px-4 pt-6 pb-2 text-slate-900 shadow-sm outline-none focus:border-slate-500 focus:ring-4 focus:ring-slate-200" placeholder=" " />
<label for="email" class="animated-label">Email</label>
</div>
<div class="relative sm:col-span-2">
<textarea id="message" rows="3" class="peer w-full resize-none rounded-xl border border-slate-300 bg-white px-4 pt-6 pb-2 text-slate-900 shadow-sm outline-none focus:border-slate-500 focus:ring-4 focus:ring-slate-200" placeholder=" "></textarea>
<label for="message" class="animated-label">Message <span class="text-slate-400">(optional)</span></label>
<div class="pointer-events-none absolute bottom-2 right-2 text-xs text-slate-400" id="charCount">0 / 200</div>
</div>
<div class="flex items-center gap-4 sm:col-span-2">
<button type="submit" class="inline-flex items-center gap-2 rounded-xl bg-slate-500 px-5 py-2.5 font-semibold text-white shadow-lg shadow-slate-400/40 transition hover:bg-slate-600 focus:outline-none focus:ring-4 focus:ring-slate-300">
Submit
</button>
<div class="relative h-8 w-28">
<div class="absolute inset-0 rounded-full bg-slate-200"></div>
<div id="formProgress" class="absolute inset-0 h-full w-0 rounded-full bg-slate-500 transition-all"></div>
<div class="absolute inset-0 grid place-content-center text-[10px] font-semibold text-slate-700">0%</div>
</div>
</div>
</form>
</div>
</section>
<footer class="border-t border-slate-200 bg-white/70">
<div class="container mx-auto px-4 py-8 text-sm text-slate-500">
<div class="flex flex-col items-center justify-between gap-2 sm:flex-row">
<p>Built with Tailwind (slate + black) • Light mode</p>
<p>© <span id="year"></span> cool1</p>
</div>
</div>
</footer>
<script src="script.js"></script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |