emergencychecklist/survivalchecklistt.html at main · cdizle/emergencychecklist · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
  <title>72-Hour Emergency Kit Builder</title>
  <style>
    /* Basic mobile-friendly styles */
    body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
    .category { margin: 15px 0; border: 1px solid #ddd; padding: 10px; }
    .progress-bar { width: 100%; height: 20px; background: #eee; }
    .progress { height: 20px; background: #4CAF50; }
    .survivalfrog-link { color: #FF6F00; font-weight: bold; }
  </style>
</head>
<body>
  <h1>Build Your 72-Hour Kit</h1>
  <div id="progressBar" class="progress-bar"><div class="progress" style="width: 0%"></div></div>
  <p>Progress: <span id="progressText">0%</span></p>

  <!-- Pre-Populated Checklist -->
  <div class="category">
    <h2>Water</h2>
    <label><input type="checkbox" data-category="water"> 1 gallon/person/day (3-day supply)</label>
    <p>Recommended: <a href="https://shrsl.com/4u8pz
" class="survivalfrog-link" target="_blank">Survival Frog Water Filtration Kit</a></p>
  </div>

  <!-- Repeat for other categories (Food, First Aid, etc.) -->

  <!-- Custom Items -->
  <div class="category">
    <h2>Custom Items</h2>
    <input type="text" id="customItem" placeholder="Add your item">
    <button onclick="addCustomItem()">Add</button>
    <div id="customList"></div>
  </div>

  <script>
    // Load saved progress from localStorage
    let checklist = JSON.parse(localStorage.getItem('checklist')) || {};

    // Update progress bar
    function updateProgress() {
      const totalItems = document.querySelectorAll('input[type="checkbox"]').length;
      const checkedItems = document.querySelectorAll('input[type="checkbox"]:checked').length;
      const progress = (checkedItems / totalItems) * 100;
      document.querySelector('.progress').style.width = `${progress}%`;
      document.getElementById('progressText').textContent = `${Math.round(progress)}%`;
      // Save to localStorage
      localStorage.setItem('checklist', JSON.stringify(checklist));
    }

    // Add custom items
    function addCustomItem() {
      const item = document.getElementById('customItem').value;
      const div = document.createElement('div');
      div.innerHTML = `<label><input type="checkbox"> ${item}</label>`;
      document.getElementById('customList').appendChild(div);
      document.getElementById('customItem').value = '';
    }

    // Attach event listeners to checkboxes
    document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
      checkbox.addEventListener('change', updateProgress);
    });
  </script>
</body>
</html>