diff --git a/frontend/index.html b/frontend/index.html index 508437d..b373868 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,6 +2,7 @@ + Private Image diff --git a/frontend/public/about/hotlink-flow.jpg b/frontend/public/about/hotlink-flow.jpg new file mode 100644 index 0000000..e879814 Binary files /dev/null and b/frontend/public/about/hotlink-flow.jpg differ diff --git a/frontend/public/about/zk-flow.jpg b/frontend/public/about/zk-flow.jpg new file mode 100644 index 0000000..5e06971 Binary files /dev/null and b/frontend/public/about/zk-flow.jpg differ diff --git a/frontend/public/favicon.png b/frontend/public/favicon.png new file mode 100644 index 0000000..c97aace Binary files /dev/null and b/frontend/public/favicon.png differ diff --git a/frontend/public/logo.png b/frontend/public/logo.png new file mode 100644 index 0000000..98707ab Binary files /dev/null and b/frontend/public/logo.png differ diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 5e1bb62..59abbba 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -1,3 +1,9 @@ diff --git a/frontend/src/assets/css/main.css b/frontend/src/assets/css/main.css index f0d965b..012242e 100644 --- a/frontend/src/assets/css/main.css +++ b/frontend/src/assets/css/main.css @@ -1,7 +1,5 @@ @import 'tailwindcss'; -@custom-variant dark (&:is(.dark *)); - @theme inline { --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); @@ -28,43 +26,23 @@ :root { --radius: 0.5rem; - --background: oklch(0.99 0.002 260); - --foreground: oklch(0.2 0.02 260); + --background: oklch(1 0 0); + --foreground: oklch(0.244 0.012 263); --card: oklch(1 0 0); - --card-foreground: oklch(0.2 0.02 260); - --primary: oklch(0.42 0.08 260); - --primary-foreground: oklch(0.99 0.002 260); - --secondary: oklch(0.96 0.01 260); - --secondary-foreground: oklch(0.28 0.03 260); - --muted: oklch(0.96 0.008 260); - --muted-foreground: oklch(0.48 0.02 260); - --accent: oklch(0.94 0.02 260); - --accent-foreground: oklch(0.28 0.03 260); + --card-foreground: oklch(0.244 0.012 263); + --primary: oklch(0.497 0.227 263); + --primary-foreground: oklch(1 0 0); + --secondary: oklch(0.94 0.025 263); + --secondary-foreground: oklch(0.28 0.04 263); + --muted: oklch(0.955 0.018 263); + --muted-foreground: oklch(0.46 0.04 263); + --accent: oklch(0.93 0.04 263); + --accent-foreground: oklch(0.28 0.04 263); --destructive: oklch(0.55 0.2 25); --success: oklch(0.45 0.14 155); - --border: oklch(0.9 0.01 260); - --input: oklch(0.9 0.01 260); - --ring: oklch(0.42 0.08 260); -} - -.dark { - --background: oklch(0.16 0.02 260); - --foreground: oklch(0.96 0.01 260); - --card: oklch(0.2 0.02 260); - --card-foreground: oklch(0.96 0.01 260); - --primary: oklch(0.72 0.1 260); - --primary-foreground: oklch(0.18 0.02 260); - --secondary: oklch(0.24 0.02 260); - --secondary-foreground: oklch(0.96 0.01 260); - --muted: oklch(0.24 0.02 260); - --muted-foreground: oklch(0.68 0.02 260); - --accent: oklch(0.28 0.03 260); - --accent-foreground: oklch(0.96 0.01 260); - --destructive: oklch(0.62 0.2 25); - --success: oklch(0.68 0.14 155); - --border: oklch(0.32 0.02 260); - --input: oklch(0.32 0.02 260); - --ring: oklch(0.72 0.1 260); + --border: oklch(0.88 0.025 263); + --input: oklch(0.88 0.025 263); + --ring: oklch(0.497 0.227 263); } @layer base { @@ -72,7 +50,80 @@ @apply border-border; } + html { + @apply w-full min-w-0 overflow-x-hidden; + } + body { - @apply bg-background text-foreground antialiased; + @apply min-w-0 overflow-x-hidden bg-background text-foreground antialiased; + } + + #app { + @apply w-full min-w-0 overflow-x-clip; } } + +body:has(.lightbox:target) { + overflow: hidden; +} + +.expandable-image__link { + color: inherit; + cursor: zoom-in; +} + +.lightbox { + display: none; + position: fixed; + inset: 0; + z-index: 100; + align-items: center; + justify-content: center; + padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) + max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left)); +} + +.lightbox:target { + display: flex; +} + +.lightbox__backdrop { + position: absolute; + inset: 0; + background: rgb(0 0 0 / 0.92); +} + +.lightbox__img { + position: relative; + z-index: 1; + max-width: min(100%, 75rem); + max-height: min(85dvh, 90vh); + width: auto; + height: auto; + object-fit: contain; + border: 1px solid var(--border); + border-radius: var(--radius-lg); +} + +.lightbox__close { + position: absolute; + top: max(0.5rem, env(safe-area-inset-top)); + right: max(0.5rem, env(safe-area-inset-right)); + z-index: 2; + display: flex; + align-items: center; + justify-content: center; + width: 2.5rem; + height: 2.5rem; + font-size: 1.75rem; + line-height: 1; + color: var(--foreground); + background: var(--card); + border: 1px solid var(--border); + border-radius: var(--radius-md); + text-decoration: none; +} + +.lightbox__close:hover { + border-color: var(--primary); +} diff --git a/frontend/src/components.d.ts b/frontend/src/components.d.ts index 1e40178..3893ad8 100644 --- a/frontend/src/components.d.ts +++ b/frontend/src/components.d.ts @@ -11,6 +11,11 @@ export {} /* prettier-ignore */ declare module 'vue' { export interface GlobalComponents { + AboutComparisonTable: typeof import('./components/about/AboutComparisonTable.vue')['default'] + AboutSectionNav: typeof import('./components/about/AboutSectionNav.vue')['default'] + AppFooter: typeof import('./components/layout/AppFooter.vue')['default'] + AppHeader: typeof import('./components/layout/AppHeader.vue')['default'] + ExpandableImage: typeof import('./components/ExpandableImage.vue')['default'] InlineTabList: typeof import('./components/InlineTabList.vue')['default'] MetadataInspector: typeof import('./components/upload/MetadataInspector.vue')['default'] MetadataOutputPanel: typeof import('./components/upload/MetadataOutputPanel.vue')['default'] @@ -18,7 +23,8 @@ declare module 'vue' { RouterView: typeof import('vue-router')['RouterView'] ShareLinkField: typeof import('./components/upload/ShareLinkField.vue')['default'] UploadConfigureModal: typeof import('./components/upload/UploadConfigureModal.vue')['default'] - UploadDropzone: typeof import('./components/upload/UploadDropzone.vue')['default'] + UploadIntakeControls: typeof import('./components/upload/UploadIntakeControls.vue')['default'] + UploadPanelHeader: typeof import('./components/upload/UploadPanelHeader.vue')['default'] UploadQueueList: typeof import('./components/upload/UploadQueueList.vue')['default'] UploadSettingsPanel: typeof import('./components/upload/UploadSettingsPanel.vue')['default'] UploadShareResults: typeof import('./components/upload/UploadShareResults.vue')['default'] diff --git a/frontend/src/components/ExpandableImage.vue b/frontend/src/components/ExpandableImage.vue new file mode 100644 index 0000000..ca59c31 --- /dev/null +++ b/frontend/src/components/ExpandableImage.vue @@ -0,0 +1,72 @@ + + + diff --git a/frontend/src/components/InlineTabList.vue b/frontend/src/components/InlineTabList.vue index 25944fd..2317c8f 100644 --- a/frontend/src/components/InlineTabList.vue +++ b/frontend/src/components/InlineTabList.vue @@ -1,10 +1,10 @@ + + diff --git a/frontend/src/components/about/AboutSectionNav.vue b/frontend/src/components/about/AboutSectionNav.vue new file mode 100644 index 0000000..6429966 --- /dev/null +++ b/frontend/src/components/about/AboutSectionNav.vue @@ -0,0 +1,29 @@ + + + diff --git a/frontend/src/components/layout/AppFooter.vue b/frontend/src/components/layout/AppFooter.vue new file mode 100644 index 0000000..3ab0fe9 --- /dev/null +++ b/frontend/src/components/layout/AppFooter.vue @@ -0,0 +1,37 @@ + + + diff --git a/frontend/src/components/layout/AppHeader.vue b/frontend/src/components/layout/AppHeader.vue new file mode 100644 index 0000000..53d9e94 --- /dev/null +++ b/frontend/src/components/layout/AppHeader.vue @@ -0,0 +1,47 @@ + + + diff --git a/frontend/src/components/upload/MetadataInspector.vue b/frontend/src/components/upload/MetadataInspector.vue index 8e6a862..7cf160e 100644 --- a/frontend/src/components/upload/MetadataInspector.vue +++ b/frontend/src/components/upload/MetadataInspector.vue @@ -1,25 +1,24 @@