Почетна Преглед Помоћ
Регистрација Пријавите се
lee
/
ha_permissions
1
0
Креирај огранак 0
Датотеке Дискусије 0 Захтеви за спајање 0 Вики
Преглед изворни кода

Create the login page style

Lee Morgan пре 4 недеља
родитељ
4c76c60a1c
комит
cc8e04e35d
4 измењених фајлова са 235 додато и 6 уклоњено
Један поглед Покажи статистику Diff
  1. 81 2
      ui/index.css
  2. 19 4
      ui/index.html
  3. 135 0
      ui/login/index.css
  4. 0 0
      ui/login/index.js

+ 81 - 2
ui/index.css
Прегледај датотеку 

@@ -1,4 +1,83 @@
 
+@import "./login/index.css";
 
+
 
+/*
 
+Background layers
 
+
 
+--bg-base: #14171c — app background
 
+--bg-surface: #1c2027 — cards/panels
 
+--bg-surface-raised: #262b34 — modals, dropdowns, hover states
 
+--bg-inset: #0e1014 — sunken elements (input fields, code blocks)
 
+
 
+Text
 
+
 
+--text-primary: #eef1f5
 
+--text-secondary: #9aa3af
 
+--text-tertiary: #5c6470
 
+
 
+Accent (interactive/brand)
 
+
 
+--accent: #4f9cf9 — primary actions, active toggles, links
 
+--accent-hover: #6bacfa
 
+--accent-muted: #2a3b52 — subtle backgrounds for selected/active rows
 
+
 
+Borders
 
+
 
+--border-subtle: #2a2f38
 
+--border-strong: #3a4049
 
+Semantic / device-state colors
 
+
 
+These matter a lot for a HA UI since you're constantly showing on/off, alerts, and sensor readings:
 
+
 
+--state-on: #f5b942 — entity "on" (warm amber reads well as "light is on," avoids clashing with accent blue)
 
+--state-off: #4a5058 — entity "off" (neutral gray, not red — off isn't an error)
 
+--success: #4caf7d — armed, locked, connected, healthy
 
+--warning: #e8a33d — low battery, unavailable-but-not-critical
 
+--danger: #e5484d — alarm triggered, offline, critical sensor
 
+--info: #4f9cf9 — same as accent, reuse for info badges
 
+*/
 
+
 
+:root {
 
+  /* Backgrounds */
 
+  --bg-base: #14171c;
 
+  --bg-surface: #1c2027;
 
+  --bg-surface-raised: #262b34;
 
+  --bg-inset: #0e1014;
 
+
 
+  /* Text */
 
+  --text-primary: #eef1f5;
 
+  --text-secondary: #9aa3af;
 
+  --text-tertiary: #5c6470;
 
+
 
+  /* Accent */
 
+  --accent: #4f9cf9;
 
+  --accent-hover: #6bacfa;
 
+  --accent-muted: #2a3b52;
 
+
 
+  /* Borders */
 
+  --border-subtle: #2a2f38;
 
+  --border-strong: #3a4049;
 
+
 
+  /* Semantic / device state */
 
+  --state-on: #f5b942;
 
+  --state-off: #4a5058;
 
+  --success: #4caf7d;
 
+  --warning: #e8a33d;
 
+  --danger: #e5484d;
 
+  --info: #4f9cf9;
 
+}
 
+
 
+*{
 
+    margin: 0;
 
+    padding: 0;
 
+    box-sizing: border-box;
 
+}
 
+
 
+body, html{
 
+    height: 100%;
 
+    width: 100%;
 
+}
 
+
 
 body{
 
 body{
 
-    background: orange;
 
-    color: black;
 
+    background: var(--bg-base);
 
+    color: var(--text-primary);
 
 }
 
 }

+ 19 - 4
ui/index.html
Прегледај датотеку 

@@ -2,13 +2,28 @@
 
 <html lang="en">
 
 <html lang="en">
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
-    <title>My App</title>
 
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <meta name="theme-color" content="#14171c">
 
+    <title>Home Assistant</title>
 
     <style></style>
 
     <style></style>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
-    <h1>Hello!</h1>
 
-    <p>This is a simple page.</p>
 
-    <p id="something"></p>
 
+    <div id="loginPage">
 
+        <form>
 
+            <h1>Login</h1>
 
+
 
+            <label>Email:
 
+                <input type="email" id="loginPageEmail" required>
 
+            </label>
 
+
 
+            <label>Password:
 
+                <input type="password" id="loginPagePassword" required>
 
+            </label>
 
+
 
+            <button>Log In</button>
 
+        </form>
 
+    </div>
 
+
 
     <script></script>
 
     <script></script>
 
 </body>
 
 </body>
 
 </html>
 
 </html>

+ 135 - 0
ui/login/index.css
Прегледај датотеку 

@@ -0,0 +1,135 @@
 
+#loginPage{
 
+    display: grid;
 
+    grid-template-columns: 45% 55%;
 
+    height: 100%;
 
+    background: var(--bg-base);
 
+
 
+    form{
 
+        display: flex;
 
+        flex-direction: column;
 
+        align-self: center;
 
+        padding: 0 64px;
 
+        gap: 22px;
 
+    }
 
+
 
+    h1{
 
+        position: relative;
 
+        font-size: 28px;
 
+        font-weight: 700;
 
+        letter-spacing: -0.02em;
 
+        color: var(--text-primary);
 
+        padding-left: 16px;
 
+        margin-bottom: 6px;
 
+    }
 
+
 
+    h1::before{
 
+        content: "";
 
+        position: absolute;
 
+        left: 0;
 
+        top: 4px;
 
+        bottom: 4px;
 
+        width: 4px;
 
+        background: var(--accent);
 
+    }
 
+
 
+    label{
 
+        display: flex;
 
+        flex-direction: column;
 
+        gap: 8px;
 
+        font-size: 11px;
 
+        font-weight: 600;
 
+        letter-spacing: 0.08em;
 
+        text-transform: uppercase;
 
+        color: var(--text-tertiary);
 
+    }
 
+
 
+    input{
 
+        font-size: 16px;
 
+        color: var(--text-primary);
 
+        background: transparent;
 
+        border: none;
 
+        border-bottom: 1px solid var(--border-strong);
 
+        border-radius: 0;
 
+        padding: 8px 2px;
 
+        transition: border-color 0.15s ease;
 
+    }
 
+
 
+    input:focus{
 
+        outline: none;
 
+        border-bottom-color: var(--accent);
 
+    }
 
+
 
+    button{
 
+        font-size: 13px;
 
+        font-weight: 700;
 
+        letter-spacing: 0.08em;
 
+        text-transform: uppercase;
 
+        color: var(--bg-base);
 
+        background: var(--accent);
 
+        border: none;
 
+        border-radius: 0;
 
+        padding: 14px 16px;
 
+        margin-top: 10px;
 
+        cursor: pointer;
 
+        transition: background 0.15s ease, transform 0.05s ease;
 
+    }
 
+
 
+    button:hover{
 
+        background: var(--accent-hover);
 
+    }
 
+
 
+    button:active{
 
+        transform: translateY(1px);
 
+    }
 
+}
 
+
 
+#loginPage::before{
 
+    content: "\2302";
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+    height: 100%;
 
+    font-size: 260px;
 
+    color: var(--accent-muted);
 
+    background:
 
+        radial-gradient(circle at 32% 28%, var(--accent-muted) 0%, transparent 55%),
 
+        var(--bg-surface);
 
+    border-right: 1px solid var(--border-subtle);
 
+}
 
+
 
+@media (max-width: 720px){
 
+    #loginPage{
 
+        grid-template-columns: 1fr;
 
+        min-height: 100%;
 
+        height: auto;
 
+        overflow-y: auto;
 
+        padding: 40px 0;
 
+    }
 
+
 
+    #loginPage::before{
 
+        display: none;
 
+    }
 
+
 
+    #loginPage form{
 
+        padding: 0 24px;
 
+    }
 
+
 
+    #loginPage h1{
 
+        font-size: 24px;
 
+    }
 
+}
 
+
 
+@media (max-width: 400px){
 
+    #loginPage form{
 
+        padding: 0 16px;
 
+        gap: 18px;
 
+    }
 
+
 
+    #loginPage h1{
 
+        font-size: 21px;
 
+    }
 
+
 
+    #loginPage button{
 
+        padding: 12px 16px;
 
+    }
 
+}

+ 0 - 0
ui/login/index.js
Прегледај датотеку