Rebuild Noo site with interactive mockups and add privacy policy
Deploy noo (noo.ayushya.dev) / deploy (push) Successful in 15s
Deploy noo (noo.ayushya.dev) / deploy (push) Successful in 15s
Use the app's monochrome icon, add live phone mockups for accounts, locks, sync, sharing and appearance options, a tab list, coming-soon platforms, and a full privacy policy page. Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
+372
-307
@@ -1,307 +1,372 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Noo — a Nextcloud client that feels like it belongs on your phone</title>
|
||||
<meta name="description" content="Noo is a fast, private, deeply customizable Nextcloud client for Android and iOS. Browse files and photos, sync for offline, and make it look like yours.">
|
||||
<meta property="og:title" content="Noo — a Nextcloud client that feels like it belongs on your phone">
|
||||
<meta property="og:description" content="Fast, private, and deeply customizable. Browse files and photos, sync for offline, and make Noo look like yours.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://noo.ayushya.dev">
|
||||
<meta name="theme-color" content="#F3EFE6">
|
||||
<link rel="icon" href="favicon.svg" type="image/svg+xml">
|
||||
<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=Instrument+Sans:wght@400;500;600&family=Schibsted+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<a class="skip-link" href="#main">Skip to content</a>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="wrap header-row">
|
||||
<a class="wordmark" href="#top">
|
||||
<span class="wordmark-mark" aria-hidden="true"></span>
|
||||
noo
|
||||
</a>
|
||||
<nav class="site-nav" aria-label="Primary">
|
||||
<a href="#features">Features</a>
|
||||
<a href="#customize">Customize</a>
|
||||
<a href="#privacy">Privacy</a>
|
||||
</nav>
|
||||
<a class="btn btn-primary btn-sm" href="#get">Get Noo</a>
|
||||
<button class="nav-toggle" id="navToggle" aria-label="Open menu" aria-expanded="false">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
</div>
|
||||
<nav class="mobile-nav" id="mobileNav" aria-label="Primary">
|
||||
<a href="#features">Features</a>
|
||||
<a href="#customize">Customize</a>
|
||||
<a href="#privacy">Privacy</a>
|
||||
<a class="btn btn-primary btn-sm" href="#get">Get Noo</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
|
||||
<!-- ============ HERO ============ -->
|
||||
<section class="hero" id="top">
|
||||
<div class="wrap hero-grid">
|
||||
<div class="hero-copy">
|
||||
<p class="eyebrow">For Nextcloud, unofficial</p>
|
||||
<h1>Your cloud.<br>Looking like <em>yours</em>.</h1>
|
||||
<p class="hero-sub">
|
||||
Noo is a fast, private Nextcloud client that browses files and
|
||||
photos the way a native app should — and lets you rebuild its
|
||||
whole shell around how you actually use your phone.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="btn btn-primary btn-lg" href="#get">Get Noo</a>
|
||||
<a class="btn btn-outline btn-lg" href="https://github.com" target="_blank" rel="noopener">View source</a>
|
||||
</div>
|
||||
<ul class="hero-proof">
|
||||
<li>No password stored — Login Flow v2</li>
|
||||
<li>Offline device sync</li>
|
||||
<li>Open source</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="hero-visual" id="heroVisual" aria-hidden="true">
|
||||
<div class="glow"></div>
|
||||
|
||||
<div class="phone" data-depth="0.15">
|
||||
<div class="phone-notch"></div>
|
||||
<div class="phone-screen">
|
||||
<div class="mini-topbar">
|
||||
<span class="mini-title">Files</span>
|
||||
<span class="mini-dot"></span>
|
||||
</div>
|
||||
<div class="mini-list">
|
||||
<div class="mini-row"><span class="mini-ic ic-folder"></span><span class="mini-lines"><b></b><i></i></span></div>
|
||||
<div class="mini-row"><span class="mini-ic ic-image"></span><span class="mini-lines"><b></b><i></i></span></div>
|
||||
<div class="mini-row mini-row-active"><span class="mini-ic ic-file"></span><span class="mini-lines"><b></b><i></i></span></div>
|
||||
<div class="mini-row"><span class="mini-ic ic-folder"></span><span class="mini-lines"><b></b><i></i></span></div>
|
||||
</div>
|
||||
<div class="mini-bar">
|
||||
<span class="mini-bar-pill"></span>
|
||||
<span class="mini-bar-dot"></span>
|
||||
<span class="mini-bar-dot"></span>
|
||||
<span class="mini-bar-dot"></span>
|
||||
<span class="mini-bar-dot"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chip chip-photo" data-depth="0.55">
|
||||
<div class="chip-photo-grid">
|
||||
<span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chip chip-row" data-depth="0.4">
|
||||
<span class="mini-ic ic-share"></span>
|
||||
<span class="mini-lines"><b></b><i></i></span>
|
||||
</div>
|
||||
|
||||
<div class="chip chip-swatches" data-depth="0.7">
|
||||
<span class="swatch" style="--c:#8D0DE3"></span>
|
||||
<span class="swatch" style="--c:#2940A8"></span>
|
||||
<span class="swatch" style="--c:#3E7A23"></span>
|
||||
<span class="swatch" style="--c:#8C5A0E"></span>
|
||||
</div>
|
||||
|
||||
<div class="chip chip-toggle" data-depth="0.5">
|
||||
<span class="mini-lines mini-lines-toggle"><b></b><i></i></span>
|
||||
<span class="mini-toggle mini-toggle-on"><i></i></span>
|
||||
</div>
|
||||
|
||||
<div class="chip chip-badge" data-depth="0.85">
|
||||
<span class="mini-ic ic-lock"></span>
|
||||
Offline ready
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ FEATURES ============ -->
|
||||
<section class="section" id="features">
|
||||
<div class="wrap">
|
||||
<p class="eyebrow">Features</p>
|
||||
<h2>Everything your Nextcloud does. Nothing it doesn't.</h2>
|
||||
<p class="section-sub">
|
||||
Files, photos, sharing and sync — built as a real mobile app, not a
|
||||
browser tab pinned to your home screen.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-features">
|
||||
<article class="card">
|
||||
<span class="card-ic ic-folder-lg"></span>
|
||||
<h3>Files, browsed properly</h3>
|
||||
<p>Grid or list, sorted your way, with the same filters and
|
||||
controls whether you're picking a file, uploading, or moving
|
||||
one into place.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<span class="card-ic ic-image-lg"></span>
|
||||
<h3>Photos, grouped by month</h3>
|
||||
<p>Every image and video across your account in one gallery —
|
||||
filter to just photos, just videos, or just favorites.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<span class="card-ic ic-download-lg"></span>
|
||||
<h3>Offline, for real</h3>
|
||||
<p>Pick folders to mirror locally and keep browsing — reading,
|
||||
opening, previewing — with no connection at all.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<span class="card-ic ic-share-lg"></span>
|
||||
<h3>Sharing, without the detour</h3>
|
||||
<p>Share with people or a public link, see who has access, and
|
||||
copy that link — all from one sheet, not three menus.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<span class="card-ic ic-clock-lg"></span>
|
||||
<h3>Activity & recent</h3>
|
||||
<p>What changed, and where — grouped into today, yesterday and
|
||||
this week, so catching up takes seconds.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<span class="card-ic ic-users-lg"></span>
|
||||
<h3>Multiple accounts</h3>
|
||||
<p>Switch between personal and work Nextcloud instances with a
|
||||
swipe — each with its own sync, cache and lock.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ CUSTOMIZE ============ -->
|
||||
<section class="section section-alt" id="customize">
|
||||
<div class="wrap">
|
||||
<p class="eyebrow">Customize</p>
|
||||
<h2>Shape it around your thumb, not the other way round.</h2>
|
||||
<p class="section-sub">
|
||||
Every screen bends to a handful of real settings — try a few
|
||||
right here.
|
||||
</p>
|
||||
|
||||
<div class="customize-grid">
|
||||
|
||||
<div class="customize-demo" id="accentDemo">
|
||||
<div class="demo-preview">
|
||||
<div class="demo-topbar">
|
||||
<span class="demo-dot" style="background:var(--demo-accent)"></span>
|
||||
<span class="demo-line" style="width:38%"></span>
|
||||
</div>
|
||||
<div class="demo-pill" style="background:var(--surface3); background:color-mix(in srgb, var(--demo-accent) 16%, transparent); color:var(--demo-accent)">Active tab</div>
|
||||
<div class="demo-row"><span class="demo-line" style="width:60%"></span></div>
|
||||
<div class="demo-row"><span class="demo-line" style="width:44%"></span></div>
|
||||
</div>
|
||||
<div class="demo-controls">
|
||||
<h3>Pick your accent</h3>
|
||||
<p>Six built-in colors, or match your wallpaper with dynamic
|
||||
color on Android.</p>
|
||||
<div class="swatch-row" role="group" aria-label="Accent color">
|
||||
<button class="swatch-btn is-active" style="--c:#8D0DE3" data-accent="#8D0DE3" aria-label="Violet"></button>
|
||||
<button class="swatch-btn" style="--c:#2940A8" data-accent="#2940A8" aria-label="Blue"></button>
|
||||
<button class="swatch-btn" style="--c:#3E7A23" data-accent="#3E7A23" aria-label="Green"></button>
|
||||
<button class="swatch-btn" style="--c:#8C5A0E" data-accent="#8C5A0E" aria-label="Amber"></button>
|
||||
<button class="swatch-btn" style="--c:#A8202A" data-accent="#A8202A" aria-label="Red"></button>
|
||||
<button class="swatch-btn" style="--c:#0E0D0B" data-accent="#0E0D0B" aria-label="Wallpaper"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="customize-demo" id="barDemo">
|
||||
<div class="demo-preview demo-preview-bar">
|
||||
<div class="demo-screen-fill"></div>
|
||||
<div class="demo-bar" id="demoBar">
|
||||
<span class="demo-bar-item is-on"></span>
|
||||
<span class="demo-bar-item"></span>
|
||||
<span class="demo-bar-item"></span>
|
||||
<span class="demo-bar-item"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-controls">
|
||||
<h3>Floating or attached</h3>
|
||||
<p>The bottom bar can sit flush with the edge, or float free
|
||||
with rounded corners — your call.</p>
|
||||
<div class="segmented" role="group" aria-label="Bottom bar style">
|
||||
<button class="segmented-btn" data-bar="attached">Attached</button>
|
||||
<button class="segmented-btn is-active" data-bar="floating">Floating</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="customize-list">
|
||||
<h3>And the rest</h3>
|
||||
<ul class="feature-list">
|
||||
<li>Reorder tabs, hide the ones you never open</li>
|
||||
<li>Move Search into the bottom bar</li>
|
||||
<li>Light, dark, or match the system</li>
|
||||
<li>Pure black backgrounds in dark mode</li>
|
||||
<li>Choose what swiping a file left or right does</li>
|
||||
<li>Reorder the bulk-action bar for multi-select</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ PRIVACY ============ -->
|
||||
<section class="section" id="privacy">
|
||||
<div class="wrap privacy-grid">
|
||||
<div>
|
||||
<p class="eyebrow">Privacy</p>
|
||||
<h2>It's your server. Noo just visits.</h2>
|
||||
<p class="section-sub">
|
||||
Noo never asks for your password. Signing in hands off to your
|
||||
Nextcloud server's own login page (Login Flow v2), which returns
|
||||
a revocable app token — not your credentials. Nothing but that
|
||||
token, and whatever you choose to sync, ever leaves your device.
|
||||
</p>
|
||||
</div>
|
||||
<ul class="privacy-points">
|
||||
<li><span class="pt-ic ic-lock"></span> No password stored on device</li>
|
||||
<li><span class="pt-ic ic-server"></span> Talks only to your own server</li>
|
||||
<li><span class="pt-ic ic-code"></span> Open source, auditable</li>
|
||||
<li><span class="pt-ic ic-off"></span> No analytics, no trackers</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ GET ============ -->
|
||||
<section class="section section-cta" id="get">
|
||||
<div class="wrap cta-inner">
|
||||
<h2>Bring your Nextcloud with you.</h2>
|
||||
<p class="section-sub">Free and open source. Point it at your server and go.</p>
|
||||
<div class="hero-actions cta-actions">
|
||||
<a class="btn btn-primary btn-lg" href="#">Download for Android</a>
|
||||
<a class="btn btn-outline btn-lg" href="#">Download for iOS</a>
|
||||
</div>
|
||||
<p class="cta-fine">Or <a href="https://github.com" target="_blank" rel="noopener">build it from source</a> — it's just Flutter.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="wrap footer-row">
|
||||
<a class="wordmark wordmark-sm" href="#top">
|
||||
<span class="wordmark-mark" aria-hidden="true"></span>
|
||||
noo
|
||||
</a>
|
||||
<p class="footer-note">Noo is an independent, unofficial Nextcloud client. Nextcloud is a trademark of Nextcloud GmbH.</p>
|
||||
<nav class="footer-links" aria-label="Footer">
|
||||
<a href="https://github.com" target="_blank" rel="noopener">GitHub</a>
|
||||
<a href="#privacy">Privacy</a>
|
||||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Noo — a Nextcloud client that feels like it belongs on your phone</title>
|
||||
<meta name="description" content="Noo is a fast, private, deeply customizable Nextcloud client. Multiple accounts, biometric locks, offline and background sync, and a shell you can rebuild around your thumb.">
|
||||
<meta property="og:title" content="Noo — a Nextcloud client that feels like it belongs on your phone">
|
||||
<meta property="og:description" content="Multiple accounts, locks, offline sync, native-feeling sharing, and an interface you can reshape. No analytics, no third parties.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://noo.ayushya.dev">
|
||||
<meta name="theme-color" content="#F3EFE6">
|
||||
<link rel="icon" href="favicon.svg" type="image/svg+xml">
|
||||
<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=Instrument+Sans:wght@400;500;600;700&family=Schibsted+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<a class="skip-link" href="#main">Skip to content</a>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="wrap header-row">
|
||||
<a class="wordmark" href="#top">
|
||||
<span class="wordmark-mark" aria-hidden="true"></span>
|
||||
noo
|
||||
</a>
|
||||
<nav class="site-nav" aria-label="Primary">
|
||||
<a href="#features">Features</a>
|
||||
<a href="#customize">Customize</a>
|
||||
<a href="#tabs">Tabs</a>
|
||||
<a href="privacy.html">Privacy</a>
|
||||
</nav>
|
||||
<a class="btn btn-primary btn-sm" href="#get">Get Noo</a>
|
||||
<button class="nav-toggle" id="navToggle" aria-label="Open menu" aria-expanded="false">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
</div>
|
||||
<nav class="mobile-nav" id="mobileNav" aria-label="Primary">
|
||||
<a href="#features">Features</a>
|
||||
<a href="#customize">Customize</a>
|
||||
<a href="#tabs">Tabs</a>
|
||||
<a href="privacy.html">Privacy</a>
|
||||
<a class="btn btn-primary btn-sm" href="#get">Get Noo</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
|
||||
<!-- ============ HERO ============ -->
|
||||
<section class="hero" id="top">
|
||||
<div class="wrap hero-grid">
|
||||
<div class="hero-copy">
|
||||
<p class="eyebrow">For Nextcloud, unofficial</p>
|
||||
<h1>Your cloud.<br>Looking like <em>yours</em>.</h1>
|
||||
<p class="hero-sub">
|
||||
Noo is a fast, private Nextcloud client that browses files and
|
||||
photos the way a native app should — and lets you rebuild its
|
||||
whole shell around how you actually use your phone.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="btn btn-primary btn-lg" href="#get">Get Noo</a>
|
||||
<a class="btn btn-outline btn-lg" href="#customize">Try the customizer</a>
|
||||
</div>
|
||||
<ul class="hero-proof">
|
||||
<li>No password stored — Login Flow v2</li>
|
||||
<li>Talks only to your server</li>
|
||||
<li>No analytics, no trackers</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="hero-visual" id="heroVisual">
|
||||
<div class="glow"></div>
|
||||
<div class="phone-wrap" data-depth="0.15"><div id="heroPhone" class="phone-host"></div></div>
|
||||
|
||||
<div class="chip chip-photo" data-depth="0.55" aria-hidden="true">
|
||||
<div class="chip-photo-grid"><span></span><span></span><span></span><span></span></div>
|
||||
</div>
|
||||
<div class="chip chip-share" data-depth="0.4" aria-hidden="true">
|
||||
<svg class="i" width="18" height="18"><use href="icons.svg#i-share"/></svg>
|
||||
<span><b>Ana Souza</b><i>Can edit</i></span>
|
||||
</div>
|
||||
<div class="chip chip-lock" data-depth="0.7" aria-hidden="true">
|
||||
<svg class="i" width="18" height="18"><use href="icons.svg#i-fingerprint"/></svg>
|
||||
<span>Locked</span>
|
||||
</div>
|
||||
<div class="chip chip-badge" data-depth="0.85" aria-hidden="true">
|
||||
<svg class="i" width="16" height="16"><use href="icons.svg#i-offline"/></svg>
|
||||
Offline ready
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ FEATURES ============ -->
|
||||
<section class="section" id="features">
|
||||
<div class="wrap">
|
||||
<p class="eyebrow">Features</p>
|
||||
<h2>Everything your Nextcloud does. Nothing it doesn't.</h2>
|
||||
<p class="section-sub">
|
||||
Built as a real mobile app, not a browser tab pinned to your home
|
||||
screen. Every demo below is live — poke at it.
|
||||
</p>
|
||||
|
||||
<!-- Accounts -->
|
||||
<div class="showcase">
|
||||
<div class="showcase-copy">
|
||||
<span class="feat-ic"><svg class="i" width="22" height="22"><use href="icons.svg#i-users"/></svg></span>
|
||||
<h3>Multiple accounts, one tap apart</h3>
|
||||
<p>Keep your personal server, your work instance and the family
|
||||
box signed in at once. Switch from the avatar or the Settings
|
||||
list — each account keeps its own sync scope, cache and
|
||||
favorites, and you can lock switching behind your fingerprint.</p>
|
||||
<p class="demo-note" id="acctNote">Tap an account to make it active.</p>
|
||||
</div>
|
||||
<div class="showcase-demo">
|
||||
<div class="mock-card">
|
||||
<h5 class="mock-title">Accounts</h5>
|
||||
<div class="mock-group" id="acctDemo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Locks -->
|
||||
<div class="showcase showcase-flip">
|
||||
<div class="showcase-copy">
|
||||
<span class="feat-ic"><svg class="i" width="22" height="22"><use href="icons.svg#i-lock"/></svg></span>
|
||||
<h3>Locks where you want them</h3>
|
||||
<p>Gate opening the app, switching accounts, and revealing hidden
|
||||
files behind your device's own PIN, pattern or biometric. Noo
|
||||
never stores or even sees a PIN — it just asks the OS whether you
|
||||
are you.</p>
|
||||
<p class="demo-note">The two extra locks need the main one on, just like in the app.</p>
|
||||
</div>
|
||||
<div class="showcase-demo">
|
||||
<div class="mock-card">
|
||||
<h5 class="mock-title">Security</h5>
|
||||
<div class="mock-group" id="lockDemo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sync -->
|
||||
<div class="showcase">
|
||||
<div class="showcase-copy">
|
||||
<span class="feat-ic"><svg class="i" width="22" height="22"><use href="icons.svg#i-offline"/></svg></span>
|
||||
<h3>Offline and background sync</h3>
|
||||
<p>Mirror a few folders — or the whole account — to the device and
|
||||
keep reading, opening and previewing with no connection. Background
|
||||
sync tops them up while you aren't looking, on Wi-Fi only unless
|
||||
you say otherwise, and it tells you when something conflicts.</p>
|
||||
<p class="demo-note">Flip the options, then hit Sync now.</p>
|
||||
</div>
|
||||
<div class="showcase-demo">
|
||||
<div class="mock-card">
|
||||
<h5 class="mock-title">File sync</h5>
|
||||
<div class="mock-group" id="syncDemo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sharing -->
|
||||
<div class="showcase showcase-flip">
|
||||
<div class="showcase-copy">
|
||||
<span class="feat-ic"><svg class="i" width="22" height="22"><use href="icons.svg#i-share"/></svg></span>
|
||||
<h3>Sharing that feels like Nextcloud</h3>
|
||||
<p>The same share sheet you know from the web and the official
|
||||
app: invite people or groups with a permission pill, switch a public
|
||||
link on and copy it, or skip all that and send the file's bytes
|
||||
straight to another app. One sheet, not three menus.</p>
|
||||
<p class="demo-note">Change a permission, remove someone, toggle the link.</p>
|
||||
</div>
|
||||
<div class="showcase-demo">
|
||||
<div class="sheet" id="shareDemo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ CUSTOMIZE ============ -->
|
||||
<section class="section section-alt" id="customize">
|
||||
<div class="wrap">
|
||||
<p class="eyebrow">Customize</p>
|
||||
<h2>Shape it around your thumb, not the other way round.</h2>
|
||||
<p class="section-sub">
|
||||
This is the real Noo layout, drawn from the app's own design
|
||||
tokens. Change a setting on the right and watch the phone.
|
||||
</p>
|
||||
|
||||
<div class="lab">
|
||||
<div class="lab-phone">
|
||||
<div class="phone-wrap phone-wrap-lg"><div id="labPhone" class="phone-host"></div></div>
|
||||
<p class="lab-hint">Tap the tabs, the menu and the avatar — they work.</p>
|
||||
</div>
|
||||
|
||||
<div class="lab-controls">
|
||||
|
||||
<section class="ctl">
|
||||
<h3>Themes</h3>
|
||||
<p>Follow the system, or pick light or dark.</p>
|
||||
<div class="segmented segmented-full" role="group" aria-label="Theme" data-lab="theme">
|
||||
<button class="segmented-btn" data-val="system">System</button>
|
||||
<button class="segmented-btn" data-val="light">Light</button>
|
||||
<button class="segmented-btn" data-val="dark">Dark</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="ctl">
|
||||
<h3>Colors</h3>
|
||||
<p>Six built-in accents, or let Android's wallpaper colors take over. <span id="labAccentName" class="ctl-value"></span></p>
|
||||
<div class="swatch-row" id="labAccents" role="group" aria-label="Accent color"></div>
|
||||
<div class="ctl-row" id="amoledRow">
|
||||
<span><b>AMOLED black</b><i>Pure black backgrounds in dark mode</i></span>
|
||||
<button class="toggle" data-toggle="amoled" aria-label="AMOLED black"><i></i></button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="ctl">
|
||||
<h3>Bottom bar</h3>
|
||||
<p>Flush with the edge, or floating free. Optionally park Search in the bar too.</p>
|
||||
<div class="segmented segmented-full" role="group" aria-label="Bottom bar style" data-lab="bar">
|
||||
<button class="segmented-btn" data-val="attached">Attached</button>
|
||||
<button class="segmented-btn" data-val="floating">Floating</button>
|
||||
</div>
|
||||
<div class="ctl-row">
|
||||
<span><b>Search in bottom bar</b><i>Takes one tab slot and clears the top bar</i></span>
|
||||
<button class="toggle" data-toggle="searchInBar" aria-label="Search in bottom bar"><i></i></button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="ctl">
|
||||
<h3>Navigation menu</h3>
|
||||
<p>A hamburger that opens a drawer, or fold everything into the avatar.</p>
|
||||
<div class="segmented segmented-full" role="group" aria-label="Navigation menu" data-lab="nav">
|
||||
<button class="segmented-btn" data-val="drawer">Hamburger</button>
|
||||
<button class="segmented-btn" data-val="avatar">Avatar</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="ctl">
|
||||
<h3>Tabs</h3>
|
||||
<p id="labTabsNote"></p>
|
||||
<ul class="tab-list" id="labTabs"></ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="duo">
|
||||
<div class="mock-card" id="actionDemo">
|
||||
<h3>Action bar</h3>
|
||||
<p>Decide which bulk actions live in the multi-select bar. The first three sit inline; the rest wait behind “More”. Drag to reorder and watch the bar.</p>
|
||||
<div class="selbar-stage" id="actionBar"></div>
|
||||
<ul class="tab-list" id="actionOrder"></ul>
|
||||
</div>
|
||||
|
||||
<div class="mock-card" id="swipeDemo">
|
||||
<h3>Swiping</h3>
|
||||
<p>Pick what swiping a file does. Drag a row — release past halfway to peek, or all the way through to trigger it.</p>
|
||||
<div class="swipe-pick">
|
||||
<span>Swipe right</span>
|
||||
<div class="segmented segmented-sm" role="group" aria-label="Swipe right" data-swipe="right">
|
||||
<button class="segmented-btn" data-val="none">None</button>
|
||||
<button class="segmented-btn" data-val="favorite">Favorite</button>
|
||||
<button class="segmented-btn" data-val="delete">Delete</button>
|
||||
<button class="segmented-btn" data-val="share">Share</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swipe-pick">
|
||||
<span>Swipe left</span>
|
||||
<div class="segmented segmented-sm" role="group" aria-label="Swipe left" data-swipe="left">
|
||||
<button class="segmented-btn" data-val="none">None</button>
|
||||
<button class="segmented-btn" data-val="favorite">Favorite</button>
|
||||
<button class="segmented-btn" data-val="delete">Delete</button>
|
||||
<button class="segmented-btn" data-val="share">Share</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swipe-stage">
|
||||
<div class="swipe-list" id="swipeList"></div>
|
||||
<div class="swipe-toast" id="swipeToast" role="status" aria-live="polite"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ TABS ============ -->
|
||||
<section class="section" id="tabs">
|
||||
<div class="wrap">
|
||||
<p class="eyebrow">Tabs</p>
|
||||
<h2>Eight tabs. Pin the five you use.</h2>
|
||||
<p class="section-sub">
|
||||
Every view below is a tab you can pin to the bottom bar, reorder,
|
||||
or leave tucked in the menu.
|
||||
</p>
|
||||
<div class="tab-grid">
|
||||
<div class="tab-chip"><span class="tab-chip-ic"><svg class="i" width="22" height="22"><use href="icons.svg#i-folder"/></svg></span><div><h3>Files</h3><p>Browse, upload, sort and filter every folder.</p></div></div>
|
||||
<div class="tab-chip"><span class="tab-chip-ic"><svg class="i" width="22" height="22"><use href="icons.svg#i-photos"/></svg></span><div><h3>Photos</h3><p>Every image and video, grouped by month.</p></div></div>
|
||||
<div class="tab-chip"><span class="tab-chip-ic"><svg class="i" width="22" height="22"><use href="icons.svg#i-star"/></svg></span><div><h3>Favorites</h3><p>Everything you've starred, in one list.</p></div></div>
|
||||
<div class="tab-chip"><span class="tab-chip-ic"><svg class="i" width="22" height="22"><use href="icons.svg#i-activity"/></svg></span><div><h3>Activity</h3><p>What changed and who changed it.</p></div></div>
|
||||
<div class="tab-chip"><span class="tab-chip-ic"><svg class="i" width="22" height="22"><use href="icons.svg#i-trash"/></svg></span><div><h3>Trash</h3><p>Restore or permanently delete removed files.</p></div></div>
|
||||
<div class="tab-chip"><span class="tab-chip-ic"><svg class="i" width="22" height="22"><use href="icons.svg#i-share"/></svg></span><div><h3>Shares</h3><p>What you've shared, and what's shared with you.</p></div></div>
|
||||
<div class="tab-chip"><span class="tab-chip-ic"><svg class="i" width="22" height="22"><use href="icons.svg#i-clock"/></svg></span><div><h3>Recent</h3><p>Recently edited and opened, grouped by day.</p></div></div>
|
||||
<div class="tab-chip"><span class="tab-chip-ic"><svg class="i" width="22" height="22"><use href="icons.svg#i-offline"/></svg></span><div><h3>Offline</h3><p>Synced folders and files, no connection required.</p></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ PRIVACY ============ -->
|
||||
<section class="section section-alt" id="privacy">
|
||||
<div class="wrap privacy-grid">
|
||||
<div>
|
||||
<p class="eyebrow">Privacy</p>
|
||||
<h2>It's your server. Noo just visits.</h2>
|
||||
<p class="section-sub">
|
||||
Noo never asks for your password. Signing in hands off to your
|
||||
Nextcloud server's own login page (Login Flow v2), which returns
|
||||
a revocable app token — not your credentials. The app talks to
|
||||
your server and nowhere else, and collects nothing about you.
|
||||
</p>
|
||||
<p class="section-sub"><a class="text-link" href="privacy.html">Read the full privacy policy →</a></p>
|
||||
</div>
|
||||
<ul class="privacy-points">
|
||||
<li><span class="pt-ic"><svg class="i" width="20" height="20"><use href="icons.svg#i-lock"/></svg></span> No password stored on device</li>
|
||||
<li><span class="pt-ic"><svg class="i" width="20" height="20"><use href="icons.svg#i-server"/></svg></span> Talks only to your own server</li>
|
||||
<li><span class="pt-ic"><svg class="i" width="20" height="20"><use href="icons.svg#i-eye"/></svg></span> No analytics, no trackers, no ads</li>
|
||||
<li><span class="pt-ic"><svg class="i" width="20" height="20"><use href="icons.svg#i-database"/></svg></span> Your data never touches our servers — we don't have any</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ GET ============ -->
|
||||
<section class="section section-cta" id="get">
|
||||
<div class="wrap cta-inner">
|
||||
<h2>Bring your Nextcloud with you.</h2>
|
||||
<p class="section-sub">Free. Point it at your server and go.</p>
|
||||
<div class="hero-actions cta-actions">
|
||||
<a class="btn btn-primary btn-lg" href="#">Download for Android</a>
|
||||
</div>
|
||||
<ul class="soon-list" aria-label="Coming soon">
|
||||
<li>macOS <span>coming soon</span></li>
|
||||
<li>Windows <span>coming soon</span></li>
|
||||
<li>iOS <span>coming soon</span></li>
|
||||
</ul>
|
||||
<p class="oss-note">
|
||||
<svg class="i" width="20" height="20" aria-hidden="true"><use href="icons.svg#i-external"/></svg>
|
||||
<span>Noo is open source. Read the code, file an issue, or build it yourself on
|
||||
<!-- TODO: set the real repository URL -->
|
||||
<a class="text-link" href="#" id="githubLink">GitHub</a>.</span>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="wrap footer-row">
|
||||
<a class="wordmark wordmark-sm" href="#top">
|
||||
<span class="wordmark-mark" aria-hidden="true"></span>
|
||||
noo
|
||||
</a>
|
||||
<p class="footer-note">Noo is an independent, unofficial Nextcloud client. Nextcloud is a trademark of Nextcloud GmbH.</p>
|
||||
<nav class="footer-links" aria-label="Footer">
|
||||
<a href="#" class="github-link">GitHub</a>
|
||||
<a href="privacy.html">Privacy policy</a>
|
||||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user