+ Run your event + Event starten +
++ Create events, invite teams, and keep attendance and points in one place. + Erstelle Events, lade Teams ein und verwalte Teilnahme und Punkte zentral. +
+diff --git a/assets/favicon/apple-touch-icon.png b/assets/favicon/apple-touch-icon.png new file mode 100644 index 0000000..62b3735 Binary files /dev/null and b/assets/favicon/apple-touch-icon.png differ diff --git a/assets/favicon/favicon-16x16.png b/assets/favicon/favicon-16x16.png new file mode 100644 index 0000000..b78ebf1 Binary files /dev/null and b/assets/favicon/favicon-16x16.png differ diff --git a/assets/favicon/favicon-32x32.png b/assets/favicon/favicon-32x32.png new file mode 100644 index 0000000..6c6d658 Binary files /dev/null and b/assets/favicon/favicon-32x32.png differ diff --git a/assets/favicon/site.webmanifest b/assets/favicon/site.webmanifest new file mode 100644 index 0000000..45dc8a2 --- /dev/null +++ b/assets/favicon/site.webmanifest @@ -0,0 +1 @@ +{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} \ No newline at end of file diff --git a/assets/landing/organizer-dashboard.jpg b/assets/landing/organizer-dashboard.jpg new file mode 100644 index 0000000..aa7c4a5 Binary files /dev/null and b/assets/landing/organizer-dashboard.jpg differ diff --git a/assets/landing/qr-reward-scan.jpg b/assets/landing/qr-reward-scan.jpg new file mode 100644 index 0000000..4c523b1 Binary files /dev/null and b/assets/landing/qr-reward-scan.jpg differ diff --git a/assets/landing/quiz-night-hero.jpg b/assets/landing/quiz-night-hero.jpg new file mode 100644 index 0000000..a628958 Binary files /dev/null and b/assets/landing/quiz-night-hero.jpg differ diff --git a/assets/logos/emblem.png b/assets/logos/emblem.png new file mode 100644 index 0000000..b0ce128 Binary files /dev/null and b/assets/logos/emblem.png differ diff --git a/assets/logos/monogram.png b/assets/logos/monogram.png new file mode 100644 index 0000000..8d2e2b7 Binary files /dev/null and b/assets/logos/monogram.png differ diff --git a/assets/styles.css b/assets/styles.css new file mode 100644 index 0000000..e8d9373 --- /dev/null +++ b/assets/styles.css @@ -0,0 +1,1258 @@ +/* + * LeagueLedger Main Stylesheet + * Version: 1.0.0 + * Date: April 15, 2025 + */ + +:root { + /* LeagueLedger brand color palette */ + --irish-green: #006837; + --golden-ale: #FFB400; + --cream-white: #F5F0E1; + --black-stout: #1A1A1A; + --guinness-red: #B22222; + + /* UI colors */ + --success: #28a745; + --danger: #dc3545; + --warning: #ffc107; + --info: #17a2b8; +} + +/* Base styles */ +body { + font-family: 'Open Sans', 'Helvetica Neue', sans-serif; + line-height: 1.6; + color: var(--black-stout); + background-color: #f8f9fa; +} + +h1, h2, h3, h4, h5, h6 { + font-family: 'Garamond', 'Georgia', serif; + color: var(--irish-green); +} + +/* Custom button styles */ +.btn-irish { + background-color: var(--irish-green); + color: white; + border: none; + padding: 0.5rem 1rem; + border-radius: 0.25rem; + transition: opacity 0.2s ease; +} + +.btn-irish:hover { + opacity: 0.9; +} + +.btn-ale { + background-color: var(--golden-ale); + color: var(--black-stout); + border: none; + padding: 0.5rem 1rem; + border-radius: 0.25rem; + transition: opacity 0.2s ease; +} + +.btn-ale:hover { + opacity: 0.9; +} + +/* QR Code styles */ +.qr-container { + padding: 1rem; + background-color: white; + border-radius: 0.5rem; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); + display: inline-block; +} + +.qr-title { + margin-top: 0.5rem; + font-weight: bold; + color: var(--irish-green); + text-align: center; +} + +.qr-points { + font-size: 0.9rem; + color: var(--golden-ale); + font-weight: bold; + text-align: center; +} + +/* Leaderboard styles */ +.leaderboard-table { + width: 100%; + border-collapse: collapse; +} + +.leaderboard-table th { + background-color: var(--irish-green); + color: white; + padding: 0.75rem; + text-align: left; +} + +.leaderboard-table tr:nth-child(even) { + background-color: var(--cream-white); +} + +.leaderboard-table td { + padding: 0.75rem; + border-bottom: 1px solid #e2e8f0; +} + +/* Rank badges */ +.rank-badge { + display: inline-block; + width: 2rem; + height: 2rem; + line-height: 2rem; + text-align: center; + border-radius: 50%; + font-weight: bold; +} + +.rank-1 { + background-color: gold; + color: var(--black-stout); +} + +.rank-2 { + background-color: silver; + color: var(--black-stout); +} + +.rank-3 { + background-color: #cd7f32; /* bronze */ + color: white; +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .leaderboard-table thead { + display: none; + } + + .leaderboard-table tr { + display: block; + margin-bottom: 1rem; + border: 1px solid #e2e8f0; + border-radius: 0.25rem; + } + + .leaderboard-table td { + display: block; + text-align: right; + padding: 0.5rem; + } + + .leaderboard-table td::before { + content: attr(data-label); + float: left; + font-weight: bold; + color: var(--irish-green); + } +} + +/* Google Sign-In Button Styles */ +.gsi-material-button { + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + -webkit-appearance: none; + background-color: WHITE; + background-image: none; + border: 1px solid #747775; + -webkit-border-radius: 4px; + border-radius: 4px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: #1f1f1f; + cursor: pointer; + font-family: 'Roboto', arial, sans-serif; + font-size: 14px; + height: 40px; + letter-spacing: 0.25px; + outline: none; + overflow: hidden; + padding: 0 12px; + position: relative; + text-align: center; + -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s; + transition: background-color .218s, border-color .218s, box-shadow .218s; + vertical-align: middle; + white-space: nowrap; + width: auto; + max-width: 400px; + min-width: min-content; + } + +.gsi-material-button .gsi-material-button-icon { + height: 20px; + margin-right: 12px; + min-width: 20px; + width: 20px; +} + +.gsi-material-button .gsi-material-button-content-wrapper { + -webkit-align-items: center; + align-items: center; + display: flex; + -webkit-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + flex-wrap: nowrap; + height: 100%; + justify-content: space-between; + position: relative; + width: 100%; +} + +.gsi-material-button .gsi-material-button-contents { + -webkit-flex-grow: 1; + flex-grow: 1; + font-family: 'Roboto', arial, sans-serif; + font-weight: 500; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: top; +} + +.gsi-material-button .gsi-material-button-state { + -webkit-transition: opacity .218s; + transition: opacity .218s; + bottom: 0; + left: 0; + opacity: 0; + position: absolute; + right: 0; + top: 0; +} + +.gsi-material-button:disabled { + cursor: default; + background-color: #ffffff61; + border-color: #1f1f1f1f; +} + +.gsi-material-button:disabled .gsi-material-button-contents { + opacity: 38%; +} + +.gsi-material-button:disabled .gsi-material-button-icon { + opacity: 38%; +} + +.gsi-material-button:not(:disabled):active .gsi-material-button-state, +.gsi-material-button:not(:disabled):focus .gsi-material-button-state { + background-color: #303030; + opacity: 12%; +} + +.gsi-material-button:not(:disabled):hover { + -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15); + box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15); +} + +.gsi-material-button:not(:disabled):hover .gsi-material-button-state { + background-color: #303030; + opacity: 8%; +} + +/* OAuth Buttons Container */ +.oauth-buttons-container { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + max-width: 280px; + margin: 0 auto; +} + +/* LinkedIn Login Button */ +.linkedin-login-button { + background-color: #0077B5; + border: none; + border-radius: 4px; + color: white; + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-size: 14px; + font-weight: 600; + height: 40px; + letter-spacing: normal; + padding: 0; + position: relative; + text-align: center; + transition: background-color .218s; + width: 100%; + max-width: 280px; + margin: 0 auto 8px; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.linkedin-login-button:hover { + background-color: #006097; +} + +.linkedin-login-button .linkedin-icon { + display: inline-block; + margin-right: 8px; + height: 18px; + width: 18px; +} + +.linkedin-login-button .linkedin-icon svg { + height: 18px; + width: 18px; + fill: white; +} + +.linkedin-login-button .button-text { + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-size: 14px; + font-weight: 600; +} + +/* Facebook Login Button */ +.fb-login-button { + background-color: #1877F2; + border: none; + border-radius: 4px; + color: white; + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-size: 14px; + font-weight: 600; + height: 40px; + letter-spacing: normal; + padding: 0; + position: relative; + text-align: center; + transition: background-color .218s; + width: 100%; + max-width: 280px; + margin: 0 auto 8px; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.fb-login-button:hover { + background-color: #166FE5; +} + +.fb-login-button .fb-icon { + display: inline-block; + margin-right: 8px; + height: 18px; + width: 18px; + background-color: white; + border-radius: 2px; +} + +.fb-login-button .fb-icon svg { + height: 18px; + width: 18px; + fill: #1877F2; +} + +.fb-login-button .button-text { + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-size: 14px; + font-weight: 600; +} + +/* GitHub Login Button */ +.github-login-button { + background-color: #24292e; + border: 1px solid rgba(27, 31, 35, 0.15); + border-radius: 6px; + color: white; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; + font-size: 14px; + font-weight: 600; + height: 40px; + padding: 0; + position: relative; + text-align: center; + transition: background-color 0.2s; + width: 100%; + max-width: 280px; + margin: 0 auto 8px; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.github-login-button:hover { + background-color: #2c3136; +} + +.github-login-button .github-icon { + display: inline-block; + margin-right: 8px; + height: 20px; + width: 20px; +} + +.github-login-button .github-icon svg { + height: 20px; + width: 20px; + fill: white; +} + +.github-login-button .button-text { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; + font-size: 14px; + font-weight: 600; +} + +/* NetID Login Button */ +.netid-login-button { + background-color: #76b82a; + border: none; + border-radius: 3px; + color: white; + font-family: 'IBM Plex Sans', Verdana, Arial, sans-serif; + font-size: 14px; + font-weight: 600; + height: 40px; + padding: 0; + position: relative; + text-align: center; + transition: background-color 0.2s; + width: 100%; + max-width: 280px; + margin: 0 auto 8px; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.netid-login-button:hover { + background-color: #5d9422; +} + +.netid-login-button .netid-icon { + display: inline-block; + margin-right: 8px; + height: 20px; + width: 20px; +} + +.netid-login-button .netid-icon svg { + height: 20px; + width: 20px; + fill: white; +} + +.netid-login-button .button-text { + font-family: 'IBM Plex Sans', Verdana, Arial, sans-serif; + font-size: 14px; + font-weight: 600; +} + +/* Other OAuth provider button customizations */ +.oauth-button { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + padding: 8px 16px; + border-radius: 4px; + font-weight: 500; + transition: all 0.2s ease; + margin-bottom: 8px; + text-decoration: none; +} + +/* Landing page */ +.ll-landing { + --ll-green-950: #002d1a; + --ll-green-900: #003f24; + --ll-green-800: #00552f; + --ll-green: #006837; + --ll-gold: #ffb400; + --ll-cream: #f5f0e1; + --ll-black: #1a1a1a; + --ll-red: #b22222; + background: var(--ll-cream); + color: var(--ll-black); + overflow: hidden; +} + +.ll-landing *, +.ll-landing *::before, +.ll-landing *::after { + box-sizing: border-box; + min-width: 0; +} + +.ll-landing h1, +.ll-landing h2, +.ll-landing h3 { + font-family: 'Garamond', 'Georgia', serif; + letter-spacing: 0; +} + +.ll-shell { + width: min(1180px, calc(100% - 32px)); + margin: 0 auto; +} + +.ll-copy[data-lang] { + display: none; +} + +.ll-landing[data-ll-lang="en"] .ll-copy[data-lang="en"], +.ll-landing[data-ll-lang="de"] .ll-copy[data-lang="de"] { + display: inline; +} + +.ll-hero { + position: relative; + min-height: 760px; + background: var(--ll-green-950); + color: white; + isolation: isolate; +} + +.ll-hero__photo, +.ll-hero__shade { + position: absolute; + inset: 0; + z-index: -2; +} + +.ll-hero__photo img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; +} + +.ll-hero__shade { + z-index: -1; + background: + linear-gradient(90deg, rgba(0, 45, 26, 0.98) 0%, rgba(0, 45, 26, 0.88) 38%, rgba(0, 45, 26, 0.38) 78%, rgba(0, 45, 26, 0.24) 100%), + linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.04) 46%, rgba(0, 45, 26, 0.92) 100%); +} + +.ll-hero__inner { + display: grid; + grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr); + gap: 56px; + align-items: center; + min-height: 760px; + padding: 54px 0 76px; +} + +.ll-hero__copy { + max-width: 590px; +} + +.ll-hero__brand { + display: inline-flex; + align-items: center; + gap: 14px; + margin-bottom: 38px; + color: var(--ll-cream); + font-family: 'Garamond', 'Georgia', serif; + font-size: 1.8rem; + font-weight: 700; +} + +.ll-hero__brand img { + width: 56px; + height: 56px; + object-fit: contain; + background: var(--ll-cream); +} + +.ll-hero h1 { + max-width: 620px; + margin: 0; + color: var(--ll-cream); + font-size: clamp(3.25rem, 7vw, 6.2rem); + line-height: 0.92; + font-weight: 700; + overflow-wrap: break-word; +} + +.ll-hero h1::after { + content: ""; + display: block; + width: 68px; + height: 4px; + margin: 28px 0; + background: var(--ll-gold); +} + +.ll-lede { + max-width: 540px; + margin: 0; + color: rgba(245, 240, 225, 0.88); + font-size: 1.08rem; + line-height: 1.8; +} + +.ll-hero__actions { + display: flex; + flex-wrap: wrap; + gap: 14px; + align-items: center; + margin-top: 34px; +} + +.ll-button { + display: inline-flex; + max-width: 100%; + min-height: 48px; + align-items: center; + justify-content: center; + gap: 10px; + padding: 0 22px; + border-radius: 8px; + font-size: 0.95rem; + font-weight: 700; + line-height: 1; + text-decoration: none; + transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; +} + +.ll-button:hover { + transform: translateY(-1px); +} + +.ll-button--gold { + background: var(--ll-gold); + color: var(--ll-black); + box-shadow: 0 14px 34px rgba(255, 180, 0, 0.24); +} + +.ll-button--ghost, +.ll-button--outline { + border: 1px solid rgba(245, 240, 225, 0.44); + color: var(--ll-cream); + background: rgba(0, 0, 0, 0.12); +} + +.ll-button--ghost:hover, +.ll-button--outline:hover { + background: rgba(255, 255, 255, 0.09); +} + +.ll-language { + display: inline-flex; + gap: 2px; + margin-top: 42px; + padding: 4px; + border: 1px solid rgba(245, 240, 225, 0.24); + border-radius: 999px; + background: rgba(0, 45, 26, 0.6); +} + +.ll-language__button { + min-width: 46px; + height: 36px; + border: 0; + border-radius: 999px; + color: var(--ll-cream); + background: transparent; + cursor: pointer; + font-size: 0.84rem; + font-weight: 800; +} + +.ll-language__button.is-active { + color: var(--ll-black); + background: var(--ll-gold); +} + +.ll-product { + display: grid; + grid-template-columns: 78px minmax(0, 1fr); + min-height: 540px; + overflow: hidden; + border: 1px solid rgba(245, 240, 225, 0.26); + border-radius: 8px; + background: #fffaf0; + box-shadow: 0 28px 70px rgba(0, 0, 0, 0.4); +} + +.ll-product__rail { + display: flex; + flex-direction: column; + align-items: center; + gap: 22px; + padding: 24px 0; + background: linear-gradient(180deg, #003f24 0%, #002d1a 100%); + color: rgba(245, 240, 225, 0.72); +} + +.ll-product__mark { + width: 40px; + height: 40px; + display: grid; + place-items: center; + border: 1px solid rgba(255, 180, 0, 0.62); + color: var(--ll-cream); + font-family: 'Garamond', 'Georgia', serif; + font-size: 1.25rem; + font-weight: 700; +} + +.ll-product__screen { + padding: 28px; + color: var(--ll-black); +} + +.ll-product__top, +.ll-product__grid, +.ll-stats, +.ll-row, +.ll-rank { + display: flex; + align-items: center; +} + +.ll-product__top { + justify-content: space-between; + gap: 18px; +} + +.ll-ui-label, +.ll-stats span, +.ll-row, +.ll-rank { + color: #627067; + font-size: 0.78rem; + font-weight: 700; +} + +.ll-product h2 { + margin: 2px 0 0; + color: var(--ll-black); + font-family: 'Open Sans', 'Helvetica Neue', sans-serif; + font-size: 1.45rem; + line-height: 1.25; +} + +.ll-product__period { + padding: 8px 10px; + border: 1px solid #e5dcc9; + border-radius: 8px; + font-size: 0.78rem; + font-weight: 800; +} + +.ll-stats { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 10px; + margin: 26px 0; +} + +.ll-stats div, +.ll-mini-panel { + border: 1px solid #e6ddc8; + border-radius: 8px; + background: rgba(255, 255, 255, 0.72); +} + +.ll-stats div { + padding: 13px; +} + +.ll-stats strong { + display: block; + margin-top: 4px; + color: var(--ll-black); + font-size: 1.45rem; + line-height: 1; +} + +.ll-chart { + display: flex; + align-items: end; + gap: 11px; + height: 154px; + margin: 0 0 24px; + padding: 18px; + border-radius: 8px; + background: + linear-gradient(180deg, rgba(0, 104, 55, 0.09) 0%, rgba(0, 104, 55, 0) 100%), + repeating-linear-gradient(180deg, transparent 0 37px, rgba(0, 0, 0, 0.07) 38px); +} + +.ll-chart span { + flex: 1; + border-radius: 8px 8px 0 0; + background: linear-gradient(180deg, #009a55 0%, #006837 100%); +} + +.ll-product__grid { + display: grid; + grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); + gap: 14px; +} + +.ll-mini-panel { + padding: 16px; +} + +.ll-row, +.ll-rank { + justify-content: space-between; + gap: 12px; + padding: 9px 0; + border-top: 1px solid #eee6d4; +} + +.ll-row strong, +.ll-rank strong { + color: var(--ll-green); +} + +.ll-rank b { + display: grid; + place-items: center; + width: 25px; + height: 25px; + border-radius: 50%; + background: var(--ll-cream); + color: var(--ll-green); +} + +.ll-rank span { + flex: 1; + color: var(--ll-black); +} + +.ll-proof-strip { + background: var(--ll-black); + color: var(--ll-cream); +} + +.ll-proof-strip__inner { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); +} + +.ll-proof-strip__inner div { + display: flex; + min-height: 92px; + align-items: center; + justify-content: center; + gap: 12px; + border-left: 1px solid rgba(245, 240, 225, 0.12); + font-weight: 800; +} + +.ll-proof-strip__inner div:last-child { + border-right: 1px solid rgba(245, 240, 225, 0.12); +} + +.ll-proof-strip i { + color: var(--ll-gold); +} + +.ll-section { + padding: 92px 0; +} + +.ll-section--cream { + background: var(--ll-cream); +} + +.ll-section--white { + background: #fffaf0; +} + +.ll-section--green { + background: + radial-gradient(circle at 92% 8%, rgba(255, 180, 0, 0.16), transparent 24rem), + linear-gradient(180deg, #003f24 0%, #002d1a 100%); + color: var(--ll-cream); +} + +.ll-split { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr); + gap: 58px; + align-items: center; +} + +.ll-split--media-left { + grid-template-columns: minmax(360px, 0.86fr) minmax(0, 1fr); +} + +.ll-photo-card { + margin: 0; + overflow: hidden; + border-radius: 8px; + box-shadow: 0 24px 58px rgba(26, 26, 26, 0.18); +} + +.ll-photo-card img { + display: block; + width: 100%; + aspect-ratio: 4 / 3; + object-fit: cover; +} + +.ll-photo-card--stacked { + transform: rotate(1.25deg); + border: 1px solid rgba(255, 180, 0, 0.3); +} + +.ll-section-copy h2, +.ll-section-heading h2, +.ll-open-source h2, +.ll-final-cta h2 { + margin: 0; + color: var(--ll-green); + font-size: clamp(2.15rem, 4.4vw, 4rem); + line-height: 1; +} + +.ll-section--green .ll-section-copy h2, +.ll-open-source h2, +.ll-final-cta h2 { + color: var(--ll-cream); +} + +.ll-section-copy p, +.ll-section-heading p, +.ll-open-source p, +.ll-final-cta p { + margin: 22px 0 0; + color: #3d443f; + font-size: 1.06rem; + line-height: 1.75; +} + +.ll-section--green .ll-section-copy p, +.ll-open-source p, +.ll-final-cta p { + color: rgba(245, 240, 225, 0.82); +} + +.ll-feature-list { + display: grid; + gap: 14px; + margin-top: 28px; +} + +.ll-feature-list div { + display: flex; + align-items: center; + gap: 12px; + color: var(--ll-green); + font-weight: 800; +} + +.ll-feature-list i { + color: var(--ll-gold); +} + +.ll-section-heading { + max-width: 760px; + margin: 0 auto 46px; + text-align: center; +} + +.ll-steps { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 24px; +} + +.ll-steps article, +.ll-showcase__grid article { + position: relative; + min-height: 255px; + padding: 28px; + border: 1px solid #e1d5bd; + border-radius: 8px; + background: white; +} + +.ll-steps article > span { + position: absolute; + top: 22px; + right: 22px; + display: grid; + place-items: center; + width: 34px; + height: 34px; + border-radius: 50%; + background: var(--ll-green); + color: white; + font-weight: 800; +} + +.ll-steps i, +.ll-showcase__grid i { + color: var(--ll-gold); + font-size: 2rem; +} + +.ll-steps h3, +.ll-showcase__grid h3, +.ll-columns h3 { + margin: 24px 0 12px; + color: var(--ll-green); + font-size: 1.65rem; + line-height: 1.1; +} + +.ll-steps p, +.ll-showcase__grid p { + margin: 0; + color: #505852; + line-height: 1.65; +} + +.ll-columns { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 18px; + margin-top: 34px; +} + +.ll-columns div { + padding: 22px; + border: 1px solid rgba(245, 240, 225, 0.24); + border-radius: 8px; + background: rgba(0, 0, 0, 0.12); +} + +.ll-columns h3 { + margin-top: 0; + color: var(--ll-gold); +} + +.ll-columns ul { + margin: 0; + padding-left: 19px; + color: rgba(245, 240, 225, 0.82); + line-height: 1.85; +} + +.ll-showcase__grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 18px; +} + +.ll-showcase__grid article { + min-height: 285px; +} + +.ll-open-source { + padding: 72px 0; + background: var(--ll-black); + color: var(--ll-cream); +} + +.ll-open-source__inner { + display: grid; + grid-template-columns: minmax(0, 1fr) auto auto; + gap: 34px; + align-items: center; +} + +.ll-deploy { + display: flex; + flex-wrap: wrap; + gap: 14px; +} + +.ll-deploy span { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 11px 14px; + border: 1px solid rgba(245, 240, 225, 0.22); + border-radius: 8px; + font-weight: 800; +} + +.ll-deploy i { + color: var(--ll-gold); +} + +.ll-open-source__actions { + display: flex; + gap: 10px; +} + +.ll-final-cta { + position: relative; + padding: 86px 0 96px; + overflow: hidden; + background: linear-gradient(135deg, #006837 0%, #003f24 100%); + color: var(--ll-cream); + text-align: center; +} + +.ll-final-cta img { + position: absolute; + right: 6%; + bottom: -72px; + width: 260px; + opacity: 0.12; + transform: rotate(-12deg); +} + +.ll-final-cta .ll-shell { + position: relative; + z-index: 1; + display: grid; + justify-items: center; +} + +.ll-final-cta p { + max-width: 680px; +} + +@media (max-width: 1040px) { + .ll-hero__inner, + .ll-split, + .ll-split--media-left, + .ll-open-source__inner { + grid-template-columns: 1fr; + } + + .ll-hero__inner { + gap: 42px; + padding-top: 44px; + } + + .ll-product { + max-width: 760px; + } + + .ll-showcase__grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 760px) { + .ll-shell { + width: min(100% - 24px, 1180px); + } + + .ll-hero { + min-height: auto; + } + + .ll-hero__inner { + min-height: auto; + padding: 34px 0 52px; + } + + .ll-hero__brand { + margin-bottom: 28px; + font-size: 1.45rem; + } + + .ll-hero__brand img { + width: 44px; + height: 44px; + } + + .ll-hero h1 { + max-width: 350px; + font-size: clamp(2.55rem, 12vw, 3.35rem); + line-height: 0.98; + } + + .ll-lede { + font-size: 1rem; + } + + .ll-product { + grid-template-columns: 1fr; + min-height: auto; + } + + .ll-product__rail { + display: none; + } + + .ll-product__screen { + padding: 18px; + } + + .ll-product__top { + align-items: flex-start; + flex-direction: column; + } + + .ll-stats, + .ll-product__grid, + .ll-steps, + .ll-columns, + .ll-showcase__grid, + .ll-proof-strip__inner { + grid-template-columns: 1fr; + } + + .ll-chart { + height: 122px; + } + + .ll-proof-strip__inner div, + .ll-proof-strip__inner div:last-child { + min-height: 66px; + justify-content: flex-start; + border: 0; + border-bottom: 1px solid rgba(245, 240, 225, 0.12); + } + + .ll-section { + padding: 64px 0; + } + + .ll-section-copy h2, + .ll-section-heading h2, + .ll-open-source h2, + .ll-final-cta h2 { + font-size: clamp(2rem, 12vw, 3rem); + } + + .ll-photo-card--stacked { + transform: none; + } + + .ll-open-source__actions, + .ll-hero__actions { + display: grid; + grid-template-columns: 1fr; + width: 100%; + } + + .ll-button { + width: 100%; + flex: none; + } + + .ll-final-cta img { + right: -70px; + width: 210px; + } +} diff --git a/index.html b/index.html index ee43f68..be1a15f 100644 --- a/index.html +++ b/index.html @@ -1,77 +1,488 @@ - + -
- - -
+ LeagueLedger
+ + LeagueLedger gives pub quizzes, leagues, clubs, and community events one place for teams, QR rewards, live standings, and player history. + LeagueLedger bringt Pubquizzes, Ligen, Vereine und Community-Events an einen Ort: Teams, QR-Belohnungen, Live-Ranglisten und Spielhistorie. +
+ + + ++ Dashboard + Übersicht +
++ Recent rewards + Neue Belohnungen +
+Leaderboard
+
+ + Create QR codes for rounds, bonuses, events, and partner rewards. Players scan, points land in their profile, and the league table updates without spreadsheet cleanup. + Erstelle QR-Codes für Runden, Boni, Events und Partner-Rewards. Spieler scannen, Punkte landen im Profil und die Tabelle aktualisiert sich ohne Tabellenchaos. +
++ A lightweight flow for organizers, players, and every recurring league night. + Ein schlanker Ablauf für Veranstalter, Spieler und jede wiederkehrende Liga-Nacht. +
++ Create events, invite teams, and keep attendance and points in one place. + Erstelle Events, lade Teams ein und verwalte Teilnahme und Punkte zentral. +
++ Use QR codes for wins, challenges, check-ins, rewards, or mystery bonuses. + Nutze QR-Codes für Siege, Challenges, Check-ins, Rewards oder Mystery-Boni. +
++ Teams follow live standings and bring the rivalry back next week. + Teams verfolgen Live-Ranglisten und bringen die Rivalität nächste Woche zurück. +
++ LeagueLedger covers the operational pieces around recurring competition: team setup, joins, QR generation, admin views, OAuth login, profiles, and standings. + LeagueLedger deckt die Organisation wiederkehrender Wettbewerbe ab: Team-Setup, Beitritte, QR-Erstellung, Admin-Ansichten, OAuth-Login, Profile und Ranglisten. +
+
+ + A league memory layer for real-world communities: pub quizzes, sports clubs, student groups, bar leagues, and recurring venue events. + Eine Liga-Historie für echte Communities: Pubquizzes, Sportvereine, Hochschulgruppen, Bar-Ligen und wiederkehrende Venue-Events. +
+Keep teams invested across weeks, seasons, and special events.Halte Teams über Wochen, Saisons und Sonder-Events hinweg dabei.
+Turn participation, wins, and venue moments into trackable rewards.Mache Teilnahme, Siege und Venue-Momente zu messbaren Belohnungen.
+Serve mixed-language communities with a landing page that speaks both.Sprich gemischte Communities mit einer Landingpage in beiden Sprachen an.
+Run it with Docker, Railway, or a VPS. The code is transparent.Betreibe es mit Docker, Railway oder VPS. Der Code ist transparent.
++ LeagueLedger is transparent, self-hostable, and designed for organizers who want control over their league data and event workflow. + LeagueLedger ist transparent, selbst hostbar und für Veranstalter gedacht, die ihre Liga-Daten und Event-Abläufe kontrollieren möchten. +
++ Track every quiz night, reward every moment, and keep the leaderboard alive between events. + Erfasst jede Quiznacht, belohnt jeden Moment und haltet die Rangliste zwischen den Events lebendig. +
+ +