Smart-Laundry-System/status.html at main · Srvankit/Smart-Laundry-System · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Smart Laundry - Status</title>

  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css" />

  <style>
    /* Machine Simulation Box */
    .iot-box {
      background: rgba(15, 30, 55, 0.9);
      border: 1px solid rgba(255,255,255,0.08);
      padding: 18px;
      border-radius: 16px;
      margin-top: 30px;
      text-align: center;
    }

    .iot-status {
      font-size: 18px;
      margin: 14px 0;
      background: rgba(0,0,0,0.4);
      padding: 12px;
      border-radius: 12px;
      box-shadow: inset 0 0 10px rgba(0,150,255,0.25);
    }

    .machine-animation {
      font-size: 58px;
      margin: 16px 0;
      animation: spin 2s linear infinite;
      opacity: 0.5;
      display: none;
    }

    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
  </style>
</head>

<body data-page="step3">

<div class="top-bar">
  <div class="logo">Smart<span class="blue">Laundry</span></div>
  <div class="step-label">Step 3 of 4 · Live Status</div>
</div>

<div class="card">

  <h1 id="statusTitle">Loading…</h1>
  <p class="subtitle">
    Live tracking of your order, machine state, and locker pickup.
  </p>

  <!-- Status Steps -->
  <div class="status-chips">
    <span id="chip-created">Created</span>
    <span id="chip-paid">Paid</span>
    <span id="chip-washing">Washing</span>
    <span id="chip-ready">Ready</span>
    <span id="chip-collected">Collected</span>
  </div>

  <!-- Timeline -->
  <div id="timeline" class="timeline"></div>

  <!-- Machine Simulation -->
  <div class="iot-box">
    <h3>Machine Simulation</h3>

    <div id="iotStatus" class="iot-status">🛑 Machine Idle</div>
    <div id="machineAnimation" class="machine-animation">🌀</div>

    <button id="simulateMachine" class="main-btn" style="margin-top:10px;">
      Simulate Machine Reaction
    </button>
  </div>

  <!-- Locker Info -->
  <div class="summary-box" style="margin-top:20px;">
    <h3>Locker & Pickup Details</h3>
    <p id="lockerLine">Fetching locker assignment…</p>
    <small style="opacity:0.7;">
      Use this locker and pickup code when your status becomes <b>Ready</b>.
    </small>
  </div>

  <!-- Buttons -->
  <div class="button-row">
    <button id="btnStartFlow" class="main-btn">Start Auto Process →</button>
  </div>

  <div class="button-row">
    <button id="btnStep3Next" class="nav-btn" disabled>Continue →</button>
  </div>

</div>

<!-- FIREBASE -->
<script type="module">
  import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
  import { getFirestore } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-firestore.js";
  import { getAnalytics } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-analytics.js";

  const firebaseConfig = {
    apiKey: "AIzaSyDSR5jzuTDZH_DrtHKJqXJ3O_Fn-1h2Jmc",
    authDomain: "smart-laundry-system-d845c.firebaseapp.com",
    projectId: "smart-laundry-system-d845c",
    storageBucket: "smart-laundry-system-d845c.firebasestorage.app",
    messagingSenderId: "24268926002",
    appId: "1:24268926002:web:f917001215ed7d4749602b",
    measurementId: "G-46M1H3VLBP"
  };

  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);
  const analytics = getAnalytics(app);

  window.db = db;
</script>

<script type="module" src="main.js"></script>

<!-- Locker info from localStorage -->
<script>
  (function () {
    try {
      const raw = localStorage.getItem("SmartLaundryOrder");
      const el = document.getElementById("lockerLine");
      if (!raw || !el) return;

      const order = JSON.parse(raw);
      if (order.locker && order.pickupCode) {
        el.textContent = `Locker #${order.locker} · Pickup Code: ${order.pickupCode}`;
      } else {
        el.textContent = "Locker will be assigned after payment and locker step.";
      }
    } catch (e) {
      // fail silently
    }
  })();
</script>

</body>
</html>