<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>花草工作台【夸克自动存版】</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    min-height: 100vh;
    padding: 16px;
    color: #2e3d2f;
  }
  .container { max-width: 480px; margin: 0 auto; }
  header {
    text-align: center;
    padding: 20px 0 10px;
  }
  header h1 {
    font-size: 24px;
    color: #2e7d32;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  header p { font-size:13px;color:#444;margin-top:4px; }
  .tip{background:#e8f5e9;padding:10px;border-radius:10px;margin:8px 0;font-size:13px;color:#2e7d32;}
  .stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 16px 0;
  }
  .stat-card {
    background: white;
    border-radius: 14px;
    padding: 14px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }
  .stat-card.water { border-left: 4px solid #42a5f5; }
  .stat-card.fert { border-left: 4px solid #ffa726; }
  .stat-num { font-size: 24px; font-weight: bold; color: #333; }
  .stat-label { font-size: 12px; color: #888; margin-top: 2px; }
  .sync-bar {display:flex;gap:8px;margin:12px 0;}
  .sync-btn{flex:1;padding:10px;border-radius:10px;border:none;font-size:14px;font-weight:600;cursor:pointer;}
  .btn-export{background:#66bb6a;color:white;}
  .btn-import{background:#42a5f5;color:white;}
  .add-btn {
    width: 100%;
    padding: 14px;
    background: #4caf50;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .add-btn:active { transform: scale(0.98); }
  .form-panel {
    background: white;
    border-radius: 14px;
    padding: 18px;
    margin: 14px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: none;
  }
  .form-panel.show { display: block; animation: slideDown 0.3s ease; }
  @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
  .form-group { margin-bottom: 14px; }
  .form-group label { display: block; font-size: 13px; color: #555; margin-bottom: 6px; font-weight: 500; }
  .form-group input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
  }
  .form-group input:focus { border-color: #4caf50; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .form-actions { display: flex; gap: 10px; margin-top: 6px; }
  .btn-submit {
    flex: 1;
    padding: 12px;
    background: #4caf50;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
  }
  .btn-cancel {
    padding: 12px 20px;
    background: #f5f5f5;
    color: #666;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
  }
  .plant-list { display: flex; flex-direction: column; gap: 12px; padding-bottom: 60px; }
  .plant-card {
    background: white;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    position: relative;
    overflow: hidden;
  }
  .plant-card.alert { border: 2px solid #ef5350; }
  .plant-card.ok { border: 2px solid transparent; }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
  }
  .plant-name { font-size: 17px; font-weight: 600; color: #2e7d32; }
  .plant-emoji { font-size: 28px; }
  .status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
  }
  .status-item {
    padding: 10px;
    border-radius: 10px;
    background: #f8f9fa;
  }
  .status-item.water-item { background: #e3f2fd; }
  .status-item.fert-item { background: #fff3e0; }
  .status-label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
  .status-value { font-size: 13px; font-weight: 600; margin-top: 2px; }
  .status-value.need { color: #d32f2f; }
  .status-value.ok { color: #388e3c; }
  .action-row { display: flex; gap: 8px; }
  .action-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  .btn-water { background: #42a5f5; color: white; }
  .btn-fert { background: #ffa726; color: white; }
  .btn-edit { background: #f5f5f5; color: #666; flex: 0.6; }
  .btn-del { background: #ffebee; color: #d32f2f; flex: 0.6; }
  .action-btn:active { opacity: 0.85; }
  .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #888;
  }
  .empty-state .icon { font-size: 64px; margin-bottom: 12px; opacity: 0.5; }
  .empty-state p { font-size: 15px; }
  .toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #323232;
    color: white;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 14px;
    z-index: 1000;
    opacity: 0;
    transition: all 0.3s ease;
    white-space: nowrap;
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  .days-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: bold;
    margin-left: 4px;
  }
  .badge-danger { background: #ffcdd2; color: #c62828; }
  .badge-warning { background: #ffe082; color: #f57f17; }
  .badge-success { background: #c8e6c9; color: #2e7d32; }
  #importFileInput{display:none;}
</style>
</head>
<body>
<div class="container">
  <header>
    <h1>🌱 花草工作台</h1>
    <p>✅数据自动保存在夸克标签，关闭页面不会丢失</p>
  </header>
  <div class="tip">💡仅在【独立新标签页】打开才能自动保存；内嵌预览框无效。导出按钮仅做备份备用，平时不用点。</div>
  <div class="stats">
    <div class="stat-card water">
      <div class="stat-num" id="waterCount">0</div>
      <div class="stat-label">待浇水</div>
    </div>
    <div class="stat-card fert">
      <div class="stat-num" id="fertCount">0</div>
      <div class="stat-label">待施肥</div>
    </div>
  </div>
  <div class="sync-bar">
    <button class="sync-btn btn-export" onclick="exportData()">📤导出备份（备用）</button>
    <button class="sync-btn btn-import" onclick="document.getElementById('importFileInput').click()">📥导入备份</button>
    <input id="importFileInput" type="file" accept=".json" onchange="importData(event)" />
  </div>
  <button class="add-btn" onclick="toggleForm()">＋ 添加植物</button>
  <div class="form-panel" id="formPanel">
    <div class="form-group">
      <label>植物名称</label>
      <input type="text" id="plantName" placeholder="例如：绿萝、多肉、月季">
    </div>
    <div class="form-row">
      <div class="form-group">
        <label>浇水周期（天）</label>
        <input type="number" id="waterCycle" value="7" min="1">
      </div>
      <div class="form-group">
        <label>施肥周期（天）</label>
        <input type="number" id="fertCycle" value="30" min="1">
      </div>
    </div>
    <div class="form-actions">
      <button class="btn-submit" onclick="savePlant()">保存</button>
      <button class="btn-cancel" onclick="toggleForm()">取消</button>
    </div>
  </div>
  <div id="plantList" class="plant-list"></div>
</div>
<div class="toast" id="toast"></div>
<script>
//初始预置你的8种植物
const defaultPlants = [
  {id:1, name:"竹节秋海棠", waterCycle:6, fertCycle:20, lastWater:new Date().toISOString().split('T')[0], lastFert:new Date().toISOString().split('T')[0]},
  {id:2, name:"麻叶秋海棠", waterCycle:5, fertCycle:20, lastWater:new Date().toISOString().split('T')[0], lastFert:new Date().toISOString().split('T')[0]},
  {id:3, name:"山乌龟", waterCycle:8, fertCycle:25, lastWater:new Date().toISOString().split('T')[0], lastFert:new Date().toISOString().split('T')[0]},
  {id:4, name:"密叶猴耳环", waterCycle:7, fertCycle:22, lastWater:new Date().toISOString().split('T')[0], lastFert:new Date().toISOString().split('T')[0]},
  {id:5, name:"花烛", waterCycle:6, fertCycle:20, lastWater:new Date().toISOString().split('T')[0], lastFert:new Date().toISOString().split('T')[0]},
  {id:6, name:"酢浆草", waterCycle:5, fertCycle:18, lastWater:new Date().toISOString().split('T')[0], lastFert:new Date().toISOString().split('T')[0]},
  {id:7, name:"朱顶红", waterCycle:8, fertCycle:25, lastWater:new Date().toISOString().split('T')[0], lastFert:new Date().toISOString().split('T')[0]},
  {id:8, name:"黄雀花", waterCycle:6, fertCycle:21, lastWater:new Date().toISOString().split('T')[0], lastFert:new Date().toISOString().split('T')[0]}
];

let plants = JSON.parse(localStorage.getItem('plants') || 'null');
if(plants === null){
  plants = defaultPlants;
  saveData();
}
let editingId = null;

function exportData(){
  const dataStr = JSON.stringify(plants,null,2);
  const blob = new Blob([dataStr],{type:'application/json'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = "plants.json";
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
  showToast("已导出plants.json（备份用）");
}
function importData(e){
  const file = e.target.files[0];
  if(!file) return;
  const reader = new FileReader();
  reader.onload = function(ev){
    try{
      const arr = JSON.parse(ev.target.result);
      if(!Array.isArray(arr)) throw new Error("格式不对");
      if(!confirm("⚠️导入会覆盖当前全部记录！确认继续？")){
        e.target.value="";
        return;
      }
      plants = arr;
      saveData();
      showToast("导入成功");
    }catch(err){
      showToast("导入失败，文件损坏");
    }
    e.target.value="";
  }
  reader.readAsText(file);
}
function saveData() {
  localStorage.setItem('plants', JSON.stringify(plants));
  render();
}
function toggleForm() {
  const panel = document.getElementById('formPanel');
  panel.classList.toggle('show');
  if (!panel.classList.contains('show')) {
    editingId = null;
    document.getElementById('plantName').value = '';
    document.getElementById('waterCycle').value = '7';
    document.getElementById('fertCycle').value = '30';
  }
}
function savePlant() {
  const name = document.getElementById('plantName').value.trim();
  const waterCycle = parseInt(document.getElementById('waterCycle').value) || 7;
  const fertCycle = parseInt(document.getElementById('fertCycle').value) || 30;
  if (!name) { showToast('请输入植物名称'); return; }
  if (editingId) {
    const plant = plants.find(p => p.id === editingId);
    if (plant) {
      plant.name = name;
      plant.waterCycle = waterCycle;
      plant.fertCycle = fertCycle;
    }
    editingId = null;
  } else {
    plants.push({
      id: Date.now(),
      name,
      waterCycle,
      fertCycle,
      lastWater: new Date().toISOString().split('T')[0],
      lastFert: new Date().toISOString().split('T')[0]
    });
  }
  saveData();
  toggleForm();
  showToast(editingId ? '已更新' : '添加成功');
}
function doAction(id, type) {
  const plant = plants.find(p => p.id === id);
  if (!plant) return;
  const today = new Date().toISOString().split('T')[0];
  if (type === 'water') {
    plant.lastWater = today;
    showToast(`已给 ${plant.name} 浇水 💧`);
  } else {
    plant.lastFert = today;
    showToast(`已给 ${plant.name} 施肥 🌿`);
  }
  saveData();
}
function editPlant(id) {
  const plant = plants.find(p => p.id === id);
  if (!plant) return;
  editingId = id;
  document.getElementById('plantName').value = plant.name;
  document.getElementById('waterCycle').value = plant.waterCycle;
  document.getElementById('fertCycle').value = plant.fertCycle;
  document.getElementById('formPanel').classList.add('show');
  window.scrollTo({ top: 0, behavior: 'smooth' });
}
function deletePlant(id) {
  if (!confirm('确定要删除这个植物吗？')) return;
  plants = plants.filter(p => p.id !== id);
  saveData();
  showToast('已删除');
}
function getDaysDiff(dateStr) {
  const d1 = new Date(dateStr);
  const d2 = new Date();
  d2.setHours(0, 0, 0, 0);
  return Math.floor((d2 - d1) / (1000 * 60 * 60 * 24));
}
function getBadge(days, cycle) {
  if (days >= cycle) return '<span class="days-badge badge-danger">超期</span>';
  if (days >= cycle - 1) return '<span class="days-badge badge-warning">明天</span>';
  return `<span class="days-badge badge-success">${days}天前</span>`;
}
function render() {
  const list = document.getElementById('plantList');
  if (plants.length === 0) {
    list.innerHTML = `<div class="empty-state"><div class="icon">🪴</div><p>还没有添加植物，<br>点击上方按钮开始记录吧</p></div>`;
    document.getElementById('waterCount').textContent = '0';
    document.getElementById('fertCount').textContent = '0';
    return;
  }
  let waterNeed = 0, fertNeed = 0;
  list.innerHTML = plants.map(p => {
    const waterDays = getDaysDiff(p.lastWater);
    const fertDays = getDaysDiff(p.lastFert);
    const waterOverdue = waterDays >= p.waterCycle;
    const fertOverdue = fertDays >= p.fertCycle;
    if (waterOverdue) waterNeed++;
    if (fertOverdue) fertNeed++;
    const cardClass = (waterOverdue || fertOverdue) ? 'alert' : 'ok';
    return `
      <div class="plant-card ${cardClass}">
        <div class="card-header">
          <div>
            <div class="plant-name">${p.name}</div>
            <div style="font-size:12px;color:#888;margin-top:2px;">浇水周期 ${p.waterCycle}天 · 施肥周期 ${p.fertCycle}天</div>
          </div>
          <div class="plant-emoji">🌿</div>
        </div>
        <div class="status-grid">
          <div class="status-item water-item">
            <div class="status-label">💧 浇水</div>
            <div class="status-value ${waterOverdue ? 'need' : 'ok'}">${waterOverdue ? '需要浇水！' : '状态良好'}${getBadge(waterDays, p.waterCycle)}</div>
          </div>
          <div class="status-item fert-item">
            <div class="status-label">🌱 施肥</div>
            <div class="status-value ${fertOverdue ? 'need' : 'ok'}">${fertOverdue ? '需要施肥！' : '状态良好'}${getBadge(fertDays, p.fertCycle)}</div>
          </div>
        </div>
        <div class="action-row">
          <button class="action-btn btn-water" onclick="doAction(${p.id}, 'water')">💧 浇水</button>
          <button class="action-btn btn-fert" onclick="doAction(${p.id}, 'fert')">🌱 施肥</button>
          <button class="action-btn btn-edit" onclick="editPlant(${p.id})">✏️</button>
          <button class="action-btn btn-del" onclick="deletePlant(${p.id})">🗑️</button>
        </div>
      </div>`;
  }).join('');
  document.getElementById('waterCount').textContent = waterNeed;
  document.getElementById('fertCount').textContent = fertNeed;
}
function showToast(msg) {
  const toast = document.getElementById('toast');
  toast.textContent = msg;
  toast.classList.add('show');
  setTimeout(() => toast.classList.remove('show'), 2000);
}
render();
</script>
</body>
</html>
