WhatToEat/index.html at main · Verzebute/WhatToEat · 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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>下课吃啥 · 食堂推荐助手</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>

<div class="app-container" id="appContainer">
    <header class="app-header">
        <div class="header-left">
            <h1>🍜 下课吃啥</h1>
            <p class="subtitle">大连理工大学 · 食堂智能推荐</p>
        </div>
        <div class="header-right">
            <div class="theme-selector" id="themeSelector">
                <span class="theme-option" data-theme="default" style="background:#c5dfff;" title="默认淡蓝"></span>
                <span class="theme-option" data-theme="lavender" style="background:#ddd0f0;" title="淡紫"></span>
                <span class="theme-option" data-theme="mint" style="background:#c5f0e0;" title="淡薄荷"></span>
                <span class="theme-option" data-theme="peach" style="background:#ffddd0;" title="淡桃"></span>
                <span class="theme-option" data-theme="night" style="background:#2d3748;" title="夜间模式"></span>
            </div>
        </div>
    </header>

    <section class="search-section">
        <div class="input-row">
            <input type="text" id="searchInput" placeholder='搜索名称 / 店铺 / #标签' />
            <button id="recommendBtn">🤖 帮我推荐</button>
            <button id="diceBtn" title="随机选一道菜">🎲</button>
        </div>
        <div class="tool-row">
            <button class="tool-btn" id="exportListBtn">📥 导出菜品列表</button>
            <button class="tool-btn" id="importListBtn">📤 导入菜品列表</button>
            <button class="tool-btn" id="exportSaveBtn">📝 导出配置信息文件</button>
            <button class="tool-btn" id="importSaveBtn">📋 导入配置信息文件</button>
            <button class="tool-btn add-dish-btn" id="addDishBtn">➕ 导入菜品</button>

        </div>
    </section>

    <section class="advanced-filter">
        <div class="filter-toolbar">
            <div class="filter-toggle" id="filterToggle">⚙️ 高级筛选 ▾</div>
            <div class="filter-reset-btn" id="resetFiltersBtn">🔄 重置筛选</div>
        </div>
        <div class="filter-panel" id="filterPanel">
            <!-- 分组 -->
            <div class="filter-group">
                <label>📂 分组：</label>
                <div class="group-btn-group" id="groupBtnGroup">
                    <button class="group-btn active" data-group="all">全部</button>
                    <button class="group-btn" data-group="favorites">⭐ 收藏</button>
                    <button class="group-btn add-group-btn" id="addGroupBtn">➕ 添加我的分组</button>
                </div>
            </div>
            <!-- 标签（四态） -->
            <div class="filter-group">
                <label>
                    🏷️ 标签
                    <span class="tag-comment-hint" id="tagCommentHint" title="点击查看筛选逻辑">ⓘ</span>
                </label>
                <div class="tag-mode-group" id="tagModeGroup"></div>
            </div>
            <!-- 排序（重写为块级展开） -->
            <div class="filter-group filter-group-sort">
                <label>🔽 排序：</label>
                <div class="custom-select" id="customSelect">
                    <div class="select-selected" id="selectSelected">默认排序 ▾</div>
                    <div class="select-options-wrapper">
                        <div class="select-options" id="selectOptions">
                            <div class="select-option" data-value="default">默认排序</div>
                            <div class="select-option" data-value="price">价格从低到高</div>
                            <div class="select-option" data-value="price-desc">价格从高到低</div>
                            <div class="select-option" data-value="rating">评分从高到低</div>
                            <div class="select-option" data-value="popular">人气最高</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 店铺树筛选 -->
            <div class="filter-group filter-group-store">
                <label>🏫 店铺：</label>
                <div class="store-filter">
                    <button class="store-filter-trigger" id="storeFilterTrigger">全部店铺 ▾</button>
                    <div class="store-tree-popup" id="storeTreePopup">
                        <div class="store-tree" id="storeTree"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="result-section">
        <div id="resultStatus" class="status-tip">💡 输入想吃的条件，我来帮你推荐</div>
        <div class="dish-list-scroll" id="dishListScroll">
            <div id="resultList" class="dish-list"></div>
        </div>
    </section>

    <footer class="app-footer">
        <span class="footer-link" id="showGood">👍 好评榜</span>
        <span class="footer-link" id="showBad">💣 避雷榜</span>
        <span class="footer-link" id="resetView">🏠 全部菜品</span>
    </footer>
</div>

<!-- 模态框 -->
<div id="modalOverlay" class="modal-overlay" style="display:none;">
    <div class="modal-content">
        <div class="modal-header">
            <span id="modalTitle">标题</span>
            <span class="modal-close" id="modalClose">&times;</span>
        </div>
        <div class="modal-body" id="modalBody"></div>
    </div>
</div>

<!-- 拖拽导入遮罩 -->
<div id="dropOverlay" class="drop-overlay">
    <div class="drop-overlay-card">
        <div class="drop-overlay-icon">📄</div>
        <div class="drop-overlay-text">松开以导入 list.txt</div>
    </div>
</div>

<script src="script.js"></script>
</body>
</html>