agritrust/harvest.html at master · mwatsimulamo/agritrust · 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
172
173
174
175
176
177
178
179
180
181
182
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
  <title>AgriTrust — Enregistrer Récolte</title>

  <!-- Fonts & Icons -->
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

  <!-- Web3.js -->
  <script src="https://cdn.jsdelivr.net/npm/web3@1.10.0/dist/web3.min.js"></script>

  <!-- Styles -->
  <link rel="stylesheet" href="css/style.css">

  <!-- PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#4CAF50">
</head>
<body>
 <div id="app">
    <header class="header">
      <div class="logo">
        <div class="logo-mark"><i class="fas fa-seedling"></i></div>
        <div class="logo-text">
          <h1>AgriTrust</h1>
          <p class="subtitle">Enregistrer une récolte</p>
        </div>
      </div>
      <a href="dashboard.html" class="icon-btn" aria-label="Retour"><i class="fas fa-chevron-left"></i></a>
    </header>

    <main class="container">

      <!-- 1. Choix du produit -->
      <section class="card">
        <h2 class="card-title">1. Choix du produit</h2>
        <label class="form-label" for="product-select">Produit</label>
        <div class="select-wrapper">
          <select id="product-select">
            <option value="">-- Choisir un produit --</option>
            <option value="mais">Maïs</option>
            <option value="ble">Blé</option>
            <option value="haricot">Haricot</option>
            <option value="sorgho">Sorgho</option>
            <option value="soja">Soja</option>
            <option value="pomme_de_terre">Pomme de terre</option>
            <option value="banane">Banane</option>
            <option value="tomate">Tomate</option>
            <option value="piment">Piment</option>
            <option value="arachide">Arachide</option>
            <option value="aubergine">Aubergine</option>
            <option value="other">Autre...</option>
          </select>
        </div>

        <div id="product-other-group" class="form-group hidden">
          <label class="form-label" for="product-other">Précisez le produit</label>
          <input id="product-other" type="text" placeholder="Entrez le nom du produit" />
        </div>
      </section>

      <!-- 2. Quantité & unité -->
      <section class="card">
        <h2 class="card-title">2. Quantité & unité</h2>
        <div class="two-col-row">
          <div class="col">
            <label class="form-label" for="quantity">Quantité</label>
            <input id="quantity" type="number" inputmode="numeric" min="0" step="0.01" placeholder="0" />
          </div>
          <div class="col">
            <label class="form-label" for="unit-select">Unité</label>
            <div class="select-wrapper">
              <select id="unit-select">
                <option value="">-- Choisir unité --</option>
                <option value="kg">kg</option>
                <option value="litre">litre</option>
                <option value="other">Autre...</option>
              </select>
            </div>
            <div id="unit-other-group" class="form-group hidden">
              <input id="unit-other" type="text" placeholder="Saisir unité personnalisée (ex: sacs, tas)" />
            </div>
          </div>
        </div>
      </section>
      <!-- 2b. Prix du produit -->
    <section class="card">
        <h2 class="card-title">2b. Prix du produit (en CELO)</h2>
          <div class="form-group">
          <label class="form-label" for="price-input">Prix unitaire</label>
          <input id="price-input" type="number" inputmode="decimal" min="0" step="0.01" placeholder="0.00" />
          <small class="hint">Le prix est nécessaire pour vendre le produit sur le marché.</small>
      </div>
    </section>


      <!-- 3. Photo -->
      <section class="card">
        <h2 class="card-title">3. Photo (obligatoire)</h2>
        <div class="photo-area">
          <!-- Zone de sélection -->
          <label class="file-box file-box-primary" id="photo-box">
            <input type="file" id="photo-input" accept="image/*" capture="environment" required>
            <div class="file-placeholder">
              <div class="camera-icon"><i class="fas fa-camera"></i></div>
              <div class="file-text">
                <strong>Prendre / Choisir une photo</strong>
                <div class="muted">Photo obligatoire — montrez la récolte</div>
              </div>
            </div>
          </label>

          <!-- Prévisualisation -->
          <div id="photo-preview" class="photo-preview hidden" aria-live="polite"></div>

          <!-- Actions photo -->
          <div class="photo-actions">
            <button id="retake-btn" class="secondary-btn hidden"><i class="fas fa-redo"></i> Reprendre</button>
          </div>
        </div>
      </section>

      <!-- 4. PIN & confirmation -->
      <section class="card">
        <h2 class="card-title">4. Confirmation (PIN)</h2>
        <div class="pin-row">
          <label class="form-label" for="pin">Saisissez votre code PIN (4 chiffres)</label>
          <input id="pin" inputmode="numeric" maxlength="4" pattern="\d{4}" placeholder="••••" type="password" />
        </div>

        <div style="margin-top:14px">
          <button id="confirm-btn" class="primary-btn large-btn" disabled>
            <i class="fas fa-check-circle"></i> Confirmer & Enregistrer
          </button>
        </div>

        <div class="hint" style="margin-top:10px">
          La blockchain enregistre la preuve en arrière-plan. Le PIN signe localement la demande.
        </div>
      </section>

    </main>

    <!-- Toast -->
    <div id="toast" class="toast hidden" role="status" aria-live="polite"></div>

    <!-- Modal confirmation -->
    <div id="modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="modal-title">
      <div class="modal-card">
        <div class="modal-body">
          <div class="modal-icon"><i class="fas fa-check"></i></div>
          <h3 id="modal-title">Récolte enregistrée</h3>
          <p id="modal-msg">ID transaction : <strong id="tx-id">--</strong></p>
        </div>
        <div class="modal-actions">
          <button id="modal-ok" class="primary-btn">OK</button>
        </div>
      </div>
    </div>
  </div>


  <!-- Scripts -->
  <script src="js/blockchain.js"></script>
  <script src="js/harvest.js"></script>
  <script src="js/dataMock.js"></script>
  <script src="js/app.js"></script>

  <!-- Service Worker -->
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js').catch(err => {
        console.warn('Service Worker registration failed:', err);
      });
    }
  </script>
</body>
</html>