From c85d0604a93e094cfd583c080e1d1b8f9a164521 Mon Sep 17 00:00:00 2001
From: Oleh Omelchenko <ptrvtch@protonmail.com>
Date: Thu, 16 Oct 2025 02:54:12 +0300
Subject: [PATCH] feat: add warning message in help section about local storage
 data loss

---
 index.html     | 6 ++++++
 src/styles.css | 2 ++
 2 files changed, 8 insertions(+)

diff --git a/index.html b/index.html
index 95812df..3081cfe 100644
--- a/index.html
+++ b/index.html
@@ -408,6 +408,12 @@
                     <!-- Storage & Limits -->
                     <section class="help-section">
                         <h3 class="help-heading">Storage & Limits</h3>
+
+                        <div class="help-warning">
+                            <strong>⚠️ Important:</strong> All data is stored in your browser's local storage. If you clear your browser cache or site data,
+                            your snippets and datasets will be permanently deleted. Regular exports are recommended as backups.
+                        </div>
+
                         <ul class="help-list">
                             <li><strong>Snippets</strong> — Stored in localStorage with a 5 MB limit (shared across all snippets). The storage monitor shows current usage.</li>
                             <li><strong>Datasets</strong> — Stored in IndexedDB with effectively unlimited space (browser-dependent, typically 50 MB+).</li>
diff --git a/src/styles.css b/src/styles.css
index a4aea76..97c80c6 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -306,6 +306,8 @@ body { font-family: var(--font-main); height: 100vh; overflow: hidden; backgroun
 .help-heading { font-size: 14px; font-weight: bold; margin: 0 0 12px 0; color: var(--win-blue-dark); border-bottom: 1px solid var(--win-gray-dark); padding-bottom: 4px; }
 .help-text { font-size: 12px; line-height: 1.5; margin: 0 0 8px 0; color: #333; }
 .help-text:last-child { margin-bottom: 0; }
+.help-warning { background: #fff3cd; border: 2px solid #ffc107; padding: 12px; margin-bottom: 16px; font-size: 12px; line-height: 1.5; color: #856404; border-radius: 2px; }
+.help-warning strong { color: #d39e00; }
 .help-list { margin: 0; padding-left: 20px; font-size: 12px; line-height: 1.6; }
 .help-list li { margin-bottom: 8px; color: #333; }
 .help-list li:last-child { margin-bottom: 0; }