902 lines
28 KiB
HTML
Executable file
902 lines
28 KiB
HTML
Executable file
<!DOCTYPE html>
|
||
<html lang="sv">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
|
||
|
||
<!-- Facebook -->
|
||
|
||
<meta property="og:title" content="Databasen" />
|
||
<meta property="og:locale" content="sv" />
|
||
<meta property="og:description" content="Digitalt Självförsvar" />
|
||
<meta property="og:url" content="https://databasen.net/" />
|
||
<meta property="og:site_name" content="Databasen" />
|
||
<meta property="og:type" content="webpage" />
|
||
<meta property="og:image" content="https://databasen.net/opening.jpeg" />
|
||
|
||
<!-- Twitter Card -->
|
||
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="Databasen" />
|
||
<meta name="twitter:description" content="Digitalt Självförsvar" />
|
||
<meta name="twitter:image" content="https://databasen.net/opening.jpeg" />
|
||
|
||
<title>Databasen · Digitalt Självförsvar</title>
|
||
<style>
|
||
/* ─── Reset & Base ─── */
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root {
|
||
--bg-primary: #0b0419;
|
||
--bg-secondary: #130825;
|
||
--bg-terminal: rgba(18, 6, 38, 0.92);
|
||
--border-color: rgba(120, 60, 200, 0.35);
|
||
--text-primary: #e0d4f5;
|
||
--text-green: #72f0a8;
|
||
--text-cyan: #7ad0f0;
|
||
--text-purple: #b87df0;
|
||
--text-dim: #8a7a9e;
|
||
--glow-green: rgba(114, 240, 168, 0.15);
|
||
--glow-cyan: rgba(122, 208, 240, 0.12);
|
||
--glow-purple: rgba(184, 125, 240, 0.20);
|
||
--font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Courier New', monospace;
|
||
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||
}
|
||
|
||
html {
|
||
font-size: 16px;
|
||
-webkit-text-size-adjust: 100%;
|
||
}
|
||
|
||
body {
|
||
min-height: 100vh;
|
||
min-height: 100dvh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--bg-primary);
|
||
background-image:
|
||
radial-gradient(ellipse at 20% 50%, rgba(90, 30, 150, 0.25) 0%, transparent 70%),
|
||
radial-gradient(ellipse at 80% 20%, rgba(60, 20, 120, 0.20) 0%, transparent 60%),
|
||
radial-gradient(ellipse at 50% 100%, rgba(40, 10, 80, 0.30) 0%, transparent 50%);
|
||
background-attachment: fixed;
|
||
padding: 1.25rem;
|
||
font-family: var(--font-mono);
|
||
color: var(--text-primary);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* subtle animated grain overlay */
|
||
body::before {
|
||
content: '';
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 0;
|
||
opacity: 0.035;
|
||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||
background-size: 256px 256px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* scan-line effect */
|
||
body::after {
|
||
content: '';
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
background: repeating-linear-gradient(0deg,
|
||
transparent,
|
||
transparent 2px,
|
||
rgba(0, 0, 0, 0.03) 2px,
|
||
rgba(0, 0, 0, 0.03) 4px);
|
||
}
|
||
|
||
/* ─── Terminal Window ─── */
|
||
.terminal {
|
||
position: relative;
|
||
z-index: 1;
|
||
width: 100%;
|
||
max-width: 820px;
|
||
background: var(--bg-terminal);
|
||
border-radius: 1.25rem;
|
||
border: 1px solid var(--border-color);
|
||
box-shadow:
|
||
0 20px 60px rgba(0, 0, 0, 0.7),
|
||
0 0 0 1px rgba(120, 60, 200, 0.10) inset,
|
||
0 0 40px rgba(120, 60, 200, 0.06);
|
||
backdrop-filter: blur(6px);
|
||
-webkit-backdrop-filter: blur(6px);
|
||
overflow: hidden;
|
||
transition: box-shadow 0.3s ease;
|
||
}
|
||
|
||
.terminal:hover {
|
||
box-shadow:
|
||
0 24px 72px rgba(0, 0, 0, 0.8),
|
||
0 0 0 1px rgba(140, 80, 220, 0.20) inset,
|
||
0 0 60px rgba(120, 60, 200, 0.10);
|
||
}
|
||
|
||
/* ─── Title Bar ─── */
|
||
.terminal-titlebar {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0.7rem 1.25rem;
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border-bottom: 1px solid rgba(120, 60, 200, 0.15);
|
||
gap: 0.75rem;
|
||
user-select: none;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.titlebar-dots {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.titlebar-dots span {
|
||
display: block;
|
||
width: 0.75rem;
|
||
height: 0.75rem;
|
||
border-radius: 50%;
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
|
||
.titlebar-dots span:nth-child(1) {
|
||
background: #ff5f56;
|
||
}
|
||
.titlebar-dots span:nth-child(2) {
|
||
background: #ffbd2e;
|
||
}
|
||
.titlebar-dots span:nth-child(3) {
|
||
background: #27c93f;
|
||
}
|
||
|
||
.titlebar-dots span:hover {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.titlebar-path {
|
||
font-size: 0.7rem;
|
||
color: var(--text-dim);
|
||
letter-spacing: 0.02em;
|
||
flex: 1;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
.titlebar-path .highlight {
|
||
color: var(--text-cyan);
|
||
}
|
||
|
||
.titlebar-icon {
|
||
font-size: 0.7rem;
|
||
color: var(--text-dim);
|
||
flex-shrink: 0;
|
||
opacity: 0.6;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
/* ─── Terminal Body ─── */
|
||
.terminal-body {
|
||
padding: 2rem 1.75rem 2.25rem;
|
||
position: relative;
|
||
}
|
||
|
||
/* ─── Header / Logo ─── */
|
||
.terminal-header {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-bottom: 2rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.logo {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.6rem;
|
||
font-size: 1.8rem;
|
||
font-weight: 600;
|
||
letter-spacing: -0.02em;
|
||
color: var(--text-primary);
|
||
text-shadow: 0 0 30px var(--glow-purple);
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
.logo-icon {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 2.6rem;
|
||
height: 2.6rem;
|
||
border-radius: 0.5rem;
|
||
background: linear-gradient(135deg, rgba(120, 60, 200, 0.25), rgba(80, 30, 150, 0.15));
|
||
border: 1px solid rgba(120, 60, 200, 0.25);
|
||
font-size: 1.4rem;
|
||
flex-shrink: 0;
|
||
color: var(--text-purple);
|
||
}
|
||
|
||
.logo-text {
|
||
background: linear-gradient(135deg, #e0d4f5 0%, #b87df0 50%, #7ad0f0 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.logo-prompt {
|
||
color: var(--text-green);
|
||
font-size: 1rem;
|
||
font-weight: 400;
|
||
opacity: 0.7;
|
||
-webkit-text-fill-color: var(--text-green);
|
||
background: none;
|
||
margin-left: 0.2rem;
|
||
}
|
||
|
||
.subhead {
|
||
margin-top: 0.3rem;
|
||
font-size: 0.8rem;
|
||
color: var(--text-dim);
|
||
letter-spacing: 0.06em;
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
.subhead .accent {
|
||
color: var(--text-cyan);
|
||
}
|
||
|
||
.subhead .cursor-blink {
|
||
display: inline-block;
|
||
width: 0.45rem;
|
||
height: 0.9rem;
|
||
background: var(--text-green);
|
||
vertical-align: text-bottom;
|
||
margin-left: 0.15rem;
|
||
animation: blink 1s step-end infinite;
|
||
border-radius: 1px;
|
||
}
|
||
|
||
@keyframes blink {
|
||
0%,
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
/* ─── Flyer (responsive to image shape) ─── */
|
||
.flyer-wrapper {
|
||
position: relative;
|
||
margin: 0.5rem auto 2rem;
|
||
max-width: 580px;
|
||
border-radius: 0.75rem;
|
||
overflow: hidden;
|
||
box-shadow:
|
||
0 8px 32px rgba(0, 0, 0, 0.5),
|
||
0 0 0 1px rgba(120, 60, 200, 0.20),
|
||
0 0 40px rgba(120, 60, 200, 0.05);
|
||
transition: transform 0.25s ease, box-shadow 0.3s ease;
|
||
background: #0d0420;
|
||
}
|
||
|
||
.flyer-wrapper:hover {
|
||
transform: scale(1.005);
|
||
box-shadow:
|
||
0 12px 48px rgba(0, 0, 0, 0.6),
|
||
0 0 0 1px rgba(140, 80, 220, 0.30),
|
||
0 0 60px rgba(120, 60, 200, 0.08);
|
||
}
|
||
|
||
/* Image adapts to its own natural aspect ratio – no forced shape */
|
||
.flyer-wrapper img {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
background: linear-gradient(135deg, #1a0830, #2d0f4a);
|
||
transition: filter 0.3s ease;
|
||
}
|
||
|
||
/* fallback – shows if image fails or is missing */
|
||
.flyer-wrapper .flyer-fallback {
|
||
display: none;
|
||
width: 100%;
|
||
min-height: 200px;
|
||
background: linear-gradient(135deg, #1a0830, #2d0f4a, #1a0830);
|
||
background-size: 200% 200%;
|
||
animation: gradientShift 8s ease-in-out infinite alternate;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
color: var(--text-dim);
|
||
font-size: 0.85rem;
|
||
text-align: center;
|
||
padding: 1.5rem;
|
||
border: 1px dashed rgba(120, 60, 200, 0.20);
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
.flyer-wrapper img:not([src]),
|
||
.flyer-wrapper img[src=""] {
|
||
display: none;
|
||
}
|
||
|
||
.flyer-wrapper img:not([src])+.flyer-fallback,
|
||
.flyer-wrapper img[src=""]+.flyer-fallback {
|
||
display: flex;
|
||
}
|
||
|
||
@keyframes gradientShift {
|
||
0% {
|
||
background-position: 0% 50%;
|
||
}
|
||
100% {
|
||
background-position: 100% 50%;
|
||
}
|
||
}
|
||
|
||
.flyer-badge {
|
||
position: absolute;
|
||
top: 0.75rem;
|
||
right: 0.75rem;
|
||
background: rgba(11, 4, 25, 0.75);
|
||
backdrop-filter: blur(8px);
|
||
-webkit-backdrop-filter: blur(8px);
|
||
border: 1px solid rgba(120, 60, 200, 0.20);
|
||
border-radius: 0.4rem;
|
||
padding: 0.3rem 0.7rem;
|
||
font-size: 0.55rem;
|
||
letter-spacing: 0.08em;
|
||
color: var(--text-dim);
|
||
text-transform: uppercase;
|
||
font-family: var(--font-mono);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* ─── Event Text ─── */
|
||
.event-text {
|
||
max-width: 620px;
|
||
margin: 0 auto 1.75rem;
|
||
padding: 0 0.25rem;
|
||
}
|
||
|
||
.event-text .prompt-line {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 0.5rem;
|
||
font-size: 0.85rem;
|
||
color: var(--text-dim);
|
||
margin-bottom: 0.4rem;
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
.event-text .prompt-line .symbol {
|
||
color: var(--text-green);
|
||
flex-shrink: 0;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.event-text .prompt-line .path {
|
||
color: var(--text-cyan);
|
||
font-size: 0.7rem;
|
||
}
|
||
|
||
.event-text .content {
|
||
font-size: 0.95rem;
|
||
line-height: 1.8;
|
||
color: var(--text-primary);
|
||
font-family: var(--font-sans);
|
||
background: rgba(255, 255, 255, 0.02);
|
||
padding: 1.25rem 1.5rem;
|
||
border-radius: 0.6rem;
|
||
border-left: 2px solid rgba(120, 60, 200, 0.20);
|
||
border: 1px solid rgba(120, 60, 200, 0.08);
|
||
backdrop-filter: blur(2px);
|
||
-webkit-backdrop-filter: blur(2px);
|
||
}
|
||
|
||
.event-text .content strong {
|
||
color: var(--text-green);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.event-text .content .highlight-cyan {
|
||
color: var(--text-cyan);
|
||
}
|
||
|
||
.event-text .content .highlight-purple {
|
||
color: var(--text-purple);
|
||
}
|
||
|
||
/* ─── Footer / Command line ─── */
|
||
.terminal-footer {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 0.75rem 1.25rem;
|
||
padding-top: 1.25rem;
|
||
border-top: 1px solid rgba(120, 60, 200, 0.10);
|
||
margin-top: 0.25rem;
|
||
font-size: 0.7rem;
|
||
color: var(--text-dim);
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
.footer-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.footer-left .cmd {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.35rem;
|
||
background: rgba(255, 255, 255, 0.03);
|
||
padding: 0.2rem 0.7rem;
|
||
border-radius: 0.3rem;
|
||
border: 1px solid rgba(120, 60, 200, 0.08);
|
||
}
|
||
|
||
.footer-left .cmd .prompt {
|
||
color: var(--text-green);
|
||
}
|
||
|
||
.footer-left .cmd .text {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.footer-left .cmd .cursor {
|
||
display: inline-block;
|
||
width: 0.4rem;
|
||
height: 0.7rem;
|
||
background: var(--text-green);
|
||
animation: blink 1s step-end infinite;
|
||
border-radius: 1px;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.footer-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.footer-right .tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.3rem;
|
||
padding: 0.15rem 0.6rem;
|
||
border-radius: 0.3rem;
|
||
background: rgba(120, 60, 200, 0.10);
|
||
border: 1px solid rgba(120, 60, 200, 0.08);
|
||
color: var(--text-dim);
|
||
font-size: 0.6rem;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.footer-right .tag .dot {
|
||
display: inline-block;
|
||
width: 0.4rem;
|
||
height: 0.4rem;
|
||
border-radius: 50%;
|
||
background: var(--text-green);
|
||
animation: pulse-dot 1.8s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes pulse-dot {
|
||
0%,
|
||
100% {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
50% {
|
||
opacity: 0.3;
|
||
transform: scale(0.7);
|
||
}
|
||
}
|
||
|
||
.footer-right .tag .dot.cyan {
|
||
background: var(--text-cyan);
|
||
}
|
||
|
||
/* ─── Responsive ─── */
|
||
@media (max-width: 700px) {
|
||
body {
|
||
padding: 0.75rem;
|
||
}
|
||
|
||
.terminal-body {
|
||
padding: 1.25rem 1rem 1.5rem;
|
||
}
|
||
|
||
.terminal-titlebar {
|
||
padding: 0.5rem 0.9rem;
|
||
}
|
||
|
||
.titlebar-path {
|
||
font-size: 0.55rem;
|
||
}
|
||
.titlebar-icon {
|
||
font-size: 0.55rem;
|
||
}
|
||
.titlebar-dots span {
|
||
width: 0.6rem;
|
||
height: 0.6rem;
|
||
}
|
||
|
||
.logo {
|
||
font-size: 1.35rem;
|
||
gap: 0.4rem;
|
||
}
|
||
.logo-icon {
|
||
width: 2.1rem;
|
||
height: 2.1rem;
|
||
font-size: 1.1rem;
|
||
}
|
||
.logo-prompt {
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.subhead {
|
||
font-size: 0.65rem;
|
||
}
|
||
.subhead .cursor-blink {
|
||
width: 0.35rem;
|
||
height: 0.7rem;
|
||
}
|
||
|
||
.flyer-wrapper {
|
||
max-width: 100%;
|
||
border-radius: 0.5rem;
|
||
margin: 0.25rem auto 1.5rem;
|
||
}
|
||
|
||
/* fallback min-height smaller on mobile */
|
||
.flyer-wrapper .flyer-fallback {
|
||
min-height: 150px;
|
||
font-size: 0.7rem;
|
||
padding: 1rem;
|
||
}
|
||
|
||
.flyer-badge {
|
||
font-size: 0.45rem;
|
||
padding: 0.2rem 0.5rem;
|
||
top: 0.5rem;
|
||
right: 0.5rem;
|
||
}
|
||
|
||
.event-text .prompt-line {
|
||
font-size: 0.7rem;
|
||
gap: 0.3rem;
|
||
}
|
||
.event-text .prompt-line .path {
|
||
font-size: 0.6rem;
|
||
}
|
||
.event-text .content {
|
||
font-size: 0.85rem;
|
||
padding: 1rem 1rem;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.terminal-footer {
|
||
font-size: 0.6rem;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 0.5rem;
|
||
padding-top: 1rem;
|
||
}
|
||
|
||
.footer-left,
|
||
.footer-right {
|
||
justify-content: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.footer-left .cmd {
|
||
padding: 0.15rem 0.5rem;
|
||
font-size: 0.6rem;
|
||
}
|
||
.footer-right .tag {
|
||
font-size: 0.5rem;
|
||
padding: 0.1rem 0.4rem;
|
||
}
|
||
.footer-right .tag .dot {
|
||
width: 0.3rem;
|
||
height: 0.3rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 420px) {
|
||
.terminal-body {
|
||
padding: 0.9rem 0.65rem 1.25rem;
|
||
}
|
||
|
||
.logo {
|
||
font-size: 1.1rem;
|
||
}
|
||
.logo-icon {
|
||
width: 1.8rem;
|
||
height: 1.8rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
.logo-prompt {
|
||
font-size: 0.65rem;
|
||
}
|
||
|
||
.event-text .content {
|
||
font-size: 0.78rem;
|
||
padding: 0.8rem 0.8rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.terminal-titlebar {
|
||
padding: 0.35rem 0.65rem;
|
||
gap: 0.4rem;
|
||
}
|
||
.titlebar-dots span {
|
||
width: 0.5rem;
|
||
height: 0.5rem;
|
||
}
|
||
.titlebar-path {
|
||
font-size: 0.45rem;
|
||
}
|
||
|
||
.flyer-wrapper {
|
||
border-radius: 0.4rem;
|
||
}
|
||
|
||
.flyer-wrapper .flyer-fallback {
|
||
min-height: 120px;
|
||
font-size: 0.6rem;
|
||
padding: 0.75rem;
|
||
}
|
||
|
||
.flyer-badge {
|
||
font-size: 0.4rem;
|
||
padding: 0.15rem 0.4rem;
|
||
top: 0.35rem;
|
||
right: 0.35rem;
|
||
}
|
||
|
||
.footer-left .cmd {
|
||
font-size: 0.5rem;
|
||
padding: 0.1rem 0.4rem;
|
||
}
|
||
.footer-right .tag {
|
||
font-size: 0.45rem;
|
||
padding: 0.1rem 0.35rem;
|
||
}
|
||
.event-text .prompt-line {
|
||
font-size: 0.6rem;
|
||
}
|
||
.event-text .prompt-line .path {
|
||
font-size: 0.5rem;
|
||
}
|
||
}
|
||
|
||
/* ─── Utility ─── */
|
||
.text-center {
|
||
text-align: center;
|
||
}
|
||
|
||
.mt-1 {
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
.mb-1 {
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
/* ─── Scrollbar (optional polish) ─── */
|
||
::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
::-webkit-scrollbar-track {
|
||
background: var(--bg-primary);
|
||
}
|
||
::-webkit-scrollbar-thumb {
|
||
background: rgba(120, 60, 200, 0.30);
|
||
border-radius: 3px;
|
||
}
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(120, 60, 200, 0.50);
|
||
}
|
||
|
||
/* ─── Selection ─── */
|
||
::selection {
|
||
background: rgba(120, 60, 200, 0.35);
|
||
color: #fff;
|
||
}
|
||
|
||
/* ─── Image loading state ─── */
|
||
.flyer-wrapper img {
|
||
transition: opacity 0.4s ease;
|
||
}
|
||
.flyer-wrapper img:not([src]),
|
||
.flyer-wrapper img[src=""] {
|
||
opacity: 0;
|
||
}
|
||
.flyer-wrapper img:not([src])+.flyer-fallback,
|
||
.flyer-wrapper img[src=""]+.flyer-fallback {
|
||
display: flex;
|
||
opacity: 1;
|
||
}
|
||
.flyer-wrapper img[src]:not([src=""]) {
|
||
opacity: 1;
|
||
}
|
||
.flyer-wrapper img[src]:not([src=""]):not(.loaded) {
|
||
opacity: 0;
|
||
}
|
||
.flyer-wrapper img.loaded {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* show fallback while loading */
|
||
.flyer-wrapper .flyer-fallback {
|
||
display: flex;
|
||
}
|
||
.flyer-wrapper img.loaded+.flyer-fallback {
|
||
display: none;
|
||
}
|
||
.flyer-wrapper img:not([src])+.flyer-fallback,
|
||
.flyer-wrapper img[src=""]+.flyer-fallback {
|
||
display: flex;
|
||
}
|
||
.flyer-wrapper img[src]:not([src=""]):not(.loaded)+.flyer-fallback {
|
||
display: flex;
|
||
}
|
||
.flyer-wrapper img[src]:not([src=""]).loaded+.flyer-fallback {
|
||
display: none;
|
||
}
|
||
|
||
/* ensure fallback shows when image fails */
|
||
.flyer-wrapper img.error+.flyer-fallback {
|
||
display: flex !important;
|
||
}
|
||
.flyer-wrapper img.error {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="terminal" role="main" aria-label="Terminal fönster">
|
||
|
||
<!-- ─── Title Bar ─── -->
|
||
<div class="terminal-titlebar">
|
||
<div class="titlebar-dots">
|
||
<span aria-hidden="true"></span>
|
||
<span aria-hidden="true"></span>
|
||
<span aria-hidden="true"></span>
|
||
</div>
|
||
<div class="titlebar-path">
|
||
<span class="highlight">●</span> databasen ~ <span class="highlight">/evenemang/digitalt-sjalvforsvar</span>
|
||
</div>
|
||
<div class="titlebar-icon">⎔</div>
|
||
</div>
|
||
|
||
<!-- ─── Body ─── -->
|
||
<div class="terminal-body">
|
||
|
||
<!-- Header / Logo -->
|
||
<header class="terminal-header">
|
||
<div class="logo" aria-label="Databasen">
|
||
<span class="logo-icon" aria-hidden="true">⁂</span>
|
||
<span class="logo-text">Databasen</span>
|
||
<span class="logo-prompt">$</span>
|
||
</div>
|
||
<div class="subhead">
|
||
<span class="accent">└─</span> event :: <span class="accent">Digitalt Självförsvar</span>
|
||
<span class="cursor-blink" aria-hidden="true"></span>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Flyer – now works with ANY aspect ratio -->
|
||
<div class="flyer-wrapper">
|
||
<!--
|
||
═══════════════════════════════════════════════════════════
|
||
DUMMY BILD – ersätt src med din egen flyer-bild.
|
||
Fungerar med både liggande (horisontell) och stående (vertikal).
|
||
═══════════════════════════════════════════════════════════
|
||
-->
|
||
<img
|
||
src="https://www.databasen.net/opening.jpeg"
|
||
alt="Flyer för Digitalt Självförsvar – ersätt med din bild"
|
||
loading="lazy"
|
||
decoding="async"
|
||
onload="this.classList.add('loaded')"
|
||
onerror="this.classList.add('error')"
|
||
/>
|
||
<!-- fallback om bilden inte laddas -->
|
||
<div class="flyer-fallback" aria-hidden="true">
|
||
<span style="font-size:2rem;margin-bottom:0.5rem;opacity:0.4;">🖼</span>
|
||
<span style="font-weight:400;letter-spacing:0.04em;">[ flyer placeholder ]</span>
|
||
<span style="font-size:0.65rem;opacity:0.5;margin-top:0.25rem;">ersätt med din bild</span>
|
||
</div>
|
||
<div class="flyer-badge">📌 flyer</div>
|
||
</div>
|
||
|
||
<!-- Event Text (exakt som angivet) -->
|
||
<div class="event-text">
|
||
<div class="prompt-line">
|
||
<span class="symbol">❯</span>
|
||
<span class="path">~/evenemang/</span>
|
||
<span style="color:var(--text-dim);font-size:0.7rem;">— info —</span>
|
||
</div>
|
||
<div class="content">
|
||
<strong>Torsdag 25 juni</strong> bjuder <span class="highlight-purple">Databasen</span> in till en kväll om <span class="highlight-cyan">digitalt självförsvar</span>.
|
||
Det blir information, workshop och samtal om beteende och identitet online, datainsamling och mycket mer.
|
||
Kvällen är en första träff av flera, och tillsammans sätter vi riktningen framåt. <br />
|
||
<span style="display:inline-block;margin-top:0.5rem;padding:0.2rem 0.7rem;background:rgba(114,240,168,0.06);border:1px solid rgba(114,240,168,0.10);border-radius:0.3rem;font-size:0.8rem;color:var(--text-green);">
|
||
✦ Ingen anmälan behövs
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer / CLI -->
|
||
<footer class="terminal-footer">
|
||
<div class="footer-left">
|
||
<span class="cmd">
|
||
<span class="prompt">$</span>
|
||
<span class="text">cat flyer.md</span>
|
||
<span class="cursor" aria-hidden="true"></span>
|
||
</span>
|
||
<span style="opacity:0.4;font-size:0.55rem;">|</span>
|
||
<span style="font-size:0.6rem;opacity:0.5;">v1.0</span>
|
||
</div>
|
||
<div class="footer-right">
|
||
<span class="tag">
|
||
<span class="dot" aria-hidden="true"></span>
|
||
aktiv
|
||
</span>
|
||
<span class="tag">
|
||
<span class="dot cyan" aria-hidden="true"></span>
|
||
#digitaltsjalvforsvar
|
||
</span>
|
||
<span class="tag" style="border-color:rgba(184,125,240,0.15);">
|
||
<span style="color:var(--text-purple);">⬢</span>
|
||
databasen
|
||
</span>
|
||
</div>
|
||
</footer>
|
||
|
||
</div><!-- /terminal-body -->
|
||
</div><!-- /terminal -->
|
||
|
||
<!-- small script to handle image loading state -->
|
||
<script>
|
||
(function() {
|
||
const img = document.querySelector('.flyer-wrapper img');
|
||
if (img) {
|
||
if (img.complete && img.naturalWidth > 0) {
|
||
img.classList.add('loaded');
|
||
}
|
||
img.addEventListener('error', function() {
|
||
this.classList.add('error');
|
||
});
|
||
}
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|