@yz-social/civildefense.io 4.4.1

package/public/about/style.css

@@ -0,0 +1,306 @@
+/* ── Tokens ─────────────────────────────────────────────── */
+:root {
+    --navy:      #1A3A8F;
+    --navy-dark: #112566;
+    --navy-mid:  #1E4BAD;
+    --red:       #C41230;
+    --red-light: #E8192C;
+    --white:     #FFFFFF;
+    --off-white: #F4F6FC;
+    --grey-light: #E2E8F5;
+    --grey-text: #5A6A8A;
+    --body-text: #1C2A45;
+    --font-display: 'Barlow Condensed', sans-serif;
+    --font-body:    'Inter', sans-serif;
+}
+
+/* ── Reset ──────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { scroll-behavior: smooth; }
+body {
+    font-family: var(--font-body);
+    font-size: 16px;
+    color: var(--body-text);
+    background: var(--off-white);
+    line-height: 1.65;
+}
+img { max-width: 100%; display: block; }
+a { color: var(--navy-mid); text-decoration: underline; }
+a:hover { color: var(--red); }
+
+/* ── Header / Hero ──────────────────────────────────────── */
+.hero {
+    background: var(--navy-dark);
+    position: relative;
+    overflow: hidden;
+    padding: 3rem 1.5rem 3.5rem;
+    text-align: center;
+}
+/* Diagonal alert stripe — the signature element */
+.hero::before {
+    content: '';
+    position: absolute;
+    top: -60px; left: -80px;
+    width: 320px; height: 320px;
+    background: var(--red);
+    opacity: 0.12;
+    transform: rotate(-30deg);
+    border-radius: 24px;
+    pointer-events: none;
+}
+.hero::after {
+    content: '';
+    position: absolute;
+    bottom: -80px; right: -60px;
+    width: 280px; height: 280px;
+    background: var(--red);
+    opacity: 0.09;
+    transform: rotate(-30deg);
+    border-radius: 24px;
+    pointer-events: none;
+}
+.language-selector {
+    position: absolute;
+    top: 5px;
+    right: 10px;
+}
+.hero-inner {
+    position: relative;
+    z-index: 1;
+    max-width: 680px;
+    margin: 0 auto;
+}
+.hero-logo {
+    width: 80px;
+    height: 80px;
+    margin: 0 auto 1.25rem;
+    border-radius: 50%;
+    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
+}
+.hero h1 {
+    font-family: var(--font-display);
+    font-weight: 800;
+    font-size: clamp(2.4rem, 8vw, 4rem);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--white);
+    line-height: 1;
+    margin-bottom: 0.75rem;
+}
+.hero h1 span { color: var(--red-light); }
+.hero-tagline {
+    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
+    color: rgba(255,255,255,0.75);
+    margin: 0 auto;
+}
+.hero-divider {
+    width: 64px;
+    height: 4px;
+    background: var(--red);
+    margin: 1.25rem auto 1.25rem;
+    border-radius: 2px;
+}
+
+/* ── Carousel ───────────────────────────────────────────── */
+.carousel-section {
+    background: var(--navy);
+    padding: 2.5rem 0 2rem;
+}
+.carousel-section h2 {
+    font-family: var(--font-display);
+    font-weight: 700;
+    font-size: clamp(1.3rem, 4vw, 1.7rem);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--white);
+    text-align: center;
+    margin-bottom: 1.5rem;
+}
+.carousel-wrap {
+    position: relative;
+    max-width: 760px;
+    margin: auto;
+    margin: 0 auto;
+    padding: 0 1rem;
+}
+.carousel-track-outer {
+    overflow: hidden;
+    border-radius: 10px;
+    box-shadow: 0 8px 40px rgba(0,0,0,0.45);
+}
+.carousel-track {
+    display: flex;
+    transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
+    will-change: transform;
+}
+.carousel-slide {
+    min-width: 100%;
+    position: relative;
+    background: #0e2060;
+}
+.carousel-slide img, .carousel-slide video {
+    width: 100%;
+    max-height: 70vh;
+    height: auto;
+    display: block;
+    object-fit: contain;
+}
+.carousel-caption {
+    background: rgba(10, 24, 70, 0.92);
+    color: rgba(255,255,255,0.88);
+    padding: 0.8rem 1.1rem;
+    font-size: 18px;
+    line-height: 1.5;
+    text-align: center;
+    border-top: 2px solid var(--red);
+    min-height: 3.4rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+/* Prev / Next buttons */
+.carousel-btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(calc(-50% - 1.5rem));
+    background: rgba(10, 24, 70, 0.82);
+    border: 2px solid var(--red);
+    color: var(--white);
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 1.2rem;
+    display: flex; align-items: center; justify-content: center;
+    z-index: 10;
+    transition: background 0.2s, transform 0.15s;
+    -webkit-tap-highlight-color: transparent;
+}
+.carousel-btn:hover { background: var(--red); transform: translateY(calc(-50% - 1.5rem)) scale(1.07); }
+.carousel-btn.prev { left: -4px; }
+.carousel-btn.next { right: -4px; }
+/* Dots */
+.carousel-dots {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-top: 1.1rem;
+}
+.dot {
+    width: 10px; height: 10px;
+    border-radius: 50%;
+    background: rgba(255,255,255,0.3);
+    border: none;
+    cursor: pointer;
+    transition: background 0.2s, transform 0.2s;
+    padding: 0;
+}
+.dot.active {
+    background: var(--red);
+    transform: scale(1.25);
+}
+
+/* ── Main content ───────────────────────────────────────── */
+.content-wrap {
+    max-width: 740px;
+    margin: 0 auto;
+    padding: 2.5rem 1.25rem 4rem;
+}
+
+/* Section headings */
+.content-wrap h1 {
+    font-family: var(--font-display);
+    font-weight: 800;
+    font-size: clamp(1.6rem, 5vw, 2.4rem);
+    letter-spacing: 0.03em;
+    text-transform: uppercase;
+    color: var(--navy-dark);
+    padding-top: 2.5rem;
+    padding-bottom: 0.3rem;
+    border-bottom: 3px solid var(--red);
+    margin-bottom: 1rem;
+}
+.content-wrap h2 {
+    font-family: var(--font-display);
+    font-weight: 700;
+    font-size: clamp(1.25rem, 4vw, 1.7rem);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--navy);
+    padding-top: 2rem;
+    margin-bottom: 0.75rem;
+}
+.content-wrap h3 {
+    font-family: var(--font-display);
+    font-weight: 600;
+    font-size: clamp(1rem, 3vw, 1.2rem);
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--red);
+    padding-top: 1.25rem;
+    margin-bottom: 0.4rem;
+}
+.content-wrap p {
+    margin-bottom: 0.9rem;
+    color: var(--body-text);
+}
+.content-wrap ul {
+    margin: 0.4rem 0 1rem 1.2rem;
+}
+.content-wrap li {
+    margin-bottom: 0.5rem;
+    color: var(--body-text);
+}
+
+/* Red rule between major sections */
+.rule {
+    border: none;
+    height: 2px;
+    background: linear-gradient(90deg, var(--red) 0%, rgba(196,18,48,0.15) 100%);
+    margin: 2.5rem 0;
+}
+
+.launch-btn {
+    display: block;
+    margin: 0 auto;
+    width: fit-content;
+    align-items: center;
+    gap: 10px;
+    background: #FF5A00;
+    color: #fff;
+    font-family: 'Rajdhani', sans-serif;
+    font-size: 1.1rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    padding: 14px 38px;
+    border-radius: 4px;
+    text-decoration: none;
+    box-shadow: 0 4px 28px rgba(255,90,0,0.45);
+    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
+}
+.launch-btn:hover {
+    background: #ff7020;
+    box-shadow: 0 6px 36px rgba(255,90,0,0.65);
+    transform: translateY(-2px);
+}
+.centered {
+    display: block;
+    margin: 0 auto;
+    width: fit-content;
+    padding-bottom: 20px;
+}
+/* ── Footer ─────────────────────────────────────────────── */
+footer {
+    background: var(--navy-dark);
+    color: rgba(255,255,255,0.5);
+    text-align: center;
+    font-size: 0.8rem;
+    padding: 1.5rem 1rem;
+}
+footer a { color: rgba(255,255,255,0.7); }
+
+/* ── Responsive tweaks ──────────────────────────────────── */
+<!-- @media (max-width: 520px) { -->
+				 <!--   .carousel-btn { display: none; } -->
+									 <!-- } -->

package/public/control-safe-rectangle.html

@@ -0,0 +1,40 @@
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <style>
+      html, body { /* eg: 393 x 641 on my phone */
+          padding: 0;
+          margin: 0;
+      }
+      /*
+	apple "compact" setting in portrait:
+	  top is below notch and top bar
+          bottom is through the middle of the overlayed control bars
+        apple "bottom" setting in portrait:
+          top is below notch and top bar
+          bottom is through lower third of overlayed control bars - probably same position
+        apple "top" setting in portrait:
+          top is blow address bar
+          bottom is at bezel, with control bars overlayed
+	apple landscape with "landscape tab bar" off.
+          full screen
+       */
+      .full {
+	  background: red;
+	  height: 100vh; /* vw = lvw = 852; dvw = svw = 641*/
+	  width: 100vw; /* vw = lvw = dvw = 393*/
+	  position: absolute;
+      }
+      .safe {
+	  background: green;
+	  height: calc(100dvh - env(safe-area-inset-bottom, 0));
+	  width: clac(100dvw - env(safe-area-inset-left, 0));
+      }
+    </style>
+  </head>
+  <body>
+    <div class="full">
+      <div class="safe"></div>
+    </div>
+  </body>
+</html>

package/public/images/qr-scan.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#0A2E7C" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="M8,21H4a1,1,0,0,1-1-1V16a1,1,0,0,0-2,0v4a3,3,0,0,0,3,3H8a1,1,0,0,0,0-2Zm14-6a1,1,0,0,0-1,1v4a1,1,0,0,1-1,1H16a1,1,0,0,0,0,2h4a3,3,0,0,0,3-3V16A1,1,0,0,0,22,15ZM20,1H16a1,1,0,0,0,0,2h4a1,1,0,0,1,1,1V8a1,1,0,0,0,2,0V4A3,3,0,0,0,20,1ZM2,9A1,1,0,0,0,3,8V4A1,1,0,0,1,4,3H8A1,1,0,0,0,8,1H4A3,3,0,0,0,1,4V8A1,1,0,0,0,2,9Zm8-4H6A1,1,0,0,0,5,6v4a1,1,0,0,0,1,1h4a1,1,0,0,0,1-1V6A1,1,0,0,0,10,5ZM9,9H7V7H9Zm5,2h4a1,1,0,0,0,1-1V6a1,1,0,0,0-1-1H14a1,1,0,0,0-1,1v4A1,1,0,0,0,14,11Zm1-4h2V9H15Zm-5,6H6a1,1,0,0,0-1,1v4a1,1,0,0,0,1,1h4a1,1,0,0,0,1-1V14A1,1,0,0,0,10,13ZM9,17H7V15H9Zm5-1a1,1,0,0,0,1-1,1,1,0,0,0,0-2H14a1,1,0,0,0-1,1v1A1,1,0,0,0,14,16Zm4-3a1,1,0,0,0-1,1v3a1,1,0,0,0,0,2h1a1,1,0,0,0,1-1V14A1,1,0,0,0,18,13Zm-4,4a1,1,0,1,0,1,1A1,1,0,0,0,14,17Z"/></svg>

package/public/images/qr.svg

@@ -0,0 +1,155 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#0A2E7C" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<g>
+	<g>
+		<rect x="51.2" y="51.2" width="51.2" height="51.2"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M358.4,0v25.6h-25.6v25.6h25.6v102.4H384v25.6h-25.6v25.6H384h25.6v-51.2h76.8v25.6H512v-25.6V0H358.4z M486.4,128H384
+			V25.6h102.4V128z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="409.6" y="51.2" width="51.2" height="51.2"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="51.2" y="409.6" width="51.2" height="51.2"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="358.4" y="358.4" width="25.6" height="25.6"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="230.4" y="486.4" width="25.6" height="25.6"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="256" y="384" width="25.6" height="25.6"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="256" y="435.2" width="25.6" height="25.6"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="486.4" y="307.2" width="25.6" height="25.6"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect y="307.2" width="25.6" height="25.6"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect y="179.2" width="25.6" height="25.6"/>
+	</g>
+</g>
+<g>
+	<g>
+		<polygon points="281.6,25.6 281.6,51.2 230.4,51.2 230.4,76.8 307.2,76.8 307.2,51.2 307.2,25.6 		"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M486.4,204.8v25.6h-51.2V256h-76.8v-25.6h-25.6V256h-51.2v25.6h76.8v25.6h-51.2h-25.6v-25.6H256v25.6h-25.6v-25.6h-25.6
+			v25.6h-25.6v25.6h51.2v25.6H256v-25.6h51.2v25.6h-25.6V384h25.6v51.2h25.6v25.6h25.6v-25.6h76.8V384h25.6v-25.6h-25.6v-51.2H384
+			v-25.6h51.2v25.6h25.6v-25.6h25.6V256H512v-25.6v-25.6H486.4z M409.6,332.8v76.8h-76.8v-76.8H409.6z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<polygon points="332.8,153.6 307.2,153.6 307.2,179.2 281.6,179.2 281.6,204.8 281.6,230.4 307.2,230.4 307.2,204.8 332.8,204.8 
+			332.8,179.2 358.4,179.2 358.4,153.6 		"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="281.6" y="486.4" width="51.2" height="25.6"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="204.8" y="25.6" width="25.6" height="25.6"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="409.6" y="204.8" width="25.6" height="25.6"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="435.2" y="179.2" width="25.6" height="25.6"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="102.4" y="307.2" width="25.6" height="25.6"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M153.6,486.4V384h25.6v-25.6v-25.6h-25.6v25.6H76.8v-25.6H51.2H25.6v25.6H0V512h153.6h51.2v-25.6H153.6z M128,486.4H25.6
+			V384H128V486.4z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="153.6" y="153.6" width="25.6" height="25.6"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M179.2,0h-25.6H0v153.6h25.6v25.6h25.6v-25.6h25.6v25.6h25.6v-25.6h51.2v-51.2h25.6V76.8h-25.6V25.6h25.6h25.6V0H179.2z
+			 M128,128H25.6V25.6H128V128z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="307.2" y="76.8" width="25.6" height="25.6"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="256" width="25.6" height="25.6"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M307.2,153.6V128h-25.6v-25.6H256V128h-51.2v-25.6h-25.6V128v25.6h25.6v51.2H128v-25.6h-25.6v25.6H25.6v25.6h51.2V256H0
+			v25.6h76.8v25.6h25.6v-25.6H128v25.6h25.6v-25.6h51.2V256h-25.6v-25.6h25.6h25.6V256H256h25.6v-25.6H256v-25.6h-25.6v-51.2H307.2z
+			 M153.6,256h-51.2v-25.6h51.2V256z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<polygon points="230.4,409.6 230.4,384 230.4,358.4 204.8,358.4 204.8,384 179.2,384 179.2,409.6 204.8,409.6 204.8,435.2 
+			179.2,435.2 179.2,460.8 230.4,460.8 230.4,435.2 256,435.2 256,409.6 		"/>
+	</g>
+</g>
+<g>
+	<g>
+		<polygon points="460.8,460.8 460.8,435.2 435.2,435.2 435.2,460.8 358.4,460.8 358.4,486.4 409.6,486.4 409.6,512 435.2,512 
+			435.2,486.4 486.4,486.4 486.4,512 512,512 512,486.4 512,460.8 		"/>
+	</g>
+</g>
+<g>
+	<g>
+		<polygon points="486.4,358.4 486.4,384 460.8,384 460.8,409.6 512,409.6 512,384 512,358.4 		"/>
+	</g>
+</g>
+</svg>

package/public/images/recenter.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" fill="none" viewBox="0 0 128 128" id="recenter">
+  <path stroke="#0A2E7C" stroke-linecap="round" stroke-linejoin="round" stroke-width="7" d="M38 74L49 63.5 38 53M53.5 37.5L64 48.5 74.5 37.5M90 53L79 63.5 90 74M74.5 89.5L64 78.5 53.5 89.5"></path>
+  <path stroke="#0A2E7C" stroke-linecap="round" stroke-width="7" d="M44 64L16 64M63.5 43.5L63.5 15.5M84 63L112 63M64.5 83.5L64.5 111.5"></path>
+  <circle cx="64" cy="64" r="5" fill="#0A2E7C"></circle>
+</svg>

package/public/images/share.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#0A2E7C" width="800px" height="800px" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><path d="M30.3 13.7L25 8.4l-5.3 5.3-1.4-1.4L25 5.6l6.7 6.7z"/><path d="M24 7h2v21h-2z"/><path d="M35 40H15c-1.7 0-3-1.3-3-3V19c0-1.7 1.3-3 3-3h7v2h-7c-.6 0-1 .4-1 1v18c0 .6.4 1 1 1h20c.6 0 1-.4 1-1V19c0-.6-.4-1-1-1h-7v-2h7c1.7 0 3 1.3 3 3v18c0 1.7-1.3 3-3 3z"/></svg>