183 lines
9.0 KiB
HTML
183 lines
9.0 KiB
HTML
<!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="{{ url_for('static', filename='style.css') }}">
|
||
</head>
|
||
<body>
|
||
|
||
<header>
|
||
<h1>🥛 牛奶管家</h1>
|
||
</header>
|
||
|
||
<main>
|
||
<section id="dashboard">
|
||
<h2>概览</h2>
|
||
<div class="summary-container">
|
||
<div class="summary-item">
|
||
<span>当前总计</span>
|
||
<strong id="total-quantity">-- L / -- 盒</strong>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span>最近过期</span>
|
||
<strong id="nearest-expiry">--</strong>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span>预计喝完</span>
|
||
<strong id="estimated-finish">--</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="actions" style="display: none;"> <button id="add-milk-btn" class="button primary">➕ 添加入库</button>
|
||
<button id="record-consumption-btn" class="button secondary">➖ 记录消耗</button>
|
||
<button id="settings-btn" class="button tertiary">⚙️ 设置</button>
|
||
</div>
|
||
|
||
<h2>我的牛奶</h2>
|
||
<div id="milk-list" class="milk-list">
|
||
<p id="no-milk-message">请先登录以查看或添加牛奶记录。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="settings-page" class="page" style="display: none;">
|
||
<h2>设置</h2>
|
||
<form id="settings-form">
|
||
<div class="form-group">
|
||
<label for="expiry-warning-days">临期提醒提前天数:</label>
|
||
<input type="number" id="expiry-warning-days" name="expiryWarningDays" value="2" min="1"> 天
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="low-stock-threshold">低库存提醒阈值:</label>
|
||
<input type="number" id="low-stock-threshold" name="lowStockThresholdValue" value="500" min="0" placeholder="留空则不提醒">
|
||
<select id="low-stock-unit" name="lowStockThresholdUnit">
|
||
<option value="ml">ml</option>
|
||
<option value="L">L</option>
|
||
<option value="items">盒/瓶</option>
|
||
</select>
|
||
</div>
|
||
<fieldset>
|
||
<legend>开启推送通知 (未来功能):</legend>
|
||
<label><input type="checkbox" name="enableExpiryWarning" checked> 临期提醒</label><br>
|
||
<label><input type="checkbox" name="enableExpiredAlert" checked> 过期提醒</label><br>
|
||
<label><input type="checkbox" name="enableLowStock" checked> 低库存提醒</label><br>
|
||
</fieldset>
|
||
<button type="submit" class="button primary">保存设置</button>
|
||
<button type="button" id="back-to-dashboard-btn" class="button secondary">返回看板</button>
|
||
</form>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<div id="add-milk-modal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close-btn" id="close-add-modal">×</span>
|
||
<h2>添加入库</h2>
|
||
<form id="add-milk-form">
|
||
<p>请填写信息:</p>
|
||
<div class="form-group">
|
||
<label for="production-date">生产日期 (可选):</label>
|
||
<input type="date" id="production-date" name="productionDate">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="shelf-life">保质期 (与生产日期配合):</label>
|
||
<input type="number" id="shelf-life" name="shelfLife" min="1" placeholder="例如: 7">
|
||
<select name="shelfUnit">
|
||
<option value="days" selected>天</option>
|
||
<option value="months">月</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="expiry-date">或 直接输入过期日期:</label>
|
||
<input type="date" id="expiry-date" name="expiryDate">
|
||
<small>如果填写此项，则忽略生产日期和保质期</small>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="quantity">数量:</label>
|
||
<input type="number" id="quantity" name="quantity" value="1" min="1" required> 盒/瓶
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="volume">单件容量:</label>
|
||
<input type="number" id="volume" name="volumePerItem" required min="1" placeholder="例如: 250">
|
||
<select name="unit" required>
|
||
<option value="ml" selected>ml</option>
|
||
<option value="L">L</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="note">备注 (品牌等, 可选):</label>
|
||
<input type="text" id="note" name="note" placeholder="例如: 光明、楼下超市">
|
||
</div>
|
||
<button type="submit" class="button primary">确认入库</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="record-consumption-modal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close-btn" id="close-record-modal">×</span>
|
||
<h2>记录消耗</h2>
|
||
<form id="record-consumption-form">
|
||
<div class="form-group">
|
||
<label for="select-milk">选择消耗的牛奶:</label>
|
||
<select id="select-milk" name="milkBatchId" required>
|
||
<option value="" disabled selected>请选择...</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>消耗量:</label>
|
||
<div class="quick-consume-buttons">
|
||
<button type="button" class="button consume-preset" data-amount="250" data-unit="ml">一杯(250ml)</button>
|
||
<button type="button" class="button consume-preset" data-amount="0.5" data-unit="items">半盒</button>
|
||
<button type="button" class="button consume-preset" data-amount="1" data-unit="items">整盒</button>
|
||
</div>
|
||
<label for="consume-amount">或手动输入:</label>
|
||
<input type="number" id="consume-amount" name="amountConsumed" min="0.1" step="any" required>
|
||
<select id="consume-unit" name="unitConsumed" required>
|
||
<option value="ml" selected>ml</option>
|
||
<option value="L">L</option>
|
||
<option value="items">盒/瓶</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="consume-date">消耗日期:</label>
|
||
<input type="date" id="consume-date" name="dateConsumed" required>
|
||
</div>
|
||
<button type="submit" class="button primary">确认消耗</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="auth-modal" class="modal" style="display: none;"> <div class="modal-content">
|
||
<span class="close-btn" id="close-auth-modal">×</span>
|
||
<div id="auth-section">
|
||
<h2>登录 / 注册</h2>
|
||
<form id="auth-form">
|
||
<div class="form-group">
|
||
<label for="auth-username">用户名:</label>
|
||
<input type="text" id="auth-username" name="username" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="auth-password">密码:</label>
|
||
<input type="password" id="auth-password" name="password" required>
|
||
</div>
|
||
<div class="form-group auth-actions">
|
||
<button type="button" id="login-btn" class="button primary">登录</button>
|
||
<button type="button" id="register-btn" class="button secondary">注册</button>
|
||
</div>
|
||
<p id="auth-error" style="color: red; display: none;"></p>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer>
|
||
<p>© <span id="current-year"></span> 牛奶管家</p>
|
||
<div id="auth-status" style="font-size: 0.8em; margin-top: 5px;">未登录</div>
|
||
<button id="logout-btn" class="button tertiary" style="display: none; padding: 0.3em 0.6em; font-size: 0.8em;">登出</button>
|
||
</footer>
|
||
|
||
<script src="{{ url_for('static', filename='script.js') }}"></script>
|
||
</body>
|
||
</html> |