This commit is contained in:
parent
8096781fe2
commit
975f2cd9bc
SSH key fingerprint:
SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
26 changed files with 1303 additions and 993 deletions
193
src/pages/hamburg/2026/index.astro
Normal file
193
src/pages/hamburg/2026/index.astro
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
---
|
||||
import Footer from "../../../components/Footer.astro"
|
||||
import Layout from "../../../layouts/Layout.astro"
|
||||
import {File} from "@lucide/astro"
|
||||
import path from "../../../utils/path.ts"
|
||||
import {Picture} from "astro:assets"
|
||||
|
||||
import traumweh_1 from "../../../assets/media/hamburg/2026/traumweh_1.png"
|
||||
|
||||
const impressions = [
|
||||
{
|
||||
image: traumweh_1,
|
||||
alt: "Ein Foto der Veranstaltung. Eine Speakerin steht auf einer Bühe. Auf einer Leinwand ist eine Präsentation zu sehen. Auf Bannern steht DIDAYS 2026 Hamburg.",
|
||||
attribution: "CC-4.0 BY-SA traumweh",
|
||||
},
|
||||
{
|
||||
image: traumweh_1,
|
||||
alt: "Ein Foto der Veranstaltung. Eine Speakerin steht auf einer Bühe. Auf einer Leinwand ist eine Präsentation zu sehen. Auf Bannern steht DIDAYS 2026 Hamburg.",
|
||||
attribution: "CC-4.0 BY-SA traumweh",
|
||||
},
|
||||
{
|
||||
image: traumweh_1,
|
||||
alt: "Ein Foto der Veranstaltung. Eine Speakerin steht auf einer Bühe. Auf einer Leinwand ist eine Präsentation zu sehen. Auf Bannern steht DIDAYS 2026 Hamburg.",
|
||||
attribution: "CC-4.0 BY-SA traumweh",
|
||||
},
|
||||
{
|
||||
image: traumweh_1,
|
||||
alt: "Ein Foto der Veranstaltung. Eine Speakerin steht auf einer Bühe. Auf einer Leinwand ist eine Präsentation zu sehen. Auf Bannern steht DIDAYS 2026 Hamburg.",
|
||||
attribution: "CC-4.0 BY-SA traumweh",
|
||||
},
|
||||
{
|
||||
image: traumweh_1,
|
||||
alt: "Ein Foto der Veranstaltung. Eine Speakerin steht auf einer Bühe. Auf einer Leinwand ist eine Präsentation zu sehen. Auf Bannern steht DIDAYS 2026 Hamburg.",
|
||||
attribution: "CC-4.0 BY-SA traumweh",
|
||||
},
|
||||
]
|
||||
|
||||
const slides = [
|
||||
{
|
||||
name: "Vortragstitel",
|
||||
path: "/hamburg/2026/slides/vortrag.pdf",
|
||||
},
|
||||
{
|
||||
name: "Vortragstitel",
|
||||
path: "/hamburg/2026/slides/vortrag.pdf",
|
||||
},
|
||||
{
|
||||
name: "Vortragstitel",
|
||||
path: "/hamburg/2026/slides/vortrag.pdf",
|
||||
},
|
||||
{
|
||||
name: "Vortragstitel",
|
||||
path: "/hamburg/2026/slides/vortrag.pdf",
|
||||
},
|
||||
]
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<div class="flex flex-col">
|
||||
<h1 class="text-6xl font-bold mt-8 mb-4 flex justify-center">
|
||||
<img src={path(import.meta.env.BASE_URL, "/hamburg/2026/logo.svg")} alt="Logo von den DiDays 2026 in Hamburg"
|
||||
class="h-full"/>
|
||||
</h1>
|
||||
<div class="mask-[url(/transitions/big.svg)] bg-base-200 h-30 mask-repeat-x mask-[auto_100%]"/>
|
||||
</div>
|
||||
|
||||
<div class="bg-base-200 pt-8 pb-16">
|
||||
<div class="container p-8 max-w-5xl mx-auto flex flex-col md:flex-row gap-10 items-center md:items-start">
|
||||
<p class="text-xl/8 text-center">
|
||||
[Platzhaltertext Rückblick Event]
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white relative">
|
||||
<div
|
||||
class="mask-[url(/transitions/small.svg)] bg-base-200 h-10 mask-repeat-x mask-[auto_100%] absolute top-0 w-full"/>
|
||||
<Picture
|
||||
formats={["avif", "webp", "jpg"]}
|
||||
widths={[540, 720, traumweh_1.width]}
|
||||
src={traumweh_1}
|
||||
class="w-full"
|
||||
alt="Ein Foto der Veranstaltung. Eine Speakerin steht auf einer Bühe. Auf einer Leinwand ist eine Präsentation zu sehen. Auf Bannern steht DIDAYS 2026 Hamburg."
|
||||
/>
|
||||
<span class="absolute px-3 text-xs py-1 bg-white/50 bottom-11 right-0 rounded-l text-black">
|
||||
CC-4.0 BY-SA traumweh
|
||||
</span>
|
||||
<div
|
||||
class="mask-[url(/transitions/small.svg)] bg-base-200 h-10 mask-repeat-x mask-[auto_100%] rotate-180 absolute bottom-0 w-full"/>
|
||||
</div>
|
||||
|
||||
<div class="bg-base-200 pb-20 w-screen overflow-x-hidden">
|
||||
<div class="container p-8 max-w-2xl mx-auto">
|
||||
<h2 class="text-4xl font-semibold mb-8">
|
||||
[Platzhaltertext Titel]
|
||||
</h2>
|
||||
<p>
|
||||
[Platzhaltertext Inhalt]
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-base-100 pb-20 w-screen overflow-x-hidden">
|
||||
<div class="mask-[url(/transitions/small.svg)] bg-base-200 h-10 mask-repeat-x mask-[auto_100%]"/>
|
||||
<div class="container p-8 max-w-2xl mx-auto">
|
||||
<h2 class="text-4xl font-semibold mb-8">
|
||||
[Platzhaltertext Titel]
|
||||
</h2>
|
||||
<p>
|
||||
[Platzhaltertext Inhalt]
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-base-200 pb-20 w-screen overflow-x-hidden">
|
||||
<div class="mask-[url(/transitions/small.svg)] bg-base-100 h-10 mask-repeat-x mask-[auto_100%]"/>
|
||||
<div class="container p-8 mx-auto">
|
||||
<h2 class="text-4xl font-semibold my-8 mx-auto text-center">
|
||||
Eindrücke vom Event
|
||||
</h2>
|
||||
<div class="flex gap-4 overflow-x-auto w-full justify-start py-4">
|
||||
{impressions.map((impression, index) =>
|
||||
<button command="show-modal" commandfor={`impression-${index}`}
|
||||
class="mx-auto shrink-0 w-lg overflow-hidden shadow-lg rounded-xl relative">
|
||||
<Picture
|
||||
formats={["avif", "webp", "jpg"]}
|
||||
widths={[540, 720, impression.image.width]}
|
||||
src={impression.image}
|
||||
alt={impression.alt}
|
||||
layout="full-width"
|
||||
/>
|
||||
{impression.attribution &&
|
||||
<span class="absolute px-3 text-xs py-1 bg-white/50 bottom-0 right-0 rounded-tl text-black">
|
||||
{impression.attribution}
|
||||
</span>}
|
||||
</button>
|
||||
|
||||
<dialog id={`impression-${index}`}
|
||||
class="mx-auto my-auto rounded-xl max-w-6xl bg-base-100 backdrop:bg-black/50"
|
||||
closedby="any">
|
||||
<Picture
|
||||
src={impression.image}
|
||||
alt={impression.alt}
|
||||
/>
|
||||
<div class="p-2 flex justify-between items-center">
|
||||
{
|
||||
impression.attribution &&
|
||||
<span class="px-3 text-xs py-1">
|
||||
{impression.attribution}
|
||||
</span>
|
||||
}
|
||||
<button commandfor={`impression-${index}`} command="close" class="btn btn-base-200 ml-auto">
|
||||
Schließen
|
||||
</button>
|
||||
</div>
|
||||
</dialog>
|
||||
,
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-base-100 pb-20 w-screen overflow-x-hidden">
|
||||
<div class="mask-[url(/transitions/small.svg)] bg-base-200 h-10 mask-repeat-x mask-[auto_100%]"/>
|
||||
<div class="container p-8 max-w-4xl mx-auto">
|
||||
<h2 class="text-4xl font-semibold mb-8">
|
||||
[Platzhaltertitel Vortragsfolien]
|
||||
</h2>
|
||||
<p>
|
||||
[Platzhaltertext Inhalt]
|
||||
</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 w-full py-6">
|
||||
{slides.map(slide =>
|
||||
<a href={path(import.meta.env.BASE_URL, slide.path)}
|
||||
class="card shrink-0 bg-base-100 card-md shadow-lg border-base-200 border-2">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">{slide.name}</h2>
|
||||
<div class="justify-end card-actions">
|
||||
<button class="btn btn-base-200">
|
||||
<File/>
|
||||
Folien Ansehen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</a>,
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<Footer/>
|
||||
</Layout>
|
||||
Loading…
Reference in a new issue