engineering/www.unturf.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor unturf.css with custom properties, add styleguide page

Browse source 
Extract all hardcoded colors into :root CSS custom properties.
Consolidate callout box shared structure into grouped selectors.
Merge brand font-family declarations. Remove redundant box-sizing rule.
Reorganize into 7 clearly labeled sections.

Create /styleguide/ as living reference for every component:
color palette, typography, layout, navigation, step labels,
callout boxes, capital cards, diagrams, footnotes, tables, lists.
This commit is contained in:
russell@unturf.com 2026-02-27 09:31:44 -05:00
parent 1d2427f89c
commit 8fff6ce010
2 changed files with 550 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

173
css/unturf.css
View file

@ -2,20 +2,59 @@
unturf. shared stylesheet
============================================================ */
/* ---- 1. custom properties ---- */
:root {
/* brand */
--primary: #43a047;
/* step label */
--step-bg: #263238;
--step-text: #CDDC39;
/* callout boxes */
--honest-border: #F44336;
--honest-bg: rgba(244, 67, 54, 0.05);
--recipe-border: #4CAF50;
--recipe-bg: rgba(76, 175, 80, 0.05);
--warning-border: #FF9800;
--warning-bg: rgba(255, 152, 0, 0.05);
/* footnotes */
--footnote-link: #CDDC39;
--footnote-highlight-bg: rgba(205, 220, 57, 0.1);
--footnote-highlight-border: #CDDC39;
/* diagrams */
--diagram-caption: #888;
/* eight forms of capital */
--capital-living: #4CAF50;
--capital-material: #795548;
--capital-financial: #607D8B;
--capital-intellectual: #2196F3;
--capital-experiential: #009688;
--capital-social: #FF9800;
--capital-cultural: #9C27B0;
--capital-spiritual: #E91E63;
/* software page */
--unsandbox-color: #c4b550;
}
/* ---- brand ---- */
.unturf-brand {
/* ---- 2. brand & typography ---- */
.unturf-brand,
.site-title {
font-family: 'chunkfiveregular', sans-serif;
}
.site-title {
font-family: 'chunkfiveregular', sans-serif;
margin-bottom: 0px;
margin-bottom: 0;
}
/* ---- 3. navigation ---- */
.nav-links {
margin-bottom: 2em;
}
@ -27,6 +66,8 @@
opacity: 0.7;
}
/* ---- 4. layout ---- */
.content-wide {
max-width: 960px;
}
@ -35,7 +76,10 @@
max-width: 460px;
}
/* ---- diagrams ---- */
/* ---- 5. content components ---- */
/* diagrams */
.diagram {
margin: 1.5em 0;
text-align: center;
@ -48,36 +92,46 @@
.diagram figcaption {
font-size: 0.85em;
color: #888;
color: var(--diagram-caption);
margin-top: 0.5em;
}
/* ---- step labels ---- */
/* step labels */
.step-label {
display: inline-block;
background: #263238;
color: #CDDC39;
background: var(--step-bg);
color: var(--step-text);
padding: 0.2em 0.6em;
font-size: 0.8em;
margin-bottom: 0.5em;
}
/* ---- honest box (warnings / caveats) ---- */
.honest-box {
border-left: 4px solid #F44336;
/* callout boxes (shared structure) */
.honest-box,
.recipe-box,
.warning-box {
border-left-width: 4px;
border-left-style: solid;
padding: 0.5em 1em;
margin: 1em 0;
background: rgba(244, 67, 54, 0.05);
}
.honest-box b {
color: #F44336;
}
.honest-box { border-color: var(--honest-border); background: var(--honest-bg); }
.honest-box b { color: var(--honest-border); }
.recipe-box { border-color: var(--recipe-border); background: var(--recipe-bg); }
.recipe-box b { color: var(--recipe-border); }
.warning-box { border-color: var(--warning-border); background: var(--warning-bg); }
.warning-box b { color: var(--warning-border); }
/* footnotes */
/* ---- footnotes ---- */
sup a {
text-decoration: none;
color: #CDDC39;
color: var(--footnote-link);
font-weight: bold;
}
@ -99,12 +153,13 @@ sup a:hover {
}
.footnotes li:target {
background: rgba(205, 220, 57, 0.1);
background: var(--footnote-highlight-bg);
padding: 0.25em;
border-left: 3px solid #CDDC39;
border-left: 3px solid var(--footnote-highlight-border);
}
/* ---- capital cards (eight forms of capital) ---- */
/* capital cards (eight forms of capital) */
.capital-card {
border-left: 4px solid var(--primary);
padding: 0.5em 1em;
@ -115,50 +170,24 @@ sup a:hover {
margin-bottom: 0.25em;
}
.capital-card--living { border-color: #4CAF50; }
.capital-card--living h4 { color: #4CAF50; }
.capital-card--material { border-color: #795548; }
.capital-card--material h4 { color: #795548; }
.capital-card--financial { border-color: #607D8B; }
.capital-card--financial h4 { color: #607D8B; }
.capital-card--intellectual { border-color: #2196F3; }
.capital-card--intellectual h4 { color: #2196F3; }
.capital-card--experiential { border-color: #009688; }
.capital-card--experiential h4 { color: #009688; }
.capital-card--social { border-color: #FF9800; }
.capital-card--social h4 { color: #FF9800; }
.capital-card--cultural { border-color: #9C27B0; }
.capital-card--cultural h4 { color: #9C27B0; }
.capital-card--spiritual { border-color: #E91E63; }
.capital-card--spiritual h4 { color: #E91E63; }
.capital-card--living { border-color: var(--capital-living); }
.capital-card--living h4 { color: var(--capital-living); }
.capital-card--material { border-color: var(--capital-material); }
.capital-card--material h4 { color: var(--capital-material); }
.capital-card--financial { border-color: var(--capital-financial); }
.capital-card--financial h4 { color: var(--capital-financial); }
.capital-card--intellectual { border-color: var(--capital-intellectual); }
.capital-card--intellectual h4 { color: var(--capital-intellectual); }
.capital-card--experiential { border-color: var(--capital-experiential); }
.capital-card--experiential h4 { color: var(--capital-experiential); }
.capital-card--social { border-color: var(--capital-social); }
.capital-card--social h4 { color: var(--capital-social); }
.capital-card--cultural { border-color: var(--capital-cultural); }
.capital-card--cultural h4 { color: var(--capital-cultural); }
.capital-card--spiritual { border-color: var(--capital-spiritual); }
.capital-card--spiritual h4 { color: var(--capital-spiritual); }
/* ---- recipe page ---- */
.recipe-box {
border-left: 4px solid #4CAF50;
padding: 0.5em 1em;
margin: 1em 0;
background: rgba(76, 175, 80, 0.05);
}
.recipe-box b {
color: #4CAF50;
}
.warning-box {
border-left: 4px solid #FF9800;
padding: 0.5em 1em;
margin: 1em 0;
background: rgba(255, 152, 0, 0.05);
}
.warning-box b {
color: #FF9800;
}
/* ---- software page ---- */
.software-page * {
box-sizing: border-box;
}
/* ---- 6. software page ---- */
.software-page body {
overflow-x: hidden;
@ -177,7 +206,7 @@ sup a:hover {
.unsandbox-logo {
font-family: ArialPixel, system-ui, sans-serif;
color: #c4b550;
color: var(--unsandbox-color);
}
.neopig-logo {
@ -209,12 +238,6 @@ sup a:hover {
max-width: 100%;
}
@media (prefers-color-scheme: light) {
.logo-container {
background: rgba(0, 0, 0, 0.03);
}
}
.software-page article {
margin-bottom: 1rem;
}
@ -253,6 +276,14 @@ sup a:hover {
gap: 1rem;
}
/* ---- 7. responsive ---- */
@media (prefers-color-scheme: light) {
.logo-container {
background: rgba(0, 0, 0, 0.03);
}
}
@media (min-width: 768px) {
.projects-grid {
display: grid;

448
styleguide/index.html Normal file
View file

@ -0,0 +1,448 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>styleguide &#8212; unturf.</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#5871ad">
<meta charset="utf-8">
<link rel="stylesheet" href="/css/chunkfive/stylesheet.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="/css/pico.classless.min.css">
<link rel="stylesheet" href="/css/unturf.css">
<style>
.swatch {
display: inline-block;
width: 3em;
height: 3em;
border-radius: 4px;
vertical-align: middle;
margin-right: 0.5em;
border: 1px solid rgba(128, 128, 128, 0.2);
}
.swatch-row {
margin-bottom: 0.75em;
}
</style>
</head>
<body>
<main class="content-wide">
<center><a href="/"><h1 class="site-title">unturf.</h1></a></center>
<center><h3>grow food not lawn</h3></center>
<center class="nav-links"><small><a href="/let-us-define-a-permacomputer/">manifesto</a> · <a href="/eight-forms-of-capital/">eight forms of capital</a> · <a href="/single-use-plastics/">single-use plastics</a> · <a href="/hemp-bioplastic/">hemp bioplastic</a> · <a href="/software/">free software</a></small></center>
<h2>Styleguide</h2>
<p>
A living reference for every component, element, & pattern across <span class="unturf-brand">unturf.</span> pages. This page uses <code>unturf.css</code> layered on <a href="https://picocss.com/" target="_blank">Pico CSS v2.0.6</a> (classless). What you see here matches what appears across all pages.
</p>
<!-- ============================================================ -->
<!-- 1. COLOR PALETTE -->
<!-- ============================================================ -->
<h3>1. Color Palette</h3>
<p>Every color lives in a CSS custom property inside <code>:root</code>. Change a variable, change every page.</p>
<h4>Brand</h4>
<div class="swatch-row">
<span class="swatch" style="background: var(--primary);"></span>
<code>--primary</code> #43a047
</div>
<h4>Step Label</h4>
<div class="swatch-row">
<span class="swatch" style="background: var(--step-bg);"></span>
<code>--step-bg</code> #263238
</div>
<div class="swatch-row">
<span class="swatch" style="background: var(--step-text);"></span>
<code>--step-text</code> #CDDC39
</div>
<h4>Callout Boxes</h4>
<div class="swatch-row">
<span class="swatch" style="background: var(--honest-border);"></span>
<code>--honest-border</code> #F44336 (honest box)
</div>
<div class="swatch-row">
<span class="swatch" style="background: var(--recipe-border);"></span>
<code>--recipe-border</code> #4CAF50 (recipe box)
</div>
<div class="swatch-row">
<span class="swatch" style="background: var(--warning-border);"></span>
<code>--warning-border</code> #FF9800 (warning box)
</div>
<h4>Footnotes</h4>
<div class="swatch-row">
<span class="swatch" style="background: var(--footnote-link);"></span>
<code>--footnote-link</code> #CDDC39
</div>
<div class="swatch-row">
<span class="swatch" style="background: var(--footnote-highlight-border);"></span>
<code>--footnote-highlight-border</code> #CDDC39
</div>
<h4>Eight Forms of Capital</h4>
<div class="swatch-row">
<span class="swatch" style="background: var(--capital-living);"></span>
<code>--capital-living</code> #4CAF50
</div>
<div class="swatch-row">
<span class="swatch" style="background: var(--capital-material);"></span>
<code>--capital-material</code> #795548
</div>
<div class="swatch-row">
<span class="swatch" style="background: var(--capital-financial);"></span>
<code>--capital-financial</code> #607D8B
</div>
<div class="swatch-row">
<span class="swatch" style="background: var(--capital-intellectual);"></span>
<code>--capital-intellectual</code> #2196F3
</div>
<div class="swatch-row">
<span class="swatch" style="background: var(--capital-experiential);"></span>
<code>--capital-experiential</code> #009688
</div>
<div class="swatch-row">
<span class="swatch" style="background: var(--capital-social);"></span>
<code>--capital-social</code> #FF9800
</div>
<div class="swatch-row">
<span class="swatch" style="background: var(--capital-cultural);"></span>
<code>--capital-cultural</code> #9C27B0
</div>
<div class="swatch-row">
<span class="swatch" style="background: var(--capital-spiritual);"></span>
<code>--capital-spiritual</code> #E91E63
</div>
<hr>
<!-- ============================================================ -->
<!-- 2. TYPOGRAPHY -->
<!-- ============================================================ -->
<h3>2. Typography</h3>
<p>Pico CSS handles body text via system fonts. <span class="unturf-brand">unturf.</span> uses ChunkFive (<code>'chunkfiveregular'</code>) for branding only.</p>
<h4>Brand Font</h4>
<p><span class="unturf-brand" style="font-size: 2em;">unturf.</span> &larr; <code>class="unturf-brand"</code></p>
<h4>Heading Hierarchy</h4>
<p><code>&lt;h1&gt;</code> stays reserved for the site logo. Content headings start at <code>&lt;h2&gt;</code>.</p>
<h2>h2: Page Title</h2>
<h3>h3: Section Heading</h3>
<h4>h4: Subsection Heading</h4>
<h4>Text Styles</h4>
<p>A regular paragraph of body text. Pico CSS provides the base font stack, line height, & color.</p>
<p><b>Bold text</b> via <code>&lt;b&gt;</code> tag.</p>
<p><i>Italic text</i> via <code>&lt;i&gt;</code> tag.</p>
<p><code>Inline code</code> via <code>&lt;code&gt;</code> tag.</p>
<p><small>Small text via <code>&lt;small&gt;</code> tag, used for navigation & footer.</small></p>
<h4>Blockquote</h4>
<blockquote><code>go-rusty-rails-jvm.js</code></blockquote>
<hr>
<!-- ============================================================ -->
<!-- 3. LAYOUT -->
<!-- ============================================================ -->
<h3>3. Layout</h3>
<p>Two layout widths exist. Apply one class to <code>&lt;main&gt;</code>. Pico CSS provides the centering & padding.</p>
<table>
<thead>
<tr><th>Class</th><th>Max Width</th><th>Used On</th></tr>
</thead>
<tbody>
<tr><td><code>.content-narrow</code></td><td>460px</td><td>manifesto</td></tr>
<tr><td><code>.content-wide</code></td><td>960px</td><td>all other content pages</td></tr>
</tbody>
</table>
<hr>
<!-- ============================================================ -->
<!-- 4. NAVIGATION & FOOTER -->
<!-- ============================================================ -->
<h3>4. Navigation & Footer</h3>
<p>Every content page shares a header & footer pattern. Current page link gets <code>aria-current="page"</code> for bold, reduced opacity styling.</p>
<h4>Header Pattern</h4>
<pre><code>&lt;center&gt;&lt;a href="/"&gt;&lt;h1 class="site-title"&gt;unturf.&lt;/h1&gt;&lt;/a&gt;&lt;/center&gt;
&lt;center&gt;&lt;h3&gt;grow food not lawn&lt;/h3&gt;&lt;/center&gt;
&lt;center class="nav-links"&gt;&lt;small&gt;
&lt;a href="..."&gt;manifesto&lt;/a&gt; &amp;middot;
&lt;a href="..." aria-current="page"&gt;current page&lt;/a&gt; &amp;middot;
&lt;a href="..."&gt;other page&lt;/a&gt;
&lt;/small&gt;&lt;/center&gt;</code></pre>
<h4>Footer Pattern</h4>
<pre><code>&lt;footer&gt;
&lt;center&gt;&lt;a href="/software/" class="unturf-brand"&gt;unturf. software&lt;/a&gt;&lt;/center&gt;
&lt;center&gt;Russell Ballestrini | &lt;span class="unturf-brand"&gt;unturf.&lt;/span&gt; &amp;copy; 2025&lt;/center&gt;
&lt;/footer&gt;</code></pre>
<hr>
<!-- ============================================================ -->
<!-- 5. STEP LABEL -->
<!-- ============================================================ -->
<h3>5. Step Label</h3>
<p>Progressive disclosure pattern. A numbered label introduces each section on multi-step pages.</p>
<span class="step-label">STEP 1</span>
<h4>Example Section Title</h4>
<p>Content follows a step label & heading pair.</p>
<pre><code>&lt;span class="step-label"&gt;STEP 1&lt;/span&gt;
&lt;h3&gt;Section Title&lt;/h3&gt;</code></pre>
<hr>
<!-- ============================================================ -->
<!-- 6. CALLOUT BOXES -->
<!-- ============================================================ -->
<h3>6. Callout Boxes</h3>
<p>Three box types share the same structure (left border, padding, subtle background). Each carries a distinct color & purpose.</p>
<div class="honest-box">
<b>Honest box.</b> Caveats, corrections, uncomfortable truths. Red border signals caution about claims or expectations.
</div>
<div class="recipe-box">
<b>Recipe box.</b> Procedures, instructions, actionable steps. Green border signals constructive action.
</div>
<div class="warning-box">
<b>Warning box.</b> Safety notes, hazards, things that could cause harm. Orange border signals attention required.
</div>
<pre><code>&lt;div class="honest-box"&gt;
&lt;b&gt;Label.&lt;/b&gt; Content here.
&lt;/div&gt;
&lt;div class="recipe-box"&gt;
&lt;b&gt;Label.&lt;/b&gt; Content here.
&lt;/div&gt;
&lt;div class="warning-box"&gt;
&lt;b&gt;Label.&lt;/b&gt; Content here.
&lt;/div&gt;</code></pre>
<hr>
<!-- ============================================================ -->
<!-- 7. CAPITAL CARDS -->
<!-- ============================================================ -->
<h3>7. Capital Cards</h3>
<p>Eight color coded cards for the <a href="/eight-forms-of-capital/">eight forms of capital</a>. Each variant sets a left border color & heading color via custom property.</p>
<div class="capital-card capital-card--living">
<h4>Living Capital</h4>
<p>Soil, water, plants, animals, ecosystems.</p>
</div>
<div class="capital-card capital-card--material">
<h4>Material Capital</h4>
<p>Stone, metal, timber, tools, servers, networks.</p>
</div>
<div class="capital-card capital-card--financial">
<h4>Financial Capital</h4>
<p>Money, currencies, securities.</p>
</div>
<div class="capital-card capital-card--intellectual">
<h4>Intellectual Capital</h4>
<p>Ideas, concepts, knowledge, open source code.</p>
</div>
<div class="capital-card capital-card--experiential">
<h4>Experiential Capital</h4>
<p>Embodied know-how built from lived experience.</p>
</div>
<div class="capital-card capital-card--social">
<h4>Social Capital</h4>
<p>Influence, connections, relationships, trust.</p>
</div>
<div class="capital-card capital-card--cultural">
<h4>Cultural Capital</h4>
<p>Shared story, myth, song, art, ceremony, ethics.</p>
</div>
<div class="capital-card capital-card--spiritual">
<h4>Spiritual Capital</h4>
<p>Karma, faith, presence, connection to a greater whole.</p>
</div>
<pre><code>&lt;div class="capital-card capital-card--living"&gt;
&lt;h4&gt;Living Capital&lt;/h4&gt;
&lt;p&gt;Description here.&lt;/p&gt;
&lt;/div&gt;</code></pre>
<p>Variants: <code>--living</code>, <code>--material</code>, <code>--financial</code>, <code>--intellectual</code>, <code>--experiential</code>, <code>--social</code>, <code>--cultural</code>, <code>--spiritual</code>.</p>
<hr>
<!-- ============================================================ -->
<!-- 8. DIAGRAM FIGURE -->
<!-- ============================================================ -->
<h3>8. Diagram Figure</h3>
<p>All diagrams wrap in <code>&lt;figure class="diagram"&gt;</code>. Images scale to container width. Captions render small & gray.</p>
<figure class="diagram">
<img src="/eight-forms-of-capital/img/individual-forms.svg" alt="Example diagram: eight forms of capital from foundation to emergence">
<figcaption>example caption: from living capital at the foundation to cultural capital as emergent community property</figcaption>
</figure>
<pre><code>&lt;figure class="diagram"&gt;
&lt;img src="path/to/diagram.svg" alt="Description"&gt;
&lt;figcaption&gt;caption text&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>
<hr>
<!-- ============================================================ -->
<!-- 9. FOOTNOTES -->
<!-- ============================================================ -->
<h3>9. Footnotes</h3>
<p>Inline superscript links point to numbered footnotes at the bottom of a page. Clicking a footnote number scrolls down. A back arrow scrolls up. Targeted footnotes highlight with a lime left border.<sup id="ref-sg1"><a href="#fn-sg1">[1]</a></sup></p>
<h4>Inline Pattern</h4>
<pre><code>&lt;sup id="ref1"&gt;&lt;a href="#fn1"&gt;[1]&lt;/a&gt;&lt;/sup&gt;</code></pre>
<h4>Footnote Section</h4>
<div class="footnotes">
<ol>
<li id="fn-sg1">Example footnote demonstrating the pattern. Source title, <a href="#" target="_blank"><i>Publication Name</i></a>, date. <a href="#ref-sg1">&#8617;</a></li>
</ol>
</div>
<pre><code>&lt;div class="footnotes"&gt;
&lt;ol&gt;
&lt;li id="fn1"&gt;Source text. &lt;a href="#ref1"&gt;&amp;#8617;&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;</code></pre>
<hr>
<!-- ============================================================ -->
<!-- 10. TABLES -->
<!-- ============================================================ -->
<h3>10. Tables</h3>
<p>Pico CSS styles tables from semantic markup alone. No classes needed.</p>
<table>
<thead>
<tr><th>Capital</th><th>Permacomputer Expression</th><th>Quadrivium Value</th></tr>
</thead>
<tbody>
<tr><td>Living</td><td>Durable hardware, repair not replace</td><td>Harmony</td></tr>
<tr><td>Intellectual</td><td>Open source, public domain, seeds to sprout</td><td>Truth</td></tr>
<tr><td>Social</td><td>By people, for people, voluntary</td><td>Freedom</td></tr>
<tr><td>Spiritual</td><td>Love as fuel, wu wei, homeostasis</td><td>Love</td></tr>
</tbody>
</table>
<hr>
<!-- ============================================================ -->
<!-- 11. LISTS -->
<!-- ============================================================ -->
<h3>11. Lists</h3>
<h4>Unordered</h4>
<ul>
<li>Glass jars for storage</li>
<li>Steel water bottles</li>
<li>Cotton bags</li>
<li>Beeswax wraps</li>
</ul>
<h4>Ordered</h4>
<ol>
<li>Eliminate petroleum plastic</li>
<li>Grow hemp</li>
<li>Process cooperatively</li>
<li>Compost at end of life</li>
</ol>
<hr>
<!-- ============================================================ -->
<!-- 12. HORIZONTAL RULE & LINKS -->
<!-- ============================================================ -->
<h3>12. Horizontal Rule & Links</h3>
<p>A horizontal rule (<code>&lt;hr&gt;</code>) separates major sections:</p>
<hr>
<p>Links styled by Pico CSS: <a href="/">home</a>, <a href="/let-us-define-a-permacomputer/">manifesto</a>, <a href="https://picocss.com/" target="_blank">external link</a>.</p>
<hr>
<!-- ============================================================ -->
<!-- 13. SOFTWARE PAGE COMPONENTS -->
<!-- ============================================================ -->
<h3>13. Software Page Components</h3>
<p>The <a href="/software/">software page</a> uses a distinct layout. A <code>class="software-page"</code> on <code>&lt;html&gt;</code> scopes all its rules. These classes apply only on that page:</p>
<table>
<thead>
<tr><th>Class</th><th>Purpose</th></tr>
</thead>
<tbody>
<tr><td><code>.software-page</code></td><td>Root scope on <code>&lt;html&gt;</code>, triggers ChunkFive headings & layout rules</td></tr>
<tr><td><code>.projects-grid</code></td><td>Responsive grid: 1 column mobile, 2 columns at 768px+</td></tr>
<tr><td><code>.logo-container</code></td><td>Subtle background box for project logos</td></tr>
<tr><td><code>.unsandbox-logo</code></td><td>ArialPixel font, gold color</td></tr>
<tr><td><code>.neopig-logo</code></td><td>Gradient text effect (pink/orange)</td></tr>
<tr><td><code>.project-uncloseai</code></td><td>Spans full width at desktop breakpoint</td></tr>
</tbody>
</table>
<hr>
<p><a href="/let-us-define-a-permacomputer/">&#8592; back to the manifesto</a></p>
</main>
<footer>
<center><a href="/software/" class="unturf-brand">unturf. software</a></center>
<center>Russell Ballestrini | <span class="unturf-brand">unturf.</span> &copy; 2025</center>
</footer>
<script src="/js/diagram-zoom.js"></script>
<script src="https://uncloseai.com/uncloseai.js" type="module"></script>
</body>
</html>