petty09190/data_transform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

上傳檔案到「templates」

Browse Source
This commit is contained in:
吳佩庭
2025-08-07 15:42:46 +08:00
parent 809cf071e3
commit 323322eb3a
1 changed files with 118 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
templates/index.html Normal file
View File

@@ -0,0 +1,118 @@
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Excel 檔案處理引擎</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
:root {
--primary-color: #00aeff;
--background-color: #121212;
--surface-color: #1e1e1e;
--text-color: #e0e0e0;
--text-muted-color: #888;
--border-color: #2c2c2c;
}
body {
background-color: var(--background-color);
color: var(--text-color);
font-family: 'Roboto', sans-serif;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.container {
max-width: 600px;
background: var(--surface-color);
padding: 40px;
border-radius: 12px;
border: 1px solid var(--border-color);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px var(--primary-color-t);
transition: all 0.3s ease;
}
h2 {
color: var(--primary-color);
font-weight: 700;
letter-spacing: 1px;
text-shadow: 0 0 5px rgba(0, 174, 255, 0.5);
}
.text-muted {
color: var(--text-muted-color) !important;
}
.custom-file-input {
color: var(--text-color);
}
.custom-file-label {
background-color: #2a2a2a;
border: 1px solid var(--border-color);
color: var(--text-muted-color);
}
.custom-file-input:focus ~ .custom-file-label {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(0, 174, 255, 0.25);
}
.custom-file-input:lang(zh-Hant) ~ .custom-file-label::after {
content: "瀏覽";
background-color: var(--primary-color);
color: #fff;
}
.btn-primary {
background-color: var(--primary-color);
border-color: var(--primary-color);
font-weight: bold;
letter-spacing: 0.5px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 174, 255, 0.2);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 174, 255, 0.4);
background-color: #0099e6;
border-color: #0099e6;
}
.alert-danger {
background-color: #4a1a2c;
border-color: #a83c53;
color: #f8d7da;
}
</style>
</head>
<body>
<div class="container">
<h2 class="text-center mb-3">Safe launch 報告轉換</h2>
<p class="text-muted text-center mb-4">上傳SPC的Raw data (.xls/.xlsx)，系統將自動化執行數據轉換與統計。</p>
<form method=post enctype=multipart/form-data class="mt-4">
<div class="custom-file">
<input type=file name=file class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">選擇檔案...</label>
</div>
<button type="submit" class="btn btn-primary btn-block mt-4">上傳並處理</button>
</form>
{% with messages = get_flashed_messages() %}
{% if messages %}
<div class="alert alert-danger flash-message" role="alert">
{% for message in messages %}
{{ message }}
{% endfor %}
</div>
{% endif %}
{% endwith %}
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script>
// 讓上傳框顯示選擇的檔名
$('.custom-file-input').on('change', function(event) {
var inputFile = event.currentTarget;
$(inputFile).parent()
.find('.custom-file-label')
.html(inputFile.files[0].name);
});
</script>
</body>
</html>