Наработки с верхней панелью

10 months ago · 326cdf1780
parent 963bba8797
commit 326cdf1780
2 changed files with 79 additions and 12 deletions
--- 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%;
 }
--- 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 = '''
+<!DOCTYPE html>
+<html>
+<head>
+	{%metas%}
+	<title>{%title%}</title>
+	{%favicon%}
+	{%css%}
+</head>
+<body>
+
+
+
+{%app_entry%}
+<footer>
+	{%config%}
+	{%scripts%}
+	{%renderer%}
+</footer>
+</body>
+</html>
+'''
+
+###### ОФОРМЛЕНИЕ #######
+
+
 # Форматируем список для красоты
 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',