gaokao-advisor-mvp/index.html at Test · justDance-everybody/gaokao-advisor-mvp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高考志愿AI决策顾问</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="style.css?v=4.0.0">
</head>
<body>
    <div class="main-header">
        <h1>高考志愿AI决策顾问</h1>
        <span id="usage-stats"></span>
    </div>
    <div class="container">
        <!-- 左侧/顶部 信息提交区域 -->
        <div class="submission-area">
            <header id="submission-header" class="collapsible-header">
                <h2><i class="fas fa-user-edit"></i> 填写您的信息</h2>
                <i class="fas fa-chevron-up collapse-icon"></i>
            </header>
            <div class="form-container" id="submission-content">
                <div class="form-group">
                    <label for="province-select">选择省份:</label>
                    <select id="province-select">
                        <option value="">请选择</option>
                        <option value="北京">北京</option> <option value="天津">天津</option> <option value="河北">河北</option>
                        <option value="山西">山西</option> <option value="内蒙古">内蒙古</option> <option value="辽宁">辽宁</option>
                        <option value="吉林">吉林</option> <option value="黑龙江">黑龙江</option> <option value="上海">上海</option>
                        <option value="江苏">江苏</option> <option value="浙江">浙江</option> <option value="安徽">安徽</option>
                        <option value="福建">福建</option> <option value="江西">江西</option> <option value="山东">山东</option>
                        <option value="河南">河南</option> <option value="湖北">湖北</option> <option value="湖南">湖南</option>
                        <option value="广东">广东</option> <option value="广西">广西</option> <option value="海南">海南</option>
                        <option value="重庆">重庆</option> <option value="四川">四川</option> <option value="贵州">贵州</option>
                        <option value="云南">云南</option> <option value="西藏">西藏</option> <option value="陕西">陕西</option>
                        <option value="甘肃">甘肃</option> <option value="青海">青海</option> <option value="宁夏">宁夏</option>
                        <option value="新疆">新疆</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>选择科类模式:</label>
                    <div class="radio-group" id="main-stream-group">
                        <input type="radio" id="stream-physics" name="stream" value="物理类" checked>
                        <label for="stream-physics">物理类</label>
                        <input type="radio" id="stream-history" name="stream" value="历史类">
                        <label for="stream-history">历史类</label>
                        <input type="radio" id="stream-new" name="stream" value="新高考">
                        <label for="stream-new">新高考(3+1+2)</label>
                    </div>
                </div>
                <div class="form-group" id="new-gaokao-options" style="display: none;">
                    <div class="form-group sub-group">
                        <label>首选科目 (1选1):</label>
                        <div class="radio-group">
                            <input type="radio" id="first-choice-physics" name="first-choice" value="物理">
                            <label for="first-choice-physics">物理</label>
                            <input type="radio" id="first-choice-history" name="first-choice" value="历史">
                            <label for="first-choice-history">历史</label>
                        </div>
                    </div>
                    <div class="form-group sub-group">
                        <label>再选科目 (4选2):</label>
                        <div class="radio-group" id="second-choice-group">
                            <input type="checkbox" id="second-choice-bio" name="second-choice" value="生物">
                            <label for="second-choice-bio">生物</label>
                            <input type="checkbox" id="second-choice-chem" name="second-choice" value="化学">
                            <label for="second-choice-chem">化学</label>
                            <input type="checkbox" id="second-choice-geo" name="second-choice" value="地理">
                            <label for="second-choice-geo">地理</label>
                            <input type="checkbox" id="second-choice-poli" name="second-choice" value="政治">
                            <label for="second-choice-poli">政治</label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label>填写分数或位次:</label>
                    <div class="radio-group" id="score-type-group">
                        <input type="radio" id="type-rank" name="score_type" value="rank" checked>
                        <label for="type-rank">按位次</label>
                        <input type="radio" id="type-score" name="score_type" value="score">
                        <label for="type-score">按分数</label>
                    </div>
                    <div class="slider-group">
                        <input type="number" id="rank-input" placeholder="例如: 12000" min="1" max="750000">
                        <input type="range" id="rank-slider" min="1" max="750000" value="100000" step="100">
                        <span id="rank-slider-value">100000</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="options-input">您纠结的方案 (例如: A校B专业 vs C校D专业):</label>
                    <textarea id="options-input" placeholder="方案A vs 方案B..."></textarea>
                </div>
                <div class="form-group">
                    <label for="dilemma-input">您的主要困惑是什么？</label>
                    <div class="dilemma-tags">
                        <button class="tag-btn">城市发展</button>
                        <button class="tag-btn">专业前景</button>
                        <button class="tag-btn">学校名气</button>
                        <button class="tag-btn">录取概率</button>
                        <button class="tag-btn">个人兴趣</button>
                    </div>
                    <textarea id="dilemma-input" placeholder="点击上方标签或手动输入..."></textarea>
                </div>
                <button id="submit-button"><i class="fas fa-paper-plane"></i> 生成分析报告</button>
            </div>
        </div>

        <!-- 右侧/下部 报告展示区域 -->
        <div class="report-main-area">
            <header id="report-header">
                <h2><i class="fas fa-brain"></i> AI决策顾问分析报告</h2>
                <button id="save-pdf-btn" style="display: none;"><i class="fas fa-file-pdf"></i> 保存为PDF</button>
            </header>
            <div id="report-container">
                <!-- Bot messages will be appended here -->
            </div>
        </div>

        <!-- Follow-up Input Area -->
        <div id="follow-up-container" class="follow-up-container">
            <div id="follow-up-tooltip" class="follow-up-tooltip">
                <i class="fas fa-info-circle"></i> 在这里对AI的回答进行追问
            </div>
            <input type="text" id="follow-up-input" placeholder="对AI的分析报告有疑问？在这里追问...">
            <button id="follow-up-send-btn"><i class="fas fa-paper-plane"></i></button>
        </div>
    </div>

    <!-- Invitation Code Modal -->
    <div id="modal-overlay" class="modal-overlay">
        <div id="modal" class="modal">
            <h2><i class="fas fa-key"></i> 邀请码认证</h2>
            <p>请输入邀请码以访问本应用</p>
            <input type="password" id="modal-input" placeholder="请输入邀请码...">
            <button id="modal-submit">验证</button>
            <p id="modal-error" class="modal-error"></p>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/Pixabay/JavaScript-autoComplete@v1.0.4/auto-complete.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="script.js?v=4.0.0"></script>
</body>
</html>