feat(frontend): add routing, layout, i18n wiring, and restyle the conversion tool

Migrates the existing upload/format-select/quality/convert logic from the old single-file App.jsx into a router shell (/ -> /fr//en/) with a shared Layout (header, language switcher, dark-mode toggle, footer). Tool logic itself is unchanged, only restyled into cards. Part of the Ombrora Convert redesign (Task 2/5).
2026-07-31 14:55:16 +02:00
parent ee18cc2d90
commit bc7a3b0691
14 changed files with 528 additions and 208 deletions
@@ -0,0 +1,94 @@
+.hero {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 3rem 1.5rem;
+  text-align: center;
+}
+
+.hero h1 {
+  font-size: 2.5rem;
+  margin: 0 0 1rem;
+}
+
+.hero p {
+  color: var(--color-foreground);
+  opacity: 0.8;
+  margin: 0 0 2rem;
+}
+
+.dropzone {
+  border: 2px dashed var(--color-border);
+  border-radius: 12px;
+  padding: 2.5rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: pointer;
+  min-height: 44px;
+}
+
+.dropzone-active {
+  border-color: var(--color-primary);
+  background: var(--color-muted);
+}
+
+.dropzone-input {
+  display: none;
+}
+
+.pending-files ul,
+.job-list {
+  list-style: none;
+  padding: 0;
+  margin: 1.5rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  text-align: left;
+}
+
+.file-config-card,
+.file-card {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+}
+
+.file-config-name {
+  font-weight: 500;
+  flex: 1 1 100%;
+}
+
+.file-config-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex: 1 1 100%;
+}
+
+.convert-button {
+  background: var(--color-accent);
+  color: var(--color-on-primary);
+  border: none;
+  border-radius: 8px;
+  padding: 0.75rem 1.5rem;
+  font-weight: 600;
+  min-height: 44px;
+}
+
+.error {
+  color: var(--color-destructive);
+}
+
+@media (min-width: 768px) {
+  .file-config-controls {
+    flex-direction: row;
+    align-items: center;
+    flex: 1 1 auto;
+  }
+}
@@ -0,0 +1,50 @@
+.site-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.brand {
+  font-weight: 700;
+  font-size: 1.25rem;
+  text-decoration: none;
+  color: var(--color-foreground);
+}
+
+.site-header-controls {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.language-switcher {
+  text-decoration: none;
+  font-weight: 500;
+  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 0.5rem;
+}
+
+.theme-toggle {
+  background: none;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  width: 44px;
+  height: 44px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-foreground);
+}
+
+.site-footer {
+  margin-top: auto;
+  padding: 1.5rem;
+  text-align: center;
+  color: var(--color-foreground);
+  border-top: 1px solid var(--color-border);
+  font-size: 0.875rem;
+}