vibegif/vibegif.lol
1
0
Fork 0
mirror of https://github.com/vibegif/vibegif.lol.git synced 2026-04-07 02:12:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: lucide loading + cleaner header + model size UI

Browse Source
This commit is contained in:
multipleof4
2026-03-20 21:22:17 -07:00
parent dcc334479f
commit b400fd9ed9
1 changed files with 8 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
index.html
View File

@@ -26,21 +26,20 @@
};
</script>
<!-- Alpine -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<!-- Lucide -->
<script src="https://unpkg.com/lucide@latest"></script>
<!-- Lucide (UMD, reliable global window.lucide) -->
<script src="https://cdn.jsdelivr.net/npm/lucide@0.559.0/dist/umd/lucide.min.js"></script>
<!-- gif.js + worker -->
<script src="https://cdn.jsdelivr.net/npm/gif.js.optimized/dist/gif.js"></script>
<!-- Alpine -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<link rel="stylesheet" href="./assets/css/styles.css" />
</head>
<body class="h-full bg-ui-bg text-ui-text">
<div x-data="vibeGifApp()" x-init="init()" class="min-h-full">
<!-- Top bar -->
<header class="sticky top-0 z-20 border-b border-ui-border bg-ui-panel/95 backdrop-blur">
<div class="mx-auto max-w-6xl px-4 py-3 flex items-center justify-between">
<div class="flex items-center gap-3">
@@ -56,15 +55,10 @@
<p class="text-xs text-ui-sub">AI Generated Gifs (BYOK OpenRouter)</p>
</div>
</div>
<div class="text-xs text-ui-sub">
Stack: Tailwind · Alpine · Lucide
</div>
</div>
</header>
<main class="mx-auto max-w-6xl px-4 py-6 grid gap-6 lg:grid-cols-3">
<!-- Controls -->
<section class="lg:col-span-1 rounded-2xl border border-ui-border bg-ui-panel p-4 space-y-4">
<h2 class="font-semibold">Generate</h2>
@@ -102,7 +96,9 @@
<label class="text-sm text-ui-sub">Image size</label>
<select x-model="form.imageSize" class="w-full rounded-xl border border-ui-border bg-white px-3 py-2">
<option value="1K">1K</option>
<option value="0.5K" x-show="form.model === 'google/gemini-3.1-flash-image-preview'">0.5K</option>
<template x-if="form.model === 'google/gemini-3.1-flash-image-preview'">
<option value="0.5K">0.5K</option>
</template>
</select>
</div>
<div class="space-y-1">
@@ -136,7 +132,6 @@
</div>
</section>
<!-- Output -->
<section class="lg:col-span-2 rounded-2xl border border-ui-border bg-ui-panel p-4 space-y-4">
<h2 class="font-semibold">Output</h2>
@@ -164,7 +159,6 @@
</section>
</main>
<!-- Settings Modal -->
<div x-show="settingsOpen" x-cloak class="fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4">
<div @click.outside="settingsOpen=false" class="w-full max-w-md rounded-2xl border border-ui-border bg-white p-4 space-y-3">
<div class="flex items-center justify-between">