feat: "Logg in"-knappen funker

FrameRate/package.json

@@ -13,7 +13,8 @@
   },
   "dependencies": {
     "react": "^19.2.8",
-    "react-dom": "^19.2.8"
+    "react-dom": "^19.2.8",
+    "react-router": "^8.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.29.7",

FrameRate/src/App.tsx

@@ -1,12 +1,22 @@
 import './index.css';
+import { Route, Routes } from 'react-router';
+import LoginPage from './pages/LoginPage';
 import { Layout } from './components/layout/Layout';
 import { FeaturedMovie } from './components/FeaturedMovie';
 
 function App() {
   return (
-    <Layout>
-      <FeaturedMovie />
-    </Layout>
+    <Routes>
+      <Route
+        path="/"
+        element={
+          <Layout>
+            <FeaturedMovie />
+          </Layout>
+        }
+      />
+      <Route path="/logg-inn" element={<LoginPage />} />
+    </Routes>
   );
 }
 

FrameRate/src/components/layout/Header.tsx

@@ -1,3 +1,5 @@
+import { Link } from 'react-router';
+
 // ---------- Lyset i menyen ----------
 
 /** Flytter lyset i menyen til en x-posisjon (piksler fra venstre kant av menyen). */
@@ -63,9 +65,9 @@ export function Header() {
         <a href="/min-liste">Min liste</a>
       </nav>
 
-      <a href="/logg-inn" className="login">
+      <Link to="/logg-inn" className="login">
         Logg inn
-      </a>
+      </Link>
     </header>
   );
 }

FrameRate/src/main.tsx

@@ -1,10 +1,13 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router';
 import './index.css';
 import App from './App.tsx';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>
 );

FrameRate/src/pages/LoginPage.css

@@ -0,0 +1,90 @@
+.login-page {
+  min-height: 100svh;
+  display: grid;
+  place-items: center;
+  padding: 2rem 1rem;
+  box-sizing: border-box;
+  background: radial-gradient(ellipse at top, rgba(242, 182, 48, 0.09), transparent 65%), #0b0c10;
+}
+.login-card {
+  width: 100%;
+  max-width: 27rem;
+  padding: clamp(1.5rem, 5vw, 3rem);
+  box-sizing: border-box;
+  border: 1px solid #2a2d35;
+  border-radius: 12px;
+  background: #15171c;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
+}
+.login-brand {
+  color: white;
+  font:
+    bold 1.75rem Georgia,
+    serif;
+  text-decoration: none;
+}
+.login-eyebrow {
+  margin: 0.5rem 0 2rem;
+  color: #f2b630;
+  font-style: italic;
+}
+.login-card h1 {
+  margin: 0 0 0.75rem;
+  font:
+    bold 2rem Georgia,
+    serif;
+}
+.login-intro,
+.login-message {
+  color: #a0a4ad;
+  line-height: 1.6;
+}
+.login-form {
+  display: flex;
+  flex-direction: column;
+  margin-top: 2rem;
+}
+.login-form label {
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+}
+.login-form input {
+  min-width: 0;
+  margin-bottom: 1.25rem;
+  padding: 0.85rem 1rem;
+  border: 1px solid #3a3e48;
+  border-radius: 8px;
+  background: #0b0c10;
+  color: white;
+  font: inherit;
+}
+.login-form input:focus-visible {
+  outline: 2px solid #f2b630;
+  outline-offset: 2px;
+}
+.login-form button {
+  margin-top: 0.5rem;
+  padding: 0.85rem 1rem;
+  border: none;
+  border-radius: 8px;
+  background: #f2b630;
+  color: #0b0c10;
+  font: inherit;
+  font-weight: bold;
+  cursor: pointer;
+}
+.login-form button:hover {
+  background: #ffca50;
+}
+.login-message {
+  margin: 0.75rem 0;
+}
+.login-back {
+  display: inline-block;
+  margin-top: 1rem;
+  color: #a0a4ad;
+  text-decoration: none;
+}
+.login-back:hover {
+  color: white;
+}

FrameRate/src/pages/LoginPage.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { Link } from 'react-router';
+import './LoginPage.css';
+
+function LoginPage() {
+  const [message, setMessage] = useState('');
+  return (
+    <main className="login-page">
+      <section className="login-card" aria-labelledby="login-title">
+        <Link to="/" className="login-brand">
+          Frame Rate
+        </Link>
+        <p className="login-eyebrow">Rate the frames</p>
+        <h1 id="login-title">Velkommen tilbake</h1>
+        <p className="login-intro">Logg inn for å samle filmene og anmeldelsene dine.</p>
+        <form
+          className="login-form"
+          onSubmit={event => {
+            event.preventDefault();
+            setMessage('Innlogging er ikke koblet til ennå.');
+          }}
+        >
+          <label htmlFor="username">Brukernavn</label>
+          <input id="username" name="username" type="text" autoComplete="username" required />
+          <label htmlFor="password">Passord</label>
+          <input
+            id="password"
+            name="password"
+            type="password"
+            autoComplete="current-password"
+            required
+          />
+          <button type="submit">Logg inn</button>
+          <p className="login-message" role="status">
+            {message}
+          </p>
+        </form>
+        <Link to="/" className="login-back">
+          ← Tilbake til forsiden
+        </Link>
+      </section>
+    </main>
+  );
+}
+
+export default LoginPage;

docs/AI_Deklarasjon/AI_Deklarasjon.md

@@ -23,12 +23,13 @@ Her dokumenterer vi bruk av KI-verktøy i prosjektet, med én del per pull reque
 - Bestemt arkitektur og datamodell i planleggingsdokumentet: hvilke funksjoner appen skal ha, hvilke data som trengs, og at filmene importeres fra TMDB én gang til vår egen database
 - Sammenlignet databasen med planleggingsdokumentet
 - Kodegjennomgang (review) av et annet gruppemedlem, som førte til endringer i hvilke felter som lagres
-# PR #21 - Setup av Prettier og linter
+
+## PR #21 - Setup av Prettier og linter
 
 **Vertøy:** Claude (Sonnet 5.5) via claude.ai
 **Brukt av:** Kevin
 
-## Hva KI ble brukt til
+### Hva KI ble brukt til
 - Finne riktige komandoer