Merge pull request 'add-logo' (#6) from add-logo into style
Reviewed-on: #6
This commit is contained in:
commit
1d673a6609
Binary file not shown.
@ -2,9 +2,11 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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" />
|
||||
<title>Vite + React</title>
|
||||
<title>Navix</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
2
frontend/public/navix-logo.svg
Normal file
2
frontend/public/navix-logo.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 444 B |
@ -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;
|
||||
}
|
||||
|
||||
@ -19,7 +19,10 @@ function App() {
|
||||
|
||||
return (
|
||||
<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()} />
|
||||
{sections.map((section) => (
|
||||
<SectionGrid key={section.name} section={section} />
|
||||
|
||||
@ -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 (
|
||||
<>
|
||||
<IoIosAddCircleOutline
|
||||
<IoIosAdd
|
||||
className="add-button"
|
||||
onClick={() => setOpen(true)}
|
||||
/>
|
||||
|
||||
@ -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 {
|
||||
@ -35,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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user