From 1b322e1984146a12ba69ff07129ee37ac8962cb1 Mon Sep 17 00:00:00 2001 From: Pavel Gnedov Date: Fri, 10 Mar 2023 23:55:35 +0700 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=20top-bar=20=D0=B4=D0=BB=D1=8F=20=D0=BD=D0=B0=D1=87?= =?UTF-8?q?=D0=B0=D0=BB=D1=8C=D0=BD=D0=BE=D0=B9=20=D1=81=D1=82=D1=80=D0=B0?= =?UTF-8?q?=D0=BD=D0=B8=D1=86=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.css | 53 +++++------- frontend/src/App.tsx | 21 ++--- .../event_emitter_eltex_loc-32px.png | Bin 0 -> 1823 bytes frontend/src/start-page/top-bar.css | 76 ++++++++++++++++++ frontend/src/start-page/top-bar.tsx | 31 +++++++ 5 files changed, 133 insertions(+), 48 deletions(-) create mode 100644 frontend/src/start-page/event_emitter_eltex_loc-32px.png create mode 100644 frontend/src/start-page/top-bar.css create mode 100644 frontend/src/start-page/top-bar.tsx diff --git a/frontend/src/App.css b/frontend/src/App.css index 74b5e05..9dbdad7 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,38 +1,27 @@ -.App { - text-align: center; +@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap'); + +body { + margin: 0; + background-color: #D9D9D9; + color: rgba(0, 0, 0, 0.8); + font-size: 24px; + font-weight: 400; + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 40px; } -.App-logo { - height: 40vmin; - pointer-events: none; +a { + color: #fff; + text-decoration: none; } -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } +a:hover { + color: #F5B14E; } -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} +a:active { + color: #F5B14E; +} \ No newline at end of file diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index a53698a..15a5ab6 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,25 +1,14 @@ import React from 'react'; import logo from './logo.svg'; import './App.css'; +import TopBar from './start-page/top-bar'; function App() { return ( -
-
- logo -

- Edit src/App.tsx and save to reload. -

- - Learn React - -
-
+ <> + + + ); } diff --git a/frontend/src/start-page/event_emitter_eltex_loc-32px.png b/frontend/src/start-page/event_emitter_eltex_loc-32px.png new file mode 100644 index 0000000000000000000000000000000000000000..3eb02815ffeb6962622bdfd459139b24b4a063e6 GIT binary patch literal 1823 zcmV+)2jKXLP)R9J=Wmu-v{)fvbCXXd`l+&6YvU@yzAu7Gw~X=90{Bqfc# z1Ph@Rf@_uX!P+h@?8bi3)+V&E_CuSNQUi@a;e*;nZ6X52V!9SeQ5I_hT^3ldE3$0s z?!D`J-*?_;&Uu=-!gbx0vb-dG@kvhZxpQXD{PKUE`9Cv^h;XAry5R($LX3;R)m~`- zmHiyR5->E6((1TL^%5tA1-&7sDYSDCz+nK-g_qE=%k6c=g=y_)DF$pAwNj0_`1*uM zresbsY=^`42(}~OdIH=mQP?`+epdSBTQkDPzppH%Q`ZH;`ZK!|4Ex?=o2R*R*30lr zaL906g5?k#m&5S@+vD(Dg3ATCClE7_@vq13-L5RB&TED+Ut?WE<>g<}zOXZvD;g;2 z0x?xaC;$v(90(!=BtQu=xWWe@a8BTY0MDeAQtB_s)#+su_nll}reCZ<`o(5&EGz|6 zG5^r{jElG`Rc`1j5efozaT!Pc-i;@>ZNr|uyCDRD6N3-{msGZk-oD%1%U-xT2w}a6 zhP8tbC=19S?%*>`3i4%+bk2e42&iFJkw2YD?$Uf=&JHvXg&Bm@Wq0STTUwzbsv zO=Ayh8^8T!(?NrqHamlx9@WapMXGyx@4Lfy)!9pS1#Fk#cmld9pjjLeW8gx-^X2zz zfdhUP1Q!rYuBc+$77WwGT=yk??S@~)CJo{JV}Z-{fq?KN;pGdzA&v(INAIXD&%9sp zi_Vg#Nrrlx&77mw7{e5; zh+x0^-C(BvLD>lTD6^Twy+q+=Aw_k9OZ3@qr9-_n0J)yx$axFf|=+=_h2n0!@l zKg7MtZ@is`hH>fmlcb#ymcwEB&p(%uy}6won0ZF&&aQ9G z_Gc2_NIA{(Za-Y*J*Fi4Sum!vV64P~@v=X^6oli2KJh=kj#fVPl|4h>YdqvD5yyC+ z_+a0yqleTtr+XI+$G2MH8;`&2Sx^c+)Kqvu%*H-15`j=vWJn+jfl(p^!C^~EA}Yme zZWUJPCLjp141Ab224+7_bH;;|pJw-&2A)lcO z2*Lab1d}Sq9mj@a8z6l|keMUPwwYsFXqP(p^yx69+MAEbFjH2s$o_T8d1&!7^!!AH z%G;Qd=pgG8O4tWkV_*J(bH~HK4hbPDO89I3s_*;$X`FkoE5>6(a1Ph=P%P$Qnr3DA zZn#q3?zPQ3n$PBNB%j3>@7zMOE>}0zH>+@phUOn+TTbL3`=Kk>Rp5vu2mnt!z7Ce- zL5)tuvSs&SW^yJh%dA{iTQe1kVj`RCN2yf84*l*xTkBCZJ%loV6_*3R#4Z|6(U0zl zF8?P9kNj@Qi7J-+=wnYJ*)RucWD0tYA4R!bf~rK28Oh-Ii5}z&Im~OBk3unzVzEd} zs_gs3;%BILG7$f>ft~JJG167|?F`p-neEsYeBT83IAXDw-!Gu5D&FWmgk*gZp->o^ z%rN>+pTJK)zu&w6j`Q!v*U{~h0k|ZDABT6Y>FfHSv(<70t3Zs)yFV&(L%%RIIIf4K z4QFZFJ#Umr;A`>kQ1>-M;G<$~fA(bO<|D(45{B*hb-;Y@_aSschv^T?!u*;MdU#=v zo4PGshQNl{gCBR|Ylf)89AKTq(RTRU+|ND#_QENQk5THTcf_2U0$Li%A{KUY;P@K^ zejHs(|G5%?NkdEw^EK86j(Q06s;lV86>o4oAg*_O`ayg#Zaf5l{{lv-5phdAbix1t N002ovPDHLkV1knKd$|Ar literal 0 HcmV?d00001 diff --git a/frontend/src/start-page/top-bar.css b/frontend/src/start-page/top-bar.css new file mode 100644 index 0000000..caa6d5c --- /dev/null +++ b/frontend/src/start-page/top-bar.css @@ -0,0 +1,76 @@ +/* .top .container_title .logo .event_emitter_eltex_loc */ + +.top { + display: flex; + flex-direction: row; + position: fixed; + z-index: 100500; + height: 80px; + background-color: #001826; + width: 100%; + overflow: hidden; + margin: 0; + padding: 0; + border: 0; + box-sizing: content-box; +} + +.container_title { + position: relative; + margin-left: 135px; + margin-right: 135px; + height: 100%; + width: 100%; + display: flex; + align-items: center; + flex-direction: row; + justify-content: space-between; +} + +.container_title { + height: 100%; + width: 100%; + margin-left: 100px; + margin-right: 100px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +.event_emitter_eltex_loc { + vertical-align: middle; + height: 32px; + cursor: pointer; + transition: width 0.5s, height 0.5s; +} + +.event_emitter_eltex_loc:hover { + /* height: 38px; */ + /* transform: scale(1.5); */ +} + +div.logo { + height: 38px; + width: 400px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + +div.logo:hover { + transform: scale(1.1); +} + +a.logo { + color: #fff; +} + +a.logo:active { + color: #fff; +} + +a.logo span { + margin-left: 10px; +} \ No newline at end of file diff --git a/frontend/src/start-page/top-bar.tsx b/frontend/src/start-page/top-bar.tsx new file mode 100644 index 0000000..8b8ff8d --- /dev/null +++ b/frontend/src/start-page/top-bar.tsx @@ -0,0 +1,31 @@ +import React, { ReactElement } from 'react'; +import './top-bar.css'; +import LogoImg from './event_emitter_eltex_loc-32px.png'; + +export type TopBarProps = { + contact: string; + children: any; +}; + +const TopBar = (props: TopBarProps): ReactElement => { + return ( + + ); +}; + +export default TopBar;