Merge pull request #1 from openairmx/ui

Implement UI
author: Li Zhineng <[email protected]> 2025-08-08 23:14:06 +0800
committer: GitHub <[email protected]> 2025-08-08 23:14:06 +0800
commit: cc9e192db6f1327ca152ec3d0a217615d0bdd047 (patch)
tree: 5aac605bfb3be9deff153e29f4903bb6037ab8ad
parent: a78acd0046d26b3047fa085e02517583a8f5d9b1 (diff)
parent: e5685547b3233516585f6a5e20ec24ef3351fe2f (diff)
download: openairmx.org-cc9e192db6f1327ca152ec3d0a217615d0bdd047.tar.gz
openairmx.org-cc9e192db6f1327ca152ec3d0a217615d0bdd047.zip
16 files changed, 501 insertions, 52 deletions
diff --git a/404.html b/404.html
index 3a16ab5..086a5c9 100644
--- a/404.html
+++ b/404.html
@@ -1,6 +1,6 @@
 ---
 permalink: /404.html
-layout: page
+layout: default
 ---
 
 <style type="text/css" media="screen">
diff --git a/_config.yml b/_config.yml
index b69b0f7..bfc0811 100644
--- a/_config.yml
+++ b/_config.yml
@@ -26,7 +26,6 @@ baseurl: ""
 url: "https://openairmx.github.io"
 
 # Build settings
-theme: minima
 plugins:
   - jekyll-feed
 
diff --git a/_includes/footer.html b/_includes/footer.html
new file mode 100644
index 0000000..583377a
--- /dev/null
+++ b/_includes/footer.html
@@ -0,0 +1,3 @@
+<footer class="site-footer">
+  <p>Made with love in Foshan, China.</p>
+</footer>
diff --git a/_includes/head.html b/_includes/head.html
new file mode 100644
index 0000000..b7b2a28
--- /dev/null
+++ b/_includes/head.html
@@ -0,0 +1,10 @@
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  {%- seo -%}
+  <link rel="stylesheet" href="{{ '/assets/main.css' | relative_url }}">
+  {%- feed_meta -%}
+  <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:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
+</head>
diff --git a/_includes/header.html b/_includes/header.html
new file mode 100644
index 0000000..8560642
--- /dev/null
+++ b/_includes/header.html
@@ -0,0 +1,18 @@
+<header class="site-header">
+  <div class="logo">
+    <a href="{{ '/' | relative_url }}">
+      <img src="{{ '/assets/images/logo.svg' | relative_url }}" alt="Open AIRMX" width="118" height="12" />
+    </a>
+  </div>
+
+  <nav class="site-nav">
+    <a href="{{ '/' | relative_url }}" class="nav-link {% if page.url == '/' %}active{% endif %}">
+      Introduction
+    </a>
+
+    {% capture p %}{% post_url 2025-07-23-set-up-mock-server %}{% endcapture %}
+    <a href="{{ p | relative_url }}" class="nav-link {% if page.url == p %}active{% endif %}">
+      Set up mock server
+    </a>
+  </nav>
+</header>
diff --git a/_layouts/base.html b/_layouts/base.html
new file mode 100644
index 0000000..0456e22
--- /dev/null
+++ b/_layouts/base.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: 'en' }}">
+
+  {%- include head.html -%}
+
+  <body>
+    <div class="site-container">
+      {%- include header.html -%}
+
+      <main class="site-main">
+        {{ content }}
+      </main>
+
+      {%- include footer.html -%}
+    </div>
+  </body>
+
+</html>
diff --git a/_layouts/default.html b/_layouts/default.html
new file mode 100644
index 0000000..3797865
--- /dev/null
+++ b/_layouts/default.html
@@ -0,0 +1,5 @@
+---
+layout: base
+---
+
+{{ content }}
diff --git a/_posts/2025-07-23-set-up-mock-server.markdown b/_posts/2025-07-23-set-up-mock-server.markdown
index 8d2855c..238b31f 100644
--- a/_posts/2025-07-23-set-up-mock-server.markdown
+++ b/_posts/2025-07-23-set-up-mock-server.markdown
@@ -1,5 +1,5 @@
 ---
-layout: post
+layout: default
 title:  "Set up a mock server"
 date:   2025-07-23 09:06:41 +0800
 ---
diff --git a/_sass/_dracula.scss b/_sass/_dracula.scss
new file mode 100644
index 0000000..c51ccb1
--- /dev/null
+++ b/_sass/_dracula.scss
@@ -0,0 +1,167 @@
+/* Dracula Theme v1.2.5
+ *
+ * https://github.com/zenorocha/dracula-theme
+ *
+ * Copyright 2016, All rights reserved
+ *
+ * Code licensed under the MIT license
+ * http://zenorocha.mit-license.org
+ *
+ * @author Rob G <[email protected]>
+ * @author Chris Bracco <[email protected]>
+ * @author Zeno Rocha <[email protected]>
+ * @author Piruin Panichphol <[email protected]>
+ */
+
+/*
+ * Variables
+ */
+
+$dt-gray-dark: var(--color-neutral-900);  // Background
+$dt-gray: #44475a;       // Current Line & Selection
+$dt-gray-light: #f8f8f2; // Foreground
+$dt-blue: #6272a4;       // Comment
+$dt-cyan: #8be9fd;
+$dt-green: #50fa7b;
+$dt-orange: #ffb86c;
+$dt-pink: #ff79c6;
+$dt-purple: #bd93f9;
+$dt-red: #ff5555;
+$dt-yellow: #f1fa8c;
+
+/*
+ * Styles
+ */
+
+.highlight {
+  background: $dt-gray-dark;
+  color: $dt-gray-light;
+
+  .hll,
+  .s,
+  .sa,
+  .sb,
+  .sc,
+  .dl,
+  .sd,
+  .s2,
+  .se,
+  .sh,
+  .si,
+  .sx,
+  .sr,
+  .s1,
+  .ss {
+    color: $dt-yellow;
+  }
+
+  .go {
+    color: $dt-gray;
+  }
+
+  .err,
+  .g,
+  .l,
+  .n,
+  .x,
+  .p,
+  .ge,
+  .gr,
+  .gh,
+  .gi,
+  .gp,
+  .gs,
+  .gu,
+  .gt,
+  .ld,
+  .no,
+  .nd,
+  .ni,
+  .ne,
+  .nn,
+  .nx,
+  .py,
+  .w,
+  .bp {
+    color: $dt-gray-light;
+  }
+
+  .gh,
+  .gi,
+  .gu {
+    font-weight: bold;
+  }
+
+  .ge {
+    text-decoration: underline;
+  }
+
+  .bp {
+    font-style: italic;
+  }
+
+  .c,
+  .ch,
+  .cm,
+  .cpf,
+  .c1,
+  .cs {
+    color: $dt-blue;
+  }
+
+  .kd,
+  .kt,
+  .nb,
+  .nl,
+  .nv,
+  .vc,
+  .vg,
+  .vi,
+  .vm {
+    color: $dt-cyan;
+  }
+
+  .kd,
+  .nb,
+  .nl,
+  .nv,
+  .vc,
+  .vg,
+  .vi,
+  .vm {
+    font-style: italic;
+  }
+
+  .na,
+  .nc,
+  .nf,
+  .fm {
+    color: $dt-green;
+  }
+
+  .k,
+  .o,
+  .cp,
+  .kc,
+  .kn,
+  .kp,
+  .kr,
+  .nt,
+  .ow {
+    color: $dt-pink;
+  }
+
+  .m,
+  .mb,
+  .mf,
+  .mh,
+  .mi,
+  .mo,
+  .il {
+    color: $dt-purple;
+  }
+
+  .gd {
+    color: $dt-red;
+  }
+}
diff --git a/_sass/_highlight.scss b/_sass/_highlight.scss
new file mode 100644
index 0000000..27cbf1f
--- /dev/null
+++ b/_sass/_highlight.scss
@@ -0,0 +1,13 @@
+.highlight {
+  margin-block-end: 1rem;
+  padding-inline: 1rem;
+  padding-block: 1rem;
+  font-size: 0.875rem;
+  border-radius: 0.5rem;
+}
+
+.highlight pre {
+  overflow-x: auto;
+}
+
+@import "./dracula";
diff --git a/_sass/_reset.scss b/_sass/_reset.scss
new file mode 100644
index 0000000..1cf0654
--- /dev/null
+++ b/_sass/_reset.scss
@@ -0,0 +1,39 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    interpolate-size: allow-keywords;
+  }
+}
+
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+
+input, button, textarea, select {
+  font: inherit;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+p {
+  text-wrap: pretty;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  text-wrap: balance;
+}
diff --git a/_sass/main.scss b/_sass/main.scss
new file mode 100644
index 0000000..69bf664
--- /dev/null
+++ b/_sass/main.scss
@@ -0,0 +1,178 @@
+:root {
+  --color-neutral-50: oklch(98.5% 0 0);
+  --color-neutral-100: oklch(97% 0 0);
+  --color-neutral-200: oklch(92.2% 0 0);
+  --color-neutral-300: oklch(87% 0 0);
+  --color-neutral-400: oklch(70.8% 0 0);
+  --color-neutral-500: oklch(55.6% 0 0);
+  --color-neutral-600: oklch(43.9% 0 0);
+  --color-neutral-700: oklch(37.1% 0 0);
+  --color-neutral-800: oklch(26.9% 0 0);
+  --color-neutral-900: oklch(20.5% 0 0);
+  --color-neutral-950: oklch(14.5% 0 0);
+  --color-emerald-50: oklch(97.9% 0.021 166.113);
+  --color-emerald-100: oklch(95% 0.052 163.051);
+  --color-emerald-200: oklch(90.5% 0.093 164.15);
+  --color-emerald-300: oklch(84.5% 0.143 164.978);
+  --color-emerald-400: oklch(76.5% 0.177 163.223);
+  --color-emerald-500: oklch(69.6% 0.17 162.48);
+  --color-emerald-600: oklch(59.6% 0.145 163.225);
+  --color-emerald-700: oklch(50.8% 0.118 165.612);
+  --color-emerald-800: oklch(43.2% 0.095 166.913);
+  --color-emerald-900: oklch(37.8% 0.077 168.94);
+  --color-emerald-950: oklch(26.2% 0.051 172.552);
+}
+
+@import "_reset.scss";
+@import "_highlight.scss";
+
+body {
+  font-size: 1rem;
+  color: var(--color-neutral-200);
+  background-color: var(--color-neutral-950);
+}
+
+.site-container {
+  position: relative;
+  display: grid;
+  grid-template-areas:
+    "."
+    "header"
+    "."
+    "main"
+    "."
+    "footer";
+  grid-template-rows: 1.5rem auto 3rem 1fr 5rem auto;
+  grid-template-columns: minmax(0, 1fr);
+  font-family: 'Inter', sans-serif;
+}
+
+.site-header {
+  grid-area: header;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding-block: 1.5rem;
+  padding-inline: 1.5rem;
+}
+
+.logo {
+  padding-block: 0.5rem;
+}
+
+.logo a {
+  display: inline-block;
+  padding-block: 0.5rem;
+  transition: opacity 0.2s ease;
+}
+
+.logo a:hover {
+  opacity: 0.8;
+}
+
+.site-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.nav-link {
+  color: var(--color-neutral-400);
+  text-decoration: none;
+  white-space: nowrap;
+  transition: color 0.2s ease;
+}
+
+.nav-link:hover {
+  color: var(--color-neutral-200);
+}
+
+.nav-link.active {
+  color: var(--color-neutral-50);
+  font-weight: 500;
+}
+
+.site-main {
+  grid-area: main;
+  padding-inline: 1.5rem;
+}
+
+.site-main p {
+  margin-block-end: 1.5rem;
+}
+
+.site-main p:last-child {
+  margin-block-end: 0;
+}
+
+.site-main ul {
+  list-style: disc;
+  margin-block-end: 1rem;
+}
+
+.site-main li {
+  margin-block-end: 0.25rem;
+}
+
+.site-main a {
+  color: var(--color-emerald-200);
+  text-decoration: underline;
+  text-underline-position: from-font;
+  transition: color 0.2s ease;
+}
+
+.site-main a:hover {
+  color: var(--color-emerald-300);
+}
+
+.site-main em {
+  font-style: italic;
+  color: var(--color-neutral-300);
+}
+
+.site-main strong {
+  font-weight: 600;
+  color: var(--color-neutral-50);
+}
+
+.site-footer {
+  grid-area: footer;
+  padding-inline: 1.5rem;
+  padding-block: 1.5rem;
+}
+
+.site-footer p {
+  color: var(--color-neutral-500);
+}
+
+@media (min-width: 48rem) {
+  .site-container {
+    grid-template-rows: 3rem auto 7rem 1fr 10rem auto;
+  }
+
+  .site-header {
+    padding-block: 2rem;
+    padding-inline: 6rem;
+    gap: 3rem;
+  }
+
+  .site-main {
+    padding-inline: 6rem;
+  }
+
+  .site-footer {
+    padding-inline: 6rem;
+    padding-block: 2rem;
+  }
+
+  .site-main {
+    max-width: 60rem;
+  }
+
+  .site-nav {
+    flex-direction: row;
+    align-items: center;
+    gap: 1.5rem;
+    align-items: center;
+  }
+}
diff --git a/about.markdown b/about.markdown
deleted file mode 100644
index aa61b09..0000000
--- a/about.markdown
+++ /dev/null
@@ -1,45 +0,0 @@
----
-layout: page
-title: About
-permalink: /about/
----
-
-Hello! Welcome to Open AIRMX, a site dedicated to everything related to
-AIRMX Pro.
-
-This project originated from my desire to integrate the device with
-Apple Home, enabling remote control. However, around mid-2024, an unexpected
-issue arose when someone reported in the repository that the AIRMX company
-had gone out of business. This created a challenge for users who needed to
-retrieve the device’s key, as there was no way to access it with the official
-servers down.
-
-After an extensive investigation and reverse engineering of the AIRMX mobile
-application, we were able to find a solution. We are excited to offer you the
-ability to fully localize your device on your home network. Currently, we
-provide dedicated repositories for:
-
-- [A mock API server][mock-server] that handles device registration and
-  time synchronization.
-- [A setup page][setup-page] to assist you in pairing or reconnecting your
-  device to the internet.
-- [A JavaScript project][airmx] called [airmx][airmx] that allows you to
-  control the device. This is a low-level package for composing and validating
-  MQTT messages, making it ready for integration with various platforms.
-- [A Homebridge plugin][homebridge-airmx] for AIRMX Pro, which enables you to
-  control your device across your Apple devices, including via Siri.
-
-The project scope has expanded significantly beyond our initial expectations.
-We are open-source enthusiasts and do not have any affiliation with
-AIRMX—The company. The project is managed by a software engineer and a
-UI designer. If you appreciate our work, we would be grateful for your support
-through GitHub Sponsors or PayPal. Your generosity means a lot to us.
-
-If you have any questions or just want to say hello, please feel free to
-send us a message at [[email protected]][contact-email].
-
-[mock-server]: https://github.com/openairmx/server
-[setup-page]: https://github.com/openairmx/setup
-[airmx]: https://github.com/openairmx/airmx
-[homebridge-airmx]: https://github.com/openairmx/homebridge-airmx
-[contact-email]: mailto:[email protected]
diff --git a/assets/images/logo.svg b/assets/images/logo.svg
new file mode 100644
index 0000000..90d1f46
--- /dev/null
+++ b/assets/images/logo.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="118" height="12" fill="none">
+  <path fill="#fff" d="m114.919 12-2.395-4.258h-.085l-1.704-1.734V5.96L107.081 0h2.972l2.424 4.478h.075l1.733 1.498v.048l3.72 5.976h-3.086Zm-7.914 0 3.73-5.976v-.048l1.704-1.498h.085L114.938 0h2.991l-3.644 5.96v.048l-1.733 1.734h-.075L110.063 12h-3.058ZM94 12V0h1.746l3.218 4.844h.078L102.258 0h1.746v12h-2.506V7.042l.039-2.23h-.088l-2.087 3.264h-.721l-2.087-3.265h-.088l.04 2.231V12H94ZM83.06 7.653V5.73h2.346c.406 0 .766-.076 1.08-.228.32-.152.572-.366.755-.643a1.7 1.7 0 0 0 .275-.96c0-.565-.21-1.007-.628-1.327-.412-.32-.939-.48-1.58-.48h-2.247V0h2.66c.83 0 1.583.141 2.256.423.68.283 1.22.692 1.62 1.23.399.537.598 1.194.598 1.97a3.52 3.52 0 0 1-.628 2.043c-.412.608-1.004 1.091-1.776 1.45-.772.358-1.688.537-2.748.537h-1.982ZM81 12V0h2.709v12H81Zm6.938 0-2.895-4.681 2.022-1.384L91 12h-3.062ZM72.004 12V0h2.992v12h-2.992ZM69 12V9.965h9V12h-9Zm0-9.965V0h9v2.035h-9ZM55 12l4.151-12h2.698L66 12h-2.783l-.986-3.216-.21-.887-1.483-5.088h-.076l-1.483 5.088-.21.887L57.783 12H55Zm2.583-2.605V7.433h5.834v1.962h-5.834ZM36.5 12V0h1.906l4.242 6.334.733 1.197h.078l-.078-2.402V0H46v12h-1.916l-4.222-6.407-.733-1.246h-.058l.048 2.508V12H36.5ZM25 12.002v-12h8.5v2.093h-5.653v2.808h4.73V6.94h-4.73V9.91H33.5v2.092H25ZM15.155 7.859V5.783h2.088c.413 0 .775-.079 1.086-.236a1.793 1.793 0 0 0 1.002-1.637c0-.559-.2-1.001-.601-1.327-.394-.325-.925-.488-1.592-.488h-1.983V.003h2.164c.953 0 1.78.157 2.479.472.699.314 1.24.76 1.62 1.335.388.575.582 1.25.582 2.027 0 .792-.194 1.493-.582 2.1-.387.603-.93 1.075-1.63 1.417-.693.336-1.497.505-2.412.505h-2.221ZM13 12.002v-12h2.708v12H13ZM4.99 12c-1.057 0-1.96-.236-2.708-.71C1.541 10.819.974 10.137.58 9.244.193 8.345 0 7.262 0 5.992c0-1.27.193-2.35.58-3.243.394-.892.96-1.572 1.702-2.04C3.024.236 3.926 0 4.99 0 6.041 0 6.94.236 7.69.71c.747.467 1.318 1.15 1.711 2.047.4.892.6 1.97.6 3.235 0 1.27-.197 2.353-.59 3.251-.393.893-.964 1.575-1.712 2.048-.748.473-1.65.709-2.708.709Zm0-2.08c.523 0 .961-.154 1.316-.462.354-.308.622-.754.802-1.338.187-.585.28-1.294.28-2.128-.006-.834-.102-1.54-.29-2.12-.186-.584-.46-1.027-.821-1.33-.355-.308-.784-.462-1.287-.462-.509 0-.941.156-1.296.47-.348.308-.615.754-.802 1.338-.187.58-.28 1.28-.28 2.104 0 .823.093 1.527.28 2.112.193.584.467 1.033.822 1.346.354.314.78.47 1.276.47Z"/>
+</svg>
diff --git a/assets/main.scss b/assets/main.scss
new file mode 100644
index 0000000..4ecb593
--- /dev/null
+++ b/assets/main.scss
@@ -0,0 +1,4 @@
+---
+---
+
+@import "main.scss";
diff --git a/index.markdown b/index.markdown
index 0671507..1988a40 100644
--- a/index.markdown
+++ b/index.markdown
@@ -1,6 +1,43 @@
 ---
-# Feel free to add content and custom Front Matter to this file.
-# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
-
-layout: home
+layout: default
 ---
+
+Hello! Welcome to Open AIRMX, a site dedicated to everything related to
+AIRMX Pro.
+
+This project originated from my desire to integrate the device with
+Apple Home, enabling remote control. However, around mid-2024, an unexpected
+issue arose when someone reported in the repository that the AIRMX company
+had gone out of business. This created a challenge for users who needed to
+retrieve the device's key, as there was no way to access it with the official
+servers down.
+
+After an extensive investigation and reverse engineering of the AIRMX mobile
+application, we were able to find a solution. We are excited to offer you the
+ability to fully localize your device on your home network. Currently, we
+provide dedicated repositories for:
+
+- [A mock API server][mock-server] that handles device registration and
+  time synchronization.
+- [A setup page][setup-page] to assist you in pairing or reconnecting your
+  device to the internet.
+- [A JavaScript project][airmx] called [airmx][airmx] that allows you to
+  control the device. This is a low-level package for composing and validating
+  MQTT messages, making it ready for integration with various platforms.
+- [A Homebridge plugin][homebridge-airmx] for AIRMX Pro, which enables you to
+  control your device across your Apple devices, including via Siri.
+
+The project scope has expanded significantly beyond our initial expectations.
+We are open-source enthusiasts and do not have any affiliation with
+AIRMX—The company. The project is managed by a software engineer and a
+UI designer. If you appreciate our work, we would be grateful for your support
+through GitHub Sponsors or PayPal. Your generosity means a lot to us.
+
+If you have any questions or just want to say hello, please feel free to
+send us a message at [[email protected]][contact-email].
+
+[mock-server]: https://github.com/openairmx/server
+[setup-page]: https://github.com/openairmx/setup
+[airmx]: https://github.com/openairmx/airmx
+[homebridge-airmx]: https://github.com/openairmx/homebridge-airmx
+[contact-email]: mailto:[email protected]
author	Li Zhineng <[email protected]>	2025-08-08 23:14:06 +0800
committer	GitHub <[email protected]>	2025-08-08 23:14:06 +0800
commit	cc9e192db6f1327ca152ec3d0a217615d0bdd047 (patch)
tree	5aac605bfb3be9deff153e29f4903bb6037ab8ad
parent	a78acd0046d26b3047fa085e02517583a8f5d9b1 (diff)
parent	e5685547b3233516585f6a5e20ec24ef3351fe2f (diff)
download	openairmx.org-cc9e192db6f1327ca152ec3d0a217615d0bdd047.tar.gz openairmx.org-cc9e192db6f1327ca152ec3d0a217615d0bdd047.zip