<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 20px; background: #f0f4f8; text-align: center; }
        .note-card { background: white; max-width: 500px; margin: 0 auto; padding: 25px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
        textarea { width: 100%; height: 150px; padding: 12px; border: 2px solid #e0e0e0; border-radius: 10px; font-size: 16px; resize: vertical; box-sizing: border-box; }
        textarea:focus { border-color: #2E86AB; outline: none; }
        button { padding: 10px 25px; margin: 5px; border: none; border-radius: 10px; font-size: 16px; cursor: pointer; color: white; font-weight: bold; }
        .status { margin-top: 10px; padding: 8px; border-radius: 8px; font-weight: bold; }
    </style>
</head>
<body>
    <h2 style="color:#1B3A5C">Eslatmalar (LocalStorage)</h2>
    <div class="note-card">
        <textarea id="note" placeholder="Eslatmangizni yozing..."></textarea>
        <br>
        <button style="background:#27AE60" onclick="saveNote()">Saqlash</button>
        <button style="background:#2E86AB" onclick="loadNote()">Yuklash</button>
        <button style="background:#E84D3D" onclick="clearNote()">O'chirish</button>
        <div id="status" class="status"></div>
    </div>
    <script>
        function saveNote() {
            const text = document.getElementById('note').value;
            localStorage.setItem('myNote', text);
            localStorage.setItem('savedTime', new Date().toLocaleString());
            showStatus('Saqlandi! ' + new Date().toLocaleTimeString(), '#27AE60');
        }
        function loadNote() {
            const saved = localStorage.getItem('myNote');
            const time = localStorage.getItem('savedTime');
            if (saved) {
                document.getElementById('note').value = saved;
                showStatus('Yuklandi! (Saqlangan: ' + time + ')', '#2E86AB');
            } else {
                showStatus('Saqlangan eslatma topilmadi', '#E84D3D');
            }
        }
        function clearNote() {
            localStorage.removeItem('myNote');
            document.getElementById('note').value = '';
            showStatus('O\'chirildi!', '#E84D3D');
        }
        function showStatus(msg, color) {
            const el = document.getElementById('status');
            el.textContent = msg;
            el.style.background = color + '20';
            el.style.color = color;
        }
        // Avtomatik yuklash
        window.onload = loadNote;
    </script>
</body>
</html>