From 044bc031a6ecb534be9cfe1883b0af73cb658d19 Mon Sep 17 00:00:00 2001 From: helgeovs Date: Mon, 19 Oct 2026 11:20:07 +0200 Subject: [PATCH 1/2] chore: scaffold frontend directories --- .../components/pokemoncard/pokemoncard.tsx | 0 frontend/src/assets/pages/home/home.css | 151 ++++++++++++++++++ frontend/src/assets/pages/home/page.tsx | 93 +++++++++++ frontend/src/assets/pages/teams/page.tsx | 0 frontend/src/assets/pages/teams/teams.css | 0 frontend/src/search/filters.ts | 0 frontend/src/search/search.ts | 0 7 files changed, 244 insertions(+) create mode 100644 frontend/src/assets/components/pokemoncard/pokemoncard.tsx create mode 100644 frontend/src/assets/pages/home/home.css create mode 100644 frontend/src/assets/pages/home/page.tsx create mode 100644 frontend/src/assets/pages/teams/page.tsx create mode 100644 frontend/src/assets/pages/teams/teams.css create mode 100644 frontend/src/search/filters.ts create mode 100644 frontend/src/search/search.ts diff --git a/frontend/src/assets/components/pokemoncard/pokemoncard.tsx b/frontend/src/assets/components/pokemoncard/pokemoncard.tsx new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/assets/pages/home/home.css b/frontend/src/assets/pages/home/home.css new file mode 100644 index 0000000..9f07965 --- /dev/null +++ b/frontend/src/assets/pages/home/home.css @@ -0,0 +1,151 @@ +#center { + display: flex; + align-items: center; + gap: 1rem; + padding: 2rem; + flex-direction: column; + max-width: 1024px; +} + +.top-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 2rem; + position: relative; + color: var(--accent); + background-color: var(--code-bg); + position: relative; + padding-left: 75px; +} + +.nav-links{ + list-style: none; + display: flex; + gap: 1.5rem; +} + +.nav-links a { + color: var(--text); + text-decoration: none; +} + +.hamburger { + display: none; + flex-direction: column; + gap: 5px; + background: none; + border: none; + cursor: pointer; +} + +.hamburger .hamburger-line { + width: 25px; + height: 3px; + background-color: var(--accent); + border-radius: 2px; +} + +.app-container { + display: flex; + min-height: calc(100vh - 70vh); + position: relative; +} + +.sidebar { + width: 250px; + background-color: var(--bg); + color: var(--text); + padding: 2rem 1.5rem; + border-right: 1px solid #333; +} + +.sidebar .nav-links { + list-style: none; + display: flex; + flex-direction: column; + gap: 1.2rem; + padding: 0; + margin: 0; +} + +.sidebar .nav-links a:hover{ + color: var(--accent); +} + +.main-content { + flex: 1; + background-color: var(--bg); +} + +#formats { + background-color: var(--code-bg); + color: var(--text); + border: 1px solid var(--code-border); + padding: 0.6Rem 1.2rem; + border-radius: 999px; + font-size: 1rem; + font-family: var(--sans); + cursor: pointer; + outline: none; + transition: border-color 0.2s, box-shadow 0.2s; +} + +#formats:focus,#formats#hover{ + border-color: var(--accent); +} + +.addPokemon { + background-color: var(--accent); + color: aliceblue; + padding: 0.6rem 1.4rem; + font-size: 1rem; + font-weight: 600; + font-family: var(--sans); + border-radius: 999px; + cursor: pointer; + transition: transform 0.1s ease, filter 0.2s ease; +} + +.addPokemon:hover{ + filter: brightness(1.1); +} + +.addPokemon:active{ + transform: scale(0.98); +} + +@media (max-width: 768px) { + .hamburger{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 60px; + height: 100%; + position: absolute; + top: 0; + left: 0; + } + + .sidebar{ + display: none; + position: absolute; + top: 0; + left: 0; + width: 100vw; + background-color: var(--code-bg); + border-right: none; + box-shadow: 0 4px 6px rgba(0,0,0,0.3); + z-index: 100; + padding: 1rem 0rem; + } + + .sidebar.active { + display: block; + } + + .nav-links.active { + display: flex; + } +} \ No newline at end of file diff --git a/frontend/src/assets/pages/home/page.tsx b/frontend/src/assets/pages/home/page.tsx new file mode 100644 index 0000000..4774180 --- /dev/null +++ b/frontend/src/assets/pages/home/page.tsx @@ -0,0 +1,93 @@ +import './Home.css' +import {useState} from 'react'; + +function App() { + + const [menuOpen, setMenuOpen] = useState(false); + const[isSearchOpen, setIsSearchOpen] = useState(false); + + //*Change to a call + const ALL_TYPES = ['Normal', 'Fire', 'Water', 'Grass', 'Electric', 'Ice', 'Fighting', 'Poison', 'Ground', 'Flying', 'Psychic', 'Bug', 'Rock', 'Ghost', 'Dragon', 'Dark', 'Steel', 'Fairy', 'Monotype']; + + return ( + <> + + +
+ + + +
+
+ + + {isSearchOpen && ( +
+
+
+

Search Pokèmon

+ +
+ +

Filters:

+ + + +
+
+ )} +
+ +
+

Type Matchups

+
+
+

Stats

+
+
+

Moves

+
+
+
+ + ) +} + +export default App \ No newline at end of file diff --git a/frontend/src/assets/pages/teams/page.tsx b/frontend/src/assets/pages/teams/page.tsx new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/assets/pages/teams/teams.css b/frontend/src/assets/pages/teams/teams.css new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/search/filters.ts b/frontend/src/search/filters.ts new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/search/search.ts b/frontend/src/search/search.ts new file mode 100644 index 0000000..e69de29 From cfc3ea13a8f9499bb45e19a9456b213e03a5b495 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Helge=20=C3=98vsthus?= Date: Mon, 19 Oct 2026 11:23:02 +0200 Subject: [PATCH 2/2] Update page.tsx Removed a caps letter --- frontend/src/assets/pages/home/page.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/assets/pages/home/page.tsx b/frontend/src/assets/pages/home/page.tsx index 4774180..408028b 100644 --- a/frontend/src/assets/pages/home/page.tsx +++ b/frontend/src/assets/pages/home/page.tsx @@ -1,4 +1,4 @@ -import './Home.css' +import './home.css' import {useState} from 'react'; function App() { @@ -90,4 +90,4 @@ function App() { ) } -export default App \ No newline at end of file +export default App