update
This commit is contained in:
team3
Binary file not shown.
@@ -1,14 +1,13 @@
|
||||
<script setup>
|
||||
// Eine Einladungskarte zum Verschicken: Datum, Uhrzeit, Ort, der gezogene
|
||||
// Film — als Bild fürs Handy. Zwei Designs: Horror und kein Horror. Das
|
||||
// Bild entsteht hier im Browser auf einem Canvas, der Host lädt es
|
||||
// herunter und schickt es selbst herum.
|
||||
// Eine Einladungskarte zum Verschicken: Titel, Datum, Uhrzeit, Genre, Ort,
|
||||
// Adresse der Seite — als Bild fürs Handy. Zwei Designs: Horror und kein
|
||||
// Horror. Jede Zeile ist ein Textfeld. Das Bild entsteht hier im Browser
|
||||
// auf einem Canvas, der Host lädt es herunter und schickt es selbst herum.
|
||||
import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
|
||||
import { posterUrl } from '../images'
|
||||
|
||||
const emit = defineEmits(['zu'])
|
||||
|
||||
const GEMERKT = 'filmabend_einladung'
|
||||
const GEMERKT = 'filmabend_karte'
|
||||
const B = 1080
|
||||
const H = 1350
|
||||
|
||||
@@ -23,9 +22,9 @@ const form = reactive({
|
||||
titel: 'Filmabend',
|
||||
datum: naechsterMittwoch(),
|
||||
uhrzeit: '20:00',
|
||||
ort: '',
|
||||
satz: 'Bring was zu knabbern mit.',
|
||||
filmZeigen: true,
|
||||
genre: 'Horror',
|
||||
ort: 'Bananarama - Wohnzimmer',
|
||||
url: 'horror.marha.de',
|
||||
})
|
||||
|
||||
try {
|
||||
@@ -34,35 +33,11 @@ try {
|
||||
// Kaputte Erinnerung — dann eben die Vorgaben
|
||||
}
|
||||
|
||||
// Der gezogene Film vom Rad, falls es einen gibt
|
||||
const film = ref(null)
|
||||
let poster = null
|
||||
const leinwand = ref(null)
|
||||
|
||||
async function filmLaden() {
|
||||
try {
|
||||
const resp = await fetch('/api/spin')
|
||||
const daten = resp.ok ? await resp.json() : null
|
||||
film.value = daten?.result?.gewinner || null
|
||||
} catch {
|
||||
film.value = null
|
||||
}
|
||||
}
|
||||
|
||||
async function posterLaden() {
|
||||
poster = null
|
||||
const pfad = film.value?.poster_path
|
||||
if (!pfad) return
|
||||
const bild = new Image()
|
||||
// Sonst darf das Canvas nicht als Bild gespeichert werden
|
||||
bild.crossOrigin = 'anonymous'
|
||||
bild.src = posterUrl(pfad, 'w500')
|
||||
try {
|
||||
await bild.decode()
|
||||
poster = bild
|
||||
} catch {
|
||||
poster = null
|
||||
}
|
||||
function stilWaehlen(stil) {
|
||||
form.stil = stil
|
||||
form.genre = stil === 'horror' ? 'Horror' : 'Kein Horror'
|
||||
}
|
||||
|
||||
// ── Malen ───────────────────────────────────────────────────────────
|
||||
@@ -100,117 +75,242 @@ function rundeck(ctx, x, y, b, h, r) {
|
||||
ctx.closePath()
|
||||
}
|
||||
|
||||
// Feste Zufallsfolge: Körnung und Spritzer bleiben bei jedem Tastendruck gleich
|
||||
function zufall(saat) {
|
||||
let z = saat
|
||||
return () => {
|
||||
z = (z * 1664525 + 1013904223) % 4294967296
|
||||
return z / 4294967296
|
||||
}
|
||||
}
|
||||
|
||||
const SCHRIFT = 'system-ui, -apple-system, "Segoe UI", sans-serif'
|
||||
|
||||
const FARBEN = {
|
||||
horror: { text: '#f1ecec', leise: '#9a8f92', akzent: '#e50914' },
|
||||
nett: { text: '#1b2a41', leise: '#7d6b50', akzent: '#e0532f' },
|
||||
}
|
||||
|
||||
// ── Horror: Dunkelheit, Körnung, Spinnennetz, Blut ──────────────────
|
||||
function spinnennetz(ctx, cx, cy, radius, von, bis) {
|
||||
ctx.save()
|
||||
ctx.strokeStyle = 'rgba(255, 255, 255, 0.26)'
|
||||
ctx.lineWidth = 2
|
||||
const speichen = 7
|
||||
const winkel = []
|
||||
for (let i = 0; i <= speichen; i++) winkel.push(von + ((bis - von) * i) / speichen)
|
||||
for (const w of winkel) {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(cx, cy)
|
||||
ctx.lineTo(cx + Math.cos(w) * radius, cy + Math.sin(w) * radius)
|
||||
ctx.stroke()
|
||||
}
|
||||
// Die Querfäden hängen leicht durch
|
||||
for (let r = radius / 6; r <= radius; r += radius / 6) {
|
||||
ctx.beginPath()
|
||||
winkel.forEach((w, i) => {
|
||||
const x = cx + Math.cos(w) * r
|
||||
const y = cy + Math.sin(w) * r
|
||||
if (i === 0) return ctx.moveTo(x, y)
|
||||
const m = (winkel[i - 1] + w) / 2
|
||||
ctx.quadraticCurveTo(cx + Math.cos(m) * r * 0.9, cy + Math.sin(m) * r * 0.9, x, y)
|
||||
})
|
||||
ctx.stroke()
|
||||
}
|
||||
ctx.restore()
|
||||
}
|
||||
|
||||
function blut(ctx) {
|
||||
ctx.fillStyle = '#b3060f'
|
||||
ctx.fillRect(0, 0, B, 30)
|
||||
const tropfen = [
|
||||
[50, 70, 16],
|
||||
[150, 140, 22],
|
||||
[230, 50, 14],
|
||||
[330, 180, 26],
|
||||
[430, 90, 18],
|
||||
[520, 220, 24],
|
||||
[640, 60, 16],
|
||||
[720, 150, 20],
|
||||
[820, 110, 22],
|
||||
[910, 200, 26],
|
||||
[1000, 80, 18],
|
||||
]
|
||||
for (const [x, laenge, breite] of tropfen) {
|
||||
rundeck(ctx, x - breite / 2, 10, breite, laenge, breite / 2)
|
||||
ctx.fill()
|
||||
ctx.beginPath()
|
||||
ctx.arc(x, 10 + laenge, breite * 0.7, 0, Math.PI * 2)
|
||||
ctx.fill()
|
||||
}
|
||||
const r = zufall(3)
|
||||
for (let i = 0; i < 40; i++) {
|
||||
ctx.beginPath()
|
||||
ctx.arc(r() * B, 30 + r() * 260, 2 + r() * 5, 0, Math.PI * 2)
|
||||
ctx.fill()
|
||||
}
|
||||
}
|
||||
|
||||
function horrorHintergrund(ctx) {
|
||||
ctx.fillStyle = '#07060a'
|
||||
ctx.fillRect(0, 0, B, H)
|
||||
const glut = ctx.createRadialGradient(B / 2, H * 0.55, 60, B / 2, H * 0.55, H * 0.75)
|
||||
glut.addColorStop(0, 'rgba(150, 10, 20, 0.35)')
|
||||
glut.addColorStop(1, 'rgba(0, 0, 0, 0)')
|
||||
ctx.fillStyle = glut
|
||||
ctx.fillRect(0, 0, B, H)
|
||||
const r = zufall(7)
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, 0.05)'
|
||||
for (let i = 0; i < 6000; i++) ctx.fillRect(r() * B, r() * H, 2, 2)
|
||||
const rand = ctx.createRadialGradient(B / 2, H / 2, H * 0.35, B / 2, H / 2, H * 0.85)
|
||||
rand.addColorStop(0, 'rgba(0, 0, 0, 0)')
|
||||
rand.addColorStop(1, 'rgba(0, 0, 0, 0.85)')
|
||||
ctx.fillStyle = rand
|
||||
ctx.fillRect(0, 0, B, H)
|
||||
spinnennetz(ctx, B, 0, 380, Math.PI / 2, Math.PI)
|
||||
spinnennetz(ctx, 0, H, 300, -Math.PI / 2, 0)
|
||||
blut(ctx)
|
||||
// Ein dünner Strich zwischen Wann und Was
|
||||
ctx.fillStyle = 'rgba(229, 9, 20, 0.5)'
|
||||
ctx.fillRect(300, 670, B - 600, 2)
|
||||
}
|
||||
|
||||
// ── Kein Horror: ein Kinoticket auf einer Markise ───────────────────
|
||||
const TICKET = { x: 70, y: 90, b: B - 140, h: H - 180, r: 36 }
|
||||
|
||||
function filmstreifen(ctx, y) {
|
||||
ctx.fillStyle = FARBEN.nett.text
|
||||
ctx.fillRect(TICKET.x, y, TICKET.b, 70)
|
||||
ctx.fillStyle = '#fff4dc'
|
||||
for (let x = TICKET.x + 30; x < TICKET.x + TICKET.b - 30; x += 70) {
|
||||
rundeck(ctx, x, y + 20, 36, 30, 6)
|
||||
ctx.fill()
|
||||
}
|
||||
}
|
||||
|
||||
function nettHintergrund(ctx) {
|
||||
// Markise: schräge Streifen
|
||||
ctx.fillStyle = '#f2bd3a'
|
||||
ctx.fillRect(0, 0, B, H)
|
||||
ctx.save()
|
||||
ctx.translate(B / 2, H / 2)
|
||||
ctx.rotate(-Math.PI / 4)
|
||||
ctx.fillStyle = '#e9b02c'
|
||||
for (let x = -H; x < H; x += 80) ctx.fillRect(x, -H, 40, 2 * H)
|
||||
ctx.restore()
|
||||
|
||||
// Das Ticket mit Schatten
|
||||
ctx.save()
|
||||
ctx.shadowColor = 'rgba(0, 0, 0, 0.3)'
|
||||
ctx.shadowBlur = 40
|
||||
ctx.shadowOffsetY = 16
|
||||
ctx.fillStyle = '#fff4dc'
|
||||
rundeck(ctx, TICKET.x, TICKET.y, TICKET.b, TICKET.h, TICKET.r)
|
||||
ctx.fill()
|
||||
ctx.restore()
|
||||
|
||||
ctx.save()
|
||||
rundeck(ctx, TICKET.x, TICKET.y, TICKET.b, TICKET.h, TICKET.r)
|
||||
ctx.clip()
|
||||
filmstreifen(ctx, TICKET.y)
|
||||
filmstreifen(ctx, TICKET.y + TICKET.h - 70)
|
||||
ctx.restore()
|
||||
|
||||
// Abrisskante mit Kerben
|
||||
const ky = 670
|
||||
ctx.fillStyle = '#f2bd3a'
|
||||
for (const x of [TICKET.x, TICKET.x + TICKET.b]) {
|
||||
ctx.beginPath()
|
||||
ctx.arc(x, ky, 36, 0, Math.PI * 2)
|
||||
ctx.fill()
|
||||
}
|
||||
ctx.save()
|
||||
ctx.strokeStyle = FARBEN.nett.text
|
||||
ctx.globalAlpha = 0.35
|
||||
ctx.lineWidth = 4
|
||||
ctx.setLineDash([18, 14])
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(TICKET.x + 60, ky)
|
||||
ctx.lineTo(TICKET.x + TICKET.b - 60, ky)
|
||||
ctx.stroke()
|
||||
ctx.restore()
|
||||
}
|
||||
|
||||
// ── Text ────────────────────────────────────────────────────────────
|
||||
function stempel(ctx, text, y, farbe) {
|
||||
ctx.save()
|
||||
ctx.translate(B / 2, y)
|
||||
ctx.rotate(-0.06)
|
||||
ctx.font = `bold 58px ${SCHRIFT}`
|
||||
ctx.letterSpacing = '6px'
|
||||
ctx.textBaseline = 'middle'
|
||||
const breite = Math.min(ctx.measureText(text).width + 70, B - 160)
|
||||
ctx.strokeStyle = farbe
|
||||
ctx.lineWidth = 6
|
||||
rundeck(ctx, -breite / 2, -52, breite, 96, 12)
|
||||
ctx.stroke()
|
||||
ctx.fillStyle = farbe
|
||||
ctx.fillText(text, 3, 2, breite - 40)
|
||||
ctx.restore()
|
||||
}
|
||||
|
||||
function malen() {
|
||||
const ctx = leinwand.value?.getContext('2d')
|
||||
if (!ctx) return
|
||||
const horror = form.stil === 'horror'
|
||||
const farbe = {
|
||||
hintergrund: horror ? '#0b0b0d' : '#ffe9cf',
|
||||
text: horror ? '#f1f1f3' : '#3b2a1a',
|
||||
leise: horror ? '#9a9aa3' : '#8a6d52',
|
||||
akzent: horror ? '#e50914' : '#e8891d',
|
||||
}
|
||||
const schrift = 'system-ui, -apple-system, "Segoe UI", sans-serif'
|
||||
|
||||
// Hintergrund mit sanftem Lichtfleck
|
||||
ctx.fillStyle = farbe.hintergrund
|
||||
ctx.fillRect(0, 0, B, H)
|
||||
const licht = ctx.createRadialGradient(B / 2, H * 0.45, 80, B / 2, H * 0.45, H * 0.8)
|
||||
licht.addColorStop(0, horror ? 'rgba(229, 9, 20, 0.14)' : 'rgba(255, 250, 240, 0.9)')
|
||||
licht.addColorStop(1, 'rgba(0, 0, 0, 0)')
|
||||
ctx.fillStyle = licht
|
||||
ctx.fillRect(0, 0, B, H)
|
||||
|
||||
if (horror) {
|
||||
// Blut läuft von oben herunter
|
||||
ctx.fillStyle = farbe.akzent
|
||||
ctx.fillRect(0, 0, B, 26)
|
||||
const tropfen = [60, 180, 250, 390, 520, 610, 760, 840, 960, 1030]
|
||||
tropfen.forEach((x, i) => {
|
||||
const laenge = [60, 100, 40, 120, 70, 130, 50, 110, 90, 60][i]
|
||||
rundeck(ctx, x - 9, 10, 18, laenge, 9)
|
||||
ctx.fill()
|
||||
})
|
||||
} else {
|
||||
// Ein Rahmen wie eine Kinokarte
|
||||
ctx.strokeStyle = farbe.akzent
|
||||
ctx.lineWidth = 6
|
||||
ctx.setLineDash([22, 14])
|
||||
rundeck(ctx, 40, 40, B - 80, H - 80, 28)
|
||||
ctx.stroke()
|
||||
ctx.setLineDash([])
|
||||
}
|
||||
const farbe = FARBEN[form.stil]
|
||||
if (horror) horrorHintergrund(ctx)
|
||||
else nettHintergrund(ctx)
|
||||
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'alphabetic'
|
||||
|
||||
// Überschrift
|
||||
ctx.fillStyle = horror ? farbe.akzent : farbe.text
|
||||
ctx.font = `bold 104px ${schrift}`
|
||||
ctx.letterSpacing = horror ? '8px' : '2px'
|
||||
const titel = horror ? form.titel.toUpperCase() : form.titel
|
||||
ctx.fillText(titel, B / 2, 265, B - 120)
|
||||
ctx.letterSpacing = '0px'
|
||||
|
||||
// Wann und wo
|
||||
ctx.fillStyle = farbe.text
|
||||
ctx.font = `600 46px ${schrift}`
|
||||
ctx.fillText(datumText(), B / 2, 345, B - 120)
|
||||
ctx.fillStyle = farbe.leise
|
||||
ctx.font = `40px ${schrift}`
|
||||
const wo = [form.uhrzeit && `${form.uhrzeit} Uhr`, form.ort].filter(Boolean).join(' · ')
|
||||
ctx.fillText(wo, B / 2, 400, B - 120)
|
||||
|
||||
// Der Film: Poster oder Überraschung
|
||||
const pb = 420
|
||||
const ph = 630
|
||||
const px = (B - pb) / 2
|
||||
const py = 460
|
||||
if (form.filmZeigen && film.value) {
|
||||
if (poster) {
|
||||
ctx.save()
|
||||
rundeck(ctx, px, py, pb, ph, horror ? 6 : 24)
|
||||
ctx.clip()
|
||||
ctx.drawImage(poster, px, py, pb, ph)
|
||||
if (horror) {
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.25)'
|
||||
ctx.fillRect(px, py, pb, ph)
|
||||
ctx.shadowColor = 'rgba(229, 9, 20, 0.7)'
|
||||
ctx.shadowBlur = 40
|
||||
}
|
||||
ctx.fillStyle = horror ? farbe.akzent : farbe.text
|
||||
ctx.font = `bold 104px ${SCHRIFT}`
|
||||
ctx.letterSpacing = horror ? '10px' : '2px'
|
||||
const titel = horror ? form.titel.toUpperCase() : form.titel
|
||||
ctx.fillText(titel, B / 2, 440, B - 160)
|
||||
ctx.restore()
|
||||
ctx.strokeStyle = farbe.akzent
|
||||
ctx.lineWidth = horror ? 4 : 8
|
||||
rundeck(ctx, px, py, pb, ph, horror ? 6 : 24)
|
||||
ctx.stroke()
|
||||
}
|
||||
|
||||
// Wann
|
||||
ctx.fillStyle = farbe.text
|
||||
ctx.font = `bold 54px ${schrift}`
|
||||
const name = film.value.year ? `${film.value.title} (${film.value.year})` : film.value.title
|
||||
let y = poster ? py + ph + 80 : 700
|
||||
for (const z of zeilen(ctx, name, B - 160)) {
|
||||
ctx.fillText(z, B / 2, y)
|
||||
y += 64
|
||||
}
|
||||
} else {
|
||||
ctx.font = `600 50px ${SCHRIFT}`
|
||||
ctx.fillText(datumText(), B / 2, 540, B - 160)
|
||||
ctx.fillStyle = farbe.leise
|
||||
ctx.font = `600 54px ${schrift}`
|
||||
ctx.fillText('Film wird ausgelost', B / 2, 760)
|
||||
ctx.font = `44px ${schrift}`
|
||||
ctx.fillText('Vorschläge aufs Rad!', B / 2, 830)
|
||||
ctx.font = `42px ${SCHRIFT}`
|
||||
if (form.uhrzeit) ctx.fillText(`${form.uhrzeit} Uhr`, B / 2, 600, B - 160)
|
||||
|
||||
// Genre als Stempel
|
||||
stempel(ctx, form.genre.toUpperCase(), 770, farbe.akzent)
|
||||
|
||||
// Kleine Titel über Discord und Webseite
|
||||
const titelZeile = (text, y) => {
|
||||
ctx.fillStyle = farbe.leise
|
||||
ctx.font = `600 30px ${SCHRIFT}`
|
||||
ctx.letterSpacing = '4px'
|
||||
ctx.fillText(text, B / 2, y)
|
||||
ctx.letterSpacing = '0px'
|
||||
}
|
||||
|
||||
// Der freie Satz
|
||||
titelZeile('DISCORD', 890)
|
||||
ctx.fillStyle = farbe.text
|
||||
ctx.font = `44px ${schrift}`
|
||||
let y = 1215
|
||||
for (const z of zeilen(ctx, form.satz, B - 160)) {
|
||||
ctx.font = `46px ${SCHRIFT}`
|
||||
let y = 950
|
||||
for (const z of zeilen(ctx, form.ort, B - 200)) {
|
||||
ctx.fillText(z, B / 2, y)
|
||||
y += 54
|
||||
y += 56
|
||||
}
|
||||
|
||||
// Wo man die Seite findet
|
||||
ctx.fillStyle = farbe.leise
|
||||
ctx.font = `34px ${schrift}`
|
||||
ctx.fillText(location.host, B / 2, H - 50)
|
||||
titelZeile('WEBSEITE', y + 50)
|
||||
ctx.fillStyle = farbe.text
|
||||
ctx.font = `48px ${SCHRIFT}`
|
||||
ctx.fillText(form.url, B / 2, y + 110, B - 200)
|
||||
}
|
||||
|
||||
function speichern() {
|
||||
@@ -233,12 +333,9 @@ function escape(e) {
|
||||
if (e.key === 'Escape') emit('zu')
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
onMounted(() => {
|
||||
window.addEventListener('keydown', escape)
|
||||
malen()
|
||||
await filmLaden()
|
||||
await posterLaden()
|
||||
malen()
|
||||
})
|
||||
|
||||
onUnmounted(() => window.removeEventListener('keydown', escape))
|
||||
@@ -254,11 +351,15 @@ onUnmounted(() => window.removeEventListener('keydown', escape))
|
||||
<button
|
||||
type="button"
|
||||
:class="{ an: form.stil === 'horror' }"
|
||||
@click="form.stil = 'horror'"
|
||||
@click="stilWaehlen('horror')"
|
||||
>
|
||||
Horror
|
||||
</button>
|
||||
<button type="button" :class="{ an: form.stil === 'nett' }" @click="form.stil = 'nett'">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ an: form.stil === 'nett' }"
|
||||
@click="stilWaehlen('nett')"
|
||||
>
|
||||
Kein Horror
|
||||
</button>
|
||||
</div>
|
||||
@@ -278,20 +379,17 @@ onUnmounted(() => window.removeEventListener('keydown', escape))
|
||||
</label>
|
||||
</div>
|
||||
<label>
|
||||
Ort
|
||||
<input v-model="form.ort" type="text" maxlength="60" placeholder="Bei Marek" />
|
||||
Genre
|
||||
<input v-model="form.genre" type="text" maxlength="24" />
|
||||
</label>
|
||||
<label>
|
||||
Ein Satz
|
||||
<input v-model="form.satz" type="text" maxlength="90" />
|
||||
Discord
|
||||
<input v-model="form.ort" type="text" maxlength="60" />
|
||||
</label>
|
||||
<label v-if="film" class="haken">
|
||||
<input v-model="form.filmZeigen" type="checkbox" />
|
||||
Film zeigen: {{ film.title }}
|
||||
<label>
|
||||
Webseite
|
||||
<input v-model="form.url" type="text" maxlength="60" />
|
||||
</label>
|
||||
<p v-else class="hinweis">
|
||||
Noch kein Film gezogen — die Karte sagt „Film wird ausgelost".
|
||||
</p>
|
||||
|
||||
<div class="fuss">
|
||||
<button type="button" class="speichern" @click="speichern">Als Bild speichern</button>
|
||||
@@ -388,19 +486,6 @@ input[type='time'] {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
.haken {
|
||||
flex-direction: row;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
color: var(--text);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.hinweis {
|
||||
color: var(--muted);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.fuss {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
|
||||
@@ -236,20 +236,21 @@ async function entfernen(user) {
|
||||
<p v-else class="leer">Noch niemand in der Runde.</p>
|
||||
</section>
|
||||
|
||||
<section v-if="host" class="einladung">
|
||||
<div v-if="host" class="rechts">
|
||||
<section class="einladung">
|
||||
<h3>Einladung</h3>
|
||||
<p class="erklaerung">
|
||||
Eine Karte zum Verschicken: Datum, Ort, der gezogene Film. Als Bild fürs Handy.
|
||||
Eine Karte zum Verschicken: Datum, Genre, Discord, Webseite. Als Bild fürs Handy.
|
||||
</p>
|
||||
<button type="button" class="klein" @click="einladung = true">Einladung erstellen</button>
|
||||
</section>
|
||||
<Einladung v-if="einladung" @zu="einladung = false" />
|
||||
|
||||
<section v-if="host" class="hostfilm">
|
||||
<section class="hostfilm">
|
||||
<h3>Host-Film</h3>
|
||||
<p class="erklaerung">
|
||||
Die Tastenkombination fragt ohne Freischaltung nach diesem Film. Wer ihn anklickt, ist Host
|
||||
— ohne Link.
|
||||
Die Tastenkombination fragt ohne Freischaltung nach diesem Film. Wer ihn anklickt, ist
|
||||
Host — ohne Link.
|
||||
</p>
|
||||
<div class="zeile">
|
||||
<button type="button" class="klein" @click="hostFilmDialog = true">Film setzen</button>
|
||||
@@ -266,7 +267,7 @@ async function entfernen(user) {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="host" class="aufnahmen">
|
||||
<section class="aufnahmen">
|
||||
<h3>Aufnahmen</h3>
|
||||
<p v-if="aufnahmenFehler" class="fehler">{{ aufnahmenFehler }}</p>
|
||||
<p v-if="aufnahmen === null" class="leer">Suche Aufnahmen …</p>
|
||||
@@ -300,6 +301,7 @@ async function entfernen(user) {
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<Teleport to="body">
|
||||
<div v-if="filmDialogFuer" class="hintergrund" @click.self="filmDialogFuer = null">
|
||||
@@ -361,7 +363,28 @@ async function entfernen(user) {
|
||||
|
||||
<style scoped>
|
||||
.verwaltung-tab {
|
||||
max-width: 34rem;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 2.5rem 3.5rem;
|
||||
align-items: start;
|
||||
max-width: 72rem;
|
||||
}
|
||||
|
||||
/* Mit Host-Rechten: Benutzer links, der Rest rechts */
|
||||
.verwaltung-tab:has(.rechts) {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.rechts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.verwaltung-tab:has(.rechts) {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
@@ -399,20 +422,21 @@ h3 {
|
||||
}
|
||||
|
||||
.liste {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
list-style: none;
|
||||
background: var(--bg-soft);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.liste li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 0.55rem 0.85rem;
|
||||
background: var(--bg-soft);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
gap: 0.4rem;
|
||||
padding: 0.4rem 0.7rem;
|
||||
}
|
||||
|
||||
.liste li + li {
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.zeile {
|
||||
@@ -491,7 +515,7 @@ h3 {
|
||||
}
|
||||
|
||||
.erklaerung {
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 0.8rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user