HCI/warning.html at master · Mustafa-K4/HCI · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>EcoBin – Device Confirmation</title>
  <link rel="stylesheet" href="css/styles.css" />
</head>
<body>
  <div class="glow-box">
    <header><h1>EcoBin</h1></header>
  </div>

  <main style="max-width:600px; margin:0 auto; padding:1rem;">
    <div class="highlight" style="text-align:center;">
      <h2>Good News! We Have Your Device</h2>

      <img
        id="device-photo"
        src="assets/device-placeholder.png"
        alt="Your Device"
        style="width:200px; margin:1rem auto; display:block; border-radius:0.75rem;
               box-shadow:0 0 8px rgba(0, 0, 0, 0.6),0 0 16px rgba(200,16,46,0.4);"
      />
      <p><strong id="device-model">Your Device Model</strong></p>
    </div>

    <div class="highlight">
      <h3 style="color:#C8102E;">Warning!!!</h3>
      <ul style="color:#fff; list-style:disc inside; text-align:left;">
        <li>🔋 Always remove the battery before recycling.</li>
        <li>🖥️ Handle screens and glass with care to avoid cuts.</li>
        <li>⚙️ Circuit boards may hold charge—wear protective gloves.</li>
        <li>📦 Recycle cables and accessories separately.</li>
      </ul>
    </div>

    <button class="btn" onclick="location.href='nearby.html'">
      Next →
    </button>
    <a href="scanner.html" class="back-btn" style="display:inline-block; margin-top:0.5rem;">
      ← Back
    </a>
  </main>

  <script>
    document.addEventListener('DOMContentLoaded', () => {

      const dataUrl = sessionStorage.getItem('capturedImage');
      if (dataUrl) {
        document.getElementById('device-photo').src = dataUrl;
      }


      const model = sessionStorage.getItem('deviceModel');
      if (model) {
        document.getElementById('device-model').textContent = model;
      }
    });
  </script>
</body>
</html>