IT2810-H26 · wuringvo · Oct 16, 2026 · Oct 16, 2026 · Oct 16, 2026 · Oct 16, 2026
@@ -1,8 +1,12 @@
 # Country Boys – Prosjekt 2
 
+Repository for team IT2810-H26-T20 in IT2810-H26.
+Link to project: http://it2810-20.idi.ntnu.no/project2/ 
+
 > En søkbar katalog over byer med filtre, sortering, anmeldelser og lokale bokmerker.
 > Utviklet i emnet IT2810 Webutvikling ved NTNU.
 
+
 ![React](https://img.shields.io/badge/React-20232A?logo=react&logoColor=61DAFB)
 ![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white)
 ![Vite](https://img.shields.io/badge/Vite-646CFF?logo=vite&logoColor=white)

@@ -168,7 +168,6 @@ function App() {
   const [loading, setLoading] = useState(true)
   const [loadingMore, setLoadingMore] = useState(false)
   const [error, setError] = useState('')
-  const [apiConnected, setApiConnected] = useState(false)
   const [refreshKey, setRefreshKey] = useState(0)
   const [savedCities, setSavedCities] = useState<City[]>(readSavedCities)
   const [activeView, setActiveView] = useState<'home' | 'saved'>('home')
@@ -197,12 +196,10 @@ function App() {
         setCities(searchCities.items)
         setTotalCount(searchCities.totalCount)
         setHasMore(searchCities.hasMore)
-        setApiConnected(true)
         setError('')
       })
       .catch((requestError: Error) => {
         if (requestError.name !== 'AbortError') {
-          setApiConnected(false)
           setError(requestError.message)
         }
       })
@@ -309,19 +306,16 @@ function App() {
             Saved{savedCities.length > 0 && <span className="saved-count">{savedCities.length}</span>}
           </button>
         </nav>
-        <span className={`api-status${apiConnected ? '' : ' api-status-offline'}`}>
-          <span />{apiConnected ? 'Live database' : error ? 'Database unavailable' : 'Connecting…'}
-        </span>
       </header>
 
       <main id="top" className="page-shell">
         <section className="intro" id="discover" aria-labelledby="page-title">
           <div className="intro-copy">
-            <p className="eyebrow"><span className="eyebrow-dot" />CONNECTED TO THE CITY DATABASE</p>
+            <p className="eyebrow">EXPLORE CITIES AROUND THE WORLD</p>
             <h1 id="page-title">Find the city that<br /><span>speaks to you.</span></h1>
             <p className="intro-description">Search real city data, explore details, and leave a review.</p>
           </div>
-          <div className="intro-image" role="img" aria-label="Colorful buildings along a Lisbon street"><span className="image-caption"><span className="caption-dot" />Lisbon, Portugal</span></div>
+          <div className="intro-image" role="img" aria-label="Colorful buildings along a Lisbon street"><span className="image-caption">Lisbon, Portugal</span></div>
         </section>
 
         <form className="search-form" role="search" onSubmit={(event) => {
@@ -397,7 +391,6 @@ function App() {
           </section>
         </div>
 
-        <footer className="site-footer"><a className="footer-brand" href="#top">Country Boys<span>.</span></a><p>City data from the live database.</p><span className="footer-note">Reviews are shared with the database</span></footer>
       </main>
     </>
   )

@@ -52,22 +52,17 @@ button, a, input, select { -webkit-tap-highlight-color: transparent; }
 .login-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border: 1px solid #dce4df; border-radius: 6px; background: #fff; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; transition: border-color .2s, background-color .2s; }
 .login-link:hover { border-color: #a7bdb1; background: #f8faf8; }
 .login-icon, .login-icon svg { display: block; width: 18px; height: 18px; }
-.api-status { display: inline-flex; align-items: center; gap: 8px; color: #52615a; font-size: 11px; font-weight: 600; }
-.api-status span { width: 7px; height: 7px; border-radius: 50%; background: #4d9a6e; box-shadow: 0 0 0 3px #e1efe5; }
-.api-status-offline span { background: #c07a42; box-shadow: 0 0 0 3px #f7e9dc; }
 
 .page-shell { width: min(1184px, calc(100% - 64px)); margin: 0 auto; }
 .intro { position: relative; min-height: 230px; margin-top: 34px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; }
 .intro-copy { position: relative; z-index: 1; padding: 15px 0 19px; }
 .eyebrow, .results-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: 1.45px; }
-.eyebrow-dot, .caption-dot { width: 7px; height: 7px; border-radius: 50%; background: #e5a151; }
 h1, h2, h3, p { margin-top: 0; }
 h1 { margin-bottom: 10px; color: var(--ink); font: 700 42px/1.15 var(--serif); letter-spacing: 0; }
 h1 span { color: var(--green); }
 .intro-description { margin: 0; color: #697671; font-size: 14px; }
 .intro-image { position: absolute; top: 0; right: 0; width: 45%; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #f5f7f4 0%, rgba(245,247,244,.08) 37%, rgba(22,44,36,.03) 100%), url('https://images.unsplash.com/photo-1555881400-74d7acaacd8b?auto=format&fit=crop&w=1100&q=82') center 48% / cover; }
 .image-caption { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; color: white; background: rgba(23,43,36,.74); border: 1px solid rgba(255,255,255,.26); border-radius: 4px; font-size: 10px; font-weight: 600; }
-.caption-dot { background: #f6bd76; }
 
 .search-form { position: relative; z-index: 2; display: flex; gap: 10px; max-width: 785px; margin: 0 0 42px; padding: 8px; background: white; border: 1px solid #e2e9e3; border-radius: 7px; box-shadow: 0 8px 22px rgba(38,67,53,.06); }
 .search-field { min-width: 0; min-height: 44px; flex: 1; display: flex; align-items: center; gap: 12px; padding: 0 11px; }
@@ -187,8 +182,6 @@ h1 span { color: var(--green); }
 .land-two { top: 21%; left: 37%; width: 16%; height: 30%; border-radius: 42% 58% 35% 65%; transform: rotate(9deg); clip-path: polygon(9% 12%,44% 0,71% 15%,100% 44%,73% 72%,62% 100%,39% 84%,22% 64%,0 46%); }
 .land-three { top: 22%; right: 8%; width: 38%; height: 48%; border-radius: 50% 47% 35% 55% / 36% 40% 59% 51%; transform: rotate(7deg); clip-path: polygon(5% 18%,30% 7%,52% 0,83% 12%,100% 31%,88% 57%,65% 49%,58% 81%,39% 100%,23% 79%,18% 52%,0 42%); }
 .land-four { bottom: 3%; left: 45%; width: 16%; height: 31%; border-radius: 44% 50% 59% 43%; transform: rotate(-14deg); clip-path: polygon(15% 0,74% 9%,100% 38%,76% 66%,64% 100%,42% 80%,33% 52%,0 33%); }
-.map-pin { position: absolute; z-index: 1; width: 10px; height: 10px; border: 2px solid white; border-radius: 50%; background: #df9251; box-shadow: 0 1px 5px rgba(39,69,49,.28); }
-.pin-one { top: 39%; left: 27%; }.pin-two { top: 31%; left: 48%; }.pin-three { top: 45%; left: 55%; }.pin-four { top: 37%; right: 22%; }.pin-five { bottom: 22%; left: 49%; }
 .site-footer { min-height: 83px; display: flex; align-items: center; gap: 17px; margin-top: 25px; border-top: 1px solid var(--line); }
 .footer-brand { font-size: 16px; }
 .site-footer p { margin: 0; color: #87928b; font-size: 10px; }
@@ -216,7 +209,6 @@ h1 span { color: var(--green); }
   .nav-link { font-size: 11px; }
   .login-link { width: 34px; height: 34px; justify-content: center; padding: 0; font-size: 0; }
   .login-icon, .login-icon svg { width: 19px; height: 19px; }
-  .api-status { font-size: 0; }
   .page-shell { width: calc(100% - 36px); }
   .intro { min-height: 246px; align-items: end; margin-top: 18px; }
   .intro-copy { padding: 0 0 22px; }