LAHMP/index.html at main · daimpad/LAHMP · 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LAHMP Wizard — Land Health Monitoring Platform</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=IBM+Plex+Serif:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
</head>
<body>

  <!-- ── HEADER ─────────────────────────────────────────────────────── -->
  <header class="site-header">
    <div class="container">
      <div class="header-brand">
        <img src="pics/iucn_white_transparentbackground1200px.png" alt="IUCN" class="iucn-mark">
        <div class="brand-text">
          <span class="brand-name">LAHMP</span>
          <span class="brand-sub">Land Health Monitoring Platform </span>
        </div>
      </div>
      <div class="header-meta" id="header-meta"></div>
    </div>
  </header>

  <!-- ── STEP PROGRESS ──────────────────────────────────────────────── -->
  <nav class="step-nav" aria-label="Wizard steps">
    <div class="container">
      <div class="progress-bar-wrap" id="step-list">
        <div class="pb-step is-active is-clickable" data-step="1" role="button" tabindex="0" aria-current="step">
          <div class="pb-node"><span class="pb-num">1</span></div>
          <span class="pb-label">Landscape</span>
          <span class="pb-sublabel">Define your landscape</span>
        </div>
        <div class="pb-connector" data-after="1"></div>
        <div class="pb-step" data-step="2" role="button" tabindex="-1">
          <div class="pb-node"><span class="pb-num">2</span></div>
          <span class="pb-label">Practices</span>
          <span class="pb-sublabel">Select practices</span>
        </div>
        <div class="pb-connector" data-after="2"></div>
        <div class="pb-step" data-step="3" role="button" tabindex="-1">
          <div class="pb-node"><span class="pb-num">3</span></div>
          <span class="pb-label">Capacity</span>
          <span class="pb-sublabel">Assess capacity</span>
        </div>
        <div class="pb-connector" data-after="3"></div>
        <div class="pb-step" data-step="4" role="button" tabindex="-1">
          <div class="pb-node"><span class="pb-num">4</span></div>
          <span class="pb-label">Plan</span>
          <span class="pb-sublabel">Your monitoring plan</span>
        </div>
      </div>
    </div>
  </nav>

  <!-- ── MAIN ───────────────────────────────────────────────────────── -->
  <main class="wizard-main" id="wizard-main">
    <div class="container">

      <!-- Step 1 -->
      <section id="step-1" class="wizard-step">
        <div class="step-intro">
          <p class="eyebrow">Step 1 of 4</p>
          <h1>Landscape Profile</h1>
          <p class="lead">Describe your landscape so the platform can tailor practice and monitoring recommendations to your context. All inputs are manual in this prototype.</p>
          <div class="demo-loader">
            <button type="button" class="btn btn-demo" onclick="loadDemoSkoura()">📍 Load demo landscape (Skoura M'Daz, Morocco)</button>
          </div>
        </div>
        <div id="step1-blocks" class="blocks-container"></div>
        <div id="step1-checklist" class="step-checklist-wrap"></div>
      </section>

      <!-- Step 2 -->
      <section id="step-2" class="wizard-step is-hidden">
        <div class="step-intro">
          <p class="eyebrow">Step 2 of 4</p>
          <h1>Practice Selection</h1>
          <p class="lead">Review sustainable land management practices recommended for your landscape. Confirm which practices you are implementing or planning to implement.</p>
        </div>
        <div id="step2-blocks" class="blocks-container"></div>
        <div id="step2-checklist" class="step-checklist-wrap"></div>
      </section>

      <!-- Step 3 -->
      <section id="step-3" class="wizard-step is-hidden">
        <div class="step-intro">
          <p class="eyebrow">Step 3 of 4</p>
          <h1>Capacity Assessment</h1>
          <p class="lead">Describe your monitoring team, time, equipment, and budget so we can assign the right protocol level to each indicator group.</p>
        </div>
        <div id="step3-blocks" class="blocks-container"></div>
        <div id="step3-checklist" class="step-checklist-wrap"></div>
      </section>

      <!-- Step 4 -->
      <section id="step-4" class="wizard-step is-hidden">
        <div class="step-intro print-hide">
          <p class="eyebrow">Step 4 of 4</p>
          <h1>Your Monitoring Plan</h1>
          <p class="lead">Your personalised land health monitoring programme, designed for your landscape, practices, and team capacity.</p>
        </div>
        <div id="step4-blocks" class="blocks-container"></div>
      </section>

    </div>
  </main>

  <!-- ── FOOTER NAV ─────────────────────────────────────────────────── -->
  <footer class="wizard-footer print-hide">
    <div class="container">
      <button class="btn btn-ghost" id="btn-back" disabled>← Back</button>
      <span class="autosave" id="autosave"></span>
      <button class="btn btn-primary" id="btn-next">Continue →</button>
    </div>
  </footer>

  <!-- ── COUNTRY DATALIST ─────────────────────────────────────────── -->
  <datalist id="country-list">
    <option value="Afghanistan"><option value="Albania"><option value="Algeria"><option value="Andorra"><option value="Angola">
    <option value="Antigua and Barbuda"><option value="Argentina"><option value="Armenia"><option value="Australia"><option value="Austria">
    <option value="Azerbaijan"><option value="Bahamas"><option value="Bahrain"><option value="Bangladesh"><option value="Barbados">
    <option value="Belarus"><option value="Belgium"><option value="Belize"><option value="Benin"><option value="Bhutan">
    <option value="Bolivia"><option value="Bosnia and Herzegovina"><option value="Botswana"><option value="Brazil"><option value="Brunei">
    <option value="Bulgaria"><option value="Burkina Faso"><option value="Burundi"><option value="Cabo Verde"><option value="Cambodia">
    <option value="Cameroon"><option value="Canada"><option value="Central African Republic"><option value="Chad"><option value="Chile">
    <option value="China"><option value="Colombia"><option value="Comoros"><option value="Congo"><option value="Costa Rica">
    <option value="Croatia"><option value="Cuba"><option value="Cyprus"><option value="Czech Republic"><option value="Denmark">
    <option value="Djibouti"><option value="Dominica"><option value="Dominican Republic"><option value="DR Congo"><option value="Ecuador">
    <option value="Egypt"><option value="El Salvador"><option value="Equatorial Guinea"><option value="Eritrea"><option value="Estonia">
    <option value="Eswatini"><option value="Ethiopia"><option value="Fiji"><option value="Finland"><option value="France">
    <option value="Gabon"><option value="Gambia"><option value="Georgia"><option value="Germany"><option value="Ghana">
    <option value="Greece"><option value="Grenada"><option value="Guatemala"><option value="Guinea"><option value="Guinea-Bissau">
    <option value="Guyana"><option value="Haiti"><option value="Honduras"><option value="Hungary"><option value="Iceland">
    <option value="India"><option value="Indonesia"><option value="Iran"><option value="Iraq"><option value="Ireland">
    <option value="Israel"><option value="Italy"><option value="Jamaica"><option value="Japan"><option value="Jordan">
    <option value="Kazakhstan"><option value="Kenya"><option value="Kiribati"><option value="Kuwait"><option value="Kyrgyzstan">
    <option value="Laos"><option value="Latvia"><option value="Lebanon"><option value="Lesotho"><option value="Liberia">
    <option value="Libya"><option value="Liechtenstein"><option value="Lithuania"><option value="Luxembourg"><option value="Madagascar">
    <option value="Malawi"><option value="Malaysia"><option value="Maldives"><option value="Mali"><option value="Malta">
    <option value="Marshall Islands"><option value="Mauritania"><option value="Mauritius"><option value="Mexico"><option value="Micronesia">
    <option value="Moldova"><option value="Monaco"><option value="Mongolia"><option value="Montenegro"><option value="Morocco">
    <option value="Mozambique"><option value="Myanmar"><option value="Namibia"><option value="Nauru"><option value="Nepal">
    <option value="Netherlands"><option value="New Zealand"><option value="Nicaragua"><option value="Niger"><option value="Nigeria">
    <option value="North Korea"><option value="North Macedonia"><option value="Norway"><option value="Oman"><option value="Pakistan">
    <option value="Palau"><option value="Panama"><option value="Papua New Guinea"><option value="Paraguay"><option value="Peru">
    <option value="Philippines"><option value="Poland"><option value="Portugal"><option value="Qatar"><option value="Romania">
    <option value="Russia"><option value="Rwanda"><option value="Saint Kitts and Nevis"><option value="Saint Lucia"><option value="Saint Vincent and the Grenadines">
    <option value="Samoa"><option value="San Marino"><option value="São Tomé and Príncipe"><option value="Saudi Arabia"><option value="Senegal">
    <option value="Serbia"><option value="Seychelles"><option value="Sierra Leone"><option value="Singapore"><option value="Slovakia">
    <option value="Slovenia"><option value="Solomon Islands"><option value="Somalia"><option value="South Africa"><option value="South Korea">
    <option value="South Sudan"><option value="Spain"><option value="Sri Lanka"><option value="Sudan"><option value="Suriname">
    <option value="Sweden"><option value="Switzerland"><option value="Syria"><option value="Taiwan"><option value="Tajikistan">
    <option value="Tanzania"><option value="Thailand"><option value="Timor-Leste"><option value="Togo"><option value="Tonga">
    <option value="Trinidad and Tobago"><option value="Tunisia"><option value="Turkey"><option value="Turkmenistan"><option value="Tuvalu">
    <option value="Uganda"><option value="Ukraine"><option value="United Arab Emirates"><option value="United Kingdom"><option value="United States">
    <option value="Uruguay"><option value="Uzbekistan"><option value="Vanuatu"><option value="Vatican City"><option value="Venezuela">
    <option value="Vietnam"><option value="Yemen"><option value="Zambia"><option value="Zimbabwe">
  </datalist>

  <!-- ── TOAST ──────────────────────────────────────────────────────── -->
  <div class="toast" id="toast" role="alert" aria-live="polite"></div>

  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <script src="wizard.js"></script>
</body>
</html>