Split repo into noo and portfolio workers
- noo: moved from nextcloud_client/website, deploys to noo.ayushya.dev - portfolio: moved root site into portfolio/, deploys to ayushya.dev - separate path-filtered Gitea workflows per worker
This commit is contained in:
+307
@@ -0,0 +1,307 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user