snapraid/ui.html
Andrea Mazzoleni 493c444c58 Auto update
2026-04-14 09:56:55 +02:00

229 lines
12 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A backup program for disk arrays. It stores parity information of your data and it recovers from up to six disk failures">
<meta name="keywords" content="snapraid snapshot raid backup disk array redundancy parity">
<title>SnapRAID UI & Daemon</title>
<link rel="stylesheet" href="style.css">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<script src="script.js"></script>
<!-- Google Analytics 4 -->
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-W1Z5FKHYQ4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-W1Z5FKHYQ4');
</script>
<!-- Google Universal Analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-21967501-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<header>
<div class="container nav-container">
<a href="index" class="logo">
<img src="android-chrome-192x192.png" width="32" height="32"/>
SnapRAID
</a>
<nav>
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="menu-icon"><svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg></label>
<ul>
<li><a href="index" >Home</a></li>
<li><a href="ui" class="active">UI & Daemon</a></li>
<li><a href="howitworks" >How it Works</a></li>
<li><a href="design" >Design</a></li>
<li><a href="compare" >Compare</a></li>
<li><a href="manual" >Manual</a></li>
<li><a href="faq" >FAQ</a></li>
<li><a href="support" >Support</a></li>
<li><a href="download" class="nav-cta">Download</a></li>
<li>
<button class="theme-toggle" aria-label="Toggle theme">
<svg class="sun-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
<svg class="moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
</button>
</li>
</ul>
</nav>
</div>
</header>
<div class="container" style="padding: 4rem 20px;">
<div class="daemon-header" style="text-align: center; margin-bottom: 4rem;">
<h3 class="accent-text">NEXT GENERATION</h3>
<h1>Classic Reliability<br/>Modern Control</h1>
<p style="max-width: 800px; margin: 0 auto;">
The SnapRAID Daemon is the modern companion service designed to move your storage from a manual,
terminal-based workflow to an "always-on" background intelligence.
</p>
</div>
<div class="grid grid-2-cols" style="margin-bottom: 4rem;">
<div>
<h2>Why the Daemon?</h2>
<div style="margin-top: 2rem;">
<h3>The "Set-and-Forget" Philosophy</h3>
<p>The daemon handles the heavy lifting so you don't have to. It proactively monitors array health and manages the parity lifecycle in the background. If it detects a massive accidental deletion or a hardware error, it triggers a Safety Freeze, protecting your parity until you intervene. It is the intelligence that knows when to work and the restraint to stay silent when your disks are idle.</p>
<h3>The Modern Visual Experience</h3>
<p>Move your management from the terminal to the browser. The integrated Web UI provides a high-fidelity command center that is served natively by the daemon, no complex web server setup required.</p>
</div>
</div>
<div class="ui-shot" data-large="desk-dashboard.png" style="min-height: 450px;">
<img src="desk-dashboard.png" alt="Daemon Dashboard">
<div class="ui-shot-caption">Daemon Dashboard</div>
</div>
</div>
<h2 class="section-title">Feature Spotlight</h2>
<div class="grid grid-3-cols">
<div class="card">
<h3>Autonomous Maintenance</h3>
<p class="card-subtitle">SnapRAID on Autopilot</p>
<p>Stop managing cron jobs. The daemon handles the full lifecycle of up, diff, sync, and scrub based on your custom schedule, ensuring your parity is never stale.</p>
</div>
<!--
<div class="card">
<h3>The Modern Web UI</h3>
<p class="card-subtitle">Experience the UI, Forget the CLI</p>
<p>A high-performance dashboard with real-time progress bars, ETAs, and a visual "Blocks Age" history map. No CLI required for daily operations.</p>
</div>
-->
<div class="card">
<h3>Active Health Guard</h3>
<p class="card-subtitle">Listen to Your Disks</p>
<p>Beyond parity, the daemon watches the hardware. With integrated SMART monitoring, it detects pre-failure symptoms and rising temperatures before a drive goes dark.</p>
</div>
<div class="card">
<h3>Intelligent Power Management</h3>
<p class="card-subtitle">Spin-down Aware Intelligence</p>
<p>Intelligent logic ensures disks not accessed by applications are automatically spun down. Routine health probes respect standby states to save energy and hardware life.</p>
</div>
<div class="card">
<h3>Safety Interlocks</h3>
<p class="card-subtitle">Defend Against the Accidental</p>
<p>Massive accidental deletion? The daemon's safety thresholds will freeze a sync task instantly, protecting your parity from reflecting a disaster</p>
</div>
<div class="card">
<h3>Multi-Channel Alerts</h3>
<p class="card-subtitle">In the Loop, Everywhere</p>
<p>Whether it's a successful scrub or a critical disk error, get notified via ntfy.sh webhooks, email, or system logs the moment it happens.</p>
</div>
<div class="card">
<h3>Open for Integration</h3>
<p class="card-subtitle">The Terminal, Reimagined for Developers</p>
<p>Full REST API backend designed for third-party integration. Connect your array to Home Assistant, custom scripts, or mobile apps.</p>
</div>
</div>
<h2 style="margin-top: 4rem;">Desktop UI Gallery</h2>
<div class="ui-gallery">
<div class="ui-shot" data-large="desk-disks.png">
<img src="desk-disks.png" alt="Dashboard">
<div class="ui-shot-caption">Disk Health</div>
</div>
<div class="ui-shot" data-large="desk-smart.png">
<img src="desk-smart.png" alt="Smart Details">
<div class="ui-shot-caption">Smart Details</div>
</div>
<div class="ui-shot" data-large="desk-tasks.png">
<img src="desk-tasks.png" alt="Task Manager">
<div class="ui-shot-caption">Task Manager</div>
</div>
<div class="ui-shot" data-large="desk-differences.png">
<img src="desk-differences.png" alt="Differences">
<div class="ui-shot-caption">Differences</div>
</div>
<div class="ui-shot" data-large="desk-recovery.png">
<img src="desk-recovery.png" alt="File Recovery">
<div class="ui-shot-caption">File Recovery</div>
</div>
<div class="ui-shot" data-large="desk-settings.png">
<img src="desk-settings.png" alt="Settings">
<div class="ui-shot-caption">Settings</div>
</div>
</div>
<h2 style="margin-top: 4rem;">Mobile UI Gallery</h2>
<div class="ui-gallery ui-phone-gallery">
<div class="ui-shot" data-large="phone-dashboard.png">
<img src="phone-dashboard.png" alt="Dashboard">
<div class="ui-shot-caption">Dashboard</div>
</div>
<div class="ui-shot" data-large="phone-disks.png">
<img src="phone-disks.png" alt="Disk Health">
<div class="ui-shot-caption">Disk Health</div>
</div>
<div class="ui-shot" data-large="phone-tasks.png">
<img src="phone-tasks.png" alt="Task Manager">
<div class="ui-shot-caption">Task Manager</div>
</div>
<div class="ui-shot" data-large="phone-differences.png">
<img src="phone-differences.png" alt="Differences">
<div class="ui-shot-caption">Differences</div>
</div>
<div class="ui-shot" data-large="phone-recovery.png">
<img src="phone-recovery.png" alt="File Recovery">
<div class="ui-shot-caption">File Recovery</div>
</div>
<div class="ui-shot" data-large="phone-settings.png">
<img src="phone-settings.png" alt="Settings">
<div class="ui-shot-caption">Settings</div>
</div>
</div>
</div>
<!-- Preview Overlay -->
<div id="ui-preview-overlay">
<img id="ui-preview-img" src="" alt="Large Preview">
</div>
<!-- Footer -->
<footer>
<div class="container footer-content">
<div class="footer-col">
<div class="logo">
<img src="android-chrome-192x192.png" width="32" height="32"/>
SnapRAID
</div>
<p>Copyright &copy; 2026 Andrea Mazzoleni</p>
<p class="license">Distributed under GPL v3 License</p>
</div>
<div class="footer-col">
<h4>Links</h4>
<ul class="footer-list">
<li><a href="https://github.com/amadvance/snapraid/">GitHub SnapRAID CLI</a></li>
<li><a href="https://github.com/amadvance/snapraid-daemon/">GitHub SnapRAID Daemon</a></li>
<li><a href="https://www.reddit.com/r/Snapraid/">Reddit</a></li>
<li><a href="https://sourceforge.net/p/snapraid/">SourceForge</a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>