pico

main.py

@@ -1,4 +1,5 @@
 from fasthtml.common import *
+from fasthtml.xtend import CheckboxX
 from translator import languages as VALID_LANGUAGES, process_sbv_file
 import tempfile
 from starlette.requests import Request
@@ -9,47 +10,39 @@ import mimetypes
 import zipfile
 import io
 
-app, rt = fast_app()
+css = Style(':root {--pico-font-size:90%,--pico-font-family: Pacifico, cursive;}')
+app = FastHTML(hdrs=(picolink, css))
 
-# Move TEMP_FILES to a separate module for better organization
 TEMP_FILES = {}
-
 # Extract form generation to a separate function
 def generate_language_form():
     return Form(
         Input(type='file', name='sbv_file', accept='.sbv'),
-        P('Select languages for translation'),
-        Button('Select All', type='button', id='select-all-btn', onclick='toggleAllLanguages()',
-               style="font-size: 12px; padding: 5px 10px; margin-bottom: 10px;"),
-        *[Div(
-            Input(type='checkbox', name='languages', value=lang, id=lang),
-            Label(lang, for_=lang)
-        ) for lang in VALID_LANGUAGES],
-        Div(
-            Button('Translate', style="margin-top: 20px;"),
-            style="text-align: center;"
+        H3('Select languages for translation'),
+        Fieldset(
+            Legend("Languages"),
+            Div(
+                *[CheckboxX(
+                    label=lang,
+                    value=lang,
+                    id=f'lang_{lang}',
+                    name='languages'
+                ) for lang in VALID_LANGUAGES],
+                class_='grid'
+            )
         ),
+        Button('Translate', class_="primary"),
         action="/upload", method='post', enctype='multipart/form-data'
     )
 
 @app.get('/')
 def home():
-    return Main(
-        P("Upload an SBV File:"),
-        generate_language_form(),
-        Script("""
-            function toggleAllLanguages() {
-                const checkboxes = document.querySelectorAll('input[name="languages"]');
-                const selectAllBtn = document.getElementById('select-all-btn');
-                const allChecked = Array.from(checkboxes).every(cb => cb.checked);
-                
-                checkboxes.forEach(cb => {
-                    cb.checked = !allChecked;
-                });
-                
-                selectAllBtn.textContent = allChecked ? 'Select All' : 'Deselect All';
-            }
-        """)
+    return Container(
+        Article(
+            H1("SBV File Translator"),
+            P("Upload an SBV File and select languages for translation:"),
+            generate_language_form(),
+        )
     )
 
 # Extract file processing logic to a separate function
@@ -150,43 +143,34 @@ async def upload_file(request: Request, sbv_file: UploadFile):
 
     result = translate_and_process_sbv(content, sbv_file.filename, languages)
 
-    return Main(
-        Style("""
-            .download-btn:hover {
-                background-color: #3a8bbb !important;
-                box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
-            }
-        """),
-        H1('Translations'),
-        Div(
+    return Container(
+        Article(
+            H1('Translations'),
             A("Download All Translations", 
               href=f"/download/{result['zip_filename']}", 
               download=True,
-              class_="download-btn",
-              style="display: inline-block; padding: 12px 24px; background-color: #4299e1; color: white; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 16px; transition: all 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.2);"
+              class_="primary",
+              role="button"
             ),
-            style="margin-bottom: 30px; text-align: center;"
-        ),
-        Div(
-            *[Div(
-                H2(f'{lang.capitalize()} Translation'),
+            *[Card(
+                H3(f'{lang.capitalize()} Translation'),
                 Pre(
                     '\n'.join(result['translations'][lang].split('\n')[:9]) + '\n...',
-                    style="background-color: #f5f5f5; padding: 10px; border-radius: 5px; max-height: 200px; overflow-y: auto;"
-                ),
-                A(f"Download {lang.capitalize()} Translation", 
-                  href=f"/download/{os.path.basename(result['file_paths'][lang])}", 
-                  download=True, 
-                  class_="download-btn",
-                  style="display: inline-block; margin-top: 10px; padding: 8px 16px; background-color: #4299e1; color: white; text-decoration: none; border-radius: 3px; transition: all 0.3s;"
                 ),
-                style="margin-bottom: 20px; border: 1px solid #ddd; padding: 20px; border-radius: 5px;"
+                Footer(
+                    A(f"Download {lang.capitalize()} Translation", 
+                      href=f"/download/{os.path.basename(result['file_paths'][lang])}", 
+                      download=True, 
+                      class_="secondary outline",
+                      role="button"
+                    )
+                )
             ) for lang in result['translations']],
-            style="max-height: 80vh; overflow-y: auto; display: flex; flex-direction: column; gap: 20px;"
+            class_="container-fluid"  # Add this class for full-width content
         )
     )
 
-@rt("/download/{filename}")
+@app.get("/download/{filename}")
 def get(filename: str):
     file_path = TEMP_FILES.get(filename)
     if file_path and os.path.exists(file_path):