refactor(demo): split UI service package

src/gapido_auth/demo/__init__.py

@@ -1,2 +0,0 @@
-"""Demo browser client for the auth service."""
-

src/gapido_demo/__init__.py

@@ -0,0 +1 @@
+"""Demo browser client service for Gapido Auth."""

src/gapido_demo/app.py

@@ -12,8 +12,8 @@ from pydantic import BaseModel, Field
 from redis.asyncio import Redis
 
 from gapido_auth.config import Settings, get_settings
-from gapido_auth.demo.grpc_client import AuthGrpcClient, DemoTokenResponse
 from gapido_auth.infrastructure.debug_sms_client import debug_sms_key
+from gapido_demo.grpc_client import AuthGrpcClient, DemoTokenResponse
 
 STATIC_DIR = Path(__file__).resolve().parent / "static"
 T = TypeVar("T")

src/gapido_demo/py.typed

@@ -0,0 +1 @@
+

src/gapido_demo/static/app.js

@@ -136,4 +136,3 @@ $("admin").addEventListener("click", async () => {
 });
 
 render();
-

src/gapido_demo/static/index.html

@@ -62,4 +62,3 @@
     <script src="/static/app.js"></script>
   </body>
 </html>
-

src/gapido_demo/static/styles.css

@@ -1,9 +1,9 @@
 :root {
-  color-scheme: light;
+  color-scheme: dark;
   font-family:
     Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  background: #f5f7fb;
-  color: #1d2433;
+  background: #0c111d;
+  color: #e6edf7;
 }
 
 * {
@@ -27,11 +27,11 @@ input {
 }
 
 .panel {
-  background: #ffffff;
-  border: 1px solid #dbe3ef;
+  background: #121a2a;
+  border: 1px solid #243149;
   border-radius: 8px;
   padding: 20px;
-  box-shadow: 0 16px 45px rgb(29 36 51 / 8%);
+  box-shadow: 0 18px 55px rgb(0 0 0 / 28%);
 }
 
 .identity {
@@ -44,7 +44,7 @@ input {
 .eyebrow {
   margin: 0 0 4px;
   font-size: 13px;
-  color: #5f6f89;
+  color: #8fa3c1;
   font-weight: 700;
 }
 
@@ -63,11 +63,11 @@ h2 {
 }
 
 .status {
-  border: 1px solid #c4d3ea;
+  border: 1px solid #2e7d72;
   border-radius: 999px;
   padding: 8px 12px;
-  color: #315477;
-  background: #eef5ff;
+  color: #8ff0d2;
+  background: #0f2a28;
   font-weight: 700;
 }
 
@@ -85,32 +85,32 @@ h2 {
 label {
   display: grid;
   gap: 6px;
-  color: #40516b;
+  color: #b7c6dd;
   font-size: 14px;
   font-weight: 700;
 }
 
 input {
   width: 100%;
-  border: 1px solid #cfd9e8;
+  border: 1px solid #2b3a55;
   border-radius: 6px;
   padding: 11px 12px;
-  color: #1d2433;
-  background: #fbfdff;
+  color: #e6edf7;
+  background: #0b1220;
 }
 
 button {
   border: 0;
   border-radius: 6px;
   padding: 11px 14px;
-  background: #206a5d;
+  background: #2d8f7e;
   color: #ffffff;
   font-weight: 800;
   cursor: pointer;
 }
 
 button:hover {
-  background: #18544a;
+  background: #247669;
 }
 
 .actions {
@@ -132,7 +132,7 @@ button:hover {
 }
 
 dt {
-  color: #6b7b92;
+  color: #93a4bc;
 }
 
 dd {
@@ -146,8 +146,9 @@ pre {
   padding: 14px;
   border-radius: 6px;
   overflow: auto;
-  background: #111827;
-  color: #d1fae5;
+  border: 1px solid #243149;
+  background: #080d16;
+  color: #a7f3d0;
 }
 
 @media (max-width: 760px) {
@@ -161,4 +162,3 @@ pre {
     font-size: 26px;
   }
 }
-