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

Fix: Script load order, Alpine init, icons

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

32
index.html
View File

@@ -8,7 +8,6 @@
name="description" name="description"
content="AI generated GIFs with BYOK OpenRouter. Minimal kawaii line doodles." content="AI generated GIFs with BYOK OpenRouter. Minimal kawaii line doodles."
/> />
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script> <script>
tailwind.config = { tailwind.config = {
@@ -21,16 +20,14 @@
}, },
}; };
</script> </script>
<link rel="stylesheet" href="./assets/css/styles.css" /> <link rel="stylesheet" href="./assets/css/styles.css" />
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<script defer src="https://unpkg.com/lucide@latest"></script> <script src="https://cdn.jsdelivr.net/npm/gif.js@0.2.0/dist/gif.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/gif.js@0.2.0/dist/gif.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="./assets/js/app.js"></script> <script src="./assets/js/app.js" defer></script>
</head> </head>
<body class="bg-gray-50 text-gray-900" x-data="vibeGifApp()" x-init="init()"> <body class="bg-gray-50 text-gray-900" x-data="vibeGifApp" x-init="init()">
<div class="min-h-screen"> <div class="min-h-screen">
<header class="border-b border-gray-200 bg-white/90 backdrop-blur"> <header class="border-b border-gray-200 bg-white/90 backdrop-blur">
<div class="mx-auto flex max-w-6xl items-center justify-between px-4 py-3"> <div class="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
@@ -41,9 +38,7 @@
> >
<i data-lucide="panel-left" class="h-5 w-5"></i> <i data-lucide="panel-left" class="h-5 w-5"></i>
</button> </button>
<div class="text-lg font-semibold tracking-tight">vibegif.lol</div> <div class="text-lg font-semibold tracking-tight">vibegif.lol</div>
<div class="text-xs text-gray-500"> <div class="text-xs text-gray-500">
<span x-show="hasApiKey" x-cloak>BYOK connected</span> <span x-show="hasApiKey" x-cloak>BYOK connected</span>
<span x-show="!hasApiKey" x-cloak>No API key</span> <span x-show="!hasApiKey" x-cloak>No API key</span>
@@ -67,7 +62,7 @@
<div class="grid gap-4 sm:grid-cols-2"> <div class="grid gap-4 sm:grid-cols-2">
<label class="field"> <label class="field">
<span class="label">Model</span> <span class="label">Model</span>
<select class="input" x-model="model"> <select class="input" x-model="model" @change="normalizeSelections()">
<template x-for="m in modelOptions" :key="m.id"> <template x-for="m in modelOptions" :key="m.id">
<option :value="m.id" x-text="m.label"></option> <option :value="m.id" x-text="m.label"></option>
</template> </template>
@@ -117,7 +112,7 @@
<label class="field mt-4"> <label class="field mt-4">
<span class="label">Master Prompt (locked style)</span> <span class="label">Master Prompt (locked style)</span>
<textarea class="input min-h-[74px]" readonly x-model="masterPrompt"></textarea> <textarea class="input min-h-[74px]" readonly x-text="masterPrompt"></textarea>
</label> </label>
<div class="mt-5 flex items-center gap-3"> <div class="mt-5 flex items-center gap-3">
@@ -127,9 +122,14 @@
@click="generateGif()" @click="generateGif()"
> >
<span x-show="!isGenerating">Generate GIF</span> <span x-show="!isGenerating">Generate GIF</span>
<span x-show="isGenerating" x-cloak>Generating…</span> <span x-show="isGenerating" x-cloak class="flex items-center gap-2">
<svg class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
</svg>
Generating…
</span>
</button> </button>
<span class="text-sm text-gray-600" x-text="progressText"></span> <span class="text-sm text-gray-600" x-text="progressText"></span>
</div> </div>
@@ -140,7 +140,7 @@
<section class="card p-5"> <section class="card p-5">
<h2 class="mb-3 text-lg font-semibold">Output</h2> <h2 class="mb-3 text-lg font-semibold">Output</h2>
<div x-show="frames.length === 0" class="rounded-lg border border-dashed border-gray-300 p-8 text-center text-sm text-gray-500"> <div x-show="frames.length === 0 && !isGenerating" class="rounded-lg border border-dashed border-gray-300 p-8 text-center text-sm text-gray-500">
Your generated frames will appear here. Your generated frames will appear here.
</div> </div>
@@ -165,6 +165,7 @@
class="mt-3 inline-flex items-center justify-center rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-800 hover:bg-gray-100" class="mt-3 inline-flex items-center justify-center rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-800 hover:bg-gray-100"
@click="downloadGif()" @click="downloadGif()"
> >
<i data-lucide="download" class="mr-2 h-4 w-4"></i>
Download GIF Download GIF
</button> </button>
</div> </div>
@@ -176,10 +177,11 @@
<div <div
x-show="showSettings" x-show="showSettings"
x-cloak x-cloak
x-transition.opacity
class="fixed inset-0 z-50 flex items-center justify-center bg-black/30 p-4" class="fixed inset-0 z-50 flex items-center justify-center bg-black/30 p-4"
@click.self="closeSettings()" @click.self="closeSettings()"
> >
<div class="w-full max-w-md rounded-2xl border border-gray-200 bg-white p-5 shadow-xl"> <div class="w-full max-w-md rounded-2xl border border-gray-200 bg-white p-5 shadow-xl" @click.stop>
<div class="mb-3 flex items-center gap-2"> <div class="mb-3 flex items-center gap-2">
<i data-lucide="key-round" class="h-4 w-4 text-gray-500"></i> <i data-lucide="key-round" class="h-4 w-4 text-gray-500"></i>
<h3 class="text-base font-semibold">Account Settings</h3> <h3 class="text-base font-semibold">Account Settings</h3>