vibegif/vibegif.lol
1
0
Fork 0
mirror of https://github.com/vibegif/vibegif.lol.git synced 2026-04-06 18:02:13 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
main
vibegif.lol/index.html

132 lines
7.1 KiB
HTML
Raw Permalink Blame History

<!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>
<style>
@font-face {
font-family: "Stain";
src: url("https://cdn.jsdelivr.net/gh/multipleof4/stain.otf@master/dist/Stain.otf") format("opentype");
font-weight: normal;
font-style: normal;
}
body, input, select, button, a {
font-family: "Stain", sans-serif;
}
</style>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white text-neutral-800 min-h-screen flex flex-col items-center">
<div id="app" class="w-full max-w-xl mx-auto px-4 py-8 flex flex-col items-center gap-6">
<header class="w-full flex items-center justify-between">
<div class="flex items-center gap-3">
<img src="examples/cat1.webp" alt="vibegif logo" class="h-14 w-auto block">
<h1 class="text-4xl tracking-tight">vibegif<span class="text-neutral-400">.lol</span></h1>
</div>
<button id="btn-settings" class="p-2 rounded-lg hover:bg-neutral-100 transition" title="Settings">
<i data-lucide="panel-left" class="w-5 h-5 text-neutral-500"></i>
</button>
</header>
<div id="setup-screen" class="w-full flex flex-col items-center gap-4 mt-12">
<p class="text-neutral-500 text-center text-lg">enter your <a href="https://openrouter.ai/keys" target="_blank" class="underline hover:text-neutral-800">OpenRouter</a> API key to start</p>
<input id="setup-key" type="password" placeholder="sk-or-..." class="w-full border border-neutral-300 rounded-lg px-4 py-3 text-center focus:outline-none focus:ring-2 focus:ring-neutral-400">
<button id="setup-save" class="bg-neutral-800 text-white rounded-lg px-6 py-3 hover:bg-neutral-700 transition">save & start vibing</button>
</div>
<div id="main-screen" class="w-full flex flex-col gap-5 hidden">
<div class="flex flex-col gap-2">
<label class="text-xs text-neutral-400 uppercase tracking-wider">model</label>
<select id="sel-model" class="border border-neutral-300 rounded-lg px-3 py-2 bg-white focus:outline-none focus:ring-2 focus:ring-neutral-400">
<option value="bytedance-seed/seedream-4.5" selected>Seedream 4.5</option>
<option value="google/gemini-3.1-flash-image-preview">Gemini 3.1 Flash Image</option>
</select>
</div>
<div class="flex flex-col gap-2">
<label class="text-xs text-neutral-400 uppercase tracking-wider">prompt</label>
<input id="inp-prompt" type="text" placeholder="rolling cat" class="border border-neutral-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-neutral-400">
<p class="text-xs text-neutral-400">keep it simple — e.g. "rolling cat", "bouncing ball", "waving hand"</p>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="flex flex-col gap-2">
<label class="text-xs text-neutral-400 uppercase tracking-wider">frames</label>
<input id="inp-frames" type="number" value="2" min="2" max="24" class="border border-neutral-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-neutral-400">
</div>
<div class="flex flex-col gap-2">
<label class="text-xs text-neutral-400 uppercase tracking-wider">fps</label>
<input id="inp-fps" type="number" value="4" min="1" max="30" class="border border-neutral-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-neutral-400">
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="flex flex-col gap-2">
<label class="text-xs text-neutral-400 uppercase tracking-wider">aspect ratio</label>
<select id="sel-ratio" class="border border-neutral-300 rounded-lg px-3 py-2 bg-white focus:outline-none focus:ring-2 focus:ring-neutral-400">
<option value="1:1">1:1</option>
<option value="16:9">16:9</option>
<option value="9:16">9:16</option>
<option value="4:3">4:3</option>
<option value="3:2">3:2</option>
</select>
</div>
<div class="flex flex-col gap-2">
<label class="text-xs text-neutral-400 uppercase tracking-wider">max size (px)</label>
<input id="inp-max-size" type="number" value="256" min="32" max="1024" class="border border-neutral-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-neutral-400">
</div>
</div>
<label class="flex items-start gap-3 border border-neutral-200 rounded-xl px-3 py-3">
<input id="chk-semi-transparent" type="checkbox" class="mt-1 h-4 w-4 accent-neutral-800">
<span class="text-sm text-neutral-600 leading-snug">semi-transparent</span>
</label>
<button id="btn-generate" class="bg-neutral-800 text-white rounded-lg px-6 py-3 hover:bg-neutral-700 transition flex items-center justify-center gap-2 text-lg">
<i data-lucide="sparkles" class="w-5 h-5"></i>
generate gif
</button>
<div id="progress-area" class="w-full hidden flex-col items-center gap-3">
<div class="w-full bg-neutral-100 rounded-full h-2 overflow-hidden">
<div id="progress-bar" class="bg-neutral-800 h-2 rounded-full transition-all duration-300" style="width:0%"></div>
</div>
<p id="progress-text" class="text-sm text-neutral-400"></p>
<div id="frames-preview" class="flex gap-2 flex-wrap justify-center"></div>
</div>
<div id="result-area" class="w-full hidden flex-col items-center gap-4">
<img id="result-gif" class="rounded-xl border border-neutral-200 max-w-full">
<a id="btn-download" download="vibegif.gif" class="bg-neutral-800 text-white rounded-lg px-6 py-3 hover:bg-neutral-700 transition flex items-center gap-2 cursor-pointer no-underline">
<i data-lucide="download" class="w-5 h-5"></i>
download gif
</a>
</div>
</div>
</div>
<div id="modal-settings" class="fixed inset-0 bg-black/30 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-2xl p-6 w-full max-w-sm mx-4 flex flex-col gap-4 shadow-xl">
<div class="flex items-center justify-between">
<h2 class="text-xl">account settings</h2>
<button id="btn-close-modal" class="p-1 hover:bg-neutral-100 rounded-lg transition">
<i data-lucide="x" class="w-5 h-5 text-neutral-500"></i>
</button>
</div>
<div class="flex flex-col gap-2">
<label class="text-xs text-neutral-400 uppercase tracking-wider">OpenRouter API Key</label>
<input id="modal-key" type="password" placeholder="sk-or-..." class="border border-neutral-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-neutral-400">
</div>
<button id="modal-save" class="bg-neutral-800 text-white rounded-lg px-6 py-3 hover:bg-neutral-700 transition">save</button>
</div>
</div>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.js"></script>
<script type="module" src="/src/main.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink