mirror of
https://github.com/vibegif/vibegif.lol.git
synced 2026-04-07 10:12:13 +00:00
158 lines
7.6 KiB
HTML
158 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>vibegif.lol — AI Generated Gifs</title>
|
|
<link rel="stylesheet" href="/styles.css">
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.js"></script>
|
|
</head>
|
|
<body class="min-h-screen bg-white text-neutral-800">
|
|
|
|
<!-- Header -->
|
|
<header class="fixed top-0 inset-x-0 z-50 bg-white/80 backdrop-blur border-b border-neutral-200">
|
|
<div class="max-w-2xl mx-auto px-4 h-14 flex items-center justify-between">
|
|
<h1 class="text-2xl tracking-tight">vibegif<span class="text-neutral-400">.lol</span></h1>
|
|
<button id="btn-settings" class="p-2 rounded-lg hover:bg-neutral-100 transition">
|
|
<i data-lucide="panel-left" class="w-5 h-5 text-neutral-500"></i>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Settings Modal -->
|
|
<div id="modal-settings" class="fixed inset-0 z-60 hidden items-center justify-center bg-black/30 backdrop-blur-sm">
|
|
<div class="bg-white rounded-2xl shadow-xl w-full max-w-md mx-4 p-6">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 class="text-xl">account settings</h2>
|
|
<button id="btn-close-settings" class="p-1 rounded-lg hover:bg-neutral-100">
|
|
<i data-lucide="x" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
<label class="block text-sm text-neutral-500 mb-2">openrouter api key</label>
|
|
<input id="input-apikey-modal" type="password" placeholder="sk-or-..."
|
|
class="w-full px-4 py-3 rounded-xl border border-neutral-200 bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-300 font-mono text-sm">
|
|
<p class="mt-3 text-xs text-neutral-400">your key is stored locally and never sent anywhere except openrouter.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<main class="pt-20 pb-32 px-4 max-w-2xl mx-auto">
|
|
|
|
<!-- Onboarding -->
|
|
<div id="section-onboarding" class="text-center py-20 hidden">
|
|
<div class="text-6xl mb-4">✏️</div>
|
|
<h2 class="text-2xl mb-2">welcome to vibegif</h2>
|
|
<p class="text-neutral-500 mb-6">ai-generated gifs from simple prompts</p>
|
|
<label class="block text-sm text-neutral-500 mb-2">enter your openrouter api key to start</label>
|
|
<input id="input-apikey-onboard" type="password" placeholder="sk-or-..."
|
|
class="w-full max-w-sm mx-auto px-4 py-3 rounded-xl border border-neutral-200 bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-300 font-mono text-sm">
|
|
<p class="mt-3 text-xs text-neutral-400">get one at <a href="https://openrouter.ai/keys" target="_blank" class="underline">openrouter.ai/keys</a></p>
|
|
</div>
|
|
|
|
<!-- Generator -->
|
|
<div id="section-generator" class="hidden">
|
|
<!-- Prompt -->
|
|
<div class="space-y-4 mb-8">
|
|
<div>
|
|
<label class="block text-sm text-neutral-500 mb-2">prompt</label>
|
|
<input id="input-prompt" type="text" placeholder="rolling cat"
|
|
class="w-full px-4 py-3 rounded-xl border border-neutral-200 bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-300">
|
|
<p class="mt-1 text-xs text-neutral-400">keep it simple — e.g. "dancing star", "bouncing ball", "waving hand"</p>
|
|
</div>
|
|
|
|
<!-- Options -->
|
|
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
|
<div>
|
|
<label class="block text-xs text-neutral-500 mb-1">model</label>
|
|
<select id="select-model" class="w-full px-3 py-2 rounded-lg border border-neutral-200 bg-neutral-50 text-sm focus:outline-none">
|
|
<option value="google/gemini-3.1-flash-image-preview">gemini flash</option>
|
|
<option value="bytedance-seed/seedream-4.5">seedream 4.5</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-neutral-500 mb-1">frames</label>
|
|
<select id="select-frames" class="w-full px-3 py-2 rounded-lg border border-neutral-200 bg-neutral-50 text-sm focus:outline-none">
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4" selected>4</option>
|
|
<option value="5">5</option>
|
|
<option value="6">6</option>
|
|
<option value="7">7</option>
|
|
<option value="8">8</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-neutral-500 mb-1">fps</label>
|
|
<select id="select-fps" class="w-full px-3 py-2 rounded-lg border border-neutral-200 bg-neutral-50 text-sm focus:outline-none">
|
|
<option value="2">2</option>
|
|
<option value="4">4</option>
|
|
<option value="6" selected>6</option>
|
|
<option value="8">8</option>
|
|
<option value="10">10</option>
|
|
<option value="12">12</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-neutral-500 mb-1">size</label>
|
|
<select id="select-size" class="w-full px-3 py-2 rounded-lg border border-neutral-200 bg-neutral-50 text-sm focus:outline-none">
|
|
<option value="1K">1K</option>
|
|
<option id="option-half-k" value="0.5K">0.5K</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Aspect Ratio -->
|
|
<div>
|
|
<label class="block text-xs text-neutral-500 mb-1">aspect ratio</label>
|
|
<div id="aspect-buttons" class="flex flex-wrap gap-2">
|
|
<button data-ar="1:1" class="ar-btn active px-3 py-1.5 rounded-lg text-xs font-medium transition">1:1</button>
|
|
<button data-ar="16:9" class="ar-btn px-3 py-1.5 rounded-lg text-xs font-medium transition">16:9</button>
|
|
<button data-ar="9:16" class="ar-btn px-3 py-1.5 rounded-lg text-xs font-medium transition">9:16</button>
|
|
<button data-ar="4:3" class="ar-btn px-3 py-1.5 rounded-lg text-xs font-medium transition">4:3</button>
|
|
<button data-ar="3:4" class="ar-btn px-3 py-1.5 rounded-lg text-xs font-medium transition">3:4</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Generate Button -->
|
|
<button id="btn-generate"
|
|
class="w-full py-3 rounded-xl font-medium transition bg-neutral-800 text-white hover:bg-neutral-700">
|
|
generate gif
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Frames Preview -->
|
|
<div id="section-frames" class="mb-8 hidden">
|
|
<h3 class="text-sm text-neutral-500 mb-3">frames <span id="frame-counter"></span></h3>
|
|
<div id="frames-grid" class="grid grid-cols-4 gap-2"></div>
|
|
</div>
|
|
|
|
<!-- Result -->
|
|
<div id="section-result" class="text-center hidden">
|
|
<h3 class="text-sm text-neutral-500 mb-3">your gif</h3>
|
|
<div class="inline-block rounded-2xl overflow-hidden border border-neutral-200 shadow-lg">
|
|
<img id="gif-preview" class="max-w-full" src="">
|
|
</div>
|
|
<div class="mt-4">
|
|
<a id="btn-download" href="#" download="vibegif.gif"
|
|
class="inline-flex items-center gap-2 px-6 py-3 bg-neutral-800 text-white rounded-xl hover:bg-neutral-700 transition">
|
|
<i data-lucide="download" class="w-4 h-4"></i>
|
|
download gif
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error -->
|
|
<div id="section-error" class="mt-4 p-4 rounded-xl bg-red-50 text-red-600 text-sm hidden"></div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="fixed bottom-0 inset-x-0 bg-white/80 backdrop-blur border-t border-neutral-100 py-3 text-center text-xs text-neutral-400">
|
|
byok · your key never leaves your browser
|
|
</footer>
|
|
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|