<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>HTML转APK转换器</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
:root {
--primary: #4361ee;
--secondary: #3f37c9;
--success: #4cc9f0;
--dark: #1d3557;
--light: #f8f9fa;
--danger: #e63946;
--gray: #6c757d;
}
body {
background: linear-gradient(135deg, #1d2b64, #f8cdda);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
width: 100%;
max-width: 800px;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
overflow: hidden;
margin: 20px;
}
header {
background: linear-gradient(to right, var(--primary), var(--secondary));
color: white;
padding: 25px 30px;
text-align: center;
}
header h1 {
font-size: 2.2rem;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
header p {
font-size: 1.1rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.content {
padding: 30px;
}
.card {
background: white;
border-radius: 15px;
padding: 25px;
margin-bottom: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.card-title {
font-size: 1.4rem;
color: var(--dark);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.upload-area {
border: 3px dashed #dce4ec;
border-radius: 12px;
padding: 40px 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
background-color: #f8fafc;
margin-bottom: 20px;
}
.upload-area:hover, .upload-area.dragover {
border-color: var(--primary);
background-color: rgba(67, 97, 238, 0.05);
}
.upload-area i {
font-size: 4rem;
color: var(--primary);
margin-bottom: 15px;
}
.upload-area h3 {
font-size: 1.5rem;
color: var(--dark);
margin-bottom: 10px;
}
.upload-area p {
color: var(--gray);
margin-bottom: 20px;
font-size: 1.1rem;
}
.btn {
display: inline-block;
padding: 14px 35px;
background: linear-gradient(to right, var(--primary), var(--secondary));
color: white;
border: none;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
text-align: center;
min-width: 200px;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(67, 97, 238, 0.4);
}
.btn:active {
transform: translateY(0);
}
.btn:disabled {
background: #cccccc;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.btn-download {
background: linear-gradient(to right, #00b09b, #96c93d);
}
.btn-container {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 10px;
flex-wrap: wrap;
}
.file-info {
background: #edf2ff;
border-radius: 10px;
padding: 15px;
margin-top: 20px;
display: none;
}
.file-info.show {
display: block;
animation: fadeIn 0.5s;
}
.file-info h4 {
margin-bottom: 10px;
color: var(--dark);
display: flex;
align-items: center;
gap: 10px;
}
.file-info p {
color: var(--gray);
word-break: break-all;
}
.progress-container {
margin-top: 30px;
display: none;
}
.progress-container.show {
display: block;
animation: fadeIn 0.5s;
}
.progress-info {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.progress-bar {
height: 12px;
background: #e9ecef;
border-radius: 10px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(to right, var(--success), #00b09b);
border-radius: 10px;
width: 0%;
transition: width 0.4s ease;
}
.status-container {
margin-top: 30px;
text-align: center;
display: none;
}
.status-container.show {
display: block;
animation: fadeIn 0.5s;
}
.status-icon {
font-size: 4rem;
margin-bottom: 20px;
color: var(--success);
}
.status-text {
font-size: 1.4rem;
color: var(--dark);
margin-bottom: 20px;
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 30px;
}
.feature {
display: flex;
gap: 15px;
align-items: flex-start;
}
.feature i {
font-size: 1.8rem;
color: var(--primary);
margin-top: 5px;
}
.feature-content h3 {
margin-bottom: 8px;
color: var(--dark);
}
.feature-content p {
color: var(--gray);
line-height: 1.6;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.download-container {
text-align: center;
margin-top: 20px;
display: none;
}
.download-container.show {
display: block;
animation: fadeIn 0.5s;
}
@media (max-width: 600px) {
.btn-container {
flex-direction: column;
align-items: center;
}
.btn {
width: 100%;
max-width: 300px;
}
header h1 {
font-size: 1.8rem;
}
header p {
font-size: 1rem;
}
}
.highlight {
color: var(--primary);
font-weight: bold;
}
footer {
text-align: center;
padding: 20px;
color: var(--gray);
font-size: 0.9rem;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.android-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: #3ddc84;
color: white;
padding: 5px 15px;
border-radius: 30px;
font-weight: bold;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1><i class="fab fa-android"></i> HTML转APK转换器</h1>
<p>将您的HTML文件转换为Android应用程序（APK），适配所有DPI屏幕设备</p>
</header>
<div class="content">
<div class="card">
<h2 class="card-title"><i class="fas fa-file-upload"></i> 上传HTML文件</h2>
<div class="upload-area" id="uploadArea">
<i class="fas fa-cloud-upload-alt"></i>
<h3>拖放文件到此处</h3>
<p>或 <span class="highlight">点击选择文件</span> (支持HTML, CSS, JS, 图片等)</p>
<input type="file" id="fileInput" accept=".html,.htm,.zip" style="display: none;">
</div>
<div class="file-info" id="fileInfo">
<h4><i class="fas fa-file-alt"></i> 已选文件</h4>
<p id="fileName">未选择文件</p>
</div>
<div class="btn-container">
<button class="btn" id="convertBtn" disabled>
<i class="fas fa-cog"></i> 转换为APK
</button>
<button class="btn btn-download" id="downloadBtn" disabled>
<i class="fas fa-download"></i> 下载APK文件
</button>
</div>
<div class="progress-container" id="progressContainer">
<div class="progress-info">
<span>转换进度</span>
<span id="progressText">0%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
</div>
<div class="status-container" id="statusContainer">
<i class="fas fa-check-circle status-icon"></i>
<h2 class="status-text">转换成功!</h2>
<p>您的APK文件已准备就绪，请点击下载按钮获取</p>
<div class="android-badge">
<i class="fab fa-android"></i> 支持所有Android设备
</div>
</div>
<div class="download-container" id="downloadContainer">
<p>文件大小: <span class="highlight">4.7 MB</span> | 支持Android 5.0+</p>
</div>
</div>
<div class="features">
<div class="feature">
<i class="fas fa-mobile-alt"></i>
<div class="feature-content">
<h3>响应式设计</h3>
<p>自动适配所有屏幕尺寸和DPI，确保在各种设备上完美显示</p>
</div>
</div>
<div class="feature">
<i class="fas fa-bolt"></i>
<div class="feature-content">
<h3>快速转换</h3>
<p>高效转换引擎，可在数秒内将HTML转换为Android应用</p>
</div>
</div>
<div class="feature">
<i class="fas fa-shield-alt"></i>
<div class="feature-content">
<h3>安全可靠</h3>
<p>所有处理在本地完成，您的文件不会上传到任何服务器</p>
</div>
</div>
</div>
</div>
<footer>
<p>© 2023 HTML转APK转换器 | 此工具仅用于演示，实际转换需使用Cordova等框架</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const uploadArea = document.getElementById('uploadArea');
const fileInput = document.getElementById('fileInput');
const fileInfo = document.getElementById('fileInfo');
const fileName = document.getElementById('fileName');
const convertBtn = document.getElementById('convertBtn');
const downloadBtn = document.getElementById('downloadBtn');
const progressContainer = document.getElementById('progressContainer');
const progressFill = document.getElementById('progressFill');
const progressText = document.getElementById('progressText');
const statusContainer = document.getElementById('statusContainer');
const downloadContainer = document.getElementById('downloadContainer');
// 点击上传区域触发文件选择
uploadArea.addEventListener('click', () => {
fileInput.click();
});
// 文件选择处理
fileInput.addEventListener('change', function(e) {
if (this.files.length > 0) {
const file = this.files[0];
fileName.textContent = file.name;
fileInfo.classList.add('show');
convertBtn.disabled = false;
}
});
// 拖放功能
uploadArea.addEventListener('dragover', (e) => {
e.preventDefault();
uploadArea.classList.add('dragover');
});
uploadArea.addEventListener('dragleave', () => {
uploadArea.classList.remove('dragover');
});
uploadArea.addEventListener('drop', (e) => {
e.preventDefault();
uploadArea.classList.remove('dragover');
if (e.dataTransfer.files.length) {
const file = e.dataTransfer.files[0];
// 简单验证文件类型
if (file.name.endsWith('.html') || file.name.endsWith('.htm') || file.name.endsWith('.zip')) {
fileName.textContent = file.name;
fileInfo.classList.add('show');
convertBtn.disabled = false;
} else {
alert('请选择HTML文件或包含HTML的ZIP文件');
}
}
});
// 转换按钮点击事件
convertBtn.addEventListener('click', function() {
// 显示进度条
progressContainer.classList.add('show');
// 模拟转换进度
let progress = 0;
const interval = setInterval(() => {
progress += Math.floor(Math.random() * 10) + 1;
if (progress >= 100) {
progress = 100;
clearInterval(interval);
// 转换完成
setTimeout(() => {
statusContainer.classList.add('show');
downloadContainer.classList.add('show');
downloadBtn.disabled = false;
progressContainer.classList.remove('show');
}, 500);
}
progressFill.style.width = `${progress}%`;
progressText.textContent = `${progress}%`;
}, 200);
});
// 下载按钮点击事件
downloadBtn.addEventListener('click', function() {
alert('在实际应用中，这里会下载生成的APK文件。\n\n此演示版本仅展示界面功能。');
});
});
</script>
</body>
</html>
index.html