@yz-social/civildefense.io 4.5.29 → 5.0.3

package/index.js

@@ -1,4 +1,5 @@
 export { P2PWebNetwork } from "./public/javascripts/p2pWebNetwork.js";
+export { dht } from './public/javascripts/protocol.js';
 export { topicRegion, agentTopic, alertTopic, canonicalTag } from "./public/javascripts/versions.js";
 export { getContainingCells } from "./public/javascripts/s2.js";
 export { location } from "./server/getLocation.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yz-social/civildefense.io",
   "description": "Browser app to safely share live sightings on a map.",
-  "version": "4.5.29",
+  "version": "5.0.3",
   "keywords": [
     "map",
     "browser",
@@ -20,7 +20,7 @@
     ".": "./index.js"
   },
   "dependencies": {
-    "@axona/protocol": "github:axona-net/axona-protocol#semver:^4.62.2",
+    "@axona/protocol": "github:axona-net/axona-protocol#semver:^4.84.0",
     "cors": "^2.8.6",
     "express": "^4.22.1",
     "leaflet": "^1.9.4",
@@ -28,8 +28,10 @@
     "morgan": "^1.10.1",
     "node-datachannel": "^0.32.3",
     "pica": "^9.0.1",
+    "redis": "^6.2.1",
     "s2js": "^1.44.0",
     "uuid": "^14.0.0",
+    "web-push": "^3.6.7",
     "ws": "^8.21.3",
     "yargs": "^18.0.0"
   },

package/public/about/en.html

@@ -16,10 +16,10 @@
 <header class="hero">
   <div class="hero-inner">
     <img class="hero-logo" src="civil-defense.png" alt="Civil Defense Logo">
-    <h1>The Civil Defense <span>App</span></h1>
-  <!--   <div class="hero-divider"></div> -->
-  <!--   <p class="hero-tagline">Realtime crowdmapping that is resistant to tracking, censorship, and takedown</p> -->
+    <h1>The Civil Defense <a href="/" target="civildefense"><span>App</span></a></h1>
   </div>
+
+
   <div class="language-selector">
     <label for="language">Language:</label>
     <select id="language" name="language" onchange="location = this.value;">
@@ -42,7 +42,7 @@
         </div>
 
         <div class="carousel-slide">
-          <a href="/?tags=%F0%9F%A9%B7%20community%20%20DEMO,%F0%9F%91%81%EF%B8%8F%20observer%20DEMO,%F0%9F%A7%B0%20utility%20DEMO&lat=44.942473404432015&lng=-93.26251878766926&z=14" target="civildefense"><img src="streets-of-minneapolis.jpg" alt="Map view showing alert markers scattered across a neighborhood"></a>
+          <a href="/?tags=%F0%9F%A9%B7%20community%20DEMO,%F0%9F%91%81%EF%B8%8F%20observer%20DEMO,%F0%9F%A7%B0%20utility%20DEMO&lat=44.942473404432015&lng=-93.26251878766926&z=14" target="civildefense"><img src="streets-of-minneapolis.jpg" alt="Map view showing alert markers scattered across a neighborhood"></a>
           <div class="carousel-caption">Like Twitter, you create the topics.<br>But you only get alerts based on your current map.<br>Like Snapchat, alerts fade away after 24 hours.</div>
         </div>
 
@@ -54,6 +54,14 @@
 	  </div>
         </div>
 
+        <div class="carousel-slide">
+          <a href="/?tags=%F0%9F%94%A5%20fire,%F0%9F%86%98%20help&lat=48.15529671483125&lng=31.630317514459872&z=6" target="civildefense"><img src="ukraine-fires.jpeg" alt="Map of Ukraine with NASA FIRMS data"></a>
+          <div class="carousel-caption">
+	    <span>Civil Defense can integrate massive amounts of authoritative and crowd-reported data. Here people can report and discuss fires alongside the last 24 hours of NASA satellite data on wildfires, polution fires, and war.</span>
+	    <a href="/?tags=%F0%9F%94%A5%20fire,%F0%9F%86%98%20help&lat=48.15529671483125&lng=31.630317514459872&z=6" target="civildefense">Show me!</a>
+	  </div>
+        </div>
+
         <div class="carousel-slide">
           <a href="/?tags=%F0%9F%8E%BC%20classical,%F0%9F%8E%A7%20edm,%F0%9F%8E%A4%20hiphop,%F0%9F%8E%99%EF%B8%8F%20news,%F0%9F%8E%B5%20pop&lat=47.51951505778901&lng=1.6779639902073742&z=6" target="civildefense"><img src="radio-europe.jpg" alt="Map of Western Europe with playable streaming radio station markers"></a>
           <div class="carousel-caption">
@@ -90,66 +98,100 @@
 <!-- ── CONTENT ───────────────────────────────────────────────── -->
 <main class="content-wrap">
 
-  <h1>What You Do With It</h1>
+  <h1 id="do">What You Do With It</h1>
 
   <ul>
-    <li>Warn others of danger by tapping the map.</li>
-    <li>Add comments, photos, video, or other attachments.</li>
+    <li>Warn others of danger by tapping the map, creating an alert for others to see.</li>
+    <li>Add comments, photos, video, or other attachments by tapping on an alert.</li>
     <li>Get notified of new alerts near you or on your current map.</li>
     <li>Share to social media, text, or email.</li>
-    <li>Discuss an alert by secure video conference. (Coming this Fall.)</li>
+    <!-- <li>Discuss an alert by secure video conference. (Coming this Fall.)</li> -->
     <!-- <li>Alerts disappear after 24 hours—this is not an archive or long-term storage system. (This Winter, users will be able to download tamper-evident reports for use in other systems.)</li> -->
   </ul>
 
+  <p>
   <a href="/?tags=%F0%9F%8E%B8%20classic%20rock,%F0%9F%8E%BC%20classical,%F0%9F%A4%A0%20country,%F0%9F%8E%B7%20jazz,%F0%9F%8E%99%EF%B8%8F%20news,%F0%9F%8E%B5%20pop&z=5&lang=en" class="launch-btn" target="civildefense">
     <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
     Try it!
   </a>
+  </p>
+
+  <h2 id="topics">Topics</h2>
+
+  <p>Control what topics are shown on the map by simply touching the topic labels to toggle them on and off.</p>
+
+  <div class="centered">
+    <a href="/?tags=%F0%9F%9A%82%20train&highlight=%5Blabel%3D%22%F0%9F%9A%82%20train%22%5D" target="civildefense"><img src="train.png" alt="train topic button"></a>
+  </div>
+
+  <p>You can add or create your own by typing them into the "add topic" box. If your text begins with an emoji, that will be used as the marker in the map.</p>
+
+  <div class="centered">
+    <a href="/?highlight=.newtag" target="civildefense"><img src="add-topic.png" alt="add topic box with autocomplete"></a>
+  </div>
+
+  <p>The red "radio button" next to a topic name indicates that it will be the initial topic for a new alert you create by touching the map. You can also change the topic of an alert you create by touching the topic name in the alert-conversation popup.</p>
+
+  <div class="centered">
+    <a href="/?tags=%F0%9F%9A%82%20train&highlight=%5Blabel%3D%22%F0%9F%9A%82%20train%22%5D%20md-icon-button" target="civildefense"><img src="train-radio-button.png" alt="train topic radio button"></a>
+  </div>
+
+  <h2 id="sharing">Sharing</h2>
+
+  <p>Every alert you make will be immediately visible to anyone with the app who is looking at that point on the map. Every reply you make will be immediately shared with anyone looking at the same alert.</p>
+  <p>You can use the share button to pass a link and message to those that may not yet have the app. The button appears on the map, at the top of an alert-conversation display, and next to each reply, and it shares whatever the button appears with.</p>
+
+  <div class="centered">
+    <a href="/?highlight=%23share" target="civildefense"><img class="button-img" src="../images/share.svg" alt="share"></a>
+  </div>
+
+  <h2 id="options">Options</h2>
+
+  <p>The app's "<span class="cd">CD</span>" button gives you control over <a href="notification.html">notifications</a>, <a href="identity.html">how you appear to others</a>, and <a href="pwa.html">updates</a>.</p>
+
+  <div class="hero-inner">
+    <a href="/?highlight=%23aboutButton" target="civildefense"><img class="hero-logo" src="civil-defense.png" alt="Civil Defense Logo"></a>
+  </div>
 
   <!-- <hr class="rule"> -->
 
-  <h1>Broadcast Safely</h1>
+  <h1 id="broadcast">Broadcast Safely</h1>
 
-  <h2>Resist Tracking</h2>
+  <h2 id="tracking">Resist Tracking</h2>
   <ul>
     <li>You cannot be identified as a person because there is no login, sign-up, or accounts. No phone number or email is used. There is no app store logging downloads. Users can choose to let others recognize them over multiple interactions — without divulging their actual identity.</li>
-    <li>It is extremely difficult to identify your IP address or network patterns, because alerts are distributed phone-to-phone over a peer-to-peer network.</li>
-    <li>Notifications are sent directly through the foreground app on your phone, without going through Apple or Google's messaging service. (Backgrounded app notifications available this Winter.)</li>
-    <li>Each alert disappears everywhere on the network after 24 hours. There are no collected records of messages, comments, or requested topics, and this is not an archive or long-term storage system.</li>
+    <li>It is extremely difficult to identify your IP address or network patterns, because alerts are distributed phone-to-phone over a peer-to-peer network.<a href="#p2p"><sup>1</sup></a></li>
+    <li>Messages are signed by the sender, sent directly through the network, or through Apple or Google's messaging service without identifying the app, topic, sender, or contents.</li>
+    <li>Each alert disappears everywhere on the network after 24 hours. There are no collected records of messages, comments, or requested topics<a href="#p2p"><sup>1</sup></a>, and this is not an archive or long-term storage system.</li>
   </ul>
 
-  <h2>Resist Censorship</h2>
+  <h2 id="censorship">Resist Censorship</h2>
   <ul>
     <li>No user can be censored because there are no accounts. No one can steal your account information because there isn't any.</li>
-    <li>No content can be censored, there is no central organization who controls the network or has power to alter content.</li>
+    <li>No content can be censored, there is no central organization who controls the network or has power to alter content.<a href="#p2p"><sup>1</sup></a></li>
   </ul>
 
-  <h2>Resist Takedown</h2>
+  <h2 id="takedown">Resist Takedown</h2>
   <ul>
     <li>No app store can block Civil Defense — the app is just a web page.</li>
     <li>Taking down web servers or domain names cannot block access for those who already have it, because the app caches everything it needs on first use. The <a href="https://github.com/yz-social/civildefense.io" target="yz.other" rel="noopener">open-source code</a> is available so anyone can host an alternative mirror.</li>
-    <li>There is no back-end server or data center to take down. All alert data is entirely peer-to-peer. All mirrors share this network: a post on <a href="https://civildefense.io" target="civildefense">civildefense.io</a> appears on the mirror at <a href="https://ki1r0y.com" target="ki1r0y" rel="noopener">ki1r0y.com</a> and vice versa.</li>
-    <li>Blocking network traffic is extremely difficult, because the low-level data is identical to video conferencing traffic.</li>
-    <li>Civil Defense is highly resistant to Denial of Service attacks. However, it does require a working Internet, and does not by itself offer any protection against a complete Internet shutdown.</li>
+    <li>There is no back-end server or data center to take down. All alert data is entirely peer-to-peer. All mirrors share this network: a post on <a href="https://civildefense.io" target="civildefense">civildefense.io</a> appears on the mirror at <a href="https://ki1r0y.com" target="ki1r0y" rel="noopener">ki1r0y.com</a> and vice versa.<a href="#p2p"><sup>1</sup></a></li>
+    <li>Blocking network traffic is extremely difficult, because the low-level data is identical to video conferencing traffic.<a href="#p2p"><sup>1</sup></a></li>
+    <li>Civil Defense is highly resistant to Denial of Service attacks.<a href="#p2p"><sup>1</sup></a> However, it does require a working Internet, and does not by itself offer any protection against a complete Internet shutdown.</li>
   </ul>
   <!-- <hr class="rule"> -->
 
-  <h1>The Bigger Picture</h1>
-  <p>The Civil Defense runs on the <a href="https://github.com/axona-net/axona-protocol" target="yz.other" rel="noopener">Axona network</a>. Both are free and open source.</p>
+  <h1 id="more">The Bigger Picture</h1>
+  <p>The Civil Defense runs on the <a href="https://github.com/axona-net/axona-protocol" target="yz.other" rel="noopener">Axona network</a><a href="#p2p"><sup>1</sup></a>. Both are free and open source.</p>
   <p>Axona is a modern descendant of the old <a href="https://en.wikipedia.org/wiki/Peer-to-peer" target="yz.other" rel="noopener">peer-to-peer networks</a> such as <a href="https://en.wikipedia.org/wiki/Napster">Napster</a>. It has a unique self-healing routing mechanism that uses neuron learning techniques to find the best way to distribute alerts. It is analogous to <a href="https://en.wikipedia.org/wiki/Tor_(network)" target="yz.other" rel="noopener">TOR</a> (The Onion Router), but designed from the ground up to run in mobile and desktop browsers.</p>
   <p>We are also developing a comprehensive quantum-ready cryptography system that will add private-groups for Civil Defense and any software on the network. We believe there are many applications where developers, users, and the public all benefit from open software and secure, decentralized networks — without app stores, servers, or data centers. Beyond Civil Defense, we are also developing large-scale <a href="https://en.wikipedia.org/wiki/Distributed_computing" target="yz.other" rel="noopener">multiuser collaboration</a> and <a href="https://poverty-action.org/inclusive-instant-payment-systems-evidence-based-approach-design-impact" target="yz.other" rel="noopener">Inclusive Instant Payment Systems</a>.</p>
 
+  <hr class="rule">
+  <b id="p2p">1</b>: Coming in Fall, 2026
+  <hr class="rule">
 
 <div class="centered">
-  <img src="serving-you.jpg" alt="Civil Defense Week poster - Serving you in time of emergency">
-</div>
-
-<div class="centered">
-  <img src="prevail.jpg" alt="Cold-War Civil Defense poster - Prepare, Protect, Prevail">
-</div>
-
-<div class="centered">
-  <img src="nazis.png" alt="WWII-style poster exhorting the public to use Civil Defense in case of Nazi attack.">
+  <img src="posters.jpeg" alt="Civil Defense posters from the 1950s">
 </div>
 
 </main>

package/public/about/identity.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CivilDefense: Identity</title>
+  <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=Barlow+Condensed:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <header class="hero">
+    <div class="hero-inner">
+      <img class="hero-logo" src="civil-defense.png" alt="Civil Defense Logo">
+      <h1>The <a href="index.html"><span class="about">Civil Defense</span></a> <a href="/" target="civildefense"><span>App</span></a></h1>
+    </div>
+  </header>
+  <main class="content-wrap">
+    <h1>Identity without Accounts</h1>
+    <p>There is no signup to use CivilDefense, and no phone number or email is asked for. Instead, each browser or <a href="pwa.html">installation</a> automatically creates a cryptographically secured random identity, and maintains it until you <a href="pwa.html#removal">remove</a> it.</p>
+
+    <h2>How Others See You</h2>
+
+    <p>When you create or reply to an <a href="index.html#do">alert</a>, the posting will be shown as "anonymous" with an automatically generated unique image.</p>
+    <p>If you like, you can change what will be shown for either of these by touching the "<span class="cd">CD</span>" button and suppling a different "handle" text or "avatar" image. The handle and avatar are how you choose to be recognized, do not have to be unique, and are shared with everyone.</p>
+
+    <div class="hero-inner">
+      <a href="/?highlight=%23aboutButton" target="civildefense"><img class="hero-logo" src="civil-defense.png" alt="Civil Defense Logo"></a>
+    </div>
+
+    <h2>How You See Others</h2>
+
+    <p>You may find that you want to reliably recognize some contributors over time, even if their chosen handle and avatar are not unique, or if they change their handle or avatar between postings. You can do this by touching <i>their</i> avatar image, and choosing a handle or avatar by which you will recognize them. This choice is never seen by anyone else, so feel free to label them however you need.</p>
+
+    <hr class="rule">
+
+    <div class="centered">
+      <img src="prevail.jpg" alt="Cold-War Civil Defense poster - Prepare, Protect, Prevail">
+    </div>
+
+  </main>
+<footer>
+  <p><a href="/?lang=en" target="civildefense">civildefense.io</a> &mdash; Safe and free crowdmapping for vulnerable populations.</p>
+</footer>
+  
+</body>
+</html>

package/public/about/index.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <script>
-      location = `${navigator.language.split('-')[0].toLowerCase()}.html`;
+      location = `${navigator.language.split('-')[0].toLowerCase()}.html${location.hash}`;
     </script>
   </head>
 </html>  

package/public/about/notification.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CivilDefense: Notifications</title>
+  <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=Barlow+Condensed:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <header class="hero">
+    <div class="hero-inner">
+      <img class="hero-logo" src="civil-defense.png" alt="Civil Defense Logo">
+      <h1>The <a href="index.html"><span class="about">Civil Defense</span></a> <a href="/" target="civildefense"><span>App</span></a></h1>
+    </div>
+  </header>
+
+  <main class="content-wrap">
+
+    <h1>Notifications without a Feed</h1>
+
+    <p>When someone else drops an Alert onto the portion of the map you are watching, for a <a href="index.html#topic">topic</a> you are currently displaying, you will see it right away. You can also ask the app to send you a system notification. Touching the notification will open the alert in the app, so that you can see the conversation about it.</p>
+
+    <p>You must specifically turn this feature on, using the app's "<span class="cd">CD</span>" button. The system will then ask you if you want to enable notifications.
+      <ul>
+	<li>If you say "yes", you can then turn notifications on and off from the same place in the app.</li>
+	<li>If you say "no", or if you later turn off notifications in the browser or system settings, you will have to re-enable it from the browser or system settings. Notifcations on <i>Apple mobile devices</i> are only available when Civil Defense is <a href="pwa.html">installed</a>.</li>
+    </ul></p>
+
+    <div class="hero-inner">
+      <a href="/?highlight=%23aboutButton" target="civildefense"><img class="hero-logo" src="civil-defense.png" alt="Civil Defense Logo"></a>
+    </div>
+
+    <p>If you enable notifications, you will also see them:
+      <ul>
+	<li>If someone else drops an alert near your current position for a topic you are watching, even if you are looking someplace else on the map.</li>
+	<li>If someone replies to an alert that you have opened within the current map.</li>
+      </ul>
+    </p>
+
+    <h2>Privacy</h2>
+
+    <p>If the CivilDefense app is running, the notification is made entirely on the same device, without going through any other service.</p>
+    <p>However, mobile platforms can be quite aggressive about shutting down apps that you have opened, but which are not currently being displayed on the screen. In this case, the alert must be "pushed" (like a text message) in two steps.:
+      <ol>
+	<li>First, the CivilDefense network needs to send the message, just as it would if the app were running, but now through a "push service".
+	  <ul>
+	    <li>Currently, this is from civildefense.io.</li>
+	    <li>In the <a href="index.html#broadcast">next major version</a>, this will be from the peer-to-peer network itself.
+	  </ul>
+	  Either way, the network encrypts the message and sends it to the push service. It is not identified to the push service as being civildefense.io, but rather with a unique key created just of your most recent Civil Defense app session.
+	</li>
+	<li>Second, the push server - either Apple or Google - pushes the message to your device. They know that you got a push message, but not the application, topic, sender, or contents.</li>
+      </ol>
+    </p>
+
+    <hr class="rule">
+
+    <div class="centered">
+      <img src="serving-you.jpg" alt="Civil Defense Week poster - Serving you in time of emergency">
+    </div>
+
+  </main>
+<footer>
+  <p><a href="/?lang=en" target="civildefense">civildefense.io</a> &mdash; Safe and free crowdmapping for vulnerable populations.</p>
+</footer>
+  
+</body>
+</html>

package/public/about/pwa.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CivilDefense: Install, Update, Remove</title>
+  <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=Barlow+Condensed:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <header class="hero">
+    <div class="hero-inner">
+      <img class="hero-logo" src="civil-defense.png" alt="Civil Defense Logo">
+      <h1>The <a href="index.html"><span class="about">Civil Defense</span></a> <a href="/" target="civildefense"><span>App</span></a></h1>
+    </div>
+  </header>
+
+    <main class="content-wrap">
+    <h1>A Real App Without an App Store</h1>
+    <p><a href="index.html">CivilDefense</a> is a full-featured <a href="https://en.wikipedia.org/wiki/Progressive_web_app">app in a web page</a>. However, it does not depend on any app store that can block or remove it, or track who downloaded it. You can run it directly from the <a href="/" target="civildefense">link</a>, without any installation or signup. You can also choose to install it.</p>
+
+    <h2 id="installation">Installation</h2>
+    <p>Installing the app makes it easy to run or <a href="#removal">remove</a> it from the home screen or dock a hurry.</p>
+    <p>In addition, <i>Apple mobile devices</i> allow <a href="notification.html">notifications</a> <i>only</i> from installed apps.</p>
+    <p>Install directly from the <a href="/" target="civildefense">app page</a> with one of these browser buttons. Note: Browser button layout changes faster than the AIs get updated!
+      <ul>
+	<li><a href="https://www.google.com/search?q=mobile+add+to+home+screen">"Add to Home Screen"</a> on <i>mobile devices</i>. Note that this button will not be visible when running inside of another app.</li>
+	<li><a href="https://www.google.com/search?q=safari+add+to+doc">"Add to Dock"</a> on <i>desktop Safari</i>.</li>
+	<li><a href="https://www.google.com/search?q=desktop+browser+install+app">"Install App"</a> on <i>other desktop browsers</i>.</li>
+      </ul>
+    </p>
+
+    <h2 id="updates">Updates</h2>
+    <p>Regardless of whether it is <a href="#installation">installed</a> or run from the browser, the <a href="/" target="civildefense">CivilDefense</a> app automatically keeps a local copy of itself. It periodically checks the original site for new versions, but it does not update without asking you. (You might be in the middle of something or have some other reason to stay on the old version.) The app's "<span class="cd">CD</span>" button also has a "check for updates" button to check immediately.</p>
+
+    <div class="hero-inner">
+      <a href="/?highlight=%23aboutButton" target="civildefense"><img class="hero-logo" src="civil-defense.png" alt="Civil Defense Logo"></a>
+    </div>
+
+    <h2 id="removal">Removal</h2>
+    <p>There are no <a href="identity.html">accounts</a>, no database of user activity and preferences, and no data centers.
+      Instead, the list of your current active topics and other data are kept only on your own device.
+      No one can see (or steal, or sell) this information without physical access to your device.</p>
+    <p>To remove this local data on an <i><a href="#installation">installed app</a></i>, simply delete or uninstall the app. The operating system will delete all the local data</p>
+    <p>To remove it from the <i>browser</i>, use the "Wipe all CivilDefense data" link under the app's "<span class="cd">CD</span>" button. On mobile Safari, Apple keeps the browser data separate from the installed-app data, and each must be removed separately. Other platforms share the data between app and browser.</p>
+
+    <hr class="rule">
+
+    <div class="centered">
+      <img src="nazis.png" alt="WWII-style poster exhorting the public to use Civil Defense in case of Nazi attack.">
+    </div>
+    
+  </main>
+<footer>
+  <p><a href="/?lang=en" target="civildefense">civildefense.io</a> &mdash; Safe and free crowdmapping for vulnerable populations.</p>
+</footer>
+  
+</body>
+</html>

package/public/about/style.css

@@ -70,6 +70,12 @@ a:hover { color: var(--red); }
     max-width: 680px;
     margin: 0 auto;
 }
+.button-img { width: 80px; }
+a > img {
+    box-shadow: 0 4px 28px rgba(255, 90, 0, 0.45);
+    border-radius: 18px;
+    border: solid thick var(--red);
+}
 .hero-logo {
     width: 80px;
     height: 80px;
@@ -88,6 +94,11 @@ a:hover { color: var(--red); }
     margin-bottom: 0.75rem;
 }
 .hero h1 span { color: var(--red-light); }
+.hero h1 span.about { color: var(--white); }
+.cd {
+    color: var(--red);
+    font-weight: 700;
+}
 .hero-tagline {
     font-size: clamp(0.95rem, 2.5vw, 1.1rem);
     color: rgba(255,255,255,0.75);
@@ -152,13 +163,15 @@ a:hover { color: var(--red); }
     font-size: 18px;
     line-height: 1.5;
     text-align: center;
-    border-top: 2px solid var(--red);
     min-height: 3.4rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }
+video + .carousel-caption {
+    border-top: 2px solid var(--red);
+}
 /* Prev / Next buttons */
 .carousel-btn {
     position: absolute;
@@ -245,7 +258,7 @@ a:hover { color: var(--red); }
     margin-bottom: 0.9rem;
     color: var(--body-text);
 }
-.content-wrap ul {
+.content-wrap ul, .content-wrap ol {
     margin: 0.4rem 0 1rem 1.2rem;
 }
 .content-wrap li {

package/public/about/template.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>The Civil Defense App</title>
+  <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=Barlow+Condensed:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <header class="hero">
+    <div class="hero-inner">
+      <img class="hero-logo" src="civil-defense.png" alt="Civil Defense Logo">
+      <h1>The Civil Defense <a href="index.html"><span>App</span></a></h1>
+    </div>
+  </header>
+  <main class="content-wrap">
+    <h1>Some Title</h1>
+    <p>Lorem ipsum</p>
+  </main>
+<footer>
+  <p><a href="/?lang=en" target="civildefense">civildefense.io</a> &mdash; Safe and free crowdmapping for vulnerable populations.</p>
+</footer>
+  
+</body>
+</html>

package/public/index.html

@@ -78,26 +78,31 @@
 
       <div id="aboutContainer" class="hidden">
 	<div class="display-content">
-          <h1>Civil Defense</h1>
+          <h1>
+	    <a id="learnMore" href="about/index.html" target="yz.sidebar"><md-icon class="material-icons">help</md-icon></a>
+	    <span id="titleLabel">Civil Defense</span><span id="titleHostname"></span>
+	  </h1>
           <ul>
             <li id="aboutReport"></li>
             <li id="aboutShared"></li>
             <li id="aboutFade"></li>
           </ul>
-          <p> <a id="learnMore" href="about/index.html" target="yz.sidebar">Learn More</a> </p>
-          <p>
-            <span id="aboutAnyone1"></span>
-            <a id="aboutAnyone2" href="https://github.com/YZ-social/Yz.social" target="yz.sidebar"></a>
-            <span id="aboutAnyone3"></span>
-          </p>
+          <p>  </p>
+          <!-- <p> -->
+          <!--   <span id="aboutAnyone1"></span> -->
+          <!--   <a id="aboutAnyone2" href="https://github.com/YZ-social/Yz.social" target="yz.sidebar"></a> -->
+          <!--   <span id="aboutAnyone3"></span> -->
+          <!-- </p> -->
 	  <hr>
 	  <div>
+	    <a id="learnNotification" href="about/notification.html" target="yz.sidebar"><md-icon class="material-icons">help</md-icon></a>
 	    <label>
 	      <md-checkbox id="showNotifications" touch-target="wrapper"></md-checkbox>
 	      <span id="showNotificationsLabel"></span>
 	    </label>
 	  </div>
 	  <div class="handle-avatar">
+	    <a id="learnIdentity" href="about/identity.html" target="yz.sidebar"><md-icon class="material-icons">help</md-icon></a>
 	    <md-outlined-text-field id="myHandle" placeholder="anonymous"></md-outlined-text-field>
 	    <md-outlined-icon-button id="myAvatar"></md-outlined-icon-button>
 	  </div>
@@ -107,12 +112,15 @@
             <md-elevated-button id="downloadUpdates" class="hidden"></md-elevated-button>
             <span id="updateStatus"></span>
           </div>
-	  <p><small>
+	  <p class="pwa">
+	    <a id="learnPWA" href="about/pwa.html" target="yz.sidebar"><md-icon class="material-icons">help</md-icon></a>
+	    <small>
 	      <label for="scriptChooser"> <span id="version">Version</span></label>
 	      <span id="appVersion"></span>,
 	      kernel: <span id="kernelVersion"></span>.
 	    </small>
-	    <small><a id="wipe" href="#"></a></small></p>
+	    <small><a id="wipe" href="#"></a></small>
+	  </p>
 	  <input id="scriptChooser" type="file" accept="text/javascript"></input>
 	</div>
       </div>