|
|
<!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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<section id="demo" class="container mx-auto px-4 py-12"> |
|
|
<div class="grid gap-8 md:grid-cols-2"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
