92 lines
3.7 KiB
HTML
92 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>AIO Generator</title>
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet" />
|
|
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet" />
|
|
<link href="{{ url_for('static', filename='css/app.css') }}" rel="stylesheet" />
|
|
|
|
<style>
|
|
.mode-wrap { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
|
|
.mode-btn {
|
|
width: 240px;
|
|
height: 140px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 16px;
|
|
}
|
|
.mode-btn i { margin-bottom: 10px; }
|
|
.mode-btn small { opacity: .85; }
|
|
|
|
pre.code-preview { font-size: 12px; line-height: 1.35; }
|
|
.result-card { border-radius: 16px; overflow: hidden; }
|
|
.preview-iframe { width: 100%; border: 0; background: #fff; }
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-light">
|
|
<div class="container-fluid py-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 col-xl-10 col-xxl-9">
|
|
|
|
<!-- Header -->
|
|
<div class="text-center mb-5">
|
|
<h1 class="display-4 fw-bold mb-3">AIO Generator</h1>
|
|
<p class="lead text-muted">One HTML file from many</p>
|
|
</div>
|
|
|
|
<!-- Mode Buttons -->
|
|
<div class="mode-wrap mb-5">
|
|
<button class="btn btn-outline-primary btn-lg mode-btn active" data-mode="basic" type="button">
|
|
<i class="fa-solid fa-bolt fa-2x"></i>
|
|
<div class="fw-semibold">Basic</div>
|
|
<small class="text-muted">Fast - for small sites</small>
|
|
</button>
|
|
|
|
<button class="btn btn-outline-primary btn-lg mode-btn" data-mode="advanced" type="button">
|
|
<i class="fa-solid fa-gears fa-2x"></i>
|
|
<div class="fw-semibold">Advanced</div>
|
|
<small class="text-muted">CSS chains - multiple css/js files</small>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Drop Zone -->
|
|
<div id="drop-zone" class="drop-zone card border border-2 border-light rounded-4 p-4 mb-4 text-center">
|
|
<i class="fa-solid fa-cloud-arrow-up fa-3x text-muted mb-4"></i>
|
|
<h3 class="h4 fw-bold mb-3">Drop files here</h3>
|
|
<p class="text-muted mb-4">or click <i class="fa-solid fa-arrow-down"></i></p>
|
|
<input type="file" id="file-input" multiple class="d-none" accept="*" />
|
|
<label for="file-input" class="btn btn-success btn-lg px-5">
|
|
<i class="fa-solid fa-folder-open me-2"></i>Choose Files
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Progress -->
|
|
<div id="progress" class="mb-4 d-none">
|
|
<div class="progress" style="height: 8px;">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"></div>
|
|
</div>
|
|
<small id="progress-text" class="text-muted d-block mt-2 text-center">Processing...</small>
|
|
</div>
|
|
|
|
<!-- Result -->
|
|
<div id="result"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-markup.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/prettier@3.2.5/standalone.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/prettier@3.2.5/plugins/html.min.js"></script>
|
|
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
|
|
</body>
|
|
</html> |