beantownbabeandClaude Sonnet 4.6
27a59671fc
Flask poll app for the Hi-Acts 3rd Network Meeting at DESY Hamburg, 10 June 2026. Includes 11-question poll, live D3 bubble chart display, 7-page PDF analysis report, admin dashboard, and CSV export. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
162 lines
7.3 KiB
HTML
162 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<!--
|
||
join.html — QR Code Join Slide
|
||
This page is shown on the beamer/projector at the start of the session.
|
||
It displays the QR code that attendees scan to reach the poll on their phones.
|
||
|
||
IMPORTANT BEFORE THE CONFERENCE:
|
||
- Replace the QR code image in /static/attend_qr.png with one pointing to the live server URL
|
||
- Update the URL shown in the pill at the bottom to match the live server URL
|
||
- The web dev team will provide the correct URL after deployment
|
||
-->
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Join the Poll – HiActs</title>
|
||
<style>
|
||
/* ── RESET ── */
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
/* ── BODY: full screen, dark blue gradient, side-by-side layout ── */
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
height: 100vh; display: flex; flex-direction: row; overflow: hidden;
|
||
background: linear-gradient(160deg, #0f2744 0%, #1a4a8a 60%, #1d6fa8 100%);
|
||
color: white;
|
||
}
|
||
|
||
/* ── LEFT SIDEBAR: event title + narrative context card ── */
|
||
.sidebar {
|
||
width: 380px; flex-shrink: 0;
|
||
display: flex; flex-direction: column;
|
||
border-right: 1px solid rgba(255,255,255,0.15);
|
||
}
|
||
|
||
/* "Innovation Challenge Arena" title at the top of the sidebar */
|
||
.sidebar-header {
|
||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||
text-align: center; padding: 44px 32px 32px; flex-shrink: 0; gap: 14px;
|
||
}
|
||
.event-title { font-size: 44px; font-weight: 900; line-height: 1.08; letter-spacing: -0.5px; }
|
||
.event-title span { color: #5db8f5; } /* "Challenge" in light blue */
|
||
.event-subtitle-gold { font-size: 12px; font-weight: 700; color: #f5c842; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; }
|
||
|
||
/* White card with narrative text explaining the session goal */
|
||
.narrative-card { background: white; flex: 1; padding: 28px 32px; }
|
||
.narrative-card p { font-size: 16px; color: #334155; line-height: 1.75; margin-bottom: 14px; }
|
||
.narrative-card p:last-child { margin-bottom: 0; }
|
||
.narrative-card strong { color: #1a365d; font-weight: 600; }
|
||
.callout {
|
||
background: #ebf4ff; border-left: 4px solid #5db8f5;
|
||
border-radius: 8px; padding: 14px 16px;
|
||
font-size: 15px; color: #1a365d; line-height: 1.7; margin-bottom: 0;
|
||
}
|
||
.callout .fair { color: #b8860b; font-weight: 700; }
|
||
|
||
/* ── RIGHT PANEL: top bar + QR code area ── */
|
||
.right-panel { flex: 1; display: flex; flex-direction: column; }
|
||
|
||
/* Top bar showing event name, tagline, and date/location */
|
||
.top-bar {
|
||
flex-shrink: 0;
|
||
border-bottom: 1px solid rgba(255,255,255,0.15);
|
||
padding: 18px 48px;
|
||
display: flex; align-items: center; justify-content: space-between; gap: 24px;
|
||
}
|
||
.tb-event { font-size: 18px; font-weight: 700; letter-spacing: 0.3px; }
|
||
.tb-tagline { font-size: 17px; opacity: 0.65; font-style: italic; }
|
||
.tb-tagline-gold { font-size: 17px; font-weight: 700; font-style: italic; color: #f5c842; }
|
||
.tb-meta { font-size: 16px; opacity: 0.55; letter-spacing: 0.4px; white-space: nowrap; }
|
||
.gold { color: #5db8f5; font-weight: 700; }
|
||
|
||
/* ── QR AREA: centred content with headline, QR image, and URL pill ── */
|
||
.qr-area {
|
||
flex: 1; display: flex; flex-direction: column;
|
||
align-items: center; justify-content: center;
|
||
padding: 40px 48px; text-align: center;
|
||
}
|
||
|
||
/* Main headline above the QR code */
|
||
.headline {
|
||
font-size: clamp(28px, 4vw, 52px); /* scales with screen size */
|
||
font-weight: 900; line-height: 1.12;
|
||
margin-bottom: 8px; letter-spacing: -0.5px;
|
||
}
|
||
.headline span { color: #5db8f5; }
|
||
|
||
/* Subtitle below the headline */
|
||
.subline { font-size: clamp(18px, 2.2vw, 28px); opacity: 0.6; margin-bottom: 44px; font-weight: 400; }
|
||
|
||
/* White box holding the QR code image — floats gently up and down */
|
||
.qr-wrap {
|
||
background: white; border-radius: 24px; padding: 24px;
|
||
box-shadow: 0 24px 60px rgba(0,0,0,0.4);
|
||
margin-bottom: 36px;
|
||
animation: float 4s ease-in-out infinite;
|
||
}
|
||
@keyframes float {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-8px); }
|
||
}
|
||
|
||
/* The QR code image itself — scales to screen width on smaller displays */
|
||
.qr-wrap img { width: min(260px, 38vw); height: min(260px, 38vw); display: block; }
|
||
|
||
/* Pill showing the URL attendees can also type manually */
|
||
.url-pill {
|
||
background: rgba(255,255,255,0.12);
|
||
border: 1px solid rgba(255,255,255,0.25);
|
||
border-radius: 40px; padding: 12px 32px;
|
||
font-size: clamp(14px, 1.8vw, 20px); font-weight: 600;
|
||
letter-spacing: 0.3px;
|
||
font-family: 'SF Mono', 'Fira Code', monospace; /* monospace for URL readability */
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- LEFT SIDEBAR -->
|
||
<div class="sidebar">
|
||
<div class="sidebar-header">
|
||
<div class="event-title">Innovation<br><span>Challenge</span><br>Arena</div>
|
||
<div class="event-subtitle-gold">Data and Software Standardization</div>
|
||
</div>
|
||
<!-- White narrative card explaining the session to anyone who reads the screen -->
|
||
<div class="narrative-card">
|
||
<p>We invite all Hi-Acts attendees to share their perspective on a few key areas of data standardisation at beamline facilities.</p>
|
||
<p>Your input takes just a few minutes and helps us understand the real challenges across the community, wherever you work.</p>
|
||
<p class="callout">The challenge is how to standardise <strong>software and data for high-throughput beamline experiments</strong>,
|
||
enabling smooth exchange between facilities, reproducible science, and <span class="fair">FAIR data by default.</span></p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- RIGHT PANEL -->
|
||
<div class="right-panel">
|
||
|
||
<!-- Top bar with event metadata -->
|
||
<div class="top-bar">
|
||
<span class="tb-event">Hi-Acts · 3rd Network Meeting</span>
|
||
<span class="tb-tagline-gold">Competing Ideas. Shared Solutions.</span>
|
||
<span class="tb-event">DESY Hamburg · 10 June 2026</span>
|
||
</div>
|
||
|
||
<!-- QR code area -->
|
||
<div class="qr-area">
|
||
<div class="headline">Share your <span>perspective</span></div>
|
||
<div class="subline">Scan to take part in the poll</div>
|
||
|
||
<!-- QR code image — replace attend_qr.png with the production QR before the conference -->
|
||
<div class="qr-wrap">
|
||
<img src="/static/attend_qr.png" alt="QR code to join poll">
|
||
</div>
|
||
|
||
<!-- URL displayed below the QR — update this to match the production URL -->
|
||
<div class="url-pill">192.168.178.25:5001</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|