···11+# Atmosphere Account
22+33+Marketing site for **Atmosphere Account** — built with [Fresh](https://fresh.deno.dev/) and Deno.
44+55+## Prerequisites
66+77+- [Deno](https://docs.deno.com/runtime/getting_started/installation) (v2+)
88+99+## Development
1010+1111+```sh
1212+deno task dev
1313+```
1414+1515+Opens the Vite dev server with hot reload.
1616+1717+## Production build
1818+1919+```sh
2020+deno task build
2121+deno task start
2222+```
2323+2424+`start` serves the app from `_fresh/server.js` (created by `build`).
2525+2626+## Deploy (Deno Deploy)
2727+2828+1. Push this repository to GitHub (or GitLab).
2929+2. In [Deno Deploy](https://dash.deno.com/), create a project from the repo.
3030+3. Set **Root directory** to the repository root (this folder).
3131+4. **Build step:** `deno task build`
3232+5. **Run command:** `deno task start` (or `deno serve -A _fresh/server.js` per `deno.json`).
3333+3434+Adjust if your host uses different entrypoints.
3535+3636+## License
3737+3838+Open source — see project maintainers for the chosen license.
···11+export default function BlueskySection() {
22+ return (
33+ <section class="section reveal">
44+ <div class="container">
55+ <div class="text-center">
66+ <h2 class="text-section">Choose your provider.</h2>
77+ <div class="divider" />
88+ <p class="text-body mt-2" style={{ maxWidth: "640px", margin: "1rem auto 0" }}>
99+ Your Atmosphere account lives with a <strong>provider</strong> — a service
1010+ that stores your data and keeps it available across every app. That
1111+ provider might be an app you already use, or a host that only holds
1212+ accounts. You pick who hosts your account, and you can switch any time.
1313+ </p>
1414+ </div>
1515+1616+ <div class="provider-grid">
1717+ <div class="glass provider-card provider-card-featured">
1818+ <div class="provider-card-badge font-mono">Most popular</div>
1919+ <div class="provider-logo-row">
2020+ <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
2121+ <rect x="2" y="3" width="20" height="18" rx="2" />
2222+ <path d="M6 8h12M8 12h5M8 16h8" />
2323+ </svg>
2424+ <span class="provider-name font-mono">Apps</span>
2525+ </div>
2626+ <p class="text-body-sm">
2727+ Apps such as Bluesky{" "}
2828+ <a
2929+ href="https://bsky.app"
3030+ target="_blank"
3131+ rel="noopener noreferrer"
3232+ class="provider-bluesky-icon-link"
3333+ aria-label="Bluesky website"
3434+ >
3535+ <svg
3636+ class="provider-bluesky-icon"
3737+ width="18"
3838+ height="18"
3939+ viewBox="0 0 600 530"
4040+ fill="currentColor"
4141+ xmlns="http://www.w3.org/2000/svg"
4242+ aria-hidden="true"
4343+ >
4444+ <path d="M135.72 44.03C202.216 93.951 273.74 195.17 300 249.49C326.26 195.17 397.784 93.951 464.28 44.03C512.378 8.502 588 -22.418 588 69.85C588 90.97 576.42 192.07 570 213.89C548.2 284.29 472.94 303.23 405.91 292.28C521.44 315.16 549.46 397.65 489.46 480.13C377.23 634.08 316.03 475.75 302.29 436.08C300.83 431.89 300.16 429.94 300 429.94C299.84 429.94 299.17 431.89 297.71 436.08C283.97 475.76 222.77 634.08 110.54 480.13C50.54 397.65 78.56 315.16 194.09 292.28C127.06 303.23 51.8 284.29 30 213.89C23.58 192.07 12 90.97 12 69.85C12 -22.418 87.622 8.502 135.72 44.03Z" />
4545+ </svg>
4646+ </a>{" "}
4747+ are also account providers. When you sign up, they provide an account for
4848+ you and your data is hosted by them. Some apps are not account providers:
4949+ they are just apps, and you sign in with an account hosted somewhere
5050+ else. If you already use Bluesky, you have an Atmosphere-ready account
5151+ with no extra sign-up.
5252+ </p>
5353+ </div>
5454+5555+ <div class="glass provider-card">
5656+ <div class="provider-logo-row">
5757+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
5858+ <rect x="3" y="3" width="7" height="7" rx="1" />
5959+ <rect x="14" y="3" width="7" height="7" rx="1" />
6060+ <rect x="14" y="14" width="7" height="7" rx="1" />
6161+ <rect x="3" y="14" width="7" height="7" rx="1" />
6262+ </svg>
6363+ <span class="provider-name font-mono">Independent providers</span>
6464+ </div>
6565+ <p class="text-body-sm">
6666+ Independent providers are account hosts — they are not apps themselves,
6767+ they only hold your account and data. A growing number of them offer
6868+ Atmosphere accounts: some are community-run, some focus on privacy, and
6969+ new ones are launching all the time.
7070+ </p>
7171+ </div>
7272+7373+ <div class="glass provider-card">
7474+ <div class="provider-logo-row">
7575+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
7676+ <path d="M12 2L2 7l10 5 10-5-10-5z" />
7777+ <path d="M2 17l10 5 10-5" />
7878+ <path d="M2 12l10 5 10-5" />
7979+ </svg>
8080+ <span class="provider-name font-mono">Self-host</span>
8181+ </div>
8282+ <p class="text-body-sm">
8383+ Technical users can run their own provider. Full control over your
8484+ data, on your own infrastructure. The Atmosphere is open — anyone
8585+ can be a provider.
8686+ </p>
8787+ </div>
8888+ </div>
8989+9090+ <p
9191+ class="text-body-sm text-center mt-3"
9292+ style={{ maxWidth: "520px", margin: "1.5rem auto 0", fontStyle: "italic" }}
9393+ >
9494+ No matter which provider you choose, your account works everywhere and you can
9595+ move to a different provider at any time — no data lost.
9696+ </p>
9797+ </div>
9898+ </section>
9999+ );
100100+}
···11+export default function ModerationAndAlgorithms() {
22+ return (
33+ <section class="section reveal">
44+ <div class="container">
55+ <div class="text-center">
66+ <h2 class="text-section">You choose the rules.</h2>
77+ <div class="divider" />
88+ <p class="text-body mt-2" style={{ maxWidth: "640px", margin: "1rem auto 0" }}>
99+ In the Atmosphere, no single company decides what you see or what
1010+ counts as acceptable. Moderation and algorithms are yours to choose.
1111+ </p>
1212+ </div>
1313+1414+ <div class="mod-algo-grid">
1515+ <div class="glass mod-algo-card">
1616+ <div class="mod-algo-icon" aria-hidden="true">
1717+ <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
1818+ <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
1919+ </svg>
2020+ </div>
2121+ <h3 class="text-subsection mb-1">Moderation</h3>
2222+ <p class="text-body-sm">
2323+ Each app can set its own rules, and users can subscribe to
2424+ third-party moderation services that layer on top — labels, filters,
2525+ and block lists created and managed by the very communities they aim
2626+ to protect. Who understands a community's needs better than the
2727+ people who live in it?
2828+ </p>
2929+ <p class="text-body-sm mt-2">
3030+ If you don't like how an app handles moderation, you don't have to
3131+ argue with a support bot. You can add another moderation layer, or
3232+ switch to a different app entirely — one that better fits your
3333+ values.
3434+ </p>
3535+ </div>
3636+3737+ <div class="glass mod-algo-card">
3838+ <div class="mod-algo-icon" aria-hidden="true">
3939+ <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
4040+ <line x1="4" y1="21" x2="4" y2="14" />
4141+ <line x1="4" y1="10" x2="4" y2="3" />
4242+ <line x1="12" y1="21" x2="12" y2="12" />
4343+ <line x1="12" y1="8" x2="12" y2="3" />
4444+ <line x1="20" y1="21" x2="20" y2="16" />
4545+ <line x1="20" y1="12" x2="20" y2="3" />
4646+ <circle cx="4" cy="12" r="2" />
4747+ <circle cx="12" cy="10" r="2" />
4848+ <circle cx="20" cy="14" r="2" />
4949+ </svg>
5050+ </div>
5151+ <h3 class="text-subsection mb-1">Algorithms</h3>
5252+ <p class="text-body-sm">
5353+ Feeds are open. Anyone can build and run one. You can pick which
5454+ algorithm you use, or switch between them like playlists — a
5555+ friends-only feed, an independent art feed, a slow news feed, or
5656+ something deeply niche that feels alive rather than gamed.
5757+ </p>
5858+ <p class="text-body-sm mt-2">
5959+ No single algorithm quietly decides culture for billions of people.
6060+ Feeds compete on taste, care, and usefulness — not on how
6161+ effectively they can keep you stuck. Open algorithms are
6262+ censorship-resistant: no amount of sucking up to authoritarian
6363+ governments can shift what users see.
6464+ </p>
6565+ </div>
6666+ </div>
6767+6868+ <p
6969+ class="text-body-sm text-center mt-3"
7070+ style={{ maxWidth: "560px", margin: "1.5rem auto 0", fontStyle: "italic" }}
7171+ >
7272+ Together, account ownership, moderation, and algorithmic choice make
7373+ exploitation difficult to sustain. The system is locked open by design.
7474+ </p>
7575+ </div>
7676+ </section>
7777+ );
7878+}
···11+import LottieSection from "./LottieSection.tsx";
22+33+export default function OnePlace() {
44+ const items = [
55+ "Posts",
66+ "Likes",
77+ "Follows",
88+ "Comments",
99+ "Lists",
1010+ "Videos",
1111+ "Photos",
1212+ "Blogs",
1313+ ];
1414+1515+ return (
1616+ <section class="section-sm reveal">
1717+ <div class="container-narrow text-center">
1818+ <LottieSection />
1919+ <h2 class="text-section">Everything in one place.</h2>
2020+ <div class="divider" />
2121+ <p class="text-body mt-2">
2222+ All your stuff — from every Atmosphere app you use — lives in your one
2323+ Atmosphere account. Sign in anywhere, pick up right where you left off.
2424+ </p>
2525+ <p class="text-body-sm mt-3 hub-examples-label">
2626+ A few examples — there’s no fixed list. New apps bring new kinds of data,
2727+ all in one place.
2828+ </p>
2929+ <div class="hub-visual">
3030+ {items.map((item) => (
3131+ <span key={item} class="hub-tag">
3232+ {item}
3333+ </span>
3434+ ))}
3535+ <span class="hub-tag hub-tag-more">…and many more</span>
3636+ </div>
3737+ </div>
3838+ </section>
3939+ );
4040+}
+36
components/SignInBadge.tsx
···11+export default function SignInBadge() {
22+ return (
33+ <section class="section-sm reveal">
44+ <div class="container-narrow text-center">
55+ <h2 class="text-section">For developers.</h2>
66+ <div class="divider" />
77+ <p class="text-body mt-2 mb-4">
88+ Building an Atmosphere app? Let your users know they can sign in with
99+ their Atmosphere account.
1010+ </p>
1111+ <div class="badge-display">
1212+ <img src="/sign-in-box.svg" alt="Sign in with your Atmosphere Account" />
1313+ </div>
1414+ <div class="badge-downloads">
1515+ <a
1616+ href="/sign-in-box.svg"
1717+ download="atmosphere-sign-in-badge.svg"
1818+ class="badge-download-btn font-mono"
1919+ >
2020+ Download badge (SVG)
2121+ </a>
2222+ <a
2323+ href="/union.svg"
2424+ download="atmosphere-logo.svg"
2525+ class="badge-download-btn font-mono"
2626+ >
2727+ Download logo (SVG)
2828+ </a>
2929+ </div>
3030+ <p class="text-body-sm mt-3">
3131+ Add this badge to your sign-in page to help users understand the Atmosphere.
3232+ </p>
3333+ </div>
3434+ </section>
3535+ );
3636+}
+23
components/WhatIsAtmosphere.tsx
···11+export default function WhatIsAtmosphere() {
22+ return (
33+ <section class="section reveal">
44+ <div class="container-narrow text-center">
55+ <h2 class="text-section">What is the Atmosphere?</h2>
66+ <div class="divider" />
77+ <div class="glass-strong" style={{ padding: "2.5rem 2rem", marginTop: "2rem" }}>
88+ <p class="text-body">
99+ The Atmosphere is a new open network of apps and services that all
1010+ work together. Think of it like an <strong>open social web</strong>.
1111+ Instead of every app being its own walled garden, Atmosphere apps
1212+ share a common foundation — so you only need{" "}
1313+ <strong>one account</strong> to use them all.
1414+ </p>
1515+ <p class="text-body mt-3">
1616+ No more creating a new account for every app. No more losing your
1717+ stuff when you switch. Sign in once, and you're home everywhere.
1818+ </p>
1919+ </div>
2020+ </div>
2121+ </section>
2222+ );
2323+}
···11+import { App, staticFiles } from "fresh";
22+import type { State } from "./utils.ts";
33+44+export const app = new App<State>();
55+66+app.use(staticFiles());
77+88+app.fsRoutes();
+211
routes/_app.tsx
···11+import { define } from "../utils.ts";
22+33+const inlineScript = `
44+(function(){
55+ /* ---- Scroll reveal ---- */
66+ var io = new IntersectionObserver(function(entries){
77+ entries.forEach(function(e){
88+ if(e.isIntersecting) e.target.classList.add('visible');
99+ });
1010+ },{threshold:0.12});
1111+ document.querySelectorAll('.reveal').forEach(function(el){io.observe(el);});
1212+1313+ /* ---- Lottie play/pause on scroll visibility ---- */
1414+ var lottieIo = new IntersectionObserver(function(entries){
1515+ entries.forEach(function(e){
1616+ var lp = e.target;
1717+ try {
1818+ if(e.isIntersecting){ lp.play && lp.play(); }
1919+ else { lp.pause && lp.pause(); }
2020+ } catch(_){}
2121+ });
2222+ },{threshold:0.15});
2323+ document.querySelectorAll('lottie-player').forEach(function(el){ lottieIo.observe(el); });
2424+2525+ var nav = document.getElementById('main-nav');
2626+2727+ /* ---- Sky gradient: starts DAY, cycles day->sunset->night->sunrise->day ---- */
2828+ var K = [
2929+ {p:0, c:['#e8f0fe','#c9d8f5','#a8c4f0','#c0d4f5','#ebe4f5']},
3030+ {p:0.12, c:['#e0e8f8','#c8d0e8','#b0c0e0','#c8c0d8','#e0d4e0']},
3131+ {p:0.22, c:['#d08058','#d88868','#e87838','#f09848','#f0c870']},
3232+ {p:0.32, c:['#301040','#4a1848','#882858','#c04860','#d87050']},
3333+ {p:0.45, c:['#060510','#0a0f20','#0f1830','#152038','#0a0f1a']},
3434+ {p:0.60, c:['#060510','#0a0f20','#0f1830','#152038','#0a0f1a']},
3535+ {p:0.72, c:['#1a0a2e','#381540','#703050','#b86060','#e0a070']},
3636+ {p:0.84, c:['#c08070','#d8a888','#e0c8b0','#e8dcd0','#f0e8e0']},
3737+ {p:1, c:['#e8f0fe','#c9d8f5','#a8c4f0','#c0d4f5','#ebe4f5']}
3838+ ];
3939+4040+ function h2r(h){var r=parseInt(h.slice(1,3),16),g=parseInt(h.slice(3,5),16),b=parseInt(h.slice(5,7),16);return[r,g,b];}
4141+ function mx(a,b,t){return[Math.round(a[0]+(b[0]-a[0])*t),Math.round(a[1]+(b[1]-a[1])*t),Math.round(a[2]+(b[2]-a[2])*t)];}
4242+ function rg(c){return'rgb('+c[0]+','+c[1]+','+c[2]+')';}
4343+ function sm(t){return t*t*(3-2*t);}
4444+4545+ function findSeg(p){for(var j=0;j<K.length-1;j++){if(p>=K[j].p&&p<=K[j+1].p)return j;}return 0;}
4646+4747+ function gradient(p){
4848+ var i=findSeg(p);
4949+ var t=sm((p-K[i].p)/(K[i+1].p-K[i].p));
5050+ var c=[];for(var k=0;k<5;k++)c.push(rg(mx(h2r(K[i].c[k]),h2r(K[i+1].c[k]),t)));
5151+ return'linear-gradient(180deg,'+c[0]+' 0%,'+c[1]+' 25%,'+c[2]+' 50%,'+c[3]+' 75%,'+c[4]+' 100%)';
5252+ }
5353+5454+ function luminance(p){
5555+ var i=findSeg(p);var t=sm((p-K[i].p)/(K[i+1].p-K[i].p));
5656+ var m=mx(h2r(K[i].c[2]),h2r(K[i+1].c[2]),t);
5757+ return(m[0]*0.299+m[1]*0.587+m[2]*0.114)/255;
5858+ }
5959+6060+ /* ---- Sun glow + rays elements ---- */
6161+ var layer=document.querySelector('.cloud-layer');
6262+ var sunEl=document.createElement('div');
6363+ sunEl.style.cssText='position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;';
6464+ var raysEl=document.createElement('div');
6565+ raysEl.style.cssText='position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;mix-blend-mode:screen;';
6666+ if(layer){
6767+ layer.parentNode.insertBefore(sunEl,layer);
6868+ layer.parentNode.insertBefore(raysEl,layer);
6969+ }
7070+7171+ /* ---- Cloud parallax setup ---- */
7272+ var svgs=document.querySelectorAll('.cloud-svg');
7373+ var cData=[];
7474+ svgs.forEach(function(el){
7575+ cData.push({el:el,speed:parseFloat(el.dataset.speed)||0,flip:el.dataset.flip==='1'});
7676+ });
7777+7878+ /* ---- Main scroll update ---- */
7979+ var ticking=false;
8080+ function update(){
8181+ var scrollY=window.scrollY;
8282+ var maxScroll=Math.max(1,document.documentElement.scrollHeight-window.innerHeight);
8383+ var p=Math.min(1,Math.max(0,scrollY/maxScroll));
8484+8585+ document.body.style.background=gradient(p);
8686+8787+ var lum=luminance(p);
8888+ document.body.classList.toggle('dark-phase',lum<0.45);
8989+9090+ /* ---- Sun arc: noon at p=0, sunset right, midnight below, sunrise left ---- */
9191+ var ang=2*Math.PI*p;
9292+ var sunX=50+65*Math.sin(ang);
9393+ var sunY=40-58*Math.cos(ang);
9494+9595+ /* Visibility: 1 at highest point, fades toward horizon */
9696+ var vis=Math.max(0,Math.min(1,(52-sunY)/65));
9797+9898+ /* Color temperature: warm gold when low, bright yellow-white when high */
9999+ var ht=Math.max(0,Math.min(1,(25-sunY)/55));
100100+ var sr=255;
101101+ var sg=Math.round(185+ht*55);
102102+ var sb=Math.round(60+ht*140);
103103+104104+ var op=vis*0.6;
105105+ var sz=50+vis*30;
106106+107107+ /* Primary glow: large warm radial from sun position */
108108+ if(vis>0.005){
109109+ sunEl.style.background=
110110+ 'radial-gradient(ellipse '+sz+'% '+sz+'% at '+sunX+'% '+sunY+'%,'+
111111+ 'rgba('+sr+','+sg+','+sb+','+op.toFixed(3)+') 0%,'+
112112+ 'rgba('+sr+','+sg+','+sb+','+(op*0.45).toFixed(3)+') 20%,'+
113113+ 'rgba('+sr+','+sg+','+sb+','+(op*0.15).toFixed(3)+') 45%,'+
114114+ 'transparent 70%),'+
115115+ 'radial-gradient(ellipse '+(sz*1.8)+'% '+(sz*1.8)+'% at '+sunX+'% '+sunY+'%,'+
116116+ 'rgba('+sr+','+sg+','+sb+','+(op*0.1).toFixed(3)+') 0%,'+
117117+ 'transparent 60%)';
118118+119119+ /* God rays: conic gradient beams radiating from sun */
120120+ var rayOp=vis*0.18;
121121+ var rayC='rgba('+sr+','+sg+','+sb+',';
122122+ raysEl.style.background=
123123+ 'conic-gradient(from 0deg at '+sunX+'% '+sunY+'%,'+
124124+ rayC+rayOp.toFixed(3)+') 0deg,'+
125125+ 'transparent 8deg,'+
126126+ 'transparent 25deg,'+
127127+ rayC+(rayOp*0.7).toFixed(3)+') 30deg,'+
128128+ 'transparent 38deg,'+
129129+ 'transparent 60deg,'+
130130+ rayC+(rayOp*0.9).toFixed(3)+') 65deg,'+
131131+ 'transparent 75deg,'+
132132+ 'transparent 100deg,'+
133133+ rayC+(rayOp*0.6).toFixed(3)+') 105deg,'+
134134+ 'transparent 115deg,'+
135135+ 'transparent 140deg,'+
136136+ rayC+(rayOp*0.8).toFixed(3)+') 148deg,'+
137137+ 'transparent 158deg,'+
138138+ 'transparent 185deg,'+
139139+ rayC+(rayOp*0.5).toFixed(3)+') 190deg,'+
140140+ 'transparent 200deg,'+
141141+ 'transparent 225deg,'+
142142+ rayC+(rayOp*0.7).toFixed(3)+') 232deg,'+
143143+ 'transparent 242deg,'+
144144+ 'transparent 270deg,'+
145145+ rayC+(rayOp*0.6).toFixed(3)+') 278deg,'+
146146+ 'transparent 288deg,'+
147147+ 'transparent 315deg,'+
148148+ rayC+(rayOp*0.8).toFixed(3)+') 322deg,'+
149149+ 'transparent 332deg,'+
150150+ 'transparent 355deg,'+
151151+ rayC+(rayOp*0.4).toFixed(3)+') 360deg)';
152152+ raysEl.style.opacity=vis;
153153+ } else {
154154+ sunEl.style.background='none';
155155+ raysEl.style.opacity='0';
156156+ }
157157+158158+ /* Cloud parallax + sun-lit highlight on each cloud */
159159+ for(var i=0;i<cData.length;i++){
160160+ var d=cData[i];
161161+ var ty=scrollY*d.speed;
162162+ d.el.style.transform='translateY('+ty+'px)'+(d.flip?' scaleX(-1)':'');
163163+ }
164164+165165+ if(nav){
166166+ if(scrollY>40)nav.classList.add('scrolled');
167167+ else nav.classList.remove('scrolled');
168168+ }
169169+ ticking=false;
170170+ }
171171+172172+ window.addEventListener('scroll',function(){
173173+ if(!ticking){ticking=true;requestAnimationFrame(update);}
174174+ },{passive:true});
175175+ update();
176176+})();
177177+`;
178178+179179+export default define.page(function App({ Component }) {
180180+ return (
181181+ <html lang="en">
182182+ <head>
183183+ <meta charset="utf-8" />
184184+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
185185+ <title>
186186+ Atmosphere Account — The last social account you'll ever need.
187187+ </title>
188188+ <meta
189189+ name="description"
190190+ content="Your Atmosphere account is your passport to a growing ecosystem of apps. One account, all your data, your choice."
191191+ />
192192+ <meta property="og:title" content="Atmosphere Account" />
193193+ <meta
194194+ property="og:description"
195195+ content="The last social account you'll ever need. One account for all your apps."
196196+ />
197197+ <meta property="og:type" content="website" />
198198+ <meta name="twitter:card" content="summary_large_image" />
199199+ <link rel="icon" type="image/svg+xml" href="/union.svg" />
200200+ <script
201201+ src="https://unpkg.com/@lottiefiles/lottie-player@2.0.8/dist/lottie-player.js"
202202+ defer
203203+ />
204204+ </head>
205205+ <body class="sky-bg">
206206+ <Component />
207207+ <script dangerouslySetInnerHTML={{ __html: inlineScript }} />
208208+ </body>
209209+ </html>
210210+ );
211211+});