pvrz/portage-site
1
0
Fork 0
mirror of https://github.com/pvrzz/portage-site.git synced 2026-08-11 19:36:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Christian
2026-06-08 20:37:32 -04:00
committed by GitHub
commit 0bb73dd390
4 changed files with 622 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
download.html
+159
View File
@@ -0,0 +1,159 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Download Portage</title>
<meta name="description" content="Download Portage for Chrome and Firefox. Export and import your browser data locally securely.">
<meta name="theme-color" content="#18181b">
<link rel="icon" href="media/logo.png">
<link rel="stylesheet" href="styles.css">
<script src="site.js" defer></script>
</head>
<body>
<nav class="nav">
<div class="nav-inner">
<a class="brand" href="index.html">
<span class="mk"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 18V6"/><path d="m4 10 4-4 4 4"/><path d="M16 6v12"/><path d="m12 14 4 4 4-4"/></svg></span>
Portage
</a>
<div class="links">
<a class="navlink" href="index.html#features">Features</a>
<a class="navlink" href="index.html#matrix">What transfers</a>
<a href="https://github.com/pvrzz/Portage/" target="_blank" rel="noopener" class="navlink">GitHub</a>
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme"></button>
</div>
</div>
</nav>
<header class="page-head reveal">
<div class="wrap">
<h1>Install Portage</h1>
<p>Download the latest release directly from GitHub.</p>
</div>
</header>
<section style="padding-top: 20px;">
<div class="wrap reveal">
<div class="dl-grid">
<div class="dl-card">
<div class="top">
<div class="logo">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="4"/><line x1="21.17" y1="8" x2="12" y2="8"/><line x1="3.95" y1="6.06" x2="8.54" y2="14"/><line x1="10.88" y1="21.94" x2="15.46" y2="14"/>
</svg>
</div>
<div>
<h3>Chrome</h3>
<div class="ver" id="ver-chrome">Fetching latest...</div>
</div>
</div>
<a href="https://github.com/pvrzz/Portage/releases/latest" id="btn-chrome" class="btn btn-primary">Download for Chrome</a>
<div class="note">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
<span>Loaded as an unpacked extension. Data swap APIs are fully supported.</span>
</div>
<ul class="steps">
<li>Unzip the downloaded <code>portage_chrome.zip</code> file.</li>
<li>Navigate to <code>chrome://extensions</code> in your URL bar.</li>
<li>Enable <strong>Developer mode</strong> in the top right corner.</li>
<li>Click <strong>Load unpacked</strong> and select the unzipped folder.</li>
</ul>
</div>
<div class="dl-card">
<div class="top">
<div class="logo">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
</svg>
</div>
<div>
<h3>Firefox</h3>
<div class="ver" id="ver-firefox">Fetching latest...</div>
</div>
</div>
<a href="https://github.com/pvrzz/Portage/releases/latest" id="btn-firefox" class="btn btn-primary">Download for Firefox</a>
<div class="note">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/></svg>
<span>Loaded as a temporary add-on. History titles and times are preserved.</span>
</div>
<ul class="steps">
<li>Unzip the downloaded <code>portage_firefox.zip</code> file.</li>
<li>Navigate to <code>about:debugging#/runtime/this-firefox</code>.</li>
<li>Click <strong>Load Temporary Add-on...</strong></li>
<li>Select the <code>manifest.json</code> file inside the unzipped folder.</li>
</ul>
</div>
</div>
<div class="star-band reveal">
<a href="https://github.com/pvrzz/Portage" target="_blank" rel="noopener" class="ghstar">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.52 11.52 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222 0 1.606-.014 2.898-.014 3.293 0 .322.216.694.825.576C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
Star Portage on GitHub
</a>
</div>
</div>
</section>
<footer class="foot">
<div class="foot-inner">
<a class="brand" href="index.html">
<span class="mk"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 18V6"/><path d="m4 10 4-4 4 4"/><path d="M16 6v12"/><path d="m12 14 4 4 4-4"/></svg></span>
Portage
</a>
<div class="spacer"></div>
<div class="links2">
<a href="https://github.com/pvrzz/Portage/" target="_blank" rel="noopener">GitHub</a>
<a href="https://github.com/pvrzz/Portage/releases" target="_blank" rel="noopener">Releases</a>
</div>
<span class="made">made by <a href="https://pvrz.lol/" target="_blank" rel="noopener">pvrz</a> <span class="heart"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z"/></svg></span></span>
</div>
</footer>
<script>
document.addEventListener("DOMContentLoaded", async () => {
const REPO = "pvrzz/Portage";
const verChrome = document.getElementById("ver-chrome");
const verFirefox = document.getElementById("ver-firefox");
const btnChrome = document.getElementById("btn-chrome");
const btnFirefox = document.getElementById("btn-firefox");
try {
const res = await fetch(`https://api.github.com/repos/${REPO}/releases/latest`);
if (!res.ok) throw new Error("GitHub API failed");
const data = await res.json();
const tag = data.tag_name || "Latest";
let chromeUrl = data.html_url;
let firefoxUrl = data.html_url;
if (data.assets && data.assets.length > 0) {
const cAsset = data.assets.find(a => a.name === "portage_chrome.zip");
if (cAsset) chromeUrl = cAsset.browser_download_url;
const fAsset = data.assets.find(a => a.name === "portage_firefox.zip");
if (fAsset) firefoxUrl = fAsset.browser_download_url;
}
verChrome.textContent = tag;
verFirefox.textContent = tag;
btnChrome.href = chromeUrl;
btnFirefox.href = firefoxUrl;
} catch (err) {
console.warn("Could not fetch release data:", err);
verChrome.textContent = "Latest Release";
verFirefox.textContent = "Latest Release";
}
});
</script>
</body>
</html>
index.html
+211
View File
@@ -0,0 +1,211 @@
<!DOCTYPE html>
<!--
Portage by pvrz
https://github.com/pvrzz/Portage/
File Name: index.html
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portage — A universal browser data swap</title>
<meta name="description" content="Export your bookmarks, history, cookies, tabs, sessions and reading list to one encrypted, portable file — then import into any browser. Chrome, Firefox, both ways.">
<meta property="og:title" content="Portage — A universal browser data swap">
<meta property="og:description" content="Carry your browser data anywhere. Encrypted, local-only, open source.">
<meta property="og:image" content="media/og.png">
<meta name="theme-color" content="#18181b">
<link rel="icon" href="media/logo.png">
<link rel="stylesheet" href="styles.css">
<script src="site.js"></script>
</head>
<body>
<nav class="nav">
<div class="nav-inner">
<a class="brand" href="index.html">
<span class="mk"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 18V6"/><path d="m4 10 4-4 4 4"/><path d="M16 6v12"/><path d="m12 14 4 4 4-4"/></svg></span>
Portage
</a>
<div class="links">
<a class="navlink" href="#features">Features</a>
<a class="navlink" href="#screens">Screenshots</a>
<a class="navlink" href="#matrix">What transfers</a>
<a href="https://github.com/pvrzz/Portage/" target="_blank" rel="noopener" class="navlink">GitHub</a>
<a class="cta" href="download.html">Download</a>
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme"></button>
</div>
</div>
</nav>
<header class="hero">
<div class="glow"></div>
<div class="wrap">
<span class="eyebrow reveal"><span class="dot"></span> Open source · v2.0 · Chrome &amp; Firefox</span>
<h1 class="reveal">Carry your browser data <span class="grad">anywhere.</span></h1>
<p class="lead reveal">Portage gathers your bookmarks, history, cookies, tabs, sessions and reading list into one encrypted, portable file — then rebuilds it in any browser. Chrome → Firefox, Firefox → Chrome, or the same browser on a new machine.</p>
<div class="cta-row reveal">
<a class="btn btn-primary btn-lg" href="download.html">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/></svg>
Download Portage
</a>
<a class="btn btn-ghost btn-lg" href="https://github.com/pvrzz/Portage/" target="_blank" rel="noopener">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.52 11.52 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222 0 1.606-.014 2.898-.014 3.293 0 .322.216.694.825.576C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
View source
</a>
</div>
<div class="trust reveal">
<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg> AES-256 encrypted</span>
<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/></svg> 100% local</span>
<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg> Both directions</span>
<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 11 3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg> No tracking</span>
</div>
<div class="frame float reveal">
<div class="bar"><i></i><i></i><i></i><span class="addr">portage · export</span></div>
<img src="media/shot-export.png" alt="Portage export screen showing data categories">
</div>
</div>
</header>
<section id="features">
<div class="wrap">
<div class="section-head reveal">
<div class="tag">Why Portage</div>
<h2>Everything that matters, nothing that doesn't</h2>
<p>Built on the official browser APIs — so it only ever touches data it can actually move, and never pretends otherwise.</p>
</div>
<div class="features">
<div class="feature reveal">
<div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg></div>
<h3>Universal swap</h3>
<p>It's just JSON, so it doesn't care who made it. Chrome ↔ Firefox, or the same browser on a new machine, profile or reinstall.</p>
</div>
<div class="feature reveal">
<div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></div>
<h3>Top-tier encryption</h3>
<p>Optional AES-256-GCM with PBKDF2 key derivation. Your bundle — cookies and all — is unreadable on disk without your passphrase.</p>
</div>
<div class="feature reveal">
<div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg></div>
<h3>The whole picture</h3>
<p>Bookmarks, history, cookies, open tabs, recently closed sessions and your reading list — recreated faithfully on the other side.</p>
</div>
<div class="feature reveal">
<div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="m9 15 2 2 4-4"/></svg></div>
<h3>Reinstall checklist</h3>
<p>No API can reinstall extensions, so Portage exports them as a tidy <code>.txt</code> with store-search links for both browsers — perfect for an AI assistant.</p>
</div>
<div class="feature reveal">
<div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a10 10 0 0 0 0 20z" fill="currentColor" stroke="none"/></svg></div>
<h3>Themeable, readable</h3>
<p>Monochrome by default, with light/dark and any accent colour you like. The palette auto-adjusts to keep text crisp and legible.</p>
</div>
<div class="feature reveal">
<div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/></svg></div>
<h3>Private by design</h3>
<p>Nothing is uploaded, ever. Data lives only in the page while you work and is wiped from memory the moment you export or import.</p>
</div>
</div>
</div>
</section>
<section id="screens" style="background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);">
<div class="wrap">
<div class="section-head reveal">
<div class="tag">A closer look</div>
<h2>Designed to feel effortless</h2>
<p>Animated progress, live counts and honest status on every category — so you always know exactly what's moving.</p>
</div>
<div class="shots">
<div class="shot reveal">
<div class="shot-copy">
<h3>Scan &amp; export</h3>
<p>One click scans your browser and lays out everything Portage can carry. Toggle off anything you'd rather leave behind, encrypt it, and save a single portable file.</p>
<div class="chips"><span class="chip">Live progress</span><span class="chip">Bundle size</span><span class="chip">Selective export</span></div>
</div>
<div class="frame">
<div class="bar"><i></i><i></i><i></i><span class="addr">portage · export</span></div>
<img src="media/shot-export.png" alt="Portage export screen">
</div>
</div>
<div class="shot reveal">
<div class="shot-copy">
<h3>Drop &amp; import</h3>
<p>Open Portage in the destination browser, drop the file in, and it recreates your data through the official APIs. Encrypted bundles simply ask for your passphrase first.</p>
<div class="chips"><span class="chip">Drag &amp; drop</span><span class="chip">Per-category status</span><span class="chip">Imported / skipped tally</span></div>
</div>
<div class="frame">
<div class="bar"><i></i><i></i><i></i><span class="addr">portage · import</span></div>
<img src="media/shot-import.png" alt="Portage import screen">
</div>
</div>
<div class="shot reveal">
<div class="shot-copy">
<h3>Right from your toolbar</h3>
<p>A compact popup shows live counts at a glance and opens the full workspace in a click. Themed to match the rest of Portage, in light or dark.</p>
<div class="chips"><span class="chip">Quick counts</span><span class="chip">One-click open</span></div>
</div>
<div class="frame" style="max-width:340px;justify-self:center;">
<div class="bar"><i></i><i></i><i></i><span class="addr">popup</span></div>
<img src="media/shot-popup.png" alt="Portage toolbar popup">
</div>
</div>
</div>
</div>
</section>
<section id="matrix">
<div class="wrap">
<div class="section-head reveal">
<div class="tag">Honest by default</div>
<h2>What actually transfers</h2>
<p>Extensions can only use the browser APIs — so this is everything Portage moves, and exactly how.</p>
</div>
<div class="table-card reveal">
<table class="matrix">
<thead><tr><th>Data</th><th class="c">Export</th><th>On import</th></tr></thead>
<tbody>
<tr><td>Bookmarks</td><td class="c yes">Full tree</td><td>Recreated in a “Portage Import” folder</td></tr>
<tr><td>History</td><td class="c yes">Yes</td><td>Re-added — Firefox keeps titles &amp; times</td></tr>
<tr><td>Cookies</td><td class="c yes">Yes</td><td>Re-set, so logins carry over</td></tr>
<tr><td>Open tabs</td><td class="c yes">Yes</td><td>Reopened in the window</td></tr>
<tr><td>Recently closed</td><td class="c yes">Yes</td><td>Reopened as tabs</td></tr>
<tr><td>Reading list</td><td class="c yes">Yes</td><td>Chrome → reading list · Firefox → bookmark folder</td></tr>
<tr><td>Extensions</td><td class="c yes">List</td><td><span class="no">Checklist only</span> — no API can reinstall them</td></tr>
<tr><td>Passwords &amp; autofill</td><td class="c no">—</td><td><span class="no">No browser API exists — use the built-in export</span></td></tr>
</tbody>
</table>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="cta-band reveal">
<div class="glow"></div>
<h2>Ready to move your data?</h2>
<p>Free, open source, and entirely on your machine. Install Portage in under a minute.</p>
<div class="cta-row">
<a class="btn btn-primary btn-lg" href="download.html">Download for Chrome &amp; Firefox</a>
<a class="btn btn-ghost btn-lg" href="https://github.com/pvrzz/Portage/" target="_blank" rel="noopener">Star on GitHub</a>
</div>
</div>
</div>
</section>
<footer class="foot">
<div class="foot-inner">
<a class="brand" href="index.html">
<span class="mk"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 18V6"/><path d="m4 10 4-4 4 4"/><path d="M16 6v12"/><path d="m12 14 4 4 4-4"/></svg></span>
Portage
</a>
<div class="spacer"></div>
<div class="links2">
<a href="download.html">Download</a>
<a href="https://github.com/pvrzz/Portage/" target="_blank" rel="noopener">GitHub</a>
<a href="https://github.com/pvrzz/Portage/releases" target="_blank" rel="noopener">Releases</a>
</div>
<span class="made">made by <a href="https://pvrz.lol/" target="_blank" rel="noopener">pvrz</a> <span class="heart"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z"/></svg></span></span>
</div>
</footer>
</body>
</html>
site.js
+39
View File
@@ -0,0 +1,39 @@
/*
Portage by pvrz
https://github.com/pvrzz/Portage/
File Name: site.js
*/
(function () {
const KEY = "portage-site-theme";
const root = document.documentElement;
const SUN = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M6.3 17.7l-1.4 1.4M19.1 4.9l-1.4 1.4"/></svg>';
const MOON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>';
function current() { try { return localStorage.getItem(KEY) || "system"; } catch { return "system"; } }
function effective() { const m = current(); return m !== "system" ? m : (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"); }
function setMode(m) { if (m === "system") root.removeAttribute("data-mode"); else root.setAttribute("data-mode", m); try { localStorage.setItem(KEY, m); } catch {} updateIcon(); }
function updateIcon() { const b = document.getElementById("themeToggle"); if (b) b.innerHTML = effective() === "dark" ? SUN : MOON; }
const init = current();
if (init !== "system") root.setAttribute("data-mode", init);
document.addEventListener("DOMContentLoaded", () => {
updateIcon();
const toggle = document.getElementById("themeToggle");
if (toggle) toggle.addEventListener("click", () => setMode(effective() === "dark" ? "light" : "dark"));
const nav = document.querySelector(".nav");
const onScroll = () => { if (nav) nav.classList.toggle("scrolled", window.scrollY > 8); };
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
const obs = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); obs.unobserve(e.target); } });
}, { threshold: 0.12 });
document.querySelectorAll(".reveal").forEach((el) => obs.observe(el));
const y = document.getElementById("year");
if (y) y.textContent = new Date().getFullYear();
});
})();
styles.css
+213
View File
@@ -0,0 +1,213 @@
/*
Portage by pvrz
https://github.com/pvrzz/Portage/
File Name: styles.css
*/
:root {
--ink-900: #18181b;
--ink-800: #27272a;
--ink-700: #3f3f46;
--ink-600: #52525b;
--ink-500: #71717a;
--ink-400: #a1a1aa;
--ink-300: #d4d4d8;
--ink-200: #e4e4e7;
--ink-100: #f4f4f5;
--paper: #ffffff;
--bg: #fafafa;
--line: #e7e7ea;
--accent: #18181b;
--accent-contrast: #fafafa;
--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
--radius: 14px;
--radius-sm: 9px;
--shadow: 0 1px 2px rgba(24,24,27,.04), 0 12px 32px rgba(24,24,27,.08);
--shadow-lg: 0 30px 70px rgba(24,24,27,.16);
--ease: cubic-bezier(.22,.61,.36,1);
--maxw: 1120px;
}
:root[data-mode="dark"] {
--ink-900: #fafafa; --ink-800: #f4f4f5; --ink-700: #e4e4e7; --ink-600: #d4d4d8;
--ink-500: #a1a1aa; --ink-400: #71717a; --ink-300: #52525b; --ink-200: #3f3f46; --ink-100: #27272a;
--paper: #1c1c1f; --bg: #131316; --line: #2a2a2e;
--accent: #fafafa; --accent-contrast: #18181b;
--shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
--shadow-lg: 0 30px 70px rgba(0,0,0,.6);
}
@media (prefers-color-scheme: dark) {
:root:not([data-mode]) {
--ink-900: #fafafa; --ink-800: #f4f4f5; --ink-700: #e4e4e7; --ink-600: #d4d4d8;
--ink-500: #a1a1aa; --ink-400: #71717a; --ink-300: #52525b; --ink-200: #3f3f46; --ink-100: #27272a;
--paper: #1c1c1f; --bg: #131316; --line: #2a2a2e;
--accent: #fafafa; --accent-contrast: #18181b;
--shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
--shadow-lg: 0 30px 70px rgba(0,0,0,.6);
}
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
font-family: var(--font); background: var(--bg); color: var(--ink-900);
line-height: 1.6; letter-spacing: -0.01em; overflow-x: hidden;
transition: background .3s var(--ease), color .3s var(--ease);
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--accent-contrast); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--mono); }
.nav {
position: sticky; top: 0; z-index: 50;
background: color-mix(in srgb, var(--bg) 82%, transparent);
backdrop-filter: blur(12px); border-bottom: 1px solid transparent;
transition: border-color .3s, background .3s;
}
.nav.scrolled { border-color: var(--line); }
.nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.brand .mk { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: var(--accent-contrast); display: grid; place-items: center; }
.brand .mk svg { width: 20px; height: 20px; }
.nav .links { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav .links a { padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--ink-600); transition: color .15s, background .15s; }
.nav .links a:hover { color: var(--ink-900); background: var(--ink-100); }
.nav .links a.cta { background: var(--accent); color: var(--accent-contrast); }
.nav .links a.cta:hover { filter: brightness(.92); background: var(--accent); }
.theme-toggle {
width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line);
background: transparent; color: var(--ink-700); cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s;
}
.theme-toggle:hover { background: var(--ink-100); color: var(--ink-900); }
.theme-toggle svg { width: 18px; height: 18px; }
@media (max-width: 720px) { .nav .links a.navlink { display: none; } }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
font: inherit; font-weight: 600; font-size: 15px; padding: 13px 22px; border-radius: 10px;
border: 1px solid transparent; cursor: pointer; transition: transform .12s var(--ease), filter .15s, background .15s; white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--accent); color: var(--accent-contrast); }
.btn-primary:hover { filter: brightness(.92); }
.btn-ghost { background: transparent; color: var(--ink-800); border-color: var(--line); }
.btn-ghost:hover { background: var(--ink-100); }
.btn-lg { padding: 15px 28px; font-size: 16px; }
.hero { position: relative; padding: 80px 0 40px; text-align: center; }
.hero .eyebrow {
display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-600);
background: var(--paper); border: 1px solid var(--line); padding: 7px 14px; border-radius: 99px; margin-bottom: 26px; box-shadow: var(--shadow);
}
.hero .eyebrow .dot { width: 7px; height: 7px; border-radius: 99px; background: var(--accent); }
.hero h1 { font-size: clamp(38px, 7vw, 76px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 750; }
.hero h1 .grad { background: linear-gradient(120deg, var(--ink-900), var(--ink-500)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero p.lead { font-size: clamp(16px, 2.4vw, 20px); color: var(--ink-600); max-width: 620px; margin: 24px auto 0; }
.hero .cta-row { display: flex; gap: 12px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.hero .trust { margin-top: 30px; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; color: var(--ink-500); font-size: 13.5px; }
.hero .trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero .trust svg { width: 15px; height: 15px; }
.frame {
position: relative; margin: 56px auto 0; max-width: 980px; border-radius: 16px;
background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden;
}
.frame .bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg); }
.frame .bar i { width: 11px; height: 11px; border-radius: 99px; background: var(--ink-300); display: inline-block; }
.frame .bar .addr { margin-left: 12px; font-size: 12px; color: var(--ink-500); font-family: var(--mono); }
.frame img { display: block; width: 100%; height: auto; }
.glow { position: absolute; inset: -10% 10% auto 10%; height: 320px; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 18%, transparent), transparent); filter: blur(30px); z-index: -1; }
section { padding: 70px 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.section-head .tag { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-500); }
.section-head h2 { font-size: clamp(28px, 4.5vw, 44px); letter-spacing: -0.03em; margin-top: 12px; font-weight: 720; }
.section-head p { color: var(--ink-600); margin-top: 14px; font-size: 16px; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature {
background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--ink-300); }
.feature .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--accent); color: var(--accent-contrast); display: grid; place-items: center; margin-bottom: 18px; }
.feature .ic svg { width: 23px; height: 23px; }
.feature h3 { font-size: 18px; letter-spacing: -0.02em; }
.feature p { color: var(--ink-600); font-size: 14.5px; margin-top: 8px; }
@media (max-width: 860px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }
.shots { display: grid; gap: 30px; }
.shot { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center; }
.shot:nth-child(even) .shot-copy { order: 2; }
.shot-copy h3 { font-size: 24px; letter-spacing: -0.02em; }
.shot-copy p { color: var(--ink-600); margin-top: 10px; font-size: 15px; }
.shot-copy .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip { font-size: 12.5px; font-weight: 600; color: var(--ink-600); background: var(--ink-100); border: 1px solid var(--line); padding: 5px 11px; border-radius: 99px; }
.shot .frame { margin: 0; max-width: none; }
@media (max-width: 820px) { .shot { grid-template-columns: 1fr; } .shot:nth-child(even) .shot-copy { order: 0; } }
.table-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
table.matrix { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.matrix th, table.matrix td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--line); }
table.matrix thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-500); background: var(--bg); }
table.matrix tbody tr:last-child td { border-bottom: 0; }
table.matrix td.c { text-align: center; width: 130px; }
table.matrix .yes { color: var(--ink-900); font-weight: 600; }
table.matrix .no { color: var(--ink-400); }
table.matrix td:first-child { font-weight: 600; }
.cta-band { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 56px 32px; text-align: center; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.cta-band h2 { font-size: clamp(26px, 4vw, 40px); letter-spacing: -0.03em; }
.cta-band p { color: var(--ink-600); margin: 12px auto 26px; max-width: 480px; }
.cta-band .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.dl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 10px; }
@media (max-width: 760px) { .dl-grid { grid-template-columns: 1fr; } }
.dl-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.dl-card .top { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.dl-card .logo { width: 46px; height: 46px; flex: none; }
.dl-card .logo svg { width: 46px; height: 46px; }
.dl-card h3 { font-size: 20px; }
.dl-card .ver { font-size: 12.5px; color: var(--ink-500); }
.dl-card .btn { width: 100%; margin-top: 18px; }
.steps { margin-top: 22px; counter-reset: s; display: grid; gap: 14px; }
.steps li { list-style: none; display: flex; gap: 13px; font-size: 14px; color: var(--ink-700); }
.steps li::before { counter-increment: s; content: counter(s); flex: none; width: 24px; height: 24px; border-radius: 99px; background: var(--accent); color: var(--accent-contrast); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.steps code { font-family: var(--mono); font-size: 12.5px; background: var(--ink-100); padding: 1px 6px; border-radius: 5px; }
.note { display: flex; gap: 11px; align-items: flex-start; background: var(--ink-100); border-radius: var(--radius-sm); padding: 15px 17px; font-size: 13.5px; color: var(--ink-600); margin-top: 26px; }
.note svg { width: 18px; height: 18px; flex: none; margin-top: 1px; stroke: var(--ink-500); }
.page-head { text-align: center; padding: 64px 0 8px; }
.page-head h1 { font-size: clamp(34px, 6vw, 56px); letter-spacing: -0.03em; }
.page-head p { color: var(--ink-600); margin-top: 14px; font-size: 17px; }
.star-band { text-align: center; margin-top: 40px; }
.ghstar { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--paper); padding: 12px 20px; border-radius: 11px; font-weight: 600; font-size: 15px; box-shadow: var(--shadow); transition: transform .15s, border-color .15s; }
.ghstar:hover { transform: translateY(-2px); border-color: var(--ink-400); }
.ghstar svg { width: 19px; height: 19px; }
.foot { border-top: 1px solid var(--line); margin-top: 50px; padding: 40px 0; }
.foot-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.foot .brand { font-size: 15px; }
.foot .spacer { flex: 1; }
.foot .links2 { display: flex; gap: 18px; font-size: 14px; color: var(--ink-600); }
.foot .links2 a:hover { color: var(--ink-900); }
.foot .made { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-500); font-size: 14px; }
.foot .made a { color: var(--ink-700); font-weight: 600; }
.foot .made .heart { color: var(--accent); display: inline-flex; }
.foot .made .heart svg { width: 14px; height: 14px; animation: beat 1.4s var(--ease) infinite; }
@keyframes beat { 0%,100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.float { animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .001s !important; transition-duration: .001s !important; }
html { scroll-behavior: auto; }
}