From e44b15c91a5cdebc2e9212c996b975d2c777108f Mon Sep 17 00:00:00 2001
From: Tomasz Rewak <tomaszrewak@gmail.com>
Date: Sun, 14 May 2023 23:05:48 +0200
Subject: [PATCH] Style improvements.

---
 assets/style.css | 49 ++++++++++++++++++++++++++++++++++++++++--------
 main.py          | 49 +++++++++++++++++++++++++++---------------------
 2 files changed, 69 insertions(+), 29 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index 3ec26bd..30431e6 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -2,23 +2,61 @@ body {
     background: black;
 }
 
+input {
+    background: black;
+    border: 2px solid #ff8d00;
+    color: #ff8d00;
+}
+
 .magi {
-    height: 50vh;
     display: grid;
     grid-template-columns: 20px 2fr 0.5fr 1fr 0.5fr 2fr 20px;
     grid-template-rows: 20px 2fr 2fr 1fr 3fr 20px;
+    aspect-ratio: 2 / 1;
+    container-type: size;
+    border: 2px solid #ff8d00;
 }
 
 .magi>.title {
     grid-area: 5 / 4;
     color: #ff8d00;
     text-align: center;
-    font-size: 4em;
+    font-size: 9cqh;
+    font-weight: bold;
+}
+
+.magi>.header>hr {
+    border: 2px solid #277547;
+    height: 4px;
+    margin: 2px;
+}
+
+.magi>.header>span {
+    color: #ff8d00;
+    font-size: 10cqh;
+    display: flex;
+    justify-content: center;
+    font-weight: bold;
+    transform: scaleX(2);
+}
+
+.magi>.header.left {
+    grid-area: 2 / 1 / 3 / 3;
+}
+
+.magi>.header.right {
+    grid-area: 2 / 6 / 3 / 8;
+}
+
+.magi>.system-status {
+    grid-area: 3 / 2 / 4 / 3;
+    font-family: Helvetica;
+    color: #ff8d00;
 }
 
 .magi>.wise-man {
     font-family: Helvetica;
-    font-size: 4em;
+    font-size: 8cqh;
     font-weight: bold;
     display: flex;
     align-items: center;
@@ -38,9 +76,4 @@ body {
 .magi>.wise-man.casper {
     grid-area: 4 / 2 / 6 / 4;
     clip-path: polygon(0 0, 65% 0, 100% 44%, 100% 100%, 0 100%);
-}
-
-.system-status {
-    font-family: Helvetica;
-    color: #ff8d00;
 }
\ No newline at end of file
diff --git a/main.py b/main.py
index 43ed2b8..f394ff0 100644
--- a/main.py
+++ b/main.py
@@ -10,27 +10,34 @@ app = Dash(__name__)
 Magi = load_react_component(app, 'components', 'magi.js')
 WiseMan = load_react_component(app, 'components', 'wise_man.js')
 
-# 質問 - question
-# 解決 - resolution
-
-app.layout = Magi(id='magi', children=[
-    html.Div(
-        className='system-status',
-        children=[
-            html.Div(children='CODE : 473'),
-            html.Div(children='FILE : MAGI_SYS'),
-            html.Div(id='extention', children='EXTENTION : ????'),
-            html.Div(children='EX_MODE : OFF'),
-            html.Div(children='PRIORITY : AAA')]),
-    WiseMan(id={'type': 'wise-man', 'name': 'melchior'}, name='melchior', order_number=1, question_id=0, answer={'id': 0, 'response': 'yes', 'status': 'yes'}),
-    WiseMan(id={'type': 'wise-man', 'name': 'balthasar'}, name='balthasar', order_number=2, question_id=0, answer={'id': 0, 'response': 'yes', 'status': 'yes'}),
-    WiseMan(id={'type': 'wise-man', 'name': 'casper'}, name='casper', order_number=3, question_id=0, answer={'id': 0, 'response': 'yes', 'status': 'yes'}),
-    html.Div(className='title', children='MAGI'),
-    html.Div(className='header', children=[
-        html.Hr(),
-        html.Hr(),
-        html.Hr(),
-        html.Hr()
+app.layout = html.Div(children=[
+    Magi(id='magi', children=[
+        html.Div(
+            className='system-status',
+            children=[
+                html.Div(children='CODE : 473'),
+                html.Div(children='FILE : MAGI_SYS'),
+                html.Div(id='extention', children='EXTENTION : ????'),
+                html.Div(children='EX_MODE : OFF'),
+                html.Div(children='PRIORITY : AAA')]),
+        WiseMan(id={'type': 'wise-man', 'name': 'melchior'}, name='melchior', order_number=1, question_id=0, answer={'id': 0, 'response': 'yes', 'status': 'yes'}),
+        WiseMan(id={'type': 'wise-man', 'name': 'balthasar'}, name='balthasar', order_number=2, question_id=0, answer={'id': 0, 'response': 'yes', 'status': 'yes'}),
+        WiseMan(id={'type': 'wise-man', 'name': 'casper'}, name='casper', order_number=3, question_id=0, answer={'id': 0, 'response': 'yes', 'status': 'yes'}),
+        html.Div(className='title', children='MAGI'),
+        html.Div(className='header left', children=[
+            html.Hr(),
+            html.Hr(),
+            html.Span('質 問 '),
+            html.Hr(),
+            html.Hr()
+        ]),
+        html.Div(className='header right', children=[
+            html.Hr(),
+            html.Hr(),
+            html.Span('解 決 '),
+            html.Hr(),
+            html.Hr()
+        ])
     ]),
     dcc.Input(id='query', type='text', value='', debounce=True, autoComplete='off'),