theis.gaedigk/bikelane
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed design and icons for the whole website

Browse Source
This commit is contained in:
theis.gaedigk
2025-07-22 21:01:44 +02:00
parent e019eb75be
commit eb28eed69b
7 changed files with 111 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/index.html
View File

@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/bikelane-icon.png" /> <link rel="icon" type="image/svg+xml" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bikelane - Web</title> <title>Bikelane - Web</title>
</head> </head>

0
client/src/assets/bikelane-icon.png → client/public/favicon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

50
client/src/App.tsx
View File

@@ -7,28 +7,42 @@ function App() {
return ( return (
<Layout> <Layout>
<table className="table-auto" style={{ tableLayout: "auto" }}> <table className="min-w-full divide-y divide-gray-200 shadow rounded-lg overflow-hidden">
<thead> <thead className="bg-gray-50">
<tr> <tr>
<th>#</th> <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
<th>Username</th> #
<th>First name</th> </th>
<th>Last name</th> <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
<th>Email</th> Username
<th>Password</th> </th>
<th>Created</th> <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
First name
</th>
<th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
Last name
</th>
<th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
Email
</th>
<th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
Password
</th>
<th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
Created
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody className="bg-white divide-y divide-gray-100">
{users.map((user: any, idx: number) => ( {users.map((user: any, idx: number) => (
<tr key={user.id}> <tr key={user.id} className="hover:bg-blue-50 transition">
<td>{idx + 1}</td> <td className="px-4 py-2 whitespace-nowrap">{idx + 1}</td>
<td>{user.username}</td> <td className="px-4 py-2 whitespace-nowrap">{user.username}</td>
<td>{user.first_name}</td> <td className="px-4 py-2 whitespace-nowrap">{user.first_name}</td>
<td>{user.last_name}</td> <td className="px-4 py-2 whitespace-nowrap">{user.last_name}</td>
<td>{user.email}</td> <td className="px-4 py-2 whitespace-nowrap">{user.email}</td>
<td>{user.password}</td> <td className="px-4 py-2 whitespace-nowrap">{user.password}</td>
<td>{user.created}</td> <td className="px-4 py-2 whitespace-nowrap">{user.created}</td>
</tr> </tr>
))} ))}
</tbody> </tbody>

1
client/src/assets/bicycle-solid-full.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="10" width="10" viewBox="0 0 640 640"><!--!Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M331.7 107.3C336 100.3 343.7 96 352 96L456 96C469.3 96 480 106.7 480 120C480 133.3 469.3 144 456 144L390.4 144L462.6 292.4C473.3 289.5 484.5 288 496 288C566.7 288 624 345.3 624 416C624 486.7 566.7 544 496 544C425.3 544 368 486.7 368 416C368 374 388.2 336.8 419.4 313.4L399 271.5L325.5 418.5C323.2 423.3 319.2 427.3 314.1 429.7C313.5 430 312.9 430.2 312.3 430.4C309.4 431.5 306.4 432 303.4 431.9L271 432C263.1 495.1 209.3 544 144 544C73.3 544 16 486.7 16 416C16 345.3 73.3 288 144 288C154.8 288 165.2 289.3 175.2 291.8L203.7 234.9L192.2 208L152 208C138.7 208 128 197.3 128 184C128 170.7 138.7 160 152 160L208 160C217.6 160 226.3 165.7 230.1 174.5L244.4 208L368.1 208L330.4 130.5C326.8 123.1 327.2 114.3 331.6 107.3zM228.5 292.7L182.9 384L267.7 384L228.6 292.7zM305.7 351L353.2 256L265 256L305.7 351zM474.4 426.5L444.7 365.5C431.9 378.5 424 396.3 424 416C424 455.8 456.2 488 496 488C535.8 488 568 455.8 568 416C568 376.2 535.8 344 496 344C493.3 344 490.5 344.2 487.9 344.5L517.6 405.5C523.4 417.4 518.4 431.8 506.5 437.6C494.6 443.4 480.2 438.4 474.4 426.5zM149.2 432C129 432 115.8 410.7 124.9 392.6L149.1 344.1C147.4 344 145.7 343.9 144 343.9C104.2 343.9 72 376.1 72 415.9C72 455.7 104.2 487.9 144 487.9C178.3 487.9 206.9 464 214.2 431.9L149.2 431.9z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

1
client/src/assets/circle-user-solid-full.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M463 448.2C440.9 409.8 399.4 384 352 384L288 384C240.6 384 199.1 409.8 177 448.2C212.2 487.4 263.2 512 320 512C376.8 512 427.8 487.3 463 448.2zM64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320zM320 336C359.8 336 392 303.8 392 264C392 224.2 359.8 192 320 192C280.2 192 248 224.2 248 264C248 303.8 280.2 336 320 336z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 609 B

9
client/src/components/LoginCard.tsx
View File

@@ -42,12 +42,13 @@ const LoginCard: React.FC<LoginCardProps> = ({ onClose }) => {
.then((users) => { .then((users) => {
localStorage.setItem("users", JSON.stringify(users)); localStorage.setItem("users", JSON.stringify(users));
}); });
document.location.reload();
} else if (response.status === 401) { } else if (response.status === 401) {
alert("Invalid credentials"); alert("Invalid credentials");
} }
}) })
.catch((error) => { .catch((error) => {
console.error("Login failed:", error); console.log("Login failed: ", error);
}); });
}} }}
className="space-y-4 text-black" className="space-y-4 text-black"
@@ -80,15 +81,19 @@ const LoginCard: React.FC<LoginCardProps> = ({ onClose }) => {
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
/> />
</div> </div>
{Cookies.get("name") ? (
<p></p>
) : (
<input <input
type="submit" type="submit"
value="Login" value="Login"
className="w-full bg-blue-600 text-white font-semibold py-2 rounded-md hover:bg-blue-700 transition" className="w-full bg-blue-600 text-white font-semibold py-2 rounded-md hover:bg-blue-700 transition"
/> />
)}
</form> </form>
{Cookies.get("name") ? ( {Cookies.get("name") ? (
<button <button
className="w-full bg-blue-600 text-white font-semibold py-2 rounded-md hover:bg-blue-700 transition" className="w-full bg-black text-white font-semibold py-2 rounded-md hover:bg-green-400 transition"
onClick={logout} onClick={logout}
> >
Logout Logout

68
client/src/layout/Layout.tsx
View File

@@ -1,17 +1,77 @@
import React from "react"; import React from "react";
import Header from "../components/Header"; import Header from "../components/Header";
import userIcon from "../assets/circle-user-solid-full.svg";
import logoIcon from "../assets/bicycle-solid-full.svg";
import Cookies from "js-cookie"; // Add this import
type LayoutProps = { type LayoutProps = {
children: React.ReactNode; children: React.ReactNode;
}; };
const Layout: React.FC<LayoutProps> = ({ children }) => { const Layout: React.FC<LayoutProps> = ({ children }) => {
const isLoggedIn = !!Cookies.get("name"); // Check login status
return ( return (
<div className="flex flex-col min-h-screen bg-gray-100"> <div className="flex flex-col min-h-screen bg-gradient-to-br from-blue-50 via-blue-100 to-blue-200">
<Header /> <Header />
<main className="flex-1">{children}</main> <div className="flex flex-1">
<footer className="bg-gray-800 text-white p-4 text-center"> {isLoggedIn && (
<p>&copy; {new Date().getFullYear()} Bikelane Web</p> <>
{/* Sidebar */}
<aside className="w-72 bg-white/90 shadow-2xl rounded-r-3xl p-8 flex flex-col gap-10 border-r border-blue-100">
<div className="flex items-center gap-4 mb-10">
<img
src={logoIcon}
alt="Bikelane Logo"
className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center shadow-lg"
/>
<span className="font-extrabold text-2xl text-blue-700 tracking-wide drop-shadow">
Bikelanes
</span>
</div>
<nav>
<ul className="space-y-6">
<li>
<a
href="/#"
className="flex items-center gap-3 px-4 py-3 rounded-xl text-blue-700 font-medium bg-blue-50 hover:bg-blue-200 hover:text-blue-900 transition-all shadow-sm"
>
<img src={userIcon} alt="Users" className="w-6 h-6" />
<span className="text-lg">Users</span>
</a>
</li>
{/* Add more links as needed */}
</ul>
</nav>
<div className="mt-auto text-xs text-blue-300 text-center pt-6 border-t border-blue-100">
<span>Bikelane pre-0.1</span>
</div>
</aside>
{/* Main content */}
<main className="flex-1 p-10 bg-white/80 rounded-l-3xl shadow-2xl m-6 overflow-auto">
{children}
</main>
</>
)}
</div>
<footer className="bg-gradient-to-r from-blue-800 via-blue-900 to-blue-800 text-blue-100 py-6 px-5 text-center rounded-t-3xl shadow-xl mt-8 tracking-wide border-t border-blue-700">
<div className="flex flex-col items-center gap-2">
<span className="font-bold text-lg tracking-widest drop-shadow">
Bikelane Web
</span>
<span className="text-xs text-blue-200">
&copy; {new Date().getFullYear()} —
<a
href="https://git.the1s.de/theis.gaedigk/bikelane"
className="underline hover:text-blue-300 transition"
target="_blank"
rel="noopener noreferrer"
>
GitHub Repository
</a>
<span className="ml-1">| Fork me please 🚲</span>
</span>
</div>
</footer> </footer>
</div> </div>
); );