feat: refine controls and installation dialog

index.html

@@ -39,15 +39,15 @@
             <textarea id="text" name="text" rows="2" maxlength="500" spellcheck="false" x-model="text"></textarea>
             <div class="controls">
                 <label><span x-text="t('styleLabel')">lettering</span>
-                    <select id="style" name="font" x-model="font">
+                    <span class="select-control"><select id="style" name="font" x-model="font">
                         <template x-for="name in styles" :key="name">
                             <option :value="name" :selected="name === font" x-text="name"></option>
                         </template>
-                    </select>
+                    </select></span>
                 </label>
                 <div class="font-navigation">
                     <button id="prev-font" type="button" @click="cycleFont(-1)" x-text="t('prev')">prev</button>
-                    <button id="next-font" type="button" @click="cycleFont(1)" x-text="t('nextFont').replace('{name}', nextFont)"></button>
+                    <button id="next-font" type="button" @click="cycleFont(1)" :title="t('nextFont').replace('{name}', nextFont)" x-text="t('nextFont').replace('{name}', nextFont)"></button>
                 </div>
             </div>
         </form>
@@ -65,25 +65,29 @@
         <footer>
             <div class="preferences">
                 <label><span x-text="t('theme')">appearance</span>
-                    <select id="theme" x-model="theme">
+                    <span class="select-control"><select id="theme" x-model="theme">
                         <option value="system" x-text="t('system')">system</option>
                         <option value="dark" x-text="t('dark')">dark</option>
                         <option value="light" x-text="t('light')">light</option>
-                    </select>
+                    </select></span>
                 </label>
                 <label><span x-text="t('language')">language</span>
-                    <select id="language" x-model="language"><option value="en">English</option><option value="tr">Türkçe</option></select>
+                    <span class="select-control"><select id="language" x-model="language"><option value="en">🇬🇧 English</option><option value="tr">🇹🇷 Türkçe</option></select></span>
                 </label>
             </div>
             <div class="install-controls">
                 <button id="install" type="button" x-show="installAvailable" @click="install()" x-text="t('install')">install app</button>
                 <button id="update" type="button" x-show="updateAvailable" @click="update()" x-text="t('update')">update app</button>
-                <details id="install-guide" x-show="!installed && !installAvailable">
-                    <summary x-text="t('install')">install app</summary>
-                    <p x-text="t('installGuide')">Use your browser’s install option. In Safari on iPhone or iPad, choose Share → Add to Home Screen.</p>
-                </details>
+                <button id="install-help" type="button" x-show="!installed && !installAvailable" @click="$refs.installGuide.showModal()" x-text="t('install')">install app</button>
             </div>
         </footer>
+        <dialog id="install-guide" x-ref="installGuide" aria-labelledby="install-guide-title" aria-describedby="install-guide-text" @click.self="$refs.installGuide.close()">
+            <div class="dialog-content">
+                <h2 id="install-guide-title" x-text="t('install')">install app</h2>
+                <p id="install-guide-text" x-text="t('installGuide')">Use your browser’s install option. In Safari on iPhone or iPad, choose Share → Add to Home Screen.</p>
+                <form method="dialog"><button autofocus x-text="t('close')">close</button></form>
+            </div>
+        </dialog>
     </main>
 </body>
 </html>