cfee611fdc
Some checks failed
Build & Push Multi-Arch Image / build-and-push (push) Has been cancelled
180 lines
9.0 KiB
HTML
180 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>OST to PST Converter</title>
|
|
<!-- Google Fonts -->
|
|
<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=Outfit:wght@300;400;600;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div class="background-decor">
|
|
<div class="orb orb-1"></div>
|
|
<div class="orb orb-2"></div>
|
|
<div class="orb orb-3"></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<header>
|
|
<div class="logo-area">
|
|
<span class="logo-icon">⇄</span>
|
|
<h1>OST <span>to</span> PST</h1>
|
|
</div>
|
|
<p class="subtitle">Convert Microsoft Outlook Offline Storage files (.ost) into Personal Storage files (.pst) locally and securely.</p>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- ── Left column: Converter Card ─────────────────────────────── -->
|
|
<section class="card glass" id="converter-card">
|
|
<div class="card-header">
|
|
<h2>File Conversion</h2>
|
|
<span class="badge">Local Engine</span>
|
|
</div>
|
|
|
|
<!-- Drag & Drop Zone -->
|
|
<div class="drop-zone" id="drop-zone">
|
|
<input type="file" id="file-input" accept=".ost" class="file-input">
|
|
<div class="drop-zone-content">
|
|
<div class="upload-icon">📁</div>
|
|
<h3>Drag & Drop your OST file</h3>
|
|
<p>or <span class="browse-link">browse files</span></p>
|
|
<p class="file-limit">Maximum size: 1 GB</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Selected File Info (Hidden by default) -->
|
|
<div class="file-details hidden" id="file-details">
|
|
<div class="file-info-header">
|
|
<span class="file-icon">📄</span>
|
|
<div class="file-meta">
|
|
<h4 id="file-name">filename.ost</h4>
|
|
<p id="file-size">0.0 MB</p>
|
|
</div>
|
|
<button class="btn btn-close" id="btn-cancel-file" title="Clear selection">✕</button>
|
|
</div>
|
|
|
|
<!-- Target Format Selection -->
|
|
<div class="format-selection">
|
|
<label class="format-label">Choose Export Format:</label>
|
|
<div class="format-options">
|
|
<label class="format-option-card">
|
|
<input type="radio" name="output-format" value="pst" checked>
|
|
<span class="option-details">
|
|
<strong class="option-title">PST (Recommended for Gmail)</strong>
|
|
<span class="option-desc">Enables direct import to Gmail Workspace via the Google Workspace Migration (GWMMO) tool. Preserves mail, contacts, and calendar.</span>
|
|
</span>
|
|
</label>
|
|
<label class="format-option-card">
|
|
<input type="radio" name="output-format" value="mbox">
|
|
<span class="option-details">
|
|
<strong class="option-title">MBOX (ZIP Archive)</strong>
|
|
<span class="option-desc">Exports each email folder as a standard .mbox file bundled in a ZIP. Contacts are exported as individual .vcf files.</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Sub-option: only visible when MBOX is selected -->
|
|
<label class="vcf-combine-option hidden" id="vcf-combine-wrap">
|
|
<input type="checkbox" id="combine-vcf">
|
|
<span class="vcf-combine-details">
|
|
<strong>Merge all contacts into one .vcf file</strong>
|
|
<span>Recommended for Gmail — Google Contacts can import a single combined vCard file directly via <em>contacts.google.com → Import</em>.</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<button class="btn btn-primary btn-block" id="btn-convert">
|
|
<span>Convert File</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Processing & Upload State (Hidden by default) -->
|
|
<div class="progress-container hidden" id="progress-container">
|
|
<div class="progress-header">
|
|
<span id="progress-status">Uploading file...</span>
|
|
<span id="progress-percentage">0%</span>
|
|
</div>
|
|
<div class="progress-bar-bg">
|
|
<div class="progress-bar-fill" id="progress-bar-fill"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Success Screen (Hidden by default) -->
|
|
<div class="success-container hidden" id="success-container">
|
|
<div class="success-icon">✓</div>
|
|
<h3>Conversion Complete!</h3>
|
|
<p class="success-message">Your OST file was converted successfully.</p>
|
|
<div class="output-file-card">
|
|
<span class="file-icon">📦</span>
|
|
<div class="file-meta">
|
|
<h4 id="out-file-name">filename.pst</h4>
|
|
<p class="ready-badge">Ready for download</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Conversion Summary Brief -->
|
|
<div class="summary-card" id="summary-card">
|
|
<h4>Conversion Summary</h4>
|
|
<div class="summary-metrics">
|
|
<div class="metric">
|
|
<span class="metric-label">Total Folders</span>
|
|
<span class="metric-value" id="summary-folders-count">0</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-label">Total Emails</span>
|
|
<span class="metric-value" id="summary-messages-count">0</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-label">Time Taken</span>
|
|
<span class="metric-value" id="summary-duration">0.0s</span>
|
|
</div>
|
|
</div>
|
|
<div class="summary-table-container">
|
|
<table class="summary-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Folder</th>
|
|
<th style="text-align: right;">Emails</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="summary-table-body">
|
|
<!-- Dynamic rows -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<a id="btn-download" class="btn btn-success btn-block" download>Download PST File</a>
|
|
<button class="btn btn-secondary btn-block" id="btn-reset">Convert Another File</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── Right column: Conversion Log ───────────────────────────── -->
|
|
<div class="log-column">
|
|
<div class="terminal-container" id="terminal-container">
|
|
<div class="terminal-header">
|
|
<div class="terminal-dots">
|
|
<span class="dot red"></span>
|
|
<span class="dot yellow"></span>
|
|
<span class="dot green"></span>
|
|
</div>
|
|
<span class="terminal-title">Conversion Log</span>
|
|
</div>
|
|
<div class="terminal-body" id="terminal-logs">
|
|
<div class="log-line system">Waiting for process start...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>OST to PST Converter • Local Web Utility</p>
|
|
</footer>
|
|
</div>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|