add event details
This commit is contained in:
sakrecoer
parent
c14646f505
commit
3b9a024674
1 changed files with 887 additions and 95 deletions
922
index.html
922
index.html
|
|
@ -1,8 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="sv">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||||
<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" />
|
||||
|
|
@ -12,99 +13,890 @@
|
|||
<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>
|
||||
|
||||
<title>Databasen · Digitalt Självförsvar</title>
|
||||
<style>
|
||||
* {
|
||||
/* ─── Reset & Base ─── */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 👇 MANUALLY ADJUST THIS COLOR to match your image */
|
||||
: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 {
|
||||
background-color: #6C12FD; /* ← change this to match your image's vibe */
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
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;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 👇 REPLACE 'your-image.jpg' with your actual image path */
|
||||
.centered-image {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 80vh;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* optional subtle caption */
|
||||
.info {
|
||||
/* subtle animated grain overlay */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
width: fit-content;
|
||||
margin: 0 auto;
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
backdrop-filter: blur(4px);
|
||||
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;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.image-container {
|
||||
padding: 12px;
|
||||
/* 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);
|
||||
}
|
||||
.info {
|
||||
font-size: 10px;
|
||||
bottom: 10px;
|
||||
|
||||
/* ─── 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="image-container">
|
||||
<div class="image-wrapper">
|
||||
<!-- 👇 CHANGE 'your-image.jpg' to your actual image file path -->
|
||||
<img class="centered-image" src="opening.jpeg" alt="Centered image">
|
||||
|
||||
<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>
|
||||
<div class="info"><pre>╶┬╮╭─╮╶┬╴╭─╮╭╮ ╭─╮╭─╮╭─╴╭╮╷
|
||||
││├─┤ │ ├─┤├┴╮├─┤╰─╮├╴ │╰┤
|
||||
╶┴╯╵ ╵ ╵ ╵ ╵╰─╯╵ ╵╰─╯╰─╴╵ ╵
|
||||
</pre></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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue