From 164eb35338d8385144bc2a7f3c91064ec1834a01 Mon Sep 17 00:00:00 2001
From: multipleof4 <planetrenox@protonmail.com>
Date: Fri, 20 Mar 2026 21:07:14 -0700
Subject: [PATCH] Fix: Script load order, Alpine init, icons

---
 index.html | 32 +++++++++++++++++---------------
 1 file changed, 17 insertions(+), 15 deletions(-)
diff --git a/index.html b/index.html
index 4c281de..8b3aa1b 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,6 @@
       name="description"
       content="AI generated GIFs with BYOK OpenRouter. Minimal kawaii line doodles."
     />
-
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
       tailwind.config = {
@@ -21,16 +20,14 @@
         },
       };
     </script>
-
     <link rel="stylesheet" href="./assets/css/styles.css" />
-
-    <script defer src="https://unpkg.com/lucide@latest"></script>
-    <script defer src="https://cdn.jsdelivr.net/npm/gif.js@0.2.0/dist/gif.js"></script>
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></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/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>
 
-  <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">
       <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">
@@ -41,9 +38,7 @@
           >
             <i data-lucide="panel-left" class="h-5 w-5"></i>
           </button>
-
           <div class="text-lg font-semibold tracking-tight">vibegif.lol</div>
-
           <div class="text-xs text-gray-500">
             <span x-show="hasApiKey" x-cloak>BYOK connected</span>
             <span x-show="!hasApiKey" x-cloak>No API key</span>
@@ -67,7 +62,7 @@
           <div class="grid gap-4 sm:grid-cols-2">
             <label class="field">
               <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">
                   <option :value="m.id" x-text="m.label"></option>
                 </template>
@@ -117,7 +112,7 @@
 
           <label class="field mt-4">
             <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>
 
           <div class="mt-5 flex items-center gap-3">
@@ -127,9 +122,14 @@
               @click="generateGif()"
             >
               <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>
-
             <span class="text-sm text-gray-600" x-text="progressText"></span>
           </div>
 
@@ -140,7 +140,7 @@
         <section class="card p-5">
           <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.
           </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"
               @click="downloadGif()"
             >
+              <i data-lucide="download" class="mr-2 h-4 w-4"></i>
               Download GIF
             </button>
           </div>
@@ -176,10 +177,11 @@
     <div
       x-show="showSettings"
       x-cloak
+      x-transition.opacity
       class="fixed inset-0 z-50 flex items-center justify-center bg-black/30 p-4"
       @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">
           <i data-lucide="key-round" class="h-4 w-4 text-gray-500"></i>
           <h3 class="text-base font-semibold">Account Settings</h3>
