master

分支 (1)

管理

管理

master

tianqikeyubao
/
home.txt

<!DOCTYPE html>
<html>
<head>
    <!-- 定义HTML文档的头部，包括标题和样式表 -->
    <title>天气预测</title>
    <style>
        /* 定义页面样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: white;
        }
        h1 {
            color: #333;
            font-size: 28px;
            text-align: center;
            margin-bottom: 30px;
        }
        form {
            max-width: 400px;
            margin: 0 auto;
        }
        label {
            display: block;
            margin-bottom: 10px;
        }
        input[type="text"], select {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }
        input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        input[type="submit"]:hover {
            background-color: #45a049;
        }
        #loadingScreen {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            z-index: 9999;
        }
        #loadingScreen div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
        #loadingScreen img {
            width: 150px;
            height: 150px;
        }
        #loadingScreen p {
            margin-top: 10px;
        }
        @media (max-width: 767px) {
            h1 {
                font-size: 24px;
            }

            form {
                width: 95%;
            }
        }
    </style>
</head>
<body>
    <!-- 定义页面主体 -->
    <h1>天气预测</h1>
    <!-- 创建表单，用于用户输入 -->
    <form method="POST" action="/prewea">
        <label for="cityname">城市名称：</label>
        <input type="text" id="cityname" name="cityname" value="{{ current_cityname }}" required><br><br>
        <label for="year">训练集起始年份：</label>
        <!-- 使用模板语法生成年份下拉框 -->
        <select id="year" name="year" required>
            {% for y in range(2022, 2012, -1) %}
            <option value="{{ y }}">{{ y }}</option>
           {% endfor %}
        </select><br><br>
        <label for="epochs">训练轮数：</label>
        <!-- 使用模板语法生成训练轮数下拉框 -->
        <select id="epochs" name="epochs" required>
            {% for e in range(10, 101, 10) %}
                <option value="{{ e }}">{{ e }}</option>
            {% endfor %}
        </select><br><br>
        <label for="days">预测天数：</label>
        <!-- 使用模板语法生成预测天数下拉框 -->
        <select id="days" name="days" required>
            {% for f in range(10, 95, 5) %}
                <option value="{{ f }}">{{ f }}</option>
            {% endfor %}
        </select><br><br>
        <!-- 提交按钮 -->
        <input type="submit" value="预测">
    </form>
    <!-- 加载遮罩层和动画 -->
    <div id="loadingScreen">
        <div>
            <img src="{{ url_for('static', filename='images/loading.gif') }}" alt="Loading...">
            <p>正在预测...</p>
        </div>
    </div>
    <!-- JavaScript脚本，用于在提交表单时显示加载遮罩层和动画 -->
    <script>
        document.querySelector('form').addEventListener('submit', function() {
            // 显示遮罩层和加载动画
            document.getElementById('loadingScreen').style.display = 'block';
        });
    </script>
</body>
</html>