update index.html

primegrading-web/html/index.html

@@ -447,6 +447,144 @@
 
     .compare-col.prime ul li::before { opacity: 1; }
 
+    /* ── TEAM ── */
+    #team { background: var(--surface); border-top: 1px solid var(--border); }
+
+    .team-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      gap: 1.5rem;
+    }
+
+    .team-card {
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      padding: 1.5rem 1.25rem;
+      text-align: center;
+      background: var(--bg);
+      transition: border-color 0.2s;
+    }
+
+    .team-card:hover { border-color: rgba(201,168,76,0.3); }
+
+    .team-avatar {
+      width: 72px; height: 72px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--border), #2a2a3e);
+      margin: 0 auto 1rem;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 1.8rem;
+      border: 2px solid var(--border);
+    }
+
+    .team-name {
+      font-family: 'Cinzel', serif;
+      font-size: 0.95rem;
+      font-weight: 700;
+      color: var(--text);
+      margin-bottom: 0.25rem;
+    }
+
+    .team-role {
+      font-size: 0.75rem;
+      font-weight: 600;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--gold);
+      margin-bottom: 0.5rem;
+    }
+
+    .team-bio {
+      font-size: 0.8rem;
+      color: var(--muted);
+      line-height: 1.5;
+    }
+
+    /* ── PRISER ── */
+    #priser { border-top: 1px solid var(--border); }
+
+    .price-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+      gap: 1.5rem;
+    }
+
+    .price-card {
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      padding: 1.75rem 1.5rem;
+      background: var(--surface);
+      display: flex; flex-direction: column; gap: 0.75rem;
+      transition: border-color 0.2s;
+    }
+
+    .price-card:hover { border-color: rgba(201,168,76,0.3); }
+
+    .price-card.featured {
+      border-color: rgba(201,168,76,0.5);
+      background: linear-gradient(160deg, rgba(201,168,76,0.05), var(--surface));
+    }
+
+    .price-tier {
+      font-family: 'Cinzel', serif;
+      font-size: 0.85rem;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--gold);
+    }
+
+    .price-amount {
+      font-family: 'Cinzel', serif;
+      font-size: 2.4rem;
+      font-weight: 900;
+      color: var(--text);
+      line-height: 1;
+    }
+
+    .price-amount span {
+      font-size: 1rem;
+      color: var(--muted);
+      font-family: 'Inter', sans-serif;
+      font-weight: 400;
+    }
+
+    .price-desc {
+      font-size: 0.8rem;
+      color: var(--muted);
+      font-style: italic;
+    }
+
+    .price-features {
+      list-style: none;
+      display: flex; flex-direction: column; gap: 0.4rem;
+      margin-top: 0.5rem;
+    }
+
+    .price-features li {
+      font-size: 0.82rem;
+      color: var(--muted);
+      padding-left: 1.2rem;
+      position: relative;
+    }
+
+    .price-features li::before {
+      content: '✓';
+      position: absolute; left: 0;
+      color: var(--red);
+    }
+
+    .price-disclaimer {
+      margin-top: 2rem;
+      padding: 1rem 1.25rem;
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      font-size: 0.8rem;
+      color: var(--muted);
+      font-style: italic;
+      background: var(--surface);
+    }
+
     /* ── SUBMIT FORM ── */
     #submit { background: var(--surface); border-top: 1px solid var(--border); }
 
@@ -552,6 +690,8 @@
     <li><a href="#how">Sådan virker det</a></li>
     <li><a href="#grades">Karakterskala</a></li>
     <li><a href="#labels">Labels</a></li>
+    <li><a href="#team">Teamet</a></li>
+    <li><a href="#priser">Priser</a></li>
     <li><a href="#submit">Indsend kort</a></li>
   </ul>
 </nav>
@@ -736,6 +876,104 @@
   </div>
 </section>
 
+<!-- TEAM -->
+<section id="team">
+  <div class="container">
+    <h2 class="section-title">Mød <span>teamet</span></h2>
+    <p class="section-lead">Folkene bag PrimeGrading.dk.</p>
+    <div class="team-grid">
+
+      <!-- Ret navn, emoji, titel og bio herunder -->
+      <div class="team-card">
+        <div class="team-avatar">🧢</div>
+        <div class="team-name">Navn Navnesen</div>
+        <div class="team-role">Stifter &amp; Chefgrader</div>
+        <div class="team-bio">Samlerkort-nørd siden barnsben. Har graderet over 500 kort og kender forskel på en PSA 9 og en PSA 10.</div>
+      </div>
+
+      <div class="team-card">
+        <div class="team-avatar">🔍</div>
+        <div class="team-name">Navn Navnesen</div>
+        <div class="team-role">Grader</div>
+        <div class="team-bio">Specialist i One Piece TCG. Øje for fabriksfejl og printfejl du aldrig selv ville have spottet.</div>
+      </div>
+
+      <div class="team-card">
+        <div class="team-avatar">📦</div>
+        <div class="team-name">Navn Navnesen</div>
+        <div class="team-role">Logistik &amp; Pakning</div>
+        <div class="team-bio">Sørger for at dine kort ankommer og returneres sikkert. Ingen kort er nogensinde gået tabt.</div>
+      </div>
+
+    </div>
+  </div>
+</section>
+
+<!-- PRISER -->
+<section id="priser">
+  <div class="container">
+    <h2 class="section-title">Vores <span>priser</span></h2>
+    <p class="section-lead">Markedets mest konkurrencedygtige priser — for markedets dårligste service.</p>
+
+    <div class="price-grid">
+
+      <div class="price-card">
+        <div class="price-tier">Standard Bøjning</div>
+        <div class="price-amount">499 <span>kr/kort</span></div>
+        <div class="price-desc">Vi bøjer dit kort let. Ikke nok til at det ser interessant ud — bare nok til at det aldrig lægger fladt igen.</div>
+        <ul class="price-features">
+          <li>Tilfældig bøjningsretning</li>
+          <li>Ingen garanti for symmetri</li>
+          <li>Returneres i en plastikpose fra Netto</li>
+          <li>Leveringstid: 6–18 måneder</li>
+        </ul>
+      </div>
+
+      <div class="price-card featured">
+        <div class="price-tier">⭐ Premium Knæk</div>
+        <div class="price-amount">1.299 <span>kr/kort</span></div>
+        <div class="price-desc">Et rent, professionelt knæk på tværs af kortet. Vi skriver "10" på slabben uanset hvad.</div>
+        <ul class="price-features">
+          <li>Håndknæk af erfaren medarbejder</li>
+          <li>Valgfri knækvinkel (vi ignorerer dit valg)</li>
+          <li>Slab med guld label — kortet er stadig knækket</li>
+          <li>Gratis "undskyldning" på en Post-it</li>
+        </ul>
+      </div>
+
+      <div class="price-card">
+        <div class="price-tier">Deluxe Vandbad</div>
+        <div class="price-amount">2.999 <span>kr/kort</span></div>
+        <div class="price-desc">Dit kort sendes igennem vores patenterede vandbehandling. Bølger, krøller og misfarvning er inkluderet i prisen.</div>
+        <ul class="price-features">
+          <li>12 timers blødning i lunkent vand</li>
+          <li>Tørres med en brugt køkkenrulle</li>
+          <li>Returneres i en fugtig kuvert</li>
+          <li>Umuligt at klage — vi svarer ikke</li>
+        </ul>
+      </div>
+
+      <div class="price-card">
+        <div class="price-tier">PRIME DESTROY</div>
+        <div class="price-amount">9.999 <span>kr/kort</span></div>
+        <div class="price-desc">Vores absolut bedste pakke. Vi gør alt det ovenstående — og derefter smelter vi slabben fast til kortet med en lighter.</div>
+        <ul class="price-features">
+          <li>Bøjning, knæk og vandbad inkluderet</li>
+          <li>Lighter-behandling af slab</li>
+          <li>Signeret certifikat fra chefgraderen</li>
+          <li>Dit kort er nu officielt ødelagt</li>
+          <li>Eksklusiv "vi er kede af det"-e-mail</li>
+        </ul>
+      </div>
+
+    </div>
+
+    <div class="price-disclaimer">
+      * Alle priser er ekskl. moms, fragt, håndteringsgebyr, slab-gebyr, knæk-tillæg, vand-tillæg og diverse gebyrer vi finder på undervejs. PrimeGrading.dk påtager sig intet ansvar for kortenes tilstand efter gradering — det burde du have vidst inden du sendte dem.
+    </div>
+  </div>
+</section>
+
 <!-- SUBMIT -->
 <section id="submit">
   <div class="container">
@@ -780,7 +1018,7 @@
   <p style="margin-top:0.5rem; font-size:0.7rem;">Dette er en demo-hjemmeside lavet for sjov. Vi er ikke tilknyttet Nintendo, The Pokémon Company eller Bandai.</p>
 </footer>
 
-<div id="toast">✓ Din forespørgsel er modtaget — vi vender snart tilbage!</div>
+<div id="toast">✓ Din forespørgsel er forsøgt sendt — vi vender ALDRIG tilbage!</div>
 
 <script>
   function handleSubmit() {

primegrading-web/html/index.html.old

@@ -327,6 +327,35 @@
       border-color: rgba(201,168,76,0.3);
     }
 
+    .grade-chip.prime-grade {
+      grid-column: 1 / -1;
+      background: linear-gradient(135deg, rgba(201,168,76,0.08), rgba(90,240,216,0.04), rgba(176,110,245,0.04));
+      border-color: rgba(201,168,76,0.5);
+      display: flex; align-items: center; gap: 1.5rem;
+      padding: 1.25rem 1.5rem;
+      text-align: left;
+    }
+
+    .grade-chip.prime-grade:hover {
+      border-color: var(--gold);
+      background: linear-gradient(135deg, rgba(201,168,76,0.12), rgba(90,240,216,0.06), rgba(176,110,245,0.06));
+    }
+
+    .prime-grade-star { font-size: 2rem; flex-shrink: 0; }
+    .prime-grade-info { flex: 1; }
+
+    .prime-grade-title {
+      font-family: 'Cinzel', serif;
+      font-size: 1.1rem; font-weight: 900;
+      background: linear-gradient(135deg, var(--gold), var(--gold-light), var(--holo1));
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+      display: block;
+    }
+
+    .prime-grade-sub {
+      font-size: 0.78rem; color: var(--muted); margin-top: 0.25rem; line-height: 1.5;
+    }
+
     .grade-score {
       font-family: 'Cinzel', serif;
       font-size: 2rem;
@@ -346,6 +375,78 @@
       display: block;
     }
 
+    /* ── LABELS SECTION ── */
+    #labels { border-top: 1px solid var(--border); }
+
+    .labels-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+      gap: 1rem;
+      margin-bottom: 3rem;
+    }
+
+    .label-card {
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      padding: 1.25rem 1.5rem;
+      display: flex; align-items: flex-start; gap: 1rem;
+      background: var(--surface);
+      transition: border-color 0.2s;
+    }
+
+    .label-card:hover { border-color: rgba(201,168,76,0.3); }
+
+    .label-dot {
+      width: 13px; height: 13px;
+      border-radius: 50%;
+      flex-shrink: 0; margin-top: 0.3rem;
+    }
+
+    .label-card h4 { font-size: 0.9rem; font-weight: 600; color: var(--text); margin-bottom: 0.3rem; }
+    .label-card p  { font-size: 0.8rem; color: var(--muted); line-height: 1.5; }
+
+    .compare-box {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1rem;
+    }
+
+    @media (max-width: 600px) { .compare-box { grid-template-columns: 1fr; } }
+
+    .compare-col {
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      padding: 1.5rem;
+      background: var(--surface);
+    }
+
+    .compare-col.prime { border-color: rgba(201,168,76,0.4); background: rgba(201,168,76,0.03); }
+
+    .compare-col h4 {
+      font-family: 'Cinzel', serif;
+      font-size: 0.95rem; font-weight: 700;
+      margin-bottom: 1rem; color: var(--text);
+    }
+
+    .compare-col.prime h4 {
+      background: linear-gradient(135deg, var(--gold), var(--gold-light));
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+    }
+
+    .compare-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
+
+    .compare-col ul li {
+      font-size: 0.85rem; color: var(--muted);
+      padding-left: 1.2rem; position: relative;
+    }
+
+    .compare-col ul li::before {
+      content: '—'; position: absolute; left: 0;
+      color: var(--gold); opacity: 0.5;
+    }
+
+    .compare-col.prime ul li::before { opacity: 1; }
+
     /* ── SUBMIT FORM ── */
     #submit { background: var(--surface); border-top: 1px solid var(--border); }
 
@@ -450,6 +551,7 @@
   <ul>
     <li><a href="#how">Sådan virker det</a></li>
     <li><a href="#grades">Karakterskala</a></li>
+    <li><a href="#labels">Labels</a></li>
     <li><a href="#submit">Indsend kort</a></li>
   </ul>
 </nav>
@@ -541,21 +643,99 @@
 <section id="grades">
   <div class="container">
     <h2 class="section-title">Vores <span>karakterskala</span></h2>
-    <p class="section-lead">Vi bruger en 10-punkt skala — fra Gem Mint til Poor.</p>
+    <p class="section-lead">Fra Poor til den ekslusive PRIME GRADE — vores højeste og mest prestigefyldte vurdering.</p>
     <div class="scale">
+
+      <!-- PRIME GRADE — særklasse øverst -->
+      <div class="grade-chip prime-grade">
+        <div class="prime-grade-star">⭐</div>
+        <div class="prime-grade-info">
+          <span class="prime-grade-title">PRIME GRADE — Ultra Premium</span>
+          <span class="prime-grade-sub">Fire perfekte 10'ere <strong>plus</strong> en ekstra visuel vurdering: eye appeal, printkvalitet og ingen fabriksfejl. Kun tildelt de absolut bedste kort med guld/grøn label.</span>
+        </div>
+      </div>
+
       <div class="grade-chip"><span class="grade-score">10</span><span class="grade-label">Gem Mint</span></div>
       <div class="grade-chip"><span class="grade-score">9.5</span><span class="grade-label">Mint+</span></div>
       <div class="grade-chip"><span class="grade-score">9</span><span class="grade-label">Mint</span></div>
       <div class="grade-chip"><span class="grade-score">8.5</span><span class="grade-label">Near Mint+</span></div>
       <div class="grade-chip"><span class="grade-score">8</span><span class="grade-label">Near Mint</span></div>
+      <div class="grade-chip"><span class="grade-score">7.5</span><span class="grade-label">Excellent+</span></div>
       <div class="grade-chip"><span class="grade-score">7</span><span class="grade-label">Excellent</span></div>
       <div class="grade-chip"><span class="grade-score">6</span><span class="grade-label">Very Good</span></div>
       <div class="grade-chip"><span class="grade-score">5</span><span class="grade-label">Good</span></div>
+      <div class="grade-chip"><span class="grade-score">4</span><span class="grade-label">Fair</span></div>
       <div class="grade-chip"><span class="grade-score">3</span><span class="grade-label">Poor</span></div>
     </div>
   </div>
 </section>
 
+<!-- SPECIAL LABELS -->
+<section id="labels">
+  <div class="container">
+    <h2 class="section-title">Special <span>Labels</span></h2>
+    <p class="section-lead">Udover standardskalaen tildeler vi særlige labels til kort, der fortjener ekstra anerkendelse.</p>
+
+    <div class="labels-grid">
+      <div class="label-card">
+        <div class="label-dot" style="background:#4caf50;"></div>
+        <div>
+          <h4>Prime Standard</h4>
+          <p>Vores grundlæggende label for godkendte og vurderede kort.</p>
+        </div>
+      </div>
+      <div class="label-card">
+        <div class="label-dot" style="background:#c9a84c;"></div>
+        <div>
+          <h4>Gold Label</h4>
+          <p>Tildelt kort med særlig høj score og fremragende stand.</p>
+        </div>
+      </div>
+      <div class="label-card">
+        <div class="label-dot" style="background:#e05c5c;"></div>
+        <div>
+          <h4>Founder Edition</h4>
+          <p>Eksklusivt label til de første kort vurderet af PrimeGrading.</p>
+        </div>
+      </div>
+      <div class="label-card">
+        <div class="label-dot" style="background:#555570;"></div>
+        <div>
+          <h4>Black Label</h4>
+          <p>Kræver perfekte 10'ere i alle subgrades — centering, hjørner, kanter og overflade.</p>
+        </div>
+      </div>
+      <div class="label-card">
+        <div class="label-dot" style="background:#f0d070; box-shadow: 0 0 6px rgba(240,208,112,0.6);"></div>
+        <div>
+          <h4>⭐ PRIME GRADE</h4>
+          <p>Det absolut højeste label. Kun til kort der er perfekte i alle subgrades <em>og</em> består den visuelle vurdering.</p>
+        </div>
+      </div>
+    </div>
+
+    <h3 class="section-title" style="font-size:1.2rem; margin-bottom:1rem;">Black Label <span>vs PRIME GRADE</span></h3>
+    <div class="compare-box">
+      <div class="compare-col">
+        <h4>Black Label</h4>
+        <ul>
+          <li>Fire 10'ere i alle subgrades</li>
+          <li>Sort label</li>
+        </ul>
+      </div>
+      <div class="compare-col prime">
+        <h4>PRIME GRADE</h4>
+        <ul>
+          <li>Fire perfekte 10'ere i alle subgrades</li>
+          <li>Ekstra visuel vurdering: eye appeal, printkvalitet, ingen fabriksfejl</li>
+          <li>Guld/grøn label</li>
+          <li>Kun de absolut bedste kort opnår dette</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</section>
+
 <!-- SUBMIT -->
 <section id="submit">
   <div class="container">
@@ -600,7 +780,7 @@
   <p style="margin-top:0.5rem; font-size:0.7rem;">Dette er en demo-hjemmeside lavet for sjov. Vi er ikke tilknyttet Nintendo, The Pokémon Company eller Bandai.</p>
 </footer>
 
-<div id="toast">✓ Din forespørgsel er modtaget — vi vender snart tilbage!</div>
+<div id="toast">✓ Din forespørgsel er forsøgt sendt — vi vender ALDRIG tilbage!</div>
 
 <script>
   function handleSubmit() {