|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Manga OCR Translator</title> |
|
|
<link rel="stylesheet" href="/static/ui/styles.css"> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"> |
|
|
</head> |
|
|
<body> |
|
|
<div class="app-container"> |
|
|
|
|
|
<header class="header"> |
|
|
<div class="logo"> |
|
|
<i class="fas fa-book-open logo-icon"></i> |
|
|
<h1>Manga OCR</h1> |
|
|
</div> |
|
|
<nav class="nav"> |
|
|
<a href="#" class="active">Home</a> |
|
|
<a href="#features">Features</a> |
|
|
<a href="#how-it-works">How It Works</a> |
|
|
<a href="#pricing">Pricing</a> |
|
|
</nav> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="hero"> |
|
|
<div class="hero-content"> |
|
|
<h1>Translate Manga with AI</h1> |
|
|
<p>Instantly translate manga, comics, and light novels from Japanese, Korean, and Chinese to English and other languages.</p> |
|
|
<button class="btn btn-primary btn-large" id="try-now-btn">Try Now</button> |
|
|
</div> |
|
|
<div class="hero-image"> |
|
|
<img src="/static/ui/hero-image.png" alt="Manga Translation Demo" onerror="this.src='/static/ui/placeholder.png'"> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="features" id="features"> |
|
|
<h2>Powerful Translation Features</h2> |
|
|
<div class="feature-cards"> |
|
|
<div class="feature-card"> |
|
|
<i class="fas fa-language"></i> |
|
|
<h3>Multiple Languages</h3> |
|
|
<p>Support for Japanese, Korean, Chinese, and more, with translation to English, Spanish, French, etc.</p> |
|
|
</div> |
|
|
<div class="feature-card"> |
|
|
<i class="fas fa-magic"></i> |
|
|
<h3>Smart Text Detection</h3> |
|
|
<p>Advanced OCR technology detects text in speech bubbles, captions, and more.</p> |
|
|
</div> |
|
|
<div class="feature-card"> |
|
|
<i class="fas fa-file-pdf"></i> |
|
|
<h3>PDF Support</h3> |
|
|
<p>Upload manga in PDF format and get translated pages instantly.</p> |
|
|
</div> |
|
|
<div class="feature-card"> |
|
|
<i class="fas fa-link"></i> |
|
|
<h3>URL Translation</h3> |
|
|
<p>Simply paste a URL and we'll fetch and translate the manga from the web.</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="how-it-works" id="how-it-works"> |
|
|
<h2>How It Works</h2> |
|
|
<div class="steps"> |
|
|
<div class="step"> |
|
|
<div class="step-number">1</div> |
|
|
<h3>Upload or Paste URL</h3> |
|
|
<p>Upload a manga PDF or paste a URL to a manga site</p> |
|
|
</div> |
|
|
<div class="step-arrow">→</div> |
|
|
<div class="step"> |
|
|
<div class="step-number">2</div> |
|
|
<h3>AI Processing</h3> |
|
|
<p>Our AI detects text and extracts it from the images</p> |
|
|
</div> |
|
|
<div class="step-arrow">→</div> |
|
|
<div class="step"> |
|
|
<div class="step-number">3</div> |
|
|
<h3>Translation</h3> |
|
|
<p>The text is translated to your preferred language</p> |
|
|
</div> |
|
|
<div class="step-arrow">→</div> |
|
|
<div class="step"> |
|
|
<div class="step-number">4</div> |
|
|
<h3>Enjoy!</h3> |
|
|
<p>Download or view translated manga instantly</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="translator-container" id="translator"> |
|
|
<h2>Translate Manga Now</h2> |
|
|
<div class="translator-tabs"> |
|
|
<button class="tab-btn active" data-tab="url-tab">URL</button> |
|
|
<button class="tab-btn" data-tab="pdf-tab">PDF Upload</button> |
|
|
</div> |
|
|
|
|
|
<div class="tab-content"> |
|
|
|
|
|
<div class="tab-pane active" id="url-tab"> |
|
|
<form id="url-form" class="translation-form"> |
|
|
<div class="form-group"> |
|
|
<label for="manga-url">Manga URL</label> |
|
|
<input type="url" id="manga-url" placeholder="https://example.com/manga/chapter-1" required> |
|
|
</div> |
|
|
<div class="form-row"> |
|
|
<div class="form-group"> |
|
|
<label for="url-src-lang">Source Language</label> |
|
|
<select id="url-src-lang"> |
|
|
<option value="auto">Auto-detect</option> |
|
|
<option value="ja">Japanese</option> |
|
|
<option value="ko">Korean</option> |
|
|
<option value="ch_sim">Chinese (Simplified)</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="url-tgt-lang">Target Language</label> |
|
|
<select id="url-tgt-lang"> |
|
|
<option value="en">English</option> |
|
|
<option value="es">Spanish</option> |
|
|
<option value="fr">French</option> |
|
|
<option value="de">German</option> |
|
|
<option value="it">Italian</option> |
|
|
<option value="pt">Portuguese</option> |
|
|
<option value="ru">Russian</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<button type="submit" class="btn btn-primary">Translate</button> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tab-pane" id="pdf-tab"> |
|
|
<form id="pdf-form" class="translation-form"> |
|
|
<div class="form-group"> |
|
|
<label for="pdf-file">Upload Manga PDF</label> |
|
|
<div class="file-upload"> |
|
|
<input type="file" id="pdf-file" accept=".pdf" required> |
|
|
<label for="pdf-file" class="file-label"> |
|
|
<i class="fas fa-cloud-upload-alt"></i> |
|
|
<span>Choose a PDF file</span> |
|
|
</label> |
|
|
<div class="file-name">No file chosen</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="form-row"> |
|
|
<div class="form-group"> |
|
|
<label for="pdf-src-lang">Source Language</label> |
|
|
<select id="pdf-src-lang"> |
|
|
<option value="auto">Auto-detect</option> |
|
|
<option value="ja">Japanese</option> |
|
|
<option value="ko">Korean</option> |
|
|
<option value="ch_sim">Chinese (Simplified)</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="pdf-tgt-lang">Target Language</label> |
|
|
<select id="pdf-tgt-lang"> |
|
|
<option value="en">English</option> |
|
|
<option value="es">Spanish</option> |
|
|
<option value="fr">French</option> |
|
|
<option value="de">German</option> |
|
|
<option value="it">Italian</option> |
|
|
<option value="pt">Portuguese</option> |
|
|
<option value="ru">Russian</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<button type="submit" class="btn btn-primary">Translate</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="results-container" id="results"> |
|
|
<div class="progress-container" style="display: none;"> |
|
|
<div class="progress-text">Processing page 1/5...</div> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="results-grid"></div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="pricing" id="pricing"> |
|
|
<h2>Simple Pricing</h2> |
|
|
<div class="pricing-cards"> |
|
|
<div class="pricing-card"> |
|
|
<div class="pricing-header"> |
|
|
<h3>Free</h3> |
|
|
<div class="price">$0</div> |
|
|
<p>Translate up to 5 pages</p> |
|
|
</div> |
|
|
<ul class="pricing-features"> |
|
|
<li><i class="fas fa-check"></i> Basic OCR translation</li> |
|
|
<li><i class="fas fa-check"></i> URL and PDF upload</li> |
|
|
<li><i class="fas fa-check"></i> 5 pages per day limit</li> |
|
|
<li><i class="fas fa-times"></i> No source language selection</li> |
|
|
<li><i class="fas fa-times"></i> Limited output quality</li> |
|
|
</ul> |
|
|
<button class="btn">Current Plan</button> |
|
|
</div> |
|
|
<div class="pricing-card featured"> |
|
|
<div class="pricing-tag">Popular</div> |
|
|
<div class="pricing-header"> |
|
|
<h3>Premium</h3> |
|
|
<div class="price">$9.99<span>/month</span></div> |
|
|
<p>All features unlocked</p> |
|
|
</div> |
|
|
<ul class="pricing-features"> |
|
|
<li><i class="fas fa-check"></i> Advanced OCR translation</li> |
|
|
<li><i class="fas fa-check"></i> URL and PDF upload</li> |
|
|
<li><i class="fas fa-check"></i> Unlimited pages</li> |
|
|
<li><i class="fas fa-check"></i> All languages supported</li> |
|
|
<li><i class="fas fa-check"></i> Premium quality output</li> |
|
|
</ul> |
|
|
<button class="btn btn-primary">Upgrade Now</button> |
|
|
</div> |
|
|
<div class="pricing-card"> |
|
|
<div class="pricing-header"> |
|
|
<h3>Teams</h3> |
|
|
<div class="price">$29.99<span>/month</span></div> |
|
|
<p>For scanlation groups</p> |
|
|
</div> |
|
|
<ul class="pricing-features"> |
|
|
<li><i class="fas fa-check"></i> All Premium features</li> |
|
|
<li><i class="fas fa-check"></i> Bulk processing</li> |
|
|
<li><i class="fas fa-check"></i> API access</li> |
|
|
<li><i class="fas fa-check"></i> Priority support</li> |
|
|
<li><i class="fas fa-check"></i> Team collaboration</li> |
|
|
</ul> |
|
|
<button class="btn">Contact Sales</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="footer"> |
|
|
<div class="footer-content"> |
|
|
<div class="footer-logo"> |
|
|
<i class="fas fa-book-open"></i> |
|
|
<h3>Manga OCR</h3> |
|
|
</div> |
|
|
<div class="footer-links"> |
|
|
<ul> |
|
|
<li><a href="#">Home</a></li> |
|
|
<li><a href="#features">Features</a></li> |
|
|
<li><a href="#how-it-works">How It Works</a></li> |
|
|
<li><a href="#pricing">Pricing</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="footer-social"> |
|
|
<a href="#"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#"><i class="fab fa-facebook"></i></a> |
|
|
<a href="#"><i class="fab fa-github"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="footer-bottom"> |
|
|
<p>© 2025 Manga OCR Translator. All rights reserved.</p> |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script src="/static/ui/scripts.js"></script> |
|
|
</body> |
|
|
</html> |
