glennigen/portainer-confs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update index.html

Browse Source
This commit is contained in:
GCH
2026-06-26 14:03:15 +02:00
parent efaec8ae58
commit 7bb4b2a68f
2 changed files with 421 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
primegrading-web/html/index.html.old
+182 -2
View File
@@ -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() {