openmicrolock.github.io/index.html at main · OpenMicrolock/openmicrolock.github.io · 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
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="Open Microlock is an open-source community building DARMI, a digital access management interface for ESP32 devices, mobile apps, and operational dashboards."
    />
    <title>Open Microlock | DARMI</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=Inter:wght@400;500;600;700;800&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header class="site-header">
      <a class="brand" href="#home" aria-label="Open Microlock home">
        <img src="../poc-mobileapp/assets/logo_trim.png" alt="" />
        <span>Open Microlock</span>
      </a>
      <nav class="nav" aria-label="Main navigation">
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#project">Project</a>
        <a href="#contribute">Contribute</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>

    <main>
      <section class="hero section" id="home">
        <div class="hero-copy">
          <!-- <p class="eyebrow">DARMI (Digital Access Management Interface)</p> -->
          <!-- <h1>Open Microlock</h1> -->
          <p class="hero-text">
            Open Microlock is a technology community building the DARMI
            ecosystem: ESP32 firmware, mobile control, dashboards, and
            operational workflows for smarter local infrastructure.
          </p>
          <div class="hero-points" aria-label="Open Microlock focus areas">
            <span>ESP32 devices</span>
            <span>Mobile control</span>
            <span>Open-source docs</span>
          </div>
          <div class="hero-actions" aria-label="Primary actions">
            <a class="button primary" href="#project">Explore Project</a>
            <a class="button secondary" href="#contribute">Contribute</a>
          </div>
        </div>

        <div class="product-preview" aria-label="DARMI product preview">
          <div class="phone-shell" data-lock-preview>
            <div class="phone-bezel">
              <div class="phone-statusbar" aria-hidden="true">
                <span>22:14</span>
                <span>●●●  84%</span>
              </div>
              <div class="app-bar">
                <div class="app-title">
                  <img src="../poc-mobileapp/assets/logo_trim.png" alt="" />
                  <span>Microlock</span>
                </div>
                <span class="app-menu">⋮</span>
              </div>
              <div class="phone-content">
                <div class="device-switcher">
                  <div>
                    <small>Active device</small>
                    <span>Front Door</span>
                  </div>
                  <span class="connection-pill">Active</span>
                </div>
                <div class="lock-card" data-lock-card>
                  <div class="lock-ring" aria-hidden="true">
                    <span class="pulse-ring"></span>
                    <svg class="lock-icon lock-icon-locked" viewBox="0 0 64 64" aria-hidden="true">
                      <path class="lock-shackle" d="M20 29v-8c0-7.2 4.8-12 12-12s12 4.8 12 12v8h-8v-8c0-2.9-1.8-4.8-4-4.8s-4 1.9-4 4.8v8z" />
                      <path class="lock-body-fill" d="M16 27h32c3.3 0 6 2.7 6 6v16c0 3.3-2.7 6-6 6H16c-3.3 0-6-2.7-6-6V33c0-3.3 2.7-6 6-6z" />
                      <path class="lock-key" d="M32 38v8" />
                    </svg>
                    <svg class="lock-icon lock-icon-unlocked" viewBox="0 0 64 64" aria-hidden="true">
                      <path class="lock-shackle" d="M20 29v-8c0-7.2 4.8-12 12-12 5.1 0 9.1 2.4 11 6.5l-7 3.2c-.8-1.6-2.1-2.5-4-2.5-2.2 0-4 1.9-4 4.8v8z" />
                      <path class="lock-body-fill" d="M16 27h32c3.3 0 6 2.7 6 6v16c0 3.3-2.7 6-6 6H16c-3.3 0-6-2.7-6-6V33c0-3.3 2.7-6 6-6z" />
                      <path class="lock-key" d="M32 38v8" />
                    </svg>
                  </div>
                  <strong data-lock-state>LOCKED</strong>
                  <span>Main entrance</span>
                  <small data-lock-updated>Updated just now</small>
                  <div class="auto-lock" data-auto-lock hidden>
                    <span>
                      <span class="timer-dot" aria-hidden="true"></span>
                      Auto-lock in <strong data-countdown>5s</strong>
                    </span>
                    <span class="auto-lock-track">
                      <span data-countdown-bar></span>
                    </span>
                  </div>
                </div>
                <div class="slide-preview" data-slide-track role="button" tabindex="0" aria-label="Slide to unlock">
                  <span class="slide-fill" data-slide-fill></span>
                  <span class="slide-thumb" data-slide-thumb>→</span>
                  <span data-slide-text>Swipe right to unlock</span>
                </div>
                <button class="refresh-preview" type="button">Refresh Status</button>
              </div>
              <div class="phone-nav" aria-hidden="true">
                <span class="is-active">
                  <svg viewBox="0 0 24 24">
                    <path d="M4 11.5 12 5l8 6.5V20a1 1 0 0 1-1 1h-5v-6h-4v6H5a1 1 0 0 1-1-1z" />
                  </svg>
                  Home
                </span>
                <span>
                  <svg viewBox="0 0 24 24">
                    <rect x="5" y="4" width="10" height="16" rx="2" />
                    <path d="M18 8h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-1" />
                    <path d="M8.5 17h3" />
                  </svg>
                  Devices
                </span>
                <span>
                  <svg viewBox="0 0 24 24">
                    <path d="M12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7z" />
                    <path d="M19 12a7.5 7.5 0 0 0-.1-1.2l2-1.5-2-3.4-2.4 1a7.8 7.8 0 0 0-2-1.1L14.2 3h-4.4l-.4 2.8a7.8 7.8 0 0 0-2 1.1l-2.4-1-2 3.4 2 1.5A7.5 7.5 0 0 0 5 12c0 .4 0 .8.1 1.2l-2 1.5 2 3.4 2.4-1a7.8 7.8 0 0 0 2 1.1l.4 2.8h4.4l.4-2.8a7.8 7.8 0 0 0 2-1.1l2.4 1 2-3.4-2-1.5c.1-.4.1-.8.1-1.2z" />
                  </svg>
                  Settings
                </span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="updates section" aria-labelledby="updates-title">
        <div class="section-heading">
          <p class="eyebrow">Latest Updates</p>
          <!-- <h2 id="updates-title">Community updates and project.</h2> -->
        </div>
        <div class="update-grid">
          <article class="update-card">
            <p class="tag">Community Milestone</p>
            <h2 class="card-title">2nd place at West Jakarta Pemuda Pelopor</h2>
            <p>
              A community milestone from Open Microlock's participation in a
              youth leadership program. The public post should include the
              final date, photos, or certificate.
            </p>
          </article>
          <article class="update-card">
            <p class="tag">Open-source Progress</p>
            <h2 class="card-title">DARMI is being prepared for public release</h2>
            <p>
              Documentation, licensing, README files, roadmap, and contribution
              structure are being prepared so the ecosystem can be studied and
              extended in public.
            </p>
          </article>
        </div>
      </section>

      <section class="about section" id="about">
        <div class="section-heading">
          <p class="eyebrow">About</p>
          <!-- <h2>Building digital access from hardware to interface.</h2> -->
        </div>
        <div class="split">
          <div>
            <p>
              Open Microlock started from the need to make digital access
              systems that do not stop at demos. The community connects
              firmware, mobile apps, dashboards, documentation, and contribution
              processes so the work can be learned and improved openly.
            </p>
          </div>
          <div class="principles">
            <div>
              <strong>Open by design</strong>
              <span>Repositories, documentation, and roadmaps are prepared for public access.</span>
            </div>
            <div>
              <strong>Real prototypes</strong>
              <span>Focused on devices, applications, and workflows that can be tested.</span>
            </div>
            <div>
              <strong>Community first</strong>
              <span>Contributions can come through firmware, mobile, backend, UI/UX, and docs.</span>
            </div>
          </div>
        </div>
      </section>

      <section class="system section" aria-labelledby="darmi-title">
        <div class="section-heading">
          <p class="eyebrow">DARMI</p>
          <!-- <h2 id="darmi-title">One interface for a digital access ecosystem.</h2> -->
        </div>
        <div class="flow" aria-label="DARMI ecosystem flow">
          <div>
            <span>01</span>
            <strong>ESP32 Devices</strong>
            <small>Smart lock, smart lamp, simulator.</small>
          </div>
          <div>
            <span>02</span>
            <strong>Local API</strong>
            <small>HTTP JSON endpoints for prototyping.</small>
          </div>
          <div>
            <span>03</span>
            <strong>Mobile & Dashboard</strong>
            <small>Device control and operational monitoring.</small>
          </div>
          <div>
            <span>04</span>
            <strong>Users & Operations</strong>
            <small>Users, communities, makers, and local programs.</small>
          </div>
        </div>
      </section>

      <section class="projects section" id="project">
        <div class="section-heading">
          <p class="eyebrow">Project</p>
          <!-- <h2>A project ecosystem being prepared for public release.</h2> -->
        </div>
        <div class="project-list">
          <article class="project-card">
            <div>
              <p class="tag">Firmware</p>
              <h2 class="card-title">MicroLock Firmware</h2>
              <p>ESP32 firmware for smart lock control with a local API and token authentication.</p>
            </div>
            <dl>
              <div><dt>Stack</dt><dd>ESP32, PlatformIO, Arduino</dd></div>
              <div><dt>Status</dt><dd>Active prototype</dd></div>
            </dl>
          </article>
          <article class="project-card">
            <div>
              <p class="tag">Mobile</p>
              <h2 class="card-title">Darmi Mobile</h2>
              <p>Flutter app for smart lock control, smart lamp control, setup flows, and provisioning.</p>
            </div>
            <dl>
              <div><dt>Stack</dt><dd>Flutter, Dart, Material 3</dd></div>
              <div><dt>Status</dt><dd>Active prototype</dd></div>
            </dl>
          </article>
          <article class="project-card">
            <div>
              <p class="tag">Operations</p>
              <h2 class="card-title">DARMI Sales Order</h2>
              <p>An MVP for Telegram order intake and monitoring through a web dashboard.</p>
            </div>
            <dl>
              <div><dt>Stack</dt><dd>FastAPI, PostgreSQL, Next.js</dd></div>
              <div><dt>Status</dt><dd>MVP</dd></div>
            </dl>
          </article>
          <article class="project-card">
            <div>
              <p class="tag">Device</p>
              <h2 class="card-title">MicroLamp / Smart Lamp</h2>
              <p>An ESP32-based extension of the device control use case for smart lamps.</p>
            </div>
            <dl>
              <div><dt>Stack</dt><dd>ESP32, HTTP API</dd></div>
              <div><dt>Status</dt><dd>Active prototype</dd></div>
            </dl>
          </article>
        </div>
      </section>

      <section class="contribute section" id="contribute">
        <div class="section-heading">
          <p class="eyebrow">Contribute</p>
          <!-- <h2>Contribution paths are defined early.</h2> -->
        </div>
        <div class="contribute-grid">
          <div>
            <strong>Documentation</strong>
            <span>README files, architecture docs, setup guides, and tutorials.</span>
          </div>
          <div>
            <strong>Engineering</strong>
            <span>Firmware, mobile app, dashboard, simulators, and testing.</span>
          </div>
          <div>
            <strong>Governance</strong>
            <span>License, contributing guide, code of conduct, issue labels.</span>
          </div>
        </div>
      </section>

      <section class="contact section" id="contact">
        <div>
          <p class="eyebrow">Contact</p>
          <!-- <h2>Open for collaboration.</h2> -->
          <p>
            We are open to collaboration with communities, schools, makers,
            small businesses, and local programs that want to explore
            open-source digital access systems.
          </p>
        </div>
        <div class="contact-actions">
          <a class="button primary" href="https://github.com/OpenMicrolock">GitHub Organization</a>
          <a class="button secondary" href="mailto:hello@openmicrolock.org">Email</a>
        </div>
      </section>
    </main>

    <footer class="footer">
      <span>Open Microlock / DARMI</span>
      <span>Open-source digital access ecosystem.</span>
    </footer>
    <script src="script.js"></script>
  </body>
</html>