9fdb0d3a2e
Private, noindex App-Tour mit Client-seitigem Passwort-Gate (Cookie). 16 echte Screenshots (Onboarding, Blocker, Block-Seite, Lyra, Atemübung, Mail-Schutz + -Connect, Community-Feed/Chat/Anruf, Streak, Geräte, Eigene Domains, Admin- Moderation) via PreviewPhone-Mockups. Admin-Shot als Handy-Rahmen (PreviewPhone). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
47 lines
1.6 KiB
Vue
47 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
/** Browser-/Admin-Fenster-Mockup mit Auto-Platzhalter, wenn die PNG fehlt. */
|
|
const props = defineProps<{
|
|
file: string
|
|
title: string
|
|
icon: string
|
|
url?: string
|
|
}>()
|
|
const failed = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="w-full rounded-xl overflow-hidden border border-white/10 bg-gray-900 shadow-2xl shadow-primary-950/40"
|
|
>
|
|
<div class="flex items-center gap-1.5 px-3 h-8 bg-gray-800/80 border-b border-white/5">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-red-400/70" />
|
|
<span class="w-2.5 h-2.5 rounded-full bg-yellow-400/70" />
|
|
<span class="w-2.5 h-2.5 rounded-full bg-green-400/70" />
|
|
<span class="ml-3 text-[11px] text-muted font-mono">{{ props.url || "admin.rebreak.org" }}</span>
|
|
</div>
|
|
<div class="aspect-[16/10] bg-black">
|
|
<img
|
|
v-if="!failed"
|
|
:src="`/preview/${props.file}`"
|
|
:alt="props.title"
|
|
class="w-full h-full object-cover"
|
|
loading="lazy"
|
|
@error="failed = true"
|
|
/>
|
|
<div
|
|
v-else
|
|
class="w-full h-full flex flex-col items-center justify-center gap-3 bg-linear-to-b from-gray-900 to-gray-950 px-6 text-center"
|
|
>
|
|
<div class="w-12 h-12 rounded-2xl bg-primary-500/15 flex items-center justify-center">
|
|
<UIcon :name="props.icon" class="text-primary-400 text-2xl" />
|
|
</div>
|
|
<p class="text-sm font-bold text-highlighted">{{ props.title }}</p>
|
|
<p class="text-[11px] text-muted leading-snug">
|
|
Screenshot folgt<br />
|
|
<span class="font-mono">preview/{{ props.file }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|