From 945b33485eb35b0495e9343c308f495d4a4ddff2 Mon Sep 17 00:00:00 2001 From: dvirlabs Date: Wed, 4 Jun 2025 02:31:30 +0300 Subject: [PATCH 1/2] Style the app with more neon and stuff --- backend/__pycache__/main.cpython-313.pyc | Bin 3396 -> 4404 bytes frontend/index.html | 6 ++++-- frontend/public/navix-logo.svg | 2 ++ frontend/src/App.css | 15 ++++++++++++++- frontend/src/App.jsx | 5 ++++- frontend/src/components/AddAppModal.jsx | 4 ++-- frontend/src/style/AddAppModal.css | 20 +++++++++++--------- frontend/src/style/AppCard.css | 18 ++++++++++++++++-- frontend/src/style/SectionGrid.css | 11 ++++++----- 9 files changed, 59 insertions(+), 22 deletions(-) create mode 100644 frontend/public/navix-logo.svg diff --git a/backend/__pycache__/main.cpython-313.pyc b/backend/__pycache__/main.cpython-313.pyc index 72a1bb653fefe91ee1d9e8e2eaeb02605775d89f..add390fa8987fec3f0a44f08ac3c7ae67e0e9e1a 100644 GIT binary patch delta 2028 zcmZ`)-EY%Y6u)+C=li3dY15X5w3G&DQ$8vbU?Au^L;?Zjwi1kp$i!~(mL}1)18b)# zotVb9mkGRyNqea#9(bCV*yHv#?RA+dO_fF z%lMh!=G@spCdh)e?8$~QVHUP!Z#I(YU>$K%;1XmSKLro#EOh1%I&wP}T-2B1sGknw zf^Q%V$0&IATtSoauZ?iFA2in*KgueJ%U_u9XBM%i4CwRIqM&5o$*e%EC|J-zV z*DYQ+0B-wZq|IxraF8ZWT_;5DBTlP~v+=@sK9AMurXzHe9)NU?rG+?I6c&Z#LGx!W zkxg<|AVaU_@~U2|R&+H7guh&sm7-EL)XH5@g=?~L2UhO|Sy!)A6}1eCctxvdRb&lq zNd?Z3&A+*ejnI`#xl31zv$;2~UA>f>vm%auer9Ht(qeY@MvI}dGx^y$n+Z5J7v^WO zvvWz8<&#S#Ro9E}s>_y7S4&JaY*_-i&eRouMZT-OH=&i_z!sM(wWZjk{2UiEpYoT* zA)u4b|Ku0A?m-YO&mx48Yc-u=uTPn}@FRE9JSrx@eooZ-W5BWj1T<&K7MwJH6XTM- zku?7j=NfOoj^&247+SSrxgaD%-(1qeQs^{=a1`Mf!f}KX2zE#;vu)q@E$nNCfT8sO zzyq=ojNHGx;f;KJ*)hcJ6;Dc5p8p~};Tv&K*>lF!tN!Nv#~ zaU694HsbKuIkVjGHB2#k3+VIDdwgSDVUQ$1>JT0;G>K6m736bE% zdD_7{d`T#G6ISO55z61>+qHQTBFCi)cT;S!)HTmdaa2fiqa-QjRy=nMqo$u~q*5#j zHf$0A+SLtbfxb49E*3$$3ju>b260wxI~~8(x>OhTO|5>rtd)v*lVY8fSq2Plz^fku zSS2q5-Cx{lc8{)|e^Oq%_3Y@g>(4Sx-?`P9-@E+LwVtQ0wZO0biKZ}N*U~)gPjiRN zy8lSS>R6DWR5fjqy&6E>K8?j!bxU$akYQ%*idpU&jAB{4&D=m)p4ze^R}8JhJgACG zIFih3Zz-~&;$$-XhvL*Vgw(I)EumJ`4ZHYG*JGCKnXugTyO28uSgsTyA2N56Z)rsTP}{{Hp##yIkrg-y&&FAvhM})Z<0O`T$?0n-U^&(Y)1$e_$as~ zkI z=SFxK|NP-?uNdK116v{Di>^v9IpIO{!{{en_XoFmjyt>KB7A5ICG*=rWo(l0BJMZ6 e1MA%27SD5&Ya=@Z7Bn2PiLHP+6dV!ocjO;nnYx|; delta 1057 zcmZ`&&rcIU6rSn+ETzAewzP#bo1#bw0#P|2hJzOqio|r$c-Vw2-38W^wt2gi=%pq^ zJ(E3{c<^BS5Af>2gnz)3WVDG#kEkba&f8K#2+rZ_oA=)Lz1eT3AInF@#GiP4i13x) zTi$suA0+aTxAb7D+y&7fhFFzWWRP{jW2vgFsG#b^q-C;z6uuy8Mr+xAd>&1~kmsnO zgou&4C~;=AHhR9R9~;pHdKwKC2g+Rn!=_v&W_(brjbB2IU61iYB>y8kJm4DfGhqU$ zJSh_+Q6xsvR2PK4Dx||~if7Z9eRP`Exb(G425V>1Bc^sMVq}WsiFoEp#>^Vo+m8vc z@&vsTsyWD+x!P3*zD?O$KdoRnqujw8PKh7R{u2$kc7e->}+k573`Nuq1z?dhk~+^Zs$gEhKps zQV7@%r2*){J4KhnLMb>>*1MCu!W7S``);er1TG24U8|^Y1xZ&CunEu)m_n!^gp$)3 zU6?h4IRs>R!yI0d<9KR+^*EY(wc0-vmY=J0mVNj}{SfKmQv#g>6Y-lWk#GYyF+=y5 z?D>}8@t9=UwqsX@Acy_MSLhj2_%yT_mUw#luos)8K_;>z6pPxXLUDvi7&YlGh6Zpk}7R)Ad-S8{$`ubj?CroU&JU^Tm+Rv2E zQ@7p%elyT%UT~VJcXnHLr{OF^m2>gm hL4>bF`$Dwi;Cr$pouo)a3N}+O>3k4RPl)(3{sB7P#mN8w diff --git a/frontend/index.html b/frontend/index.html index 0c589ec..ca5b307 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,9 +2,11 @@ - + + + - Vite + React + Navix
diff --git a/frontend/public/navix-logo.svg b/frontend/public/navix-logo.svg new file mode 100644 index 0000000..83201b2 --- /dev/null +++ b/frontend/public/navix-logo.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/frontend/src/App.css b/frontend/src/App.css index 9e36f1e..9fc1cd5 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -17,6 +17,19 @@ body { } .main-title { - margin-bottom: 2rem; + display: flex; + align-items: center; + justify-content: center; font-size: 2rem; + font-weight: bold; + color: white; + gap: 0.6rem; + font-family: 'Orbitron', sans-serif; +} + +.navix-logo { + width: 40px; + height: 40px; + display: inline-block; + vertical-align: middle; } diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 40e526d..c63be15 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -19,7 +19,10 @@ function App() { return (
-

🔷 Navix

+

+ Navix logo + Navix +

window.location.reload()} /> {sections.map((section) => ( diff --git a/frontend/src/components/AddAppModal.jsx b/frontend/src/components/AddAppModal.jsx index 364d6f1..0608d0a 100644 --- a/frontend/src/components/AddAppModal.jsx +++ b/frontend/src/components/AddAppModal.jsx @@ -1,7 +1,7 @@ import { useState } from 'react'; import { addAppToSection } from '../services/api'; import '../style/AddAppModal.css'; -import { IoIosAddCircleOutline } from "react-icons/io"; +import { IoIosAdd } from "react-icons/io"; function AddAppModal({ onAdded }) { const [open, setOpen] = useState(false); @@ -31,7 +31,7 @@ function AddAppModal({ onAdded }) { return ( <> - setOpen(true)} /> diff --git a/frontend/src/style/AddAppModal.css b/frontend/src/style/AddAppModal.css index c9995ee..ace71b1 100644 --- a/frontend/src/style/AddAppModal.css +++ b/frontend/src/style/AddAppModal.css @@ -2,23 +2,25 @@ position: fixed; bottom: 2rem; right: 2rem; - background-color: #007bff; - color: white; - font-size: 2rem; + width: 64px; + height: 64px; border-radius: 50%; - width: 60px; - height: 60px; + background: linear-gradient(145deg, #206064, #182b41); + box-shadow: 0 0 12px #00f0ff; + color: white; + font-size: 2.2rem; display: flex; align-items: center; justify-content: center; cursor: pointer; - z-index: 999; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); - transition: background-color 0.3s ease; + z-index: 1000; + transition: transform 0.3s ease, box-shadow 0.3s ease; + border: none; } .add-button:hover { - background-color: #0056b3; + transform: rotate(90deg) scale(1.1); + box-shadow: 0 0 20px #00f0ff; } .modal-overlay { diff --git a/frontend/src/style/AppCard.css b/frontend/src/style/AppCard.css index 8e57227..5fa515b 100644 --- a/frontend/src/style/AppCard.css +++ b/frontend/src/style/AppCard.css @@ -5,8 +5,8 @@ border-radius: 12px; text-align: center; text-decoration: none; - width: 150px; - height: 150px; + width: 170px; + height: 170px; transition: transform 0.2s ease; display: flex; flex-direction: column; @@ -36,3 +36,17 @@ object-fit: contain; display: block; } + +.app-card h3 { + font-family: 'Rajdhani', sans-serif; + font-size: 1.1rem; + margin: 0.4rem 0; + color: white; +} + +.app-card p { + font-family: 'Rajdhani', sans-serif; + font-size: 0.9rem; + color: #ccc; +} + diff --git a/frontend/src/style/SectionGrid.css b/frontend/src/style/SectionGrid.css index 3235698..74f4c3b 100644 --- a/frontend/src/style/SectionGrid.css +++ b/frontend/src/style/SectionGrid.css @@ -5,10 +5,11 @@ } .section-title { - font-size: 1.5rem; - color: #ffffff; - margin-bottom: 1rem; - border-bottom: 1px solid #444; - padding-bottom: 0.5rem; + font-family: 'Rajdhani', sans-serif; + font-size: 1.8rem; text-align: left; + border-bottom: 1px solid #2e6dc0; + font-weight: 500; + margin-bottom: 1rem; + color: white; } From 8eb5532b7b890a061bcb8ac1ddb2d3c21ade089f Mon Sep 17 00:00:00 2001 From: dvirlabs Date: Wed, 4 Jun 2025 02:36:42 +0300 Subject: [PATCH 2/2] Style the modal --- frontend/src/style/AddAppModal.css | 57 +++++++++++++++++++----------- 1 file changed, 36 insertions(+), 21 deletions(-) diff --git a/frontend/src/style/AddAppModal.css b/frontend/src/style/AddAppModal.css index ace71b1..20ed770 100644 --- a/frontend/src/style/AddAppModal.css +++ b/frontend/src/style/AddAppModal.css @@ -37,43 +37,58 @@ } .modal { - background: #1e1e1e; + background: #111; padding: 2rem; - border-radius: 12px; - width: 340px; - height: 420px; - box-shadow: 0 0 10px #000; - - /* Flexbox centering */ + border-radius: 16px; + width: 380px; + box-shadow: 0 0 20px rgba(0, 255, 255, 0.1); display: flex; flex-direction: column; align-items: center; - justify-content: center; + font-family: 'Rajdhani', sans-serif; +} + +.modal h2 { + color: #fff; + font-size: 1.8rem; + margin-bottom: 1.5rem; + text-shadow: 0 0 5px #00f0ff; } .modal input { - width: 90%; - height: 35px; - padding: 0.5rem; - margin-bottom: 0.75rem; - background-color: #2c2c2c; - border: none; - color: white; - border-radius: 6px; + width: 95%; + height: 40px; + padding: 0.6rem; + margin-bottom: 1rem; + background-color: #1f1f1f; + border: 1px solid #2c2c2c; + color: #fff; + border-radius: 8px; + transition: border 0.3s; + font-family: inherit; +} + +.modal input:focus { + border: 1px solid #00f0ff; + outline: none; + box-shadow: 0 0 6px #00f0ff40; } .modal button { - width: 90%; - padding: 0.5rem; - background-color: #007bff; + width: 80%; + padding: 0.6rem; + background: linear-gradient(to right, #007bff, #00f0ff); color: white; + font-weight: 600; border: none; - border-radius: 6px; + border-radius: 8px; cursor: pointer; + transition: background 0.3s ease; + font-family: inherit; } .modal button:hover { - background-color: #0056b3; + background: linear-gradient(to right, #00f0ff, #007bff); } .add-button {