Skip to content

Commit 9db63c0

Browse files
AlgorithmicThoughtsAlgorithmicThoughts
committed
Style React app with Bootstrap, add logo and favicon, update colors and layout
1 parent 997aea7 commit 9db63c0

File tree

3 files changed

+217
-0
lines changed

3 files changed

+217
-0
lines changed

‎octofit-tracker/frontend/public/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta
9+
name="description"
10+
content="Web site created using create-react-app"
11+
/>
12+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13+
<!--
14+
manifest.json provides metadata used when your web app is installed on a
15+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16+
-->
17+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18+
<!--
19+
Notice the use of %PUBLIC_URL% in the tags above.
20+
It will be replaced with the URL of the `public` folder during the build.
21+
Only files inside the `public` folder can be referenced from the HTML.
22+
23+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24+
work correctly both with client-side routing and a non-root public URL.
25+
Learn how to configure a non-root public URL by running `npm run build`.
26+
-->
27+
<title>OctoFit Tracker</title>
28+
</head>
29+
<body>
30+
<noscript>You need to enable JavaScript to run this app.</noscript>
31+
<div id="root"></div>
32+
<!--
33+
This HTML file is a template.
34+
If you open it directly in the browser, you will see an empty page.
35+
36+
You can add webfonts, meta tags, or analytics to this file.
37+
The build step will place the bundled scripts into the <body> tag.
38+
39+
To begin the development, run `npm start` or `yarn start`.
40+
To create a production bundle, use `npm run build` or `yarn build`.
41+
-->
42+
</body>
43+
</html>

‎octofit-tracker/frontend/src/App.css‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
2+
body {
3+
background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
4+
color: #22223b;
5+
}
6+
7+
.navbar {
8+
background: linear-gradient(90deg, #3a86ff 0%, #8338ec 100%);
9+
box-shadow: 0 2px 8px rgba(58, 134, 255, 0.1);
10+
}
11+
.navbar-brand, .nav-link {
12+
color: #fff !important;
13+
font-weight: 500;
14+
}
15+
.navbar-brand img {
16+
height: 40px;
17+
margin-right: 12px;
18+
vertical-align: middle;
19+
}
20+
.nav-link.active, .nav-link:hover {
21+
color: #ffbe0b !important;
22+
}
23+
24+
.container {
25+
background: #fff;
26+
border-radius: 12px;
27+
box-shadow: 0 2px 16px rgba(131, 56, 236, 0.08);
28+
padding: 2rem;
29+
margin-top: 2rem;
30+
}
31+
32+
h1, h2, h3, h4 {
33+
color: #3a86ff;
34+
font-weight: 700;
35+
}
36+
37+
table {
38+
background: #e0e7ff;
39+
border-radius: 8px;
40+
overflow: hidden;
41+
box-shadow: 0 1px 4px rgba(58, 134, 255, 0.07);
42+
}
43+
th {
44+
background: #3a86ff;
45+
color: #fff;
46+
font-weight: 600;
47+
}
48+
td {
49+
color: #22223b;
50+
}
51+
52+
.btn {
53+
border-radius: 20px;
54+
font-weight: 500;
55+
box-shadow: 0 1px 4px rgba(58, 134, 255, 0.07);
56+
}
57+
.btn-success {
58+
background: #06d6a0;
59+
border: none;
60+
}
61+
.btn-info {
62+
background: #3a86ff;
63+
border: none;
64+
}
65+
.btn-warning {
66+
background: #ffbe0b;
67+
border: none;
68+
}
69+
.btn-primary {
70+
background: #8338ec;
71+
border: none;
72+
}
73+
.btn-secondary {
74+
background: #22223b;
75+
border: none;
76+
}
77+
78+
.card {
79+
background: linear-gradient(135deg, #e0e7ff 0%, #fff 100%);
80+
border-radius: 16px;
81+
box-shadow: 0 2px 16px rgba(58, 134, 255, 0.08);
82+
}
83+
.card-title {
84+
color: #8338ec;
85+
}
86+
.card-text {
87+
color: #22223b;
88+
}
89+
90+
.form-control {
91+
border-radius: 12px;
92+
border: 1px solid #3a86ff;
93+
}
94+
.form-label {
95+
color: #3a86ff;
96+
font-weight: 600;
97+
}
98+
99+
.modal-content {
100+
border-radius: 16px;
101+
background: #fff;
102+
}
103+
.modal-header {
104+
background: #3a86ff;
105+
color: #fff;
106+
}
107+
.modal-footer {
108+
background: #e0e7ff;
109+
}
110+
111+
.App-logo {
112+
height: 40px;
113+
margin-right: 12px;
114+
vertical-align: middle;
115+
}

‎octofit-tracker/frontend/src/App.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
2+
import React from 'react';
3+
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
4+
import Activities from './components/Activities';
5+
import Leaderboard from './components/Leaderboard';
6+
import Teams from './components/Teams';
7+
import Users from './components/Users';
8+
import Workouts from './components/Workouts';
9+
10+
function App() {
11+
return (
12+
<Router>
13+
<nav className="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
14+
<div className="container-fluid">
15+
<Link className="navbar-brand fw-bold d-flex align-items-center" to="/">
16+
<img src={process.env.PUBLIC_URL + '/logo192.png'} alt="OctoFit Logo" className="App-logo" />
17+
OctoFit Tracker
18+
</Link>
19+
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
20+
<span className="navbar-toggler-icon"></span>
21+
</button>
22+
<div className="collapse navbar-collapse" id="navbarNav">
23+
<ul className="navbar-nav">
24+
<li className="nav-item"><Link className="nav-link" to="/activities">Activities</Link></li>
25+
<li className="nav-item"><Link className="nav-link" to="/leaderboard">Leaderboard</Link></li>
26+
<li className="nav-item"><Link className="nav-link" to="/teams">Teams</Link></li>
27+
<li className="nav-item"><Link className="nav-link" to="/users">Users</Link></li>
28+
<li className="nav-item"><Link className="nav-link" to="/workouts">Workouts</Link></li>
29+
</ul>
30+
</div>
31+
</div>
32+
</nav>
33+
<div className="container">
34+
<Routes>
35+
<Route path="/activities" element={<Activities />} />
36+
<Route path="/leaderboard" element={<Leaderboard />} />
37+
<Route path="/teams" element={<Teams />} />
38+
<Route path="/users" element={<Users />} />
39+
<Route path="/workouts" element={<Workouts />} />
40+
<Route path="/" element={
41+
<div className="card text-center">
42+
<div className="card-body">
43+
<h1 className="card-title display-4">Welcome to OctoFit Tracker!</h1>
44+
<p className="card-text">Track your fitness activities, join teams, and compete on the leaderboard.</p>
45+
<Link to="/activities" className="btn btn-success m-2">View Activities</Link>
46+
<Link to="/leaderboard" className="btn btn-info m-2">Leaderboard</Link>
47+
<Link to="/teams" className="btn btn-warning m-2">Teams</Link>
48+
<Link to="/users" className="btn btn-primary m-2">Users</Link>
49+
<Link to="/workouts" className="btn btn-secondary m-2">Workouts</Link>
50+
</div>
51+
</div>
52+
} />
53+
</Routes>
54+
</div>
55+
</Router>
56+
);
57+
}
58+
59+
export default App;

0 commit comments

Comments
 (0)