|
|
@@ -0,0 +1,906 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+<meta charset="UTF-8">
|
|
|
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+<title>Financial Technology 20/30 — Mr. Tang</title>
|
|
|
+
|
|
|
+<!-- ===========================================
|
|
|
+ FONTS
|
|
|
+ Archivo Black = display headlines (heavy, tight, uppercase)
|
|
|
+ Archivo = body copy
|
|
|
+ Space Mono = UI labels, years, spec readouts (the "Hextech UI" voice)
|
|
|
+ =========================================== -->
|
|
|
+<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
|
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
+<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
|
|
|
+
|
|
|
+<style>
|
|
|
+/* ===========================================
|
|
|
+ THEME TOKENS — change these to reskin the deck
|
|
|
+ =========================================== */
|
|
|
+:root{
|
|
|
+ /* Riot palette */
|
|
|
+ --void: #0F141C; /* primary dark */
|
|
|
+ --deep: #070A0E; /* deepest bg */
|
|
|
+ --charcoal: #141A24; /* container fill */
|
|
|
+ --charcoal2: #1A212D; /* raised fill */
|
|
|
+ --crimson: #EB0029; /* primary accent */
|
|
|
+ --gold: #C2A66C; /* secondary */
|
|
|
+ --light: #F3F3F3; /* type on dark */
|
|
|
+ --body: #B4BCC8; /* body copy */
|
|
|
+ --muted: #7E8899; /* labels */
|
|
|
+
|
|
|
+ /* Type stack */
|
|
|
+ --font-display: 'Archivo Black', sans-serif;
|
|
|
+ --font-body: 'Archivo', sans-serif;
|
|
|
+ --font-mono: 'Space Mono', monospace;
|
|
|
+
|
|
|
+ /* Motion */
|
|
|
+ --ease: cubic-bezier(.16,1,.3,1);
|
|
|
+ --dur: .85s;
|
|
|
+
|
|
|
+ /* Stage chrome */
|
|
|
+ --stage-bg: #000;
|
|
|
+ --slide-bg: var(--void);
|
|
|
+}
|
|
|
+
|
|
|
+*{margin:0;padding:0;box-sizing:border-box}
|
|
|
+
|
|
|
+/* ===========================================
|
|
|
+ FIXED 16:9 STAGE — MANDATORY BASE
|
|
|
+ (full contents of viewport-base.css)
|
|
|
+ Slides are authored at 1920x1080 and the whole
|
|
|
+ stage is scaled by one transform to fit the window.
|
|
|
+ =========================================== */
|
|
|
+html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--stage-bg,#000)}
|
|
|
+
|
|
|
+.deck-viewport{position:fixed;inset:0;overflow:hidden;background:var(--stage-bg,#000)}
|
|
|
+
|
|
|
+.deck-stage{position:absolute;left:0;top:0;width:1920px;height:1080px;overflow:hidden;
|
|
|
+ transform-origin:0 0;background:var(--slide-bg,#fff)}
|
|
|
+
|
|
|
+.slide{position:absolute;inset:0;width:1920px;height:1080px;overflow:hidden;display:block;
|
|
|
+ visibility:hidden;opacity:0;pointer-events:none;background:var(--slide-bg,#fff)}
|
|
|
+
|
|
|
+.slide.active,.slide.visible{visibility:visible;opacity:1;pointer-events:auto;z-index:1}
|
|
|
+
|
|
|
+img,video,canvas,svg{max-width:100%;max-height:100%}
|
|
|
+
|
|
|
+.deck-controls{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:1000}
|
|
|
+
|
|
|
+@media print{
|
|
|
+ html,body{width:1920px;height:auto;overflow:visible;background:#fff}
|
|
|
+ .deck-viewport{position:static;overflow:visible;background:#fff}
|
|
|
+ .deck-stage{position:static;width:auto;height:auto;transform:none!important;background:none}
|
|
|
+ .slide{position:relative;display:block!important;visibility:visible!important;opacity:1!important;
|
|
|
+ pointer-events:auto!important;width:1920px;height:1080px;break-after:page;page-break-after:always}
|
|
|
+ .slide:last-child{break-after:auto;page-break-after:auto}
|
|
|
+ .deck-controls{display:none!important}
|
|
|
+}
|
|
|
+
|
|
|
+@media (prefers-reduced-motion: reduce){
|
|
|
+ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.2s!important}
|
|
|
+}
|
|
|
+
|
|
|
+/* ===========================================
|
|
|
+ SHARED ATMOSPHERE
|
|
|
+ Every slide gets: engineering grid + directional
|
|
|
+ crimson glow + heavy vignette. This is the deck's
|
|
|
+ single strongest visual signature.
|
|
|
+ =========================================== */
|
|
|
+.atmos{position:absolute;inset:0;pointer-events:none}
|
|
|
+.atmos .base{position:absolute;inset:0;background:var(--deep)}
|
|
|
+.atmos .grid{position:absolute;inset:0;opacity:.5;
|
|
|
+ background-image:linear-gradient(rgba(243,243,243,.04) 1px,transparent 1px),
|
|
|
+ linear-gradient(90deg,rgba(243,243,243,.04) 1px,transparent 1px);
|
|
|
+ background-size:80px 80px}
|
|
|
+.atmos .glow{position:absolute;inset:0;
|
|
|
+ background:radial-gradient(ellipse 1000px 900px at 20% 55%, rgba(235,0,41,.20), transparent 62%),
|
|
|
+ radial-gradient(ellipse 800px 700px at 94% 10%, rgba(194,166,108,.09), transparent 60%)}
|
|
|
+.atmos .vig{position:absolute;inset:0;
|
|
|
+ background:radial-gradient(ellipse 1400px 1000px at 45% 50%, transparent 42%, rgba(7,10,14,.84) 90%)}
|
|
|
+
|
|
|
+/* Diagonal crimson shard — the one aggressive angle in the system.
|
|
|
+ Sits top-right on most slides; mirrored on the closing slide. */
|
|
|
+.shard{position:absolute;top:-120px;right:-60px;width:560px;height:560px;opacity:.26;
|
|
|
+ background:linear-gradient(200deg, rgba(235,0,41,.85), rgba(235,0,41,0) 62%);
|
|
|
+ clip-path:polygon(100% 0, 100% 46%, 34% 100%, 0 66%);pointer-events:none}
|
|
|
+.shard.flip{top:auto;bottom:-120px;left:-60px;right:auto;transform:rotate(180deg)}
|
|
|
+
|
|
|
+/* ===========================================
|
|
|
+ SLIDE HEADER — kicker + section title
|
|
|
+ Repeated on every content slide for rhythm.
|
|
|
+ =========================================== */
|
|
|
+.s-head{position:absolute;left:120px;top:104px;right:120px;z-index:3}
|
|
|
+.kicker{display:flex;align-items:center;gap:16px;margin-bottom:22px}
|
|
|
+.kicker .tick{width:52px;height:3px;background:var(--crimson);flex:none}
|
|
|
+.kicker span{font-family:var(--font-mono);font-size:15px;font-weight:700;letter-spacing:.36em;
|
|
|
+ text-transform:uppercase;color:var(--gold);white-space:nowrap}
|
|
|
+.s-head h2{font-family:var(--font-display);text-transform:uppercase;font-size:82px;line-height:.92;
|
|
|
+ letter-spacing:-.030em;color:var(--light)}
|
|
|
+.s-head h2 .hot{color:var(--crimson);text-shadow:0 0 46px rgba(235,0,41,.45)}
|
|
|
+
|
|
|
+/* ===========================================
|
|
|
+ PANEL — the core container of the design system.
|
|
|
+ Sharp corners, gold hairline, crimson left edge.
|
|
|
+ =========================================== */
|
|
|
+.panel{background:linear-gradient(160deg, rgba(20,26,36,.94), rgba(15,20,28,.84));
|
|
|
+ border:1px solid rgba(194,166,108,.30);border-left:3px solid var(--crimson);position:absolute;z-index:3}
|
|
|
+.panel.quiet{border-left-color:rgba(194,166,108,.45)}
|
|
|
+
|
|
|
+/* Media frame: photographs always sit in a hard-edged frame,
|
|
|
+ never bare. Crimson top edge + inner darkening for legibility. */
|
|
|
+.media{position:absolute;overflow:hidden;z-index:3;background:var(--charcoal);
|
|
|
+ border:1px solid rgba(194,166,108,.28)}
|
|
|
+.media::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--crimson);z-index:2}
|
|
|
+.media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.04)}
|
|
|
+/* Bottom scrim so overlay captions stay readable on any photo */
|
|
|
+.media .scrim{position:absolute;left:0;right:0;bottom:0;height:52%;z-index:1;
|
|
|
+ background:linear-gradient(180deg,transparent,rgba(7,10,14,.92))}
|
|
|
+.media .cap{position:absolute;left:26px;right:26px;bottom:22px;z-index:2}
|
|
|
+.media .cap .l{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.26em;
|
|
|
+ text-transform:uppercase;color:var(--gold);display:block;margin-bottom:7px}
|
|
|
+.media .cap .t{font-family:var(--font-body);font-size:23px;font-weight:600;color:var(--light);line-height:1.25}
|
|
|
+.media.sm .cap{left:16px;right:16px;bottom:13px}
|
|
|
+.media.sm .cap .t{font-size:16px;font-weight:600}
|
|
|
+.media.sm .cap .l{font-size:10px;letter-spacing:.20em;margin-bottom:4px}
|
|
|
+
|
|
|
+/* ===========================================
|
|
|
+ REVEAL ANIMATION
|
|
|
+ Elements fade + rise when their slide becomes visible.
|
|
|
+ Per-element delay via inline --d custom property.
|
|
|
+ =========================================== */
|
|
|
+.reveal{opacity:0;transform:translateY(26px);
|
|
|
+ transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
|
|
|
+ transition-delay:var(--d,0s)}
|
|
|
+.slide.visible .reveal{opacity:1;transform:none}
|
|
|
+
|
|
|
+.reveal-x{opacity:0;transform:translateX(-34px);
|
|
|
+ transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
|
|
|
+ transition-delay:var(--d,0s)}
|
|
|
+.slide.visible .reveal-x{opacity:1;transform:none}
|
|
|
+
|
|
|
+.reveal-w{opacity:0;transform:scaleX(0);transform-origin:left;
|
|
|
+ transition:opacity .5s var(--ease), transform var(--dur) var(--ease);
|
|
|
+ transition-delay:var(--d,0s)}
|
|
|
+.slide.visible .reveal-w{opacity:1;transform:none}
|
|
|
+
|
|
|
+/* ===========================================
|
|
|
+ SLIDE 1 — TITLE
|
|
|
+ =========================================== */
|
|
|
+.t-dossier{left:120px;top:236px;width:452px;padding:44px 40px 40px}
|
|
|
+.t-dossier h3{font-family:var(--font-mono);font-size:14px;font-weight:700;letter-spacing:.34em;
|
|
|
+ text-transform:uppercase;color:var(--gold);margin-bottom:30px}
|
|
|
+.t-row{padding:19px 0;border-top:1px solid rgba(243,243,243,.09)}
|
|
|
+.t-row:first-of-type{border-top:none;padding-top:0}
|
|
|
+.t-row .k{font-family:var(--font-mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
|
|
|
+ color:var(--muted);display:block;margin-bottom:9px}
|
|
|
+.t-row .v{font-family:var(--font-body);font-size:27px;font-weight:600;color:var(--light);
|
|
|
+ display:flex;align-items:center;gap:12px}
|
|
|
+.t-row .v svg{width:21px;height:21px;flex:none}
|
|
|
+.t-row .v em{font-style:normal;color:var(--gold)}
|
|
|
+/* Two Instagram handles stacked under one icon: the personal
|
|
|
+ account leads, the business account sits beneath it in a
|
|
|
+ lighter weight so the hierarchy stays clear. */
|
|
|
+.t-row .v .handles{display:flex;flex-direction:column;gap:7px;min-width:0}
|
|
|
+.t-row .v .handles .alt{font-size:20px;font-weight:500;color:var(--body);letter-spacing:-.005em}
|
|
|
+
|
|
|
+.t-head{position:absolute;left:700px;top:262px;right:120px;z-index:3}
|
|
|
+.t-head h1{font-family:var(--font-display);text-transform:uppercase;font-size:146px;line-height:.85;
|
|
|
+ letter-spacing:-.035em;color:var(--light)}
|
|
|
+.t-head h1 .accent{color:var(--crimson);text-shadow:0 0 54px rgba(235,0,41,.55);display:block}
|
|
|
+.t-head h1 .ln{display:block}
|
|
|
+.t-sub{margin-top:46px;padding-top:34px;border-top:1px solid rgba(194,166,108,.30);
|
|
|
+ font-family:var(--font-body);font-size:25px;line-height:1.55;color:var(--body);max-width:830px}
|
|
|
+.t-sub strong{color:var(--light);font-weight:600}
|
|
|
+.t-tags{margin-top:40px;display:flex}
|
|
|
+.t-tag{font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.22em;
|
|
|
+ text-transform:uppercase;color:var(--muted);padding:12px 26px;
|
|
|
+ border:1px solid rgba(243,243,243,.14);margin-right:-1px}
|
|
|
+.t-tag.hot{color:var(--light);border-color:var(--crimson);background:rgba(235,0,41,.13)}
|
|
|
+
|
|
|
+.rail{position:absolute;left:120px;right:120px;bottom:80px;height:1px;background:rgba(243,243,243,.13);z-index:3}
|
|
|
+.railtext{position:absolute;left:120px;right:120px;bottom:44px;display:flex;justify-content:space-between;
|
|
|
+ font-family:var(--font-mono);font-size:13px;letter-spacing:.26em;text-transform:uppercase;
|
|
|
+ color:var(--muted);z-index:3}
|
|
|
+.railtext .hot{color:var(--crimson)}
|
|
|
+/* Single-item rail: keep the marker pinned right */
|
|
|
+.railtext.right{justify-content:flex-end}
|
|
|
+
|
|
|
+/* ===========================================
|
|
|
+ SLIDE 2 — BACKGROUND (timeline + thesis)
|
|
|
+ =========================================== */
|
|
|
+.tl{position:absolute;left:120px;top:368px;width:830px;z-index:3}
|
|
|
+.tl-item{position:relative;padding-left:74px;padding-bottom:58px}
|
|
|
+.tl-item:last-child{padding-bottom:0}
|
|
|
+/* vertical connector rail */
|
|
|
+.tl-item::before{content:"";position:absolute;left:11px;top:26px;bottom:-4px;width:1px;
|
|
|
+ background:rgba(194,166,108,.32)}
|
|
|
+.tl-item:last-child::before{display:none}
|
|
|
+/* node marker — rotated square, Hextech-ish */
|
|
|
+.tl-item::after{content:"";position:absolute;left:5px;top:9px;width:14px;height:14px;
|
|
|
+ background:var(--crimson);transform:rotate(45deg);box-shadow:0 0 18px rgba(235,0,41,.75)}
|
|
|
+.tl-item.gold::after{background:var(--gold);box-shadow:0 0 16px rgba(194,166,108,.55)}
|
|
|
+.tl-item .yr{font-family:var(--font-mono);font-size:14px;font-weight:700;letter-spacing:.28em;
|
|
|
+ text-transform:uppercase;color:var(--gold);display:block;margin-bottom:10px}
|
|
|
+.tl-item .ttl{font-family:var(--font-body);font-size:38px;font-weight:700;color:var(--light);
|
|
|
+ line-height:1.1;letter-spacing:-.01em}
|
|
|
+.tl-item .det{font-family:var(--font-body);font-size:22px;color:var(--muted);margin-top:8px;line-height:1.45}
|
|
|
+
|
|
|
+/* Right-hand thesis statement */
|
|
|
+.thesis{position:absolute;left:1060px;top:342px;right:120px;z-index:3}
|
|
|
+.thesis .big{font-family:var(--font-display);text-transform:uppercase;font-size:82px;line-height:.94;
|
|
|
+ letter-spacing:-.030em;color:var(--light)}
|
|
|
+.thesis .big .hot{color:var(--crimson);text-shadow:0 0 44px rgba(235,0,41,.45)}
|
|
|
+.thesis .note{margin-top:40px;border-left:3px solid var(--gold);padding:6px 0 6px 26px;
|
|
|
+ font-family:var(--font-body);font-size:24px;line-height:1.6;color:var(--body)}
|
|
|
+
|
|
|
+/* ===========================================
|
|
|
+ SLIDE 3 — WHAT I'VE BUILT (ventures + team photo)
|
|
|
+ =========================================== */
|
|
|
+.vent{position:absolute;left:120px;top:316px;width:800px;z-index:3}
|
|
|
+.v-row{display:flex;align-items:baseline;gap:26px;padding:26px 0;
|
|
|
+ border-top:1px solid rgba(243,243,243,.10)}
|
|
|
+.v-row:first-child{border-top:none}
|
|
|
+.v-row .yr{font-family:var(--font-mono);font-size:15px;font-weight:700;letter-spacing:.16em;
|
|
|
+ color:var(--gold);width:168px;flex:none;white-space:nowrap}
|
|
|
+.v-row .nm{font-family:var(--font-body);font-size:34px;font-weight:700;color:var(--light);
|
|
|
+ letter-spacing:-.005em;line-height:1.15}
|
|
|
+.v-row .nm small{display:block;font-size:20px;font-weight:400;color:var(--muted);
|
|
|
+ margin-top:6px;letter-spacing:0}
|
|
|
+.v-row.now .yr{color:var(--crimson)}
|
|
|
+.v-row.now .nm{color:var(--light)}
|
|
|
+
|
|
|
+/* Live badge on the current venture */
|
|
|
+.livebadge{display:inline-flex;align-items:center;gap:8px;margin-left:14px;vertical-align:middle;
|
|
|
+ font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.22em;
|
|
|
+ text-transform:uppercase;color:var(--crimson);border:1px solid var(--crimson);
|
|
|
+ background:rgba(235,0,41,.13);padding:5px 10px 4px}
|
|
|
+.livebadge i{width:7px;height:7px;background:var(--crimson);display:block;
|
|
|
+ box-shadow:0 0 10px var(--crimson);animation:pulse 1.8s ease-in-out infinite}
|
|
|
+@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
|
|
|
+
|
|
|
+/* ===========================================
|
|
|
+ SLIDE 4 — OFF THE CLOCK (photo mosaic)
|
|
|
+ =========================================== */
|
|
|
+.mos-strip{position:absolute;left:920px;top:868px;right:120px;z-index:3;
|
|
|
+ font-family:var(--font-body);font-size:21px;color:var(--muted);line-height:1.5}
|
|
|
+.mos-strip b{color:var(--light);font-weight:600}
|
|
|
+.mos-strip .dot{color:var(--crimson);padding:0 8px}
|
|
|
+
|
|
|
+/* ===========================================
|
|
|
+ SLIDE 5 — THE RIG (spec panel + photo triptych)
|
|
|
+ =========================================== */
|
|
|
+.spec{left:120px;top:290px;width:520px;padding:40px 36px 36px}
|
|
|
+.spec h3{font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.32em;
|
|
|
+ text-transform:uppercase;color:var(--gold);margin-bottom:30px}
|
|
|
+.sp-row{padding:26px 0;border-top:1px solid rgba(243,243,243,.10)}
|
|
|
+.sp-row:first-of-type{border-top:none;padding-top:0}
|
|
|
+.sp-row .k{font-family:var(--font-mono);font-size:12px;letter-spacing:.26em;text-transform:uppercase;
|
|
|
+ color:var(--muted);display:block;margin-bottom:11px}
|
|
|
+.sp-row .v{font-family:var(--font-body);font-size:33px;font-weight:700;color:var(--light);
|
|
|
+ letter-spacing:-.01em;line-height:1.1}
|
|
|
+.sp-row .v span{color:var(--crimson)}
|
|
|
+.sp-foot{margin-top:30px;padding-top:24px;border-top:1px solid rgba(194,166,108,.28);
|
|
|
+ font-family:var(--font-body);font-size:19px;line-height:1.55;color:var(--body)}
|
|
|
+
|
|
|
+/* ===========================================
|
|
|
+ SLIDE 6 — WHAT IS FINTECH (three pillars)
|
|
|
+ =========================================== */
|
|
|
+/* Flex column so the bottom label pins to the panel floor,
|
|
|
+ giving all three pillars a shared baseline. */
|
|
|
+.pil{top:300px;height:590px;padding:40px 34px 34px;overflow:hidden;
|
|
|
+ display:flex;flex-direction:column}
|
|
|
+.pil .num{position:absolute;right:20px;top:6px;font-family:var(--font-display);font-size:132px;
|
|
|
+ line-height:1;color:rgba(243,243,243,.045);letter-spacing:-.04em;pointer-events:none}
|
|
|
+.pil h3{font-family:var(--font-display);text-transform:uppercase;font-size:40px;line-height:1.0;
|
|
|
+ letter-spacing:-.025em;color:var(--light);position:relative;z-index:2;min-height:80px}
|
|
|
+.pil h3 .hot{color:var(--crimson)}
|
|
|
+/* Long single-word headings get a step down so they never
|
|
|
+ run into the ghost number watermark. */
|
|
|
+.pil.long h3{font-size:33px}
|
|
|
+.pil .bar{width:64px;height:3px;background:var(--gold);margin:22px 0 24px;position:relative;z-index:2}
|
|
|
+.pil p{font-family:var(--font-body);font-size:22px;line-height:1.6;color:var(--body);
|
|
|
+ position:relative;z-index:2}
|
|
|
+.pil p + p{margin-top:16px}
|
|
|
+.pil .kv{margin-top:auto;font-family:var(--font-mono);font-size:12px;font-weight:700;
|
|
|
+ letter-spacing:.24em;text-transform:uppercase;color:var(--gold);position:relative;z-index:2}
|
|
|
+
|
|
|
+/* Inset photo inside pillar 1 */
|
|
|
+.pil-media{position:absolute;left:34px;right:34px;bottom:34px;height:196px;overflow:hidden;
|
|
|
+ border:1px solid rgba(194,166,108,.28);z-index:2}
|
|
|
+.pil-media img{width:100%;height:100%;object-fit:cover;display:block}
|
|
|
+.pil-media .scrim{position:absolute;inset:0;
|
|
|
+ background:linear-gradient(180deg,rgba(7,10,14,.15),rgba(7,10,14,.90))}
|
|
|
+.pil-media .cap{position:absolute;left:16px;right:16px;bottom:12px;font-family:var(--font-mono);
|
|
|
+ font-size:11px;font-weight:700;letter-spacing:.20em;text-transform:uppercase;color:var(--gold);
|
|
|
+ line-height:1.5}
|
|
|
+.pil-media .cap b{display:block;font-family:var(--font-body);font-size:16px;font-weight:600;
|
|
|
+ letter-spacing:0;text-transform:none;color:var(--light);margin-top:5px}
|
|
|
+
|
|
|
+/* ===========================================
|
|
|
+ SLIDE 7 — CLOSING
|
|
|
+ =========================================== */
|
|
|
+.close-wrap{position:absolute;left:120px;top:288px;right:120px;z-index:3}
|
|
|
+.close-wrap h1{font-family:var(--font-display);text-transform:uppercase;font-size:168px;line-height:.84;
|
|
|
+ letter-spacing:-.038em;color:var(--light)}
|
|
|
+.close-wrap h1 .hot{color:var(--crimson);text-shadow:0 0 60px rgba(235,0,41,.55);display:block}
|
|
|
+.close-sub{margin-top:44px;font-family:var(--font-body);font-size:29px;line-height:1.55;
|
|
|
+ color:var(--body);max-width:900px}
|
|
|
+.close-sub strong{color:var(--light);font-weight:600}
|
|
|
+
|
|
|
+.cta-grid{position:absolute;left:120px;right:120px;bottom:150px;display:flex;gap:0;z-index:3}
|
|
|
+.cta{flex:1;border:1px solid rgba(243,243,243,.14);border-left:3px solid var(--crimson);
|
|
|
+ margin-right:-1px;padding:30px 32px 28px;
|
|
|
+ background:linear-gradient(160deg,rgba(20,26,36,.92),rgba(15,20,28,.80))}
|
|
|
+.cta .k{font-family:var(--font-mono);font-size:12px;letter-spacing:.26em;text-transform:uppercase;
|
|
|
+ color:var(--muted);display:block;margin-bottom:14px}
|
|
|
+.cta .v{font-family:var(--font-body);font-size:29px;font-weight:600;color:var(--light);
|
|
|
+ display:flex;align-items:center;gap:13px;line-height:1.2}
|
|
|
+.cta .v svg{width:24px;height:24px;flex:none}
|
|
|
+.cta .v small{display:block;font-size:18px;font-weight:400;color:var(--muted);margin-top:5px}
|
|
|
+
|
|
|
+/* ===========================================
|
|
|
+ DECK CHROME — outside the 1920x1080 stage
|
|
|
+ =========================================== */
|
|
|
+.deck-controls{display:flex;align-items:center;gap:18px;
|
|
|
+ background:rgba(7,10,14,.82);border:1px solid rgba(194,166,108,.26);padding:9px 16px;
|
|
|
+ backdrop-filter:blur(8px);opacity:.28;transition:opacity .3s ease}
|
|
|
+.deck-controls:hover{opacity:1}
|
|
|
+.dots{display:flex;gap:9px}
|
|
|
+.dot{width:9px;height:9px;background:rgba(243,243,243,.22);cursor:pointer;
|
|
|
+ transition:background .25s ease,transform .25s ease;border:none;padding:0}
|
|
|
+.dot:hover{background:rgba(243,243,243,.5)}
|
|
|
+.dot.on{background:var(--crimson);transform:rotate(45deg);box-shadow:0 0 12px rgba(235,0,41,.8)}
|
|
|
+.count{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:var(--muted);
|
|
|
+ min-width:52px;text-align:right}
|
|
|
+.count b{color:var(--light);font-weight:700}
|
|
|
+
|
|
|
+/* Progress bar pinned to the very bottom of the window */
|
|
|
+.progress{position:fixed;left:0;bottom:0;height:3px;background:var(--crimson);z-index:1001;
|
|
|
+ box-shadow:0 0 14px rgba(235,0,41,.9);transition:width .5s var(--ease);width:0}
|
|
|
+
|
|
|
+/* ===========================================
|
|
|
+ INLINE EDIT MODE
|
|
|
+ Hover the top-left hotzone, or press E.
|
|
|
+ =========================================== */
|
|
|
+.edit-hotzone{position:fixed;top:0;left:0;width:80px;height:80px;z-index:10000;cursor:pointer}
|
|
|
+.edit-toggle{position:fixed;top:16px;left:16px;z-index:10001;width:44px;height:44px;
|
|
|
+ background:rgba(7,10,14,.92);border:1px solid var(--crimson);color:var(--light);
|
|
|
+ font-size:18px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s ease}
|
|
|
+.edit-toggle.show,.edit-toggle.active{opacity:1;pointer-events:auto}
|
|
|
+.edit-toggle.active{background:var(--crimson)}
|
|
|
+body.editing [contenteditable="true"]{outline:1px dashed rgba(194,166,108,.65);
|
|
|
+ outline-offset:4px;cursor:text}
|
|
|
+body.editing [contenteditable="true"]:focus{outline:2px solid var(--crimson);background:rgba(235,0,41,.07)}
|
|
|
+.edit-hint{position:fixed;top:16px;left:72px;z-index:10001;
|
|
|
+ background:rgba(7,10,14,.94);border:1px solid rgba(194,166,108,.4);
|
|
|
+ font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
|
|
|
+ color:var(--gold);padding:13px 16px;display:none;white-space:nowrap}
|
|
|
+body.editing .edit-hint{display:block}
|
|
|
+</style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+<div class="deck-viewport">
|
|
|
+<main class="deck-stage" id="deckStage">
|
|
|
+
|
|
|
+<!-- ===========================================
|
|
|
+ SLIDE 1 — TITLE
|
|
|
+ Asymmetric: metadata dossier left, oversized
|
|
|
+ headline offset right.
|
|
|
+ =========================================== -->
|
|
|
+<section class="slide title-slide active visible" aria-label="Title">
|
|
|
+ <div class="atmos"><div class="base"></div><div class="grid"></div><div class="glow"></div><div class="vig"></div></div>
|
|
|
+ <div class="shard"></div>
|
|
|
+
|
|
|
+ <aside class="panel t-dossier reveal-x" style="--d:.40s">
|
|
|
+ <h3>Course File // 10/20/30</h3>
|
|
|
+ <div class="t-row"><span class="k">Instructor</span><span class="v">Mr. Tang</span></div>
|
|
|
+ <div class="t-row"><span class="k">Room</span><span class="v"><em>2303</em></span></div>
|
|
|
+ <div class="t-row"><span class="k">Emergencies</span><span class="v">
|
|
|
+ <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="2" y="6" width="13" height="12" rx="1.5" stroke="#EB0029" stroke-width="1.8"/><path d="M15 10.5L22 7v10l-7-3.5z" fill="#C2A66C"/></svg>
|
|
|
+ Google Chat</span></div>
|
|
|
+ <div class="t-row"><span class="k">Instagram</span><span class="v">
|
|
|
+ <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="4" stroke="#EB0029" stroke-width="1.8"/><circle cx="12" cy="12" r="4.2" stroke="#C2A66C" stroke-width="1.8"/><circle cx="17.4" cy="6.6" r="1.2" fill="#C2A66C"/></svg>
|
|
|
+ <span class="handles">
|
|
|
+ <span>_michtang</span>
|
|
|
+ <span class="alt">codeninjassprucegrove</span>
|
|
|
+ </span></span></div>
|
|
|
+ </aside>
|
|
|
+
|
|
|
+ <div class="t-head">
|
|
|
+ <div class="kicker reveal" style="--d:.14s"><span class="tick"></span><span>Semester One</span></div>
|
|
|
+ <h1>
|
|
|
+ <span class="ln reveal" style="--d:.26s">Financial</span>
|
|
|
+ <span class="accent reveal" style="--d:.38s">Technology</span>
|
|
|
+ </h1>
|
|
|
+ <p class="t-sub reveal" style="--d:.58s">How money works investing, entrepreneurship.</p>
|
|
|
+ <div class="t-tags reveal" style="--d:.72s">
|
|
|
+ <span class="t-tag hot">Financial Literacy</span>
|
|
|
+ <span class="t-tag">Entrepreneurship</span>
|
|
|
+ <span class="t-tag">Work Ethic</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="rail reveal" style="--d:.9s"></div>
|
|
|
+ <div class="railtext right reveal" style="--d:.95s">
|
|
|
+ <span class="hot">Day One</span>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+
|
|
|
+<!-- ===========================================
|
|
|
+ SLIDE 2 — BACKGROUND
|
|
|
+ Vertical timeline left, thesis statement right.
|
|
|
+ No photograph: the type carries this one.
|
|
|
+ =========================================== -->
|
|
|
+<section class="slide" aria-label="Background">
|
|
|
+ <div class="atmos"><div class="base"></div><div class="grid"></div><div class="glow"></div><div class="vig"></div></div>
|
|
|
+ <div class="shard"></div>
|
|
|
+
|
|
|
+ <header class="s-head">
|
|
|
+ <div class="kicker reveal" style="--d:.10s"><span class="tick"></span><span>01 / Background</span></div>
|
|
|
+ <h2 class="reveal" style="--d:.18s">Where I <span class="hot">Started</span></h2>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <div class="tl">
|
|
|
+ <div class="tl-item reveal-x" style="--d:.34s">
|
|
|
+ <span class="yr">2011</span>
|
|
|
+ <div class="ttl">Bachelor of Commerce</div>
|
|
|
+ <div class="det">Business first — accounting, finance, how companies actually work.</div>
|
|
|
+ </div>
|
|
|
+ <div class="tl-item reveal-x" style="--d:.46s">
|
|
|
+ <span class="yr">2013</span>
|
|
|
+ <div class="ttl">Bachelor of Education</div>
|
|
|
+ <div class="det">Then the decision to teach it instead of just do it.</div>
|
|
|
+ </div>
|
|
|
+ <div class="tl-item gold reveal-x" style="--d:.58s">
|
|
|
+ <span class="yr">Classrooms</span>
|
|
|
+ <div class="ttl">Grades 3, 5 and 11</div>
|
|
|
+ <div class="det">Elementary to senior high — and a stretch teaching in the United Kingdom.</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="thesis">
|
|
|
+ <div class="big reveal" style="--d:.52s">Commerce<br>first.<br><span class="hot">Classroom</span><br>second.</div>
|
|
|
+ <p class="note reveal" style="--d:.70s">Which means this course isn’t theory I read in a textbook. It’s the stuff I had to learn the expensive way.</p>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+
|
|
|
+<!-- ===========================================
|
|
|
+ SLIDE 3 — WHAT I'VE BUILT
|
|
|
+ Venture list left, Code Ninjas team photo right.
|
|
|
+ =========================================== -->
|
|
|
+<section class="slide" aria-label="What I have built">
|
|
|
+ <div class="atmos"><div class="base"></div><div class="grid"></div><div class="glow"></div><div class="vig"></div></div>
|
|
|
+ <div class="shard"></div>
|
|
|
+
|
|
|
+ <header class="s-head">
|
|
|
+ <div class="kicker reveal" style="--d:.10s"><span class="tick"></span><span>02 / Track Record</span></div>
|
|
|
+ <h2 class="reveal" style="--d:.18s">What I’ve <span class="hot">Built</span></h2>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <div class="vent">
|
|
|
+ <div class="v-row reveal-x" style="--d:.34s">
|
|
|
+ <span class="yr">Early</span>
|
|
|
+ <div class="nm">T‑Shirt Business<small>Design, inventory, margins — the first experiment.</small></div>
|
|
|
+ </div>
|
|
|
+ <div class="v-row reveal-x" style="--d:.44s">
|
|
|
+ <span class="yr">2015-2016</span>
|
|
|
+ <div class="nm">Website Development<small>Building for clients, quoting work, getting paid.</small></div>
|
|
|
+ </div>
|
|
|
+ <div class="v-row reveal-x" style="--d:.54s">
|
|
|
+ <span class="yr">2017 – 2020</span>
|
|
|
+ <div class="nm">Ethereum Mining<small>Hardware, power costs, and a very volatile asset.</small></div>
|
|
|
+ </div>
|
|
|
+ <div class="v-row now reveal-x" style="--d:.64s">
|
|
|
+ <span class="yr">2021 – Present</span>
|
|
|
+ <div class="nm">Code Ninjas<span class="livebadge"><i></i>Live</span><small>Co‑owner of two locations: Spruce Grove & North Edmonton.</small></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <figure class="media reveal" style="left:990px;top:296px;width:810px;height:580px;--d:.48s">
|
|
|
+ <img src="img/code-ninjas-team.png" alt="Code Ninjas staff team photo in front of a lime green CREATE wall">
|
|
|
+ <div class="scrim"></div>
|
|
|
+ <figcaption class="cap">
|
|
|
+ <span class="l">Code Ninjas · Spruce Grove</span>
|
|
|
+ <span class="t">The team. Payroll, rent, marketing, hiring — every month, whether it’s busy or not.</span>
|
|
|
+ </figcaption>
|
|
|
+ </figure>
|
|
|
+</section>
|
|
|
+
|
|
|
+<!-- ===========================================
|
|
|
+ SLIDE 4 — OFF THE CLOCK
|
|
|
+ Photo mosaic: one hero + two mid + a trio strip.
|
|
|
+ =========================================== -->
|
|
|
+<section class="slide" aria-label="Personal interests">
|
|
|
+ <div class="atmos"><div class="base"></div><div class="grid"></div><div class="glow"></div><div class="vig"></div></div>
|
|
|
+ <div class="shard"></div>
|
|
|
+
|
|
|
+ <header class="s-head">
|
|
|
+ <div class="kicker reveal" style="--d:.10s"><span class="tick"></span><span>03 / Off the Clock</span></div>
|
|
|
+ <h2 class="reveal" style="--d:.18s">When I’m <span class="hot">Not Here</span></h2>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <!-- Hero: League profile -->
|
|
|
+ <figure class="media reveal" style="left:120px;top:300px;width:760px;height:560px;--d:.34s">
|
|
|
+ <img src="img/league-rank.png" alt="League of Legends profile showing Gold III rank, Honor Level 5, mastery score 331">
|
|
|
+
|
|
|
+ </figure>
|
|
|
+
|
|
|
+ <!-- Mid row -->
|
|
|
+ <figure class="media sm reveal" style="left:920px;top:300px;width:425px;height:250px;--d:.44s">
|
|
|
+ <img src="img/badminton.png" alt="Badminton racket and shuttlecocks on a gymnasium floor">
|
|
|
+
|
|
|
+ </figure>
|
|
|
+
|
|
|
+ <figure class="media sm reveal" style="left:1375px;top:300px;width:425px;height:250px;--d:.52s">
|
|
|
+ <img src="img/budaejigae.png" alt="Korean army stew simmering in a metal pot">
|
|
|
+
|
|
|
+ </figure>
|
|
|
+
|
|
|
+ <!-- Starbucks trio strip -->
|
|
|
+ <figure class="media sm reveal" style="left:920px;top:580px;width:273px;height:250px;--d:.60s">
|
|
|
+ <img src="img/sbux-summer.png" alt="Starbucks summer berry refresher">
|
|
|
+
|
|
|
+ </figure>
|
|
|
+ <figure class="media sm reveal" style="left:1223px;top:580px;width:273px;height:250px;--d:.66s">
|
|
|
+ <img src="img/sbux-mango.png" alt="Two Starbucks mango dragonfruit refreshers">
|
|
|
+
|
|
|
+ </figure>
|
|
|
+ <figure class="media sm reveal" style="left:1526px;top:580px;width:274px;height:250px;--d:.72s">
|
|
|
+ <img src="img/sbux-cranberry.png" alt="Starbucks iced cranberry drink">
|
|
|
+
|
|
|
+ </figure>
|
|
|
+
|
|
|
+ <p class="mos-strip reveal" style="--d:.80s">
|
|
|
+ Also: <b>running</b>, <b>weight lifting</b>, and an <b>indefensible Starbucks habit</b>
|
|
|
+ <span class="dot">—</span> ask me what that one costs per year.
|
|
|
+ </p>
|
|
|
+</section>
|
|
|
+
|
|
|
+<!-- ===========================================
|
|
|
+ SLIDE 5 — THE RIG
|
|
|
+ Spec panel + two-photo triptych.
|
|
|
+ =========================================== -->
|
|
|
+<section class="slide" aria-label="The rig">
|
|
|
+ <div class="atmos"><div class="base"></div><div class="grid"></div><div class="glow"></div><div class="vig"></div></div>
|
|
|
+ <div class="shard"></div>
|
|
|
+
|
|
|
+ <header class="s-head">
|
|
|
+ <div class="kicker reveal" style="--d:.10s"><span class="tick"></span><span>04 / Hardware</span></div>
|
|
|
+ <h2 class="reveal" style="--d:.18s">The <span class="hot">Rig</span></h2>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <aside class="panel spec reveal-x" style="--d:.34s">
|
|
|
+ <h3>System Spec</h3>
|
|
|
+ <div class="sp-row"><span class="k">Processor</span><span class="v">Ryzen 9 <span>3900X</span></span></div>
|
|
|
+ <div class="sp-row"><span class="k">Memory</span><span class="v">64 GB <span>DDR4</span></span></div>
|
|
|
+ <div class="sp-row"><span class="k">Graphics</span><span class="v">GeForce <span>RTX 3090</span></span></div>
|
|
|
+ <p class="sp-foot">Built piece by piece, paid for by the businesses on the last slide. Every part was a decision about cost versus what it actually returns.</p>
|
|
|
+ </aside>
|
|
|
+
|
|
|
+ <figure class="media reveal" style="left:700px;top:290px;width:740px;height:600px;--d:.46s">
|
|
|
+ <img src="img/gaming-setup.png" alt="Triple curved monitor gaming desk with red ambient lighting and a racing chair">
|
|
|
+
|
|
|
+ </figure>
|
|
|
+
|
|
|
+ <figure class="media reveal" style="left:1480px;top:290px;width:320px;height:600px;--d:.56s">
|
|
|
+ <img src="img/gaming-rig.png" alt="Open PC case interior showing RGB memory, liquid cooler and RTX graphics card">
|
|
|
+ <div class="scrim"></div>
|
|
|
+
|
|
|
+</section>
|
|
|
+
|
|
|
+<!-- ===========================================
|
|
|
+ SLIDE 6 — WHAT IS FINTECH
|
|
|
+ Three pillars. Pillar 1 carries an inset photo.
|
|
|
+ =========================================== -->
|
|
|
+<section class="slide" aria-label="What is fintech">
|
|
|
+ <div class="atmos"><div class="base"></div><div class="grid"></div><div class="glow"></div><div class="vig"></div></div>
|
|
|
+ <div class="shard"></div>
|
|
|
+
|
|
|
+ <header class="s-head">
|
|
|
+ <div class="kicker reveal" style="--d:.10s"><span class="tick"></span><span>05 / The Course</span></div>
|
|
|
+ <h2 class="reveal" style="--d:.18s">So What Is <span class="hot">Fintech?</span></h2>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <article class="panel pil reveal" style="left:120px;width:533px;--d:.34s">
|
|
|
+ <span class="num">01</span>
|
|
|
+ <h3>Financial<br><span class="hot">Literacy</span></h3>
|
|
|
+ <div class="bar"></div>
|
|
|
+ <p>How money actually works. Saving, investing, what an asset is, and why some things go up while other things quietly go to zero.</p>
|
|
|
+ <div class="pil-media">
|
|
|
+ <img src="img/pokemon-collection.png" alt="Graded Pokemon trading cards in protective cases">
|
|
|
+ <div class="scrim"></div>
|
|
|
+ <div class="cap">Condition, scarcity, demand<b>Everything is a market.</b></div>
|
|
|
+ </div>
|
|
|
+ </article>
|
|
|
+
|
|
|
+ <article class="panel pil quiet long reveal" style="left:693px;width:533px;--d:.44s">
|
|
|
+ <span class="num">02</span>
|
|
|
+ <h3>Entrepre<span class="hot">neurship</span></h3>
|
|
|
+ <div class="bar"></div>
|
|
|
+ <p>What running a business really means — twelve months a year, not just when it’s fun.</p>
|
|
|
+ <p>Where the cash actually goes, and then planning and running your own.</p>
|
|
|
+ <span class="kv">Fintech 20 & 30</span>
|
|
|
+ </article>
|
|
|
+
|
|
|
+ <article class="panel pil quiet reveal" style="left:1266px;width:534px;--d:.54s">
|
|
|
+ <span class="num">03</span>
|
|
|
+ <h3>Work Ethic<br>& <span class="hot">Attitude</span></h3>
|
|
|
+ <div class="bar"></div>
|
|
|
+ <p>The part no spreadsheet teaches. Showing up, doing the unglamorous work, and how you handle it when a plan doesn’t survive contact with reality.</p>
|
|
|
+ <p>This is the one that transfers to everything else.</p>
|
|
|
+ <span class="kv">Every Job You’ll Ever Have</span>
|
|
|
+ </article>
|
|
|
+</section>
|
|
|
+
|
|
|
+<!-- ===========================================
|
|
|
+ SLIDE 7 — CLOSING CTA
|
|
|
+ =========================================== -->
|
|
|
+<section class="slide" aria-label="Closing">
|
|
|
+ <div class="atmos"><div class="base"></div><div class="grid"></div><div class="glow"></div><div class="vig"></div></div>
|
|
|
+ <div class="shard flip"></div>
|
|
|
+
|
|
|
+ <div class="close-wrap">
|
|
|
+ <div class="kicker reveal" style="--d:.10s"><span class="tick"></span><span>Let’s Get Started</span></div>
|
|
|
+ <h1>
|
|
|
+ <span class="reveal" style="--d:.24s">See You In</span>
|
|
|
+ <span class="hot reveal" style="--d:.36s">Room 2303</span>
|
|
|
+ </h1>
|
|
|
+ <p class="close-sub reveal" style="--d:.56s">Bring a notebook and a question about money you’ve always wanted answered. <strong>We’ll start there.</strong></p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cta-grid">
|
|
|
+ <div class="cta reveal" style="--d:.70s">
|
|
|
+ <span class="k">Can’t make class</span>
|
|
|
+ <span class="v">
|
|
|
+ <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="2" y="6" width="13" height="12" rx="1.5" stroke="#EB0029" stroke-width="1.8"/><path d="M15 10.5L22 7v10l-7-3.5z" fill="#C2A66C"/></svg>
|
|
|
+ <span>Google Meet<small>Link posted before each session</small></span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="cta reveal" style="--d:.78s">
|
|
|
+ <span class="k">Instagram</span>
|
|
|
+ <span class="v">
|
|
|
+ <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="4" stroke="#EB0029" stroke-width="1.8"/><circle cx="12" cy="12" r="4.2" stroke="#C2A66C" stroke-width="1.8"/><circle cx="17.4" cy="6.6" r="1.2" fill="#C2A66C"/></svg>
|
|
|
+ <span>@_michtang<small>Course updates and reminders</small></span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="cta reveal" style="--d:.86s">
|
|
|
+ <span class="k">Find me outside school</span>
|
|
|
+ <span class="v">
|
|
|
+ <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 2.5L21 7v10l-9 4.5L3 17V7z" stroke="#EB0029" stroke-width="1.8"/><path d="M8.5 10.5l3.5 3.5 3.5-3.5" stroke="#C2A66C" stroke-width="1.8"/></svg>
|
|
|
+ <span>Code Ninjas<small>Spruce Grove & North Edmonton</small></span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="rail reveal" style="--d:.94s"></div>
|
|
|
+ <div class="railtext reveal" style="--d:.98s">
|
|
|
+ <span>Financial Technology 20 / 30 · Mr. Tang</span>
|
|
|
+ <span class="hot">Room 2303</span>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+
|
|
|
+</main>
|
|
|
+</div>
|
|
|
+
|
|
|
+<!-- ===========================================
|
|
|
+ DECK CHROME (outside the scaled stage)
|
|
|
+ =========================================== -->
|
|
|
+<nav class="deck-controls" aria-label="Slide navigation">
|
|
|
+ <div class="dots" id="dots"></div>
|
|
|
+ <div class="count"><b id="cur">1</b> / <span id="tot">7</span></div>
|
|
|
+</nav>
|
|
|
+<div class="progress" id="progress"></div>
|
|
|
+
|
|
|
+<!-- Inline editing affordance -->
|
|
|
+<div class="edit-hotzone" aria-hidden="true"></div>
|
|
|
+<button class="edit-toggle" id="editToggle" title="Edit mode (E)" aria-label="Toggle edit mode">✎</button>
|
|
|
+<div class="edit-hint">Click any text to edit · Ctrl+S saves · E exits</div>
|
|
|
+
|
|
|
+<script>
|
|
|
+/* ===========================================
|
|
|
+ SLIDE PRESENTATION CONTROLLER
|
|
|
+ Handles: fixed-stage scaling, keyboard / touch /
|
|
|
+ wheel navigation, progress chrome.
|
|
|
+ =========================================== */
|
|
|
+class SlidePresentation {
|
|
|
+ constructor(){
|
|
|
+ this.slides = Array.from(document.querySelectorAll('.slide'));
|
|
|
+ this.stage = document.getElementById('deckStage');
|
|
|
+ this.current = 0;
|
|
|
+ this.buildDots();
|
|
|
+ this.setupStageScale();
|
|
|
+ this.setupKeyboardNav();
|
|
|
+ this.setupTouchNav();
|
|
|
+ this.setupWheelNav();
|
|
|
+ this.showSlide(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* --- Scale the 1920x1080 stage uniformly into the window.
|
|
|
+ Letterboxes / pillarboxes; never reflows content. --- */
|
|
|
+ setupStageScale(){
|
|
|
+ const scale = () => {
|
|
|
+ const f = Math.min(window.innerWidth/1920, window.innerHeight/1080);
|
|
|
+ const x = (window.innerWidth - 1920*f)/2;
|
|
|
+ const y = (window.innerHeight - 1080*f)/2;
|
|
|
+ this.stage.style.transform = `translate(${x}px, ${y}px) scale(${f})`;
|
|
|
+ };
|
|
|
+ scale();
|
|
|
+ window.addEventListener('resize', scale);
|
|
|
+ }
|
|
|
+
|
|
|
+ buildDots(){
|
|
|
+ const wrap = document.getElementById('dots');
|
|
|
+ document.getElementById('tot').textContent = this.slides.length;
|
|
|
+ this.slides.forEach((_, i) => {
|
|
|
+ const b = document.createElement('button');
|
|
|
+ b.className = 'dot';
|
|
|
+ b.setAttribute('aria-label', 'Go to slide ' + (i+1));
|
|
|
+ b.addEventListener('click', () => this.showSlide(i));
|
|
|
+ wrap.appendChild(b);
|
|
|
+ });
|
|
|
+ this.dots = Array.from(wrap.children);
|
|
|
+ }
|
|
|
+
|
|
|
+ setupKeyboardNav(){
|
|
|
+ document.addEventListener('keydown', e => {
|
|
|
+ // Never hijack keys while the user is editing text
|
|
|
+ if (e.target.getAttribute && e.target.getAttribute('contenteditable') === 'true') return;
|
|
|
+ switch(e.key){
|
|
|
+ case 'ArrowRight': case 'ArrowDown': case ' ': case 'PageDown':
|
|
|
+ e.preventDefault(); this.next(); break;
|
|
|
+ case 'ArrowLeft': case 'ArrowUp': case 'PageUp':
|
|
|
+ e.preventDefault(); this.prev(); break;
|
|
|
+ case 'Home': e.preventDefault(); this.showSlide(0); break;
|
|
|
+ case 'End': e.preventDefault(); this.showSlide(this.slides.length-1); break;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ setupTouchNav(){
|
|
|
+ let sx = 0, sy = 0;
|
|
|
+ document.addEventListener('touchstart', e => {
|
|
|
+ sx = e.changedTouches[0].clientX; sy = e.changedTouches[0].clientY;
|
|
|
+ }, {passive:true});
|
|
|
+ document.addEventListener('touchend', e => {
|
|
|
+ const dx = e.changedTouches[0].clientX - sx;
|
|
|
+ const dy = e.changedTouches[0].clientY - sy;
|
|
|
+ if (Math.abs(dx) > 60 && Math.abs(dx) > Math.abs(dy)) {
|
|
|
+ dx < 0 ? this.next() : this.prev();
|
|
|
+ }
|
|
|
+ }, {passive:true});
|
|
|
+ }
|
|
|
+
|
|
|
+ setupWheelNav(){
|
|
|
+ let lock = false;
|
|
|
+ document.addEventListener('wheel', e => {
|
|
|
+ if (lock || document.body.classList.contains('editing')) return;
|
|
|
+ if (Math.abs(e.deltaY) < 24) return;
|
|
|
+ lock = true;
|
|
|
+ e.deltaY > 0 ? this.next() : this.prev();
|
|
|
+ setTimeout(() => lock = false, 700);
|
|
|
+ }, {passive:true});
|
|
|
+ }
|
|
|
+
|
|
|
+ next(){ this.showSlide(this.current + 1); }
|
|
|
+ prev(){ this.showSlide(this.current - 1); }
|
|
|
+
|
|
|
+ showSlide(i){
|
|
|
+ this.current = Math.max(0, Math.min(i, this.slides.length - 1));
|
|
|
+ this.slides.forEach((s, n) => {
|
|
|
+ const on = n === this.current;
|
|
|
+ s.classList.toggle('active', on);
|
|
|
+ s.classList.toggle('visible', on);
|
|
|
+ });
|
|
|
+ this.dots.forEach((d, n) => d.classList.toggle('on', n === this.current));
|
|
|
+ document.getElementById('cur').textContent = this.current + 1;
|
|
|
+ document.getElementById('progress').style.width =
|
|
|
+ ((this.current + 1) / this.slides.length * 100) + '%';
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* ===========================================
|
|
|
+ INLINE TEXT EDITOR
|
|
|
+ Press E or use the top-left hotzone. Edits persist
|
|
|
+ to localStorage; Ctrl+S downloads the edited file.
|
|
|
+ =========================================== */
|
|
|
+class InlineEditor {
|
|
|
+ constructor(deck){
|
|
|
+ this.deck = deck;
|
|
|
+ this.isActive = false;
|
|
|
+ // Every text-bearing element that is safe to edit
|
|
|
+ this.targets = Array.from(document.querySelectorAll(
|
|
|
+ '.slide h1, .slide h2, .slide h3, .slide p, .slide .ttl, .slide .det, ' +
|
|
|
+ '.slide .yr, .slide .nm, .slide .v, .slide .k, .slide .t, .slide .l, ' +
|
|
|
+ '.slide .kicker span:last-child, .slide .t-tag, .slide .railtext span, ' +
|
|
|
+ '.slide .kv, .slide .cap'
|
|
|
+ ));
|
|
|
+ this.restore();
|
|
|
+ this.bind();
|
|
|
+ }
|
|
|
+
|
|
|
+ bind(){
|
|
|
+ const toggle = document.getElementById('editToggle');
|
|
|
+ const hotzone = document.querySelector('.edit-hotzone');
|
|
|
+ let hideTimer = null;
|
|
|
+
|
|
|
+ // JS-driven hover with a grace period. A CSS `~` sibling
|
|
|
+ // selector fails here because pointer-events breaks the chain.
|
|
|
+ const show = () => { clearTimeout(hideTimer); toggle.classList.add('show'); };
|
|
|
+ const hide = () => {
|
|
|
+ hideTimer = setTimeout(() => {
|
|
|
+ if (!this.isActive) toggle.classList.remove('show');
|
|
|
+ }, 400);
|
|
|
+ };
|
|
|
+ hotzone.addEventListener('mouseenter', show);
|
|
|
+ hotzone.addEventListener('mouseleave', hide);
|
|
|
+ toggle.addEventListener('mouseenter', show);
|
|
|
+ toggle.addEventListener('mouseleave', hide);
|
|
|
+ hotzone.addEventListener('click', () => this.toggle());
|
|
|
+ toggle.addEventListener('click', () => this.toggle());
|
|
|
+
|
|
|
+ document.addEventListener('keydown', e => {
|
|
|
+ const editingNow = e.target.getAttribute &&
|
|
|
+ e.target.getAttribute('contenteditable') === 'true';
|
|
|
+ if ((e.key === 'e' || e.key === 'E') && !editingNow) { this.toggle(); }
|
|
|
+ if (e.key === 'Escape' && this.isActive) { this.toggle(); }
|
|
|
+ if ((e.ctrlKey || e.metaKey) && e.key === 's' && this.isActive) {
|
|
|
+ e.preventDefault(); this.download();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ toggle(){
|
|
|
+ this.isActive = !this.isActive;
|
|
|
+ document.body.classList.toggle('editing', this.isActive);
|
|
|
+ document.getElementById('editToggle').classList.toggle('active', this.isActive);
|
|
|
+ this.targets.forEach((el, i) => {
|
|
|
+ if (this.isActive){
|
|
|
+ el.setAttribute('contenteditable', 'true');
|
|
|
+ el.dataset.editKey = 'fintech-' + i;
|
|
|
+ el.addEventListener('input', this.persist);
|
|
|
+ } else {
|
|
|
+ el.removeAttribute('contenteditable');
|
|
|
+ el.removeEventListener('input', this.persist);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ persist(){
|
|
|
+ const store = JSON.parse(localStorage.getItem('fintechDeckEdits') || '{}');
|
|
|
+ store[this.dataset.editKey] = this.innerHTML;
|
|
|
+ localStorage.setItem('fintechDeckEdits', JSON.stringify(store));
|
|
|
+ }
|
|
|
+
|
|
|
+ restore(){
|
|
|
+ const store = JSON.parse(localStorage.getItem('fintechDeckEdits') || '{}');
|
|
|
+ this.targets.forEach((el, i) => {
|
|
|
+ const saved = store['fintech-' + i];
|
|
|
+ if (saved !== undefined) el.innerHTML = saved;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // Save a copy of the edited deck to disk
|
|
|
+ download(){
|
|
|
+ const clone = document.documentElement.cloneNode(true);
|
|
|
+ clone.querySelectorAll('[contenteditable]').forEach(n => {
|
|
|
+ n.removeAttribute('contenteditable');
|
|
|
+ n.removeAttribute('data-edit-key');
|
|
|
+ });
|
|
|
+ const blob = new Blob(['<!DOCTYPE html>\n' + clone.outerHTML], {type:'text/html'});
|
|
|
+ const a = document.createElement('a');
|
|
|
+ a.href = URL.createObjectURL(blob);
|
|
|
+ a.download = 'fintech-2030-deck.html';
|
|
|
+ a.click();
|
|
|
+ URL.revokeObjectURL(a.href);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const deck = new SlidePresentation();
|
|
|
+const editor = new InlineEditor(deck);
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|
