10step

[Bipolar-cat]

<title>InnerNote - 10step</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <style> body { font-family: sans-serif; max-width: 500px; margin: auto; padding: 20px; background: #fdfdfd; color: #333; } .card { background: white; padding: 25px; border-radius: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 20px; } .header { text-align: center; margin-bottom: 25px; } h1 { color: #4a90e2; font-size: 2.2em; margin-bottom: 5px; } .sub-header { font-size: 0.85em; color: #666; font-weight: bold; } .input-group { margin-bottom: 20px; } label { display: block; font-weight: bold; margin-bottom: 10px; font-size: 1.1em; } select { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid #ddd; font-size: 1.1em; background: #fff; } textarea { width: 100%; padding: 15px; border-radius: 15px; border: 1px solid #ddd; box-sizing: border-box; margin-bottom: 20px; font-size: 1em; background: #fafafa; } .save-btn { width: 100%; padding: 18px; background: #4a90e2; color: white; border: none; border-radius: 15px; font-weight: bold; font-size: 1.2em; cursor: pointer; } .chart-container { position: relative; height: 300px; width: 100%; margin-top: 40px; border-top: 1px solid #eee; padding-top: 20px; } .recent-title { text-align: center; font-weight: bold; font-size: 1.2em; margin-top: 40px; color: #444; } .history-item { padding: 15px; border-bottom: 1px solid #eee; font-size: 0.95em; } </style>

InnerNote

**気分と調子の変化を記録**

今の気分 (1:低 ～ 10:高) 123 456 789 10

体の調子 (1:悪 ～ 10:良) 123 456 789 10

<textarea id="note" rows="3" placeholder="今の気持ちをメモ..."></textarea> 記録する

    <div class="chart-container">
        <canvas id="myChart"></canvas>
    </div>

    <div class="recent-title">最近の記録</div>
    <div id="history-list"></div>
</div>

<script>
    let chartInstance = null;

    function saveData() {
        const mood = document.getElementById('mood-select').value;
        const cond = document.getElementById('cond-select').value;
        const note = document.getElementById('note').value;
        
        // データ形式の衝突を避けるため、新しい保存キー名を使用します
        const logs = JSON.parse(localStorage.getItem('innernote_10step_final')) || [];
        
        const now = new Date();
        // 西暦（YYYY/MM/DD）の形式
        const dateStr = now.getFullYear() + '/' + (now.getMonth() + 1) + '/' + now.getDate();
        const timeStr = now.getHours() + ':' + (now.getMinutes() < 10 ? '0' : '') + now.getMinutes();
        
        logs.push({ date: dateStr, time: timeStr, mood: parseInt(mood), condition: parseInt(cond), note: note });
        localStorage.setItem('innernote_10step_final', JSON.stringify(logs));
        
        alert("記録しました！");
        document.getElementById('note').value = "";
        updateView();
    }

    function updateView() {
        const logs = JSON.parse(localStorage.getItem('innernote_10step_final')) || [];
        const list = document.getElementById('history-list');
        list.innerHTML = "";
        
        if (logs.length === 0) return;

        logs.slice(-3).reverse().forEach(l => {
            list.innerHTML += `<div class="history-item"><b>${l.date} ${l.time}</b><br>気分: ${l.mood} / 体: ${l.condition}<br>${l.note}</div>`;
        });

        const last10 = logs.slice(-10);
        const ctx = document.getElementById('myChart').getContext('2d');
        
        if (chartInstance) {
            chartInstance.destroy();
        }
        
        chartInstance = new Chart(ctx, {
            type: 'line',
            data: {
                labels: last10.map(l => [l.date, l.time]),
                datasets: [
                    { label: '気分', data: last10.map(l => l.mood), borderColor: '#4a90e2', backgroundColor: 'rgba(74, 144, 226, 0.1)', tension: 0.3, fill: true },
                    { label: '体調', data: last10.map(l => l.condition), borderColor: '#f5a623', backgroundColor: 'rgba(245, 166, 35, 0.1)', tension: 0.3, fill: true }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: { min: 1, max: 10, ticks: { stepSize: 1 } }
                }
            }
        });
    }
    window.onload = updateView;
</script>