mirror of
https://github.com/DeNNiiInc/Advanced-Raid-Calculator.git
synced 2026-04-17 12:45:59 +00:00
296 lines
11 KiB
HTML
296 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Beyond Cloud Technology - RAID Calculator</title>
|
|
<meta
|
|
name="description"
|
|
content="Professional RAID calculator by Beyond Cloud Technology supporting standard RAID, Synology SHR, ZFS, and Unraid configurations with accurate usable storage calculations."
|
|
/>
|
|
<link rel="icon" type="image/png" href="Logo.png" />
|
|
<link rel="stylesheet" href="styles.css" />
|
|
<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=Inter:wght@300;400;500;600;700&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<header class="header">
|
|
<div class="header-content">
|
|
<h1 class="title">
|
|
<img src="Logo.png" alt="BCT Logo" class="title-icon" />
|
|
Beyond Cloud Technology - RAID Calculator
|
|
</h1>
|
|
<p class="subtitle">
|
|
Professional storage capacity planning for RAID, Synology SHR, ZFS &
|
|
Unraid configurations
|
|
</p>
|
|
<a
|
|
href="https://www.youtube.com/@beyondcloudtechnology"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="youtube-link"
|
|
>
|
|
<svg class="youtube-icon" viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"
|
|
/>
|
|
</svg>
|
|
Watch on YouTube @beyondcloudtechnology
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="main-content">
|
|
<div class="calculator-grid">
|
|
<!-- Configuration Panel -->
|
|
<section class="config-panel card">
|
|
<h2 class="section-title">Configuration</h2>
|
|
|
|
<div class="form-group">
|
|
<label for="raid-type" class="label">RAID Type</label>
|
|
<select id="raid-type" class="select">
|
|
<optgroup label="Standard RAID">
|
|
<option value="raid0">
|
|
RAID 0 - Striping (No Redundancy)
|
|
</option>
|
|
<option value="raid1">RAID 1 - Mirroring</option>
|
|
<option value="raid5" selected>RAID 5 - Single Parity</option>
|
|
<option value="raid6">RAID 6 - Double Parity</option>
|
|
<option value="raid10">RAID 10 - Mirrored Stripes</option>
|
|
</optgroup>
|
|
<optgroup label="Synology RAID">
|
|
<option value="shr">SHR - Synology Hybrid RAID</option>
|
|
<option value="shr2">
|
|
SHR-2 - Synology Hybrid RAID (2-disk fault tolerance)
|
|
</option>
|
|
</optgroup>
|
|
<optgroup label="ZFS RAID">
|
|
<option value="zfs-stripe">ZFS Stripe (No Redundancy)</option>
|
|
<option value="zfs-mirror">ZFS Mirror</option>
|
|
<option value="raidz1">RAIDZ1 - Single Parity</option>
|
|
<option value="raidz2">RAIDZ2 - Double Parity</option>
|
|
<option value="raidz3">RAIDZ3 - Triple Parity</option>
|
|
</optgroup>
|
|
<optgroup label="Unraid">
|
|
<option value="unraid-1">Unraid - 1 Parity Drive</option>
|
|
<option value="unraid-2">Unraid - 2 Parity Drives</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="num-drives" class="label">Number of Drives</label>
|
|
<div class="input-with-display">
|
|
<input
|
|
type="range"
|
|
id="num-drives"
|
|
class="slider"
|
|
min="2"
|
|
max="24"
|
|
value="4"
|
|
/>
|
|
<span id="num-drives-display" class="value-display">4</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="drive-size" class="label">Drive Size (TB)</label>
|
|
<select id="drive-size" class="select">
|
|
<option value="1">1 TB</option>
|
|
<option value="2">2 TB</option>
|
|
<option value="3">3 TB</option>
|
|
<option value="4">4 TB</option>
|
|
<option value="6">6 TB</option>
|
|
<option value="8">8 TB</option>
|
|
<option value="10">10 TB</option>
|
|
<option value="12" selected>12 TB</option>
|
|
<option value="14">14 TB</option>
|
|
<option value="16">16 TB</option>
|
|
<option value="18">18 TB</option>
|
|
<option value="20">20 TB</option>
|
|
<option value="22">22 TB</option>
|
|
<option value="24">24 TB</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="zfs-vdev-config" class="form-group" style="display: none">
|
|
<label for="num-vdevs" class="label">Number of vdevs</label>
|
|
<div class="input-with-display">
|
|
<input
|
|
type="range"
|
|
id="num-vdevs"
|
|
class="slider"
|
|
min="1"
|
|
max="8"
|
|
value="2"
|
|
/>
|
|
<span id="num-vdevs-display" class="value-display">2</span>
|
|
</div>
|
|
<p class="helper-text">
|
|
Each vdev will use the selected RAID type (mirror/RAIDZ)
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
id="drives-per-vdev-config"
|
|
class="form-group"
|
|
style="display: none"
|
|
>
|
|
<label for="drives-per-vdev" class="label">Drives per vdev</label>
|
|
<div class="input-with-display">
|
|
<input
|
|
type="range"
|
|
id="drives-per-vdev"
|
|
class="slider"
|
|
min="2"
|
|
max="12"
|
|
value="3"
|
|
/>
|
|
<span id="drives-per-vdev-display" class="value-display"
|
|
>3</span
|
|
>
|
|
</div>
|
|
<p class="helper-text" id="total-drives-text">Total drives: 6</p>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="label">Mixed Drive Sizes</label>
|
|
<div class="toggle-container">
|
|
<input type="checkbox" id="mixed-drives" class="toggle-input" />
|
|
<label for="mixed-drives" class="toggle-label">
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
<span class="toggle-text"
|
|
>Enable custom drive configuration</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
id="custom-drives-container"
|
|
class="custom-drives-container"
|
|
style="display: none"
|
|
>
|
|
<div id="drive-inputs" class="drive-inputs"></div>
|
|
</div>
|
|
|
|
<button id="calculate-btn" class="btn-primary">
|
|
<svg
|
|
class="btn-icon"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
Calculate Storage
|
|
</button>
|
|
</section>
|
|
|
|
<!-- Results Panel -->
|
|
<section class="results-panel card">
|
|
<h2 class="section-title">Results</h2>
|
|
|
|
<div id="results-content" class="results-content">
|
|
<div class="empty-state">
|
|
<svg
|
|
class="empty-icon"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
|
|
/>
|
|
</svg>
|
|
<p>
|
|
Configure your RAID array and click "Calculate Storage" to see
|
|
results
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Information Cards -->
|
|
<div class="info-grid">
|
|
<div class="info-card card">
|
|
<div class="info-icon info-icon-blue">
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<circle cx="12" cy="12" r="10" />
|
|
<path d="M12 16v-4m0-4h.01" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="info-title">Accurate Calculations</h3>
|
|
<p class="info-text">
|
|
Accounts for binary vs decimal differences - 12TB drives show
|
|
actual ~10.9TB usable capacity
|
|
</p>
|
|
</div>
|
|
|
|
<div class="info-card card">
|
|
<div class="info-icon info-icon-green">
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="info-title">Fault Tolerance</h3>
|
|
<p class="info-text">
|
|
See exactly how many drives can fail while maintaining data
|
|
integrity
|
|
</p>
|
|
</div>
|
|
|
|
<div class="info-card card">
|
|
<div class="info-icon info-icon-purple">
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="info-title">Performance Insights</h3>
|
|
<p class="info-text">
|
|
Understand read/write performance characteristics of each RAID
|
|
configuration
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<p>
|
|
© 2025 Beyond Cloud Technology. Professional storage planning
|
|
tool.
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<div id="version-display"></div>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|