98c6fc9a35
- Squirrel engineer logo (SkwikLogo.vue) with hard hat and ruler - Matching favicon with squirrel head silhouette - Gitea fork ribbon (top-left, desktop only, Gitea green) - Centered header with logo, title, and subtitle - Footer: "Made by Samuel Prevost" with GitHub link - Clickable step indicators for previously visited steps - Smaller datum dots (6/4 base radius with visual cap) - Engineering-tool styling: monospace for measurements, Geist Mono font, deeper dark mode colors, instrument-panel header - EXIF viewer explains why focal length matters - Upload page describes what Skwik does Co-Authored-By: Claude <noreply@anthropic.com>
74 lines
2.7 KiB
Vue
74 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { useAppStore } from "@/stores/app"
|
|
import StepIndicator from "@/components/StepIndicator.vue"
|
|
import ImageUpload from "@/components/ImageUpload.vue"
|
|
import ExifViewer from "@/components/ExifViewer.vue"
|
|
import DatumEditor from "@/components/DatumEditor.vue"
|
|
import ResultViewer from "@/components/ResultViewer.vue"
|
|
import ThemeToggle from "@/components/ThemeToggle.vue"
|
|
import SkwikLogo from "@/components/SkwikLogo.vue"
|
|
|
|
const store = useAppStore()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen bg-background text-foreground">
|
|
<!-- Gitea fork ribbon — top-left, desktop only -->
|
|
<a
|
|
href="https://serv.e1n.sh/git/sam1902/skwik"
|
|
target="_blank"
|
|
rel="noopener"
|
|
class="github-fork-ribbon fixed left-0 top-0 z-[100] hidden md:block"
|
|
data-ribbon="Fork me on Gitea"
|
|
title="Fork me on Gitea"
|
|
>Fork me on Gitea</a
|
|
>
|
|
|
|
<header
|
|
class="sticky top-0 z-50 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
|
|
>
|
|
<div
|
|
class="mx-auto grid h-14 max-w-7xl grid-cols-3 items-center px-4"
|
|
>
|
|
<div><!-- spacer for ribbon --></div>
|
|
<div class="flex items-center justify-center gap-2">
|
|
<SkwikLogo :size="28" />
|
|
<h1
|
|
class="font-mono text-lg font-semibold tracking-tight"
|
|
>
|
|
Skwik
|
|
</h1>
|
|
<span
|
|
class="hidden text-[10px] font-medium uppercase tracking-widest text-muted-foreground sm:inline"
|
|
>Perspective Correction</span
|
|
>
|
|
</div>
|
|
<div class="flex items-center justify-end gap-4">
|
|
<StepIndicator />
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="mx-auto max-w-7xl px-4 py-6">
|
|
<ImageUpload v-if="store.currentStep === 1" />
|
|
<ExifViewer v-else-if="store.currentStep === 2" />
|
|
<DatumEditor v-else-if="store.currentStep === 3" />
|
|
<ResultViewer v-else-if="store.currentStep === 4" />
|
|
</main>
|
|
|
|
<footer
|
|
class="border-t border-border/50 py-4 text-center text-xs text-muted-foreground"
|
|
>
|
|
Made by
|
|
<a
|
|
href="https://github.com/usr-ein"
|
|
target="_blank"
|
|
rel="noopener"
|
|
class="underline underline-offset-2 transition-colors hover:text-foreground"
|
|
>Samuel Prevost</a
|
|
>
|
|
</footer>
|
|
</div>
|
|
</template>
|