From 440e3c3bee71dc0a3a1e37016cf5a6a42b1f6c8e Mon Sep 17 00:00:00 2001
From: juanboy <2980526980@qq.com>
Date: Fri, 18 Oct 2024 16:03:40 +0800
Subject: [PATCH] preliminary realize main.html

---
 BCAT_front/templates/main.html | 311 +++++++++++++++++++++++++++++++++
 1 file changed, 311 insertions(+)
 create mode 100644 BCAT_front/templates/main.html
diff --git a/BCAT_front/templates/main.html b/BCAT_front/templates/main.html
new file mode 100644
index 0000000..18e9eeb
--- /dev/null
+++ b/BCAT_front/templates/main.html
@@ -0,0 +1,311 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>文件上传</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f4;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            position: relative;
+            overflow: hidden;
+        }
+
+        /* 全局遮罩层 */
+        #global-blur {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.2); /* 半透明遮罩 */
+            z-index: 2; /* 在 container 上面 */
+            display: none; /* 默认隐藏，拖拽时显示 */
+            pointer-events: none; /* 允许事件穿透模糊层 */
+        }
+
+        /* main 容器 */
+        .container {
+            z-index: 1; /* 在模糊层之下 */
+            text-align: center;
+            width: 600px;
+            background-color: #fff;
+            padding: 50px;
+            border-radius: 15px;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+            transition: filter 0.3s ease; /* 添加过渡效果 */
+        }
+
+        /* 当模糊时，应用到 container */
+        .container.blurred {
+            filter: blur(10px); /* 对 main 容器应用模糊效果 */
+        }
+
+        .upload-box {
+            border: 2px dashed #4caf50;
+            padding: 40px;
+            cursor: pointer;
+            border-radius: 15px;
+            margin-top: 20px;
+            position: relative;
+        }
+
+        .upload-box input[type="file"] {
+            display: none;
+        }
+
+        .upload-box label {
+            color: #4caf50;
+            font-size: 20px;
+            cursor: pointer;
+        }
+
+        .file-display {
+            display: none;
+            margin-top: 20px;
+            padding: 20px;
+            background-color: #f9f9f9;
+            border: 1px solid #ddd;
+            border-radius: 15px;
+            text-align: left;
+            position: relative; /* 修正删除按钮错位问题 */
+        }
+
+        .file-display img {
+            width: 40px;
+            height: 40px;
+            vertical-align: middle;
+            margin-right: 10px;
+        }
+
+        .file-display span {
+            font-size: 18px;
+            font-weight: bold;
+        }
+
+        .file-display .file-size {
+            font-size: 16px;
+            color: #888;
+        }
+
+        .file-display .remove-btn {
+            position: absolute;
+            right: 10px; /* 调整删除按钮的位置 */
+            top: 50%;
+            transform: translateY(-50%); /* 垂直居中 */
+            background-color: red;
+            color: white;
+            border: none;
+            border-radius: 50%;
+            width: 25px;
+            height: 25px;
+            cursor: pointer;
+            font-size: 16px;
+            line-height: 22px;
+            text-align: center;
+        }
+
+        .submit-button {
+            display: inline-block;
+            background-color: #000;
+            color: white;
+            padding: 15px 40px;
+            border-radius: 30px;
+            font-size: 18px;
+            font-weight: bold;
+            border: none;
+            cursor: pointer;
+            margin-top: 20px;
+        }
+
+        .submit-button:hover {
+            background-color: #333;
+        }
+
+        .submit-button::after {
+            content: '→';
+            font-size: 18px;
+            margin-left: 8px;
+        }
+
+        /* 弹窗样式 */
+        .popup {
+            position: fixed;
+            top: 35%;
+            left: 30%;
+            width: 40%;
+            height: 30%;
+            background-color: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */
+            border-radius: 15px;
+            display: none;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            z-index: 9999; /* 确保弹窗在最上层 */
+            color: white;
+            font-size: 24px;
+            font-weight: bold;
+            padding: 20px;
+            flex-direction: column; /* 让文字上下排列 */
+            backdrop-filter: blur(5px); /* 添加背景模糊效果 */
+        }
+
+        .popup h2 {
+            margin-bottom: 10px;
+            font-size: 32px;
+        }
+
+        .popup p {
+            font-size: 20px;
+        }
+
+        /* 美化弹窗内容 */
+        .popup .upload-icon {
+            font-size: 60px;
+            margin-bottom: 20px;
+            color: #4caf50;
+        }
+    </style>
+</head>
+<body>
+
+    <!-- 全局模糊层 -->
+    <div id="global-blur"></div>
+
+    <div class="container" id="container">
+        <h1 style="font-size: 28px;">文件上传</h1>
+        <p style="font-size: 18px;">请选择一个 CSV 文件上传，我们将为您分析数据</p>
+
+        <!-- 文件上传区域 -->
+        <form id="upload-form" action="/upload" method="post" enctype="multipart/form-data">
+            <div class="upload-box" id="upload-box">
+                <label>点击这里或拖拽文件上传</label>
+                <input id="file-upload" type="file" name="file" accept=".csv" required>
+            </div>
+
+            <!-- 文件展示区域 -->
+            <div id="file-display" class="file-display">
+                <img src="https://img.icons8.com/color/48/000000/csv.png" alt="CSV">
+                <span id="file-name">文件名</span>
+                <span class="file-size" id="file-size">大小</span>
+                <button type="button" class="remove-btn" id="remove-btn">×</button>
+            </div>
+
+            <button type="submit" class="submit-button">Start now</button>
+        </form>
+    </div>
+
+    <!-- 弹窗 -->
+    <div class="popup" id="popup">
+        <h2>文件拖拽到此处即可上传</h2>
+        <p>支持的文件格式：CSV</p>
+    </div>
+
+    <script>
+        const fileInput = document.getElementById('file-upload');
+        const fileDisplay = document.getElementById('file-display');
+        const fileNameDisplay = document.getElementById('file-name');
+        const fileSizeDisplay = document.getElementById('file-size');
+        const removeBtn = document.getElementById('remove-btn');
+        const uploadBox = document.getElementById('upload-box');
+        const popup = document.getElementById('popup');
+        const globalBlur = document.getElementById('global-blur');
+        const container = document.getElementById('container');
+
+        // 点击上传区域时，触发文件选择框
+        uploadBox.addEventListener('click', function() {
+            fileInput.click();
+        });
+
+        // 监听文件选择事件
+        fileInput.addEventListener('change', function () {
+            const file = fileInput.files[0];
+            if (file) {
+                if (file.name.endsWith('.csv')) {
+                    fileNameDisplay.textContent = file.name;
+                    fileSizeDisplay.textContent = `, ${Math.round(file.size / 1024)} KB`;
+                    fileDisplay.style.display = 'block';
+                } else {
+                    alert('只允许上传 CSV 文件');
+                    fileInput.value = ''; // 清除文件
+                }
+                // 隐藏模糊层和弹窗
+                globalBlur.style.display = 'none';
+                popup.style.display = 'none';
+                container.classList.remove('blurred'); // 移除模糊效果
+            }
+        });
+
+        // 删除按钮逻辑
+        removeBtn.addEventListener('click', function () {
+            fileDisplay.style.display = 'none';
+            fileInput.value = '';
+            // 隐藏模糊层和弹窗
+            globalBlur.style.display = 'none';
+            popup.style.display = 'none';
+            container.classList.remove('blurred'); // 移除模糊效果
+        });
+
+        // 监听整个页面的拖拽进入事件，显示弹窗和模糊层
+        document.addEventListener('dragenter', function (e) {
+            e.preventDefault();
+            globalBlur.style.display = 'block'; // 显示全局模糊层
+            popup.style.display = 'flex';  // 显示弹出框
+            container.classList.add('blurred'); // 对 container 添加模糊效果
+        });
+
+        // 监听拖拽离开弹窗区域，隐藏弹窗和模糊层
+        document.addEventListener('dragleave', function (e) {
+            e.preventDefault();
+            // 如果鼠标离开整个窗口，则隐藏模糊层和弹窗
+            if (e.clientX <= 0 || e.clientY <= 0 || e.clientX >= window.innerWidth || e.clientY >= window.innerHeight) {
+                globalBlur.style.display = 'none';
+                popup.style.display = 'none';
+                container.classList.remove('blurred');
+            }
+        });
+
+        // 在弹窗上允许拖拽
+        popup.addEventListener('dragover', function (e) {
+            e.preventDefault();
+        });
+
+        // 在弹窗上接收文件
+        popup.addEventListener('drop', function (e) {
+            e.preventDefault();
+            globalBlur.style.display = 'none';
+            popup.style.display = 'none';
+            container.classList.remove('blurred');
+
+            const file = e.dataTransfer.files[0];
+            if (file && file.name.endsWith('.csv')) {
+                fileInput.files = e.dataTransfer.files;
+                const event = new Event('change');
+                fileInput.dispatchEvent(event);
+            } else {
+                alert('只允许上传 CSV 文件');
+            }
+        });
+
+        // 在页面其他地方的 drop 事件，隐藏模糊层和弹窗
+        document.addEventListener('drop', function (e) {
+            e.preventDefault();
+            globalBlur.style.display = 'none';
+            popup.style.display = 'none';
+            container.classList.remove('blurred');
+            // 不处理文件上传
+        });
+
+        // 防止在页面其他位置的拖拽行为
+        document.addEventListener('dragover', function (e) {
+            e.preventDefault();
+        });
+    </script>
+</body>
+</html>
