ayushyaandClaude Code
19c82c5068
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>
373 lines
18 KiB
HTML
373 lines
18 KiB
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>
|