diff --git a/assets/style.css b/assets/style.css
index fbf6fc6..006fb6b 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -1,32 +1,45 @@
+/* Общая характеристика */
body {
background-color: #242829;
}
+/* Заморочная настройка переключателей */
.Select {
background-color: rgb(27, 29, 30);
color: #fff;
}
-
.Select-input > input {
color: #fff;
}
-
.Select .Select-value {
background-color: rgb(27, 29, 30);
}
-
.Select-control {
background-color: rgb(25, 25, 25) !important;
color: #fff;
}
-
.Select-menu-outer {
background-color: rgb(27, 29, 30);
color: #fff;
border-radius: 10;
}
+.has-value.Select--single>.Select-control .Select-value .Select-value-label, .has-value.is-pseudo-focused.Select--single>.Select-control .Select-value .Select-value-label{
+ color: white;
+}
-.has-value.Select--single>.Select-control .Select-value .Select-value-label, .has-value.is-pseudo-focused.Select--single>.Select-control .Select-value .Select-value-label{
- color: white
+/* Div для социалок */
+.socials {
+ background-color: #2e4ebf;
+ border-radius: 15px;
+ display: flex;
+ flex-direction: row;
+ padding-left: 1%;
+ padding-right: 1%;
+}
+/* Текст социалок */
+.socials_text {
+ color: white;
+ text-decoration: auto;
+ padding-left: 8%;
}
diff --git a/site.py b/site.py
index 4f6e3d0..84dad9b 100644
--- a/site.py
+++ b/site.py
@@ -3,13 +3,39 @@ from db import *
db = read_db()
els = list(db.keys())
-
-###### ОФОРМЛЕНИЕ #######
-
+## Сайт
from dash import Dash, dcc, html, Input, Output,callback
app = Dash(__name__, title="SS14 Tools", update_title=None)
+#### ФОРМАТ СТРАНИЦЫ ####
+
+app.index_string = '''
+
+
+
+ {%metas%}
+ {%title%}
+ {%favicon%}
+ {%css%}
+
+
+
+
+
+{%app_entry%}
+
+
+
+'''
+
+###### ОФОРМЛЕНИЕ #######
+
+
# Форматируем список для красоты
def list_form(ll):
global db
@@ -17,7 +43,8 @@ def list_form(ll):
formatted = []
imgs = {'medicine': '💊',
'chemicals': '🧪',
- 'botany': '🪴'}
+ 'botany': '🪴',
+ 'drinks': '🍸'}
for i in ll:
if type(i) == int:
@@ -31,21 +58,47 @@ def list_form(ll):
# 'background-color': 'rgb(27, 29, 30)', 'color': 'rgb(255,255,255)'
+# Типо контейнер для всего
+# [
+# Div,
+# Div
+# ]
app.layout = html.Div([
+# Соцсети и исходный код + название
+html.Div([
+
+html.Div([
+html.Img(src='assets/favicon.ico', width='50px', height='auto', style={'padding':10}),
+html.Div(children='''SS14 Tools'''
+, style={'color':'rgb(255,255,255)', 'font-weight': 'bold', 'font-size': '1.5rem'})
+], style={'display': 'flex', 'flex-wrap': 'wrap', 'align-items': 'center', 'flex': 1}),
+
+html.Div([
+dcc.Link('Discord',href='https://discord.gg/VxHbM3cedQ'),
+dcc.Link('Telegram',href='https://t.me/ss14tools')
+], style={'display': 'flex', 'flex-wrap': 'wrap', 'align-items': 'center', 'flex': 1}),
+
+#Пустой контейнер (для правильного отображения)
+html.Div(style={'flex':1})
+
+], style={'background-color': '#161819', 'margin': -8, 'display': 'flex', 'flexDirection': 'row', 'justify-content': 'flex-start'}),
+
+# Название + объём + вывод
+html.Div([
# Название + объём
html.Div([
# Реакция
html.Div([
dcc.Dropdown(list_form(els), id='reaction', placeholder="Реакция", maxHeight=500,
- style={'font-size': '120%'}) #, 'background-color': 'rgb(27, 29, 30)'})
+ style={'font-size': '120%', 'font-family': 'NotaSans'})
], style={'flex': 4}),
# Объём
html.Div([
dcc.Dropdown(list_form([30, 50, 100, 300, 1000]), 100, id='amount', clearable=False, searchable=False
, style={'font-family': '"Source Sans Pro", sans-serif', 'font-size': '120%'}) #, 'background-color': 'rgb(27, 29, 30)'})
- ], style={'flex': 1, 'padding-left': 25}) #, 'background-color': 'rgb(27, 29, 30)'})
+ ], style={'flex': 1, 'padding-left': 25})
], style={'display': 'flex', 'flexDirection': 'row'}),
@@ -54,6 +107,7 @@ html.Div([
], style={'padding': '5%', 'margin-left': '30%', 'margin-right': '30%'})
+])
# vh - высота окна, vw - ширина окна
#
# 'background-color': '#242829',