dvirlabs/navix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'add-logo' (#6) from add-logo into style

Browse Source 
Reviewed-on: #6
This commit is contained in:
dvirlabs 2025-06-03 23:38:58 +00:00
commit 1d673a6609
9 changed files with 95 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
backend/__pycache__/main.cpython-313.pyc
View File

Binary file not shown.

6
frontend/index.html
View File

@ -2,9 +2,11 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/navix-logo.svg" />
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&family=Rajdhani:wght@500&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title> <title>Navix</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

2
frontend/public/navix-logo.svg Normal file
View File

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8" ?>
<svg baseProfile="full" height="256px" version="1.1" width="256px" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="glow"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></defs><polygon fill="none" filter="url(#glow)" points="128,10 246,128 128,246 10,128" stroke="cyan" stroke-width="10" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 444 B

15
frontend/src/App.css
View File

@ -17,6 +17,19 @@ body {
} }
.main-title { .main-title {
margin-bottom: 2rem; display: flex;
align-items: center;
justify-content: center;
font-size: 2rem; 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;
} }

5
frontend/src/App.jsx
View File

@ -19,7 +19,10 @@ function App() {
return ( return (
<div className="App"> <div className="App">
<h1 className="main-title">🔷 Navix</h1> <h1 className="main-title">
<img src="/navix-logo.svg" alt="Navix logo" className="navix-logo" />
Navix
</h1>
<AddAppModal onAdded={() => window.location.reload()} /> <AddAppModal onAdded={() => window.location.reload()} />
{sections.map((section) => ( {sections.map((section) => (
<SectionGrid key={section.name} section={section} /> <SectionGrid key={section.name} section={section} />

4
frontend/src/components/AddAppModal.jsx
View File

@ -1,7 +1,7 @@
import { useState } from 'react'; import { useState } from 'react';
import { addAppToSection } from '../services/api'; import { addAppToSection } from '../services/api';
import '../style/AddAppModal.css'; import '../style/AddAppModal.css';
import { IoIosAddCircleOutline } from "react-icons/io"; import { IoIosAdd } from "react-icons/io";
function AddAppModal({ onAdded }) { function AddAppModal({ onAdded }) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
@ -31,7 +31,7 @@ function AddAppModal({ onAdded }) {
return ( return (
<> <>
<IoIosAddCircleOutline <IoIosAdd
className="add-button" className="add-button"
onClick={() => setOpen(true)} onClick={() => setOpen(true)}
/> />

77
frontend/src/style/AddAppModal.css
View File

@ -2,23 +2,25 @@
position: fixed; position: fixed;
bottom: 2rem; bottom: 2rem;
right: 2rem; right: 2rem;
background-color: #007bff; width: 64px;
color: white; height: 64px;
font-size: 2rem;
border-radius: 50%; border-radius: 50%;
width: 60px; background: linear-gradient(145deg, #206064, #182b41);
height: 60px; box-shadow: 0 0 12px #00f0ff;
color: white;
font-size: 2.2rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
z-index: 999; z-index: 1000;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease, box-shadow 0.3s ease;
transition: background-color 0.3s ease; border: none;
} }
.add-button:hover { .add-button:hover {
background-color: #0056b3; transform: rotate(90deg) scale(1.1);
box-shadow: 0 0 20px #00f0ff;
} }
.modal-overlay { .modal-overlay {
@ -35,43 +37,58 @@
} }
.modal { .modal {
background: #1e1e1e; background: #111;
padding: 2rem; padding: 2rem;
border-radius: 12px; border-radius: 16px;
width: 340px; width: 380px;
height: 420px; box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
box-shadow: 0 0 10px #000;
/* Flexbox centering */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; 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 { .modal input {
width: 90%; width: 95%;
height: 35px; height: 40px;
padding: 0.5rem; padding: 0.6rem;
margin-bottom: 0.75rem; margin-bottom: 1rem;
background-color: #2c2c2c; background-color: #1f1f1f;
border: none; border: 1px solid #2c2c2c;
color: white; color: #fff;
border-radius: 6px; 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 { .modal button {
width: 90%; width: 80%;
padding: 0.5rem; padding: 0.6rem;
background-color: #007bff; background: linear-gradient(to right, #007bff, #00f0ff);
color: white; color: white;
font-weight: 600;
border: none; border: none;
border-radius: 6px; border-radius: 8px;
cursor: pointer; cursor: pointer;
transition: background 0.3s ease;
font-family: inherit;
} }
.modal button:hover { .modal button:hover {
background-color: #0056b3; background: linear-gradient(to right, #00f0ff, #007bff);
} }
.add-button { .add-button {

18
frontend/src/style/AppCard.css
View File

@ -5,8 +5,8 @@
border-radius: 12px; border-radius: 12px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
width: 150px; width: 170px;
height: 150px; height: 170px;
transition: transform 0.2s ease; transition: transform 0.2s ease;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -36,3 +36,17 @@
object-fit: contain; object-fit: contain;
display: block; 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;
}

11
frontend/src/style/SectionGrid.css
View File

@ -5,10 +5,11 @@
} }
.section-title { .section-title {
font-size: 1.5rem; font-family: 'Rajdhani', sans-serif;
color: #ffffff; font-size: 1.8rem;
margin-bottom: 1rem;
border-bottom: 1px solid #444;
padding-bottom: 0.5rem;
text-align: left; text-align: left;
border-bottom: 1px solid #2e6dc0;
font-weight: 500;
margin-bottom: 1rem;
color: white;
} }