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

Nyt logo, preview og designjusteringer til PrimeGrading.dk

Browse Source 
- Tilføjet primegrading-logo.svg (dark/light mode, guld/sølv gradient)
- Opdateret index.html: logo skiftet fra tekst til SVG, OG-dimensioner rettet
- Genereret preview.png i 1200×630
- Ryddet op: fjernet index.html.old (midlertidig backup)
This commit is contained in:
GlennIgen
2026-06-26 17:21:04 +02:00
parent d230df0854
commit 5336ebd520
4 changed files with 306 additions and 859 deletions
Download Patch File Download Diff File Expand all files Collapse all files
primegrading-web/html/index.html
+236 -66
View File
@@ -4,7 +4,18 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PrimeGrading.dk — Kortgradering med kant</title>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='2' y='4' width='28' height='24' rx='3' fill='%23111118' stroke='%23c9a84c' stroke-width='1.5'/%3E%3Cpolyline points='7,28 13,15 18,20 25,7' fill='none' stroke='%23c9a84c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" />
<meta property="og:title" content="PrimeGrading.dk — Dine kort. Vi gør vores bedste. (det er ikke godt nok)" />
<meta property="og:description" content="Kortforvanskning for samlere. Pokémon &amp; One Piece TCG. Fra bøjning til total PRIME KNÆK — vi ødelægger dine kort med stolthed." />
<meta property="og:url" content="https://primegrading.dk/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="PrimeGrading.dk" />
<meta property="og:image" content="https://primegrading.dk/preview.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="PrimeGrading.dk — Dine kort. Vi gør vores bedste." />
<meta name="twitter:description" content="Kortforvanskning for samlere. Pokémon &amp; One Piece. Bøjning, knæk, vandbad — vi gør det hele." />
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='2' y='4' width='28' height='24' rx='3' fill='%23f5f4f0' stroke='%23c9a84c' stroke-width='1.5'/%3E%3Cpolyline points='7,28 13,15 18,20 25,7' fill='none' stroke='%23c9a84c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet" />
@@ -12,6 +23,21 @@
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #f5f0e5;
--surface: #ece7db;
--border: #d8d2c4;
--gold: #c9a84c;
--gold-light:#e6c860;
--red: #cc2222;
--text: #2c2820;
--muted: #7a7262;
--text-light:#f0eef0;
--holo1: #3ab0a0;
--holo2: #8a4ec5;
--holo3: #d04e4e;
}
.dark-mode {
--bg: #0a0a0f;
--surface: #111118;
--border: #1e1e2e;
@@ -20,6 +46,7 @@
--red: #cc2222;
--text: #e8e6f0;
--muted: #7a7890;
--text-light:#e8e6f0;
--holo1: #5af0d8;
--holo2: #b06ef5;
--holo3: #f06e6e;
@@ -34,6 +61,7 @@
font-weight: 400;
line-height: 1.6;
overflow-x: hidden;
transition: background 0.3s, color 0.3s;
}
/* ── NAV ── */
@@ -41,26 +69,48 @@
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 1rem 2.5rem;
background: rgba(10,10,15,0.85);
background: rgba(245,244,240,0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
transition: background 0.3s;
}
.dark-mode nav {
background: rgba(10,10,15,0.85);
}
.logo {
font-family: 'Cinzel', serif;
font-weight: 900;
font-size: 1.3rem;
letter-spacing: 0.08em;
background: linear-gradient(135deg, var(--gold), var(--gold-light), var(--gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: flex;
align-items: center;
text-decoration: none;
height: 48px;
}
.logo span {
color: var(--red);
-webkit-text-fill-color: var(--red);
.logo img {
display: block;
height: 48px;
width: auto;
}
@media (max-width: 600px) {
.logo { height: 38px; }
.logo img { height: 38px; }
}
.nav-right {
display: flex; align-items: center; gap: 1rem;
}
.theme-toggle {
background: none; border: 1px solid var(--border);
color: var(--muted); cursor: pointer;
font-size: 1rem; padding: 0.4rem 0.6rem;
border-radius: 4px; line-height: 1;
transition: border-color 0.2s, color 0.2s;
}
.theme-toggle:hover {
border-color: var(--gold); color: var(--gold);
}
.hamburger {
@@ -79,7 +129,7 @@
width: 24px;
height: 2px;
background: var(--text);
transition: transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s, background 0.3s;
}
.hamburger.active span:nth-child(1) {
@@ -114,13 +164,14 @@
/* ── MOBILE NAV ── */
@media (max-width: 768px) {
.hamburger { display: flex; }
nav { padding: 1rem 1.25rem; }
nav ul {
position: fixed; top: 0; right: -100%;
width: 260px; height: 100vh;
flex-direction: column;
gap: 0;
background: rgba(10,10,15,0.97);
background: rgba(245,244,240,0.98);
backdrop-filter: blur(16px);
border-left: 1px solid var(--border);
padding: 5rem 2rem 2rem;
@@ -128,6 +179,10 @@
z-index: 100;
}
.dark-mode nav ul {
background: rgba(10,10,15,0.98);
}
nav ul.open { right: 0; }
nav ul a {
@@ -153,6 +208,13 @@
.hero-glow {
position: absolute; inset: 0; z-index: 0;
background:
radial-gradient(ellipse 60% 40% at 50% 30%, rgba(201,168,76,0.06) 0%, transparent 70%),
radial-gradient(ellipse 40% 30% at 20% 80%, rgba(58,176,160,0.03) 0%, transparent 60%),
radial-gradient(ellipse 40% 30% at 80% 70%, rgba(138,78,197,0.03) 0%, transparent 60%);
}
.dark-mode .hero-glow {
background:
radial-gradient(ellipse 60% 40% at 50% 30%, rgba(201,168,76,0.08) 0%, transparent 70%),
radial-gradient(ellipse 40% 30% at 20% 80%, rgba(90,240,216,0.04) 0%, transparent 60%),
@@ -185,8 +247,7 @@
h1 .line1 {
display: block;
background: linear-gradient(135deg, #fff 30%, var(--gold-light));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
color: var(--text);
}
h1 .line2 {
@@ -250,23 +311,46 @@
border-radius: 6px;
position: relative;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.08);
border: 1px solid rgba(0,0,0,0.08);
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
}
.dark-mode .holo-card { border-color: rgba(255,255,255,0.08); }
.holo-card:hover {
transform: translateY(-8px) rotate(-1deg);
box-shadow: 0 20px 40px rgba(0,0,0,0.15), 0 0 20px rgba(201,168,76,0.15);
}
.dark-mode .holo-card:hover {
box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 20px rgba(201,168,76,0.2);
}
.holo-card .card-bg {
position: absolute; inset: 0;
background: linear-gradient(135deg, #e8e6f0, #dddae8, #ccc8e0);
}
.dark-mode .holo-card .card-bg {
background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
}
.holo-card .card-shine {
position: absolute; inset: 0;
background: linear-gradient(
115deg,
transparent 20%,
rgba(58,176,160,0.1) 35%,
rgba(138,78,197,0.1) 50%,
rgba(208,78,78,0.1) 65%,
transparent 80%
);
opacity: 0;
transition: opacity 0.3s;
}
.dark-mode .holo-card .card-shine {
background: linear-gradient(
115deg,
transparent 20%,
@@ -275,8 +359,6 @@
rgba(240,110,110,0.15) 65%,
transparent 80%
);
opacity: 0;
transition: opacity 0.3s;
}
.holo-card:hover .card-shine { opacity: 1; }
@@ -287,10 +369,10 @@
color: #0a0a0f;
font-family: 'Cinzel', serif;
font-weight: 900;
font-size: 1.1rem;
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
font-size: 0.85rem;
padding: 3px 8px;
border-radius: 2px;
letter-spacing: 0.04em;
}
.holo-card .card-label {
@@ -299,9 +381,12 @@
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
color: rgba(0,0,0,0.5);
text-shadow: 0 0 4px rgba(0,0,0,0.15), 0 0 8px rgba(0,0,0,0.1);
}
.dark-mode .holo-card .card-label { color: rgba(255,255,255,0.85); font-size: 0.55rem; text-shadow: 0 0 6px rgba(0,0,0,0.5), 0 0 12px rgba(0,0,0,0.3); }
.holo-card .card-art {
position: absolute; inset: 20px 8px 40px;
display: flex; align-items: center; justify-content: center;
@@ -390,7 +475,7 @@
.grade-chip.prime-grade {
grid-column: 1 / -1;
background: linear-gradient(135deg, rgba(201,168,76,0.08), rgba(240,110,110,0.04), rgba(90,240,216,0.04));
background: linear-gradient(135deg, rgba(201,168,76,0.08), rgba(208,78,78,0.04), rgba(58,176,160,0.04));
border-color: rgba(201,168,76,0.5);
display: flex; align-items: center; gap: 1.5rem;
padding: 1.25rem 1.5rem;
@@ -399,6 +484,14 @@
.grade-chip.prime-grade:hover {
border-color: var(--gold);
background: linear-gradient(135deg, rgba(201,168,76,0.12), rgba(208,78,78,0.06), rgba(58,176,160,0.06));
}
.dark-mode .grade-chip.prime-grade {
background: linear-gradient(135deg, rgba(201,168,76,0.08), rgba(240,110,110,0.04), rgba(90,240,216,0.04));
}
.dark-mode .grade-chip.prime-grade:hover {
background: linear-gradient(135deg, rgba(201,168,76,0.12), rgba(240,110,110,0.06), rgba(90,240,216,0.06));
}
@@ -530,11 +623,16 @@
.team-avatar {
width: 72px; height: 72px;
border-radius: 50%;
background: linear-gradient(135deg, var(--border), #2a2a3e);
background: linear-gradient(135deg, var(--border), #d0ced8);
margin: 0 auto 1rem;
display: flex; align-items: center; justify-content: center;
font-size: 1.8rem;
border: 2px solid var(--border);
transition: background 0.3s;
}
.dark-mode .team-avatar {
background: linear-gradient(135deg, var(--border), #2a2a3e);
}
.team-name {
@@ -566,22 +664,28 @@
.team-tag.pokemon {
background: rgba(240,200,50,0.15);
color: #f0c832;
color: #b8941e;
border: 1px solid rgba(240,200,50,0.25);
}
.dark-mode .team-tag.pokemon { color: #f0c832; }
.team-tag.onepiece {
background: rgba(80,180,240,0.15);
color: #50b4f0;
color: #2068a0;
border: 1px solid rgba(80,180,240,0.25);
}
.dark-mode .team-tag.onepiece { color: #50b4f0; }
.team-tag.ceo {
background: rgba(201,168,76,0.2);
color: var(--gold-light);
color: #8a6e20;
border: 1px solid rgba(201,168,76,0.4);
}
.dark-mode .team-tag.ceo { color: var(--gold-light); }
.team-bio {
font-size: 0.8rem;
color: var(--muted);
@@ -768,25 +872,57 @@
}
#toast.show { opacity: 1; transform: translateY(0); }
/* ── SCROLL TO TOP ── */
#scroll-top {
position: fixed; bottom: 2rem; left: 2rem; z-index: 999;
width: 42px; height: 42px;
border: 1px solid var(--gold);
background: var(--surface);
color: var(--gold);
font-size: 1.2rem;
cursor: pointer;
border-radius: 4px;
display: flex; align-items: center; justify-content: center;
opacity: 0;
transform: translateY(12px);
pointer-events: none;
transition: opacity 0.3s, transform 0.3s, background 0.2s;
line-height: 1;
}
#scroll-top.visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
#scroll-top:hover {
background: var(--gold);
color: #0a0a0f;
}
</style>
</head>
<body>
<nav>
<a class="logo" href="#">Prime<span>Grading</span>.dk</a>
<button class="hamburger" onclick="toggleMenu()" aria-label="Menu">
<span></span>
<span></span>
<span></span>
</button>
<ul id="nav-menu">
<li><a href="#how" onclick="closeMenu()">Sådan virker det</a></li>
<li><a href="#grades" onclick="closeMenu()">Knækningsskala</a></li>
<li><a href="#labels" onclick="closeMenu()">Labels</a></li>
<li><a href="#team" onclick="closeMenu()">Teamet</a></li>
<li><a href="#priser" onclick="closeMenu()">Priser</a></li>
<li><a href="#submit" onclick="closeMenu()">Indsend kort</a></li>
</ul>
<a class="logo" href="#"><img src="primegrading-logo.svg" alt="PrimeGrading.dk" /></a>
<div class="nav-right">
<button class="theme-toggle" onclick="toggleTheme()" id="themeBtn" title="Skift tema">☀️</button>
<button class="hamburger" onclick="toggleMenu()" aria-label="Menu">
<span></span>
<span></span>
<span></span>
</button>
<ul id="nav-menu">
<li><a href="#how" onclick="closeMenu()">Sådan virker det</a></li>
<li><a href="#grades" onclick="closeMenu()">Knækningsskala</a></li>
<li><a href="#labels" onclick="closeMenu()">Labels</a></li>
<li><a href="#team" onclick="closeMenu()">Teamet</a></li>
<li><a href="#priser" onclick="closeMenu()">Priser</a></li>
<li><a href="#submit" onclick="closeMenu()">Indsend kort</a></li>
</ul>
</div>
</nav>
<!-- HERO -->
@@ -808,36 +944,36 @@
<div class="card-bg"></div>
<div class="card-shine"></div>
<div class="card-label">Pokémon TCG</div>
<div class="card-art">💔</div>
<div class="card-grade">K10</div>
<div class="card-art">✨</div>
<div class="card-grade">HVAD</div>
</div>
<div class="holo-card">
<div class="card-bg" style="background:linear-gradient(135deg,#1a0a2e,#2e1650,#1a0a2e)"></div>
<div class="card-bg" style="background:linear-gradient(135deg,#f0e0d0,#e8ccaa,#f0e0d0)"></div>
<div class="card-shine"></div>
<div class="card-label">One Piece TCG</div>
<div class="card-art">☠️</div>
<div class="card-grade">K9</div>
<div class="card-art">➰</div>
<div class="card-grade">BØJ</div>
</div>
<div class="holo-card">
<div class="card-bg" style="background:linear-gradient(135deg,#0a1a2e,#0f3460,#0a1a2e)"></div>
<div class="card-bg" style="background:linear-gradient(135deg,#e0d8f0,#c8bae8,#e0d8f0)"></div>
<div class="card-shine"></div>
<div class="card-label">Pokémon TCG</div>
<div class="card-art">🔥</div>
<div class="card-grade">K8</div>
</div>
<div class="holo-card">
<div class="card-bg" style="background:linear-gradient(135deg,#0a2e1a,#0a3020,#0a2e1a)"></div>
<div class="card-shine"></div>
<div class="card-label">One Piece TCG</div>
<div class="card-art">⚓</div>
<div class="card-art">💥</div>
<div class="card-grade">KNÆK</div>
</div>
<div class="holo-card">
<div class="card-bg" style="background:linear-gradient(135deg,#2e1a0a,#3d1f0a,#2e1a0a)"></div>
<div class="card-bg" style="background:linear-gradient(135deg,#d0ebe0,#a8e0cc,#d0ebe0)"></div>
<div class="card-shine"></div>
<div class="card-label">One Piece TCG</div>
<div class="card-art">💧</div>
<div class="card-grade">VÅD</div>
</div>
<div class="holo-card">
<div class="card-bg" style="background:linear-gradient(135deg,#f0d0d0,#e8b8b8,#f0d0d0)"></div>
<div class="card-shine"></div>
<div class="card-label">Pokémon TCG</div>
<div class="card-art">💧</div>
<div class="card-grade">V10</div>
<div class="card-art">⚰️</div>
<div class="card-grade">RIP</div>
</div>
</div>
</section>
@@ -879,7 +1015,6 @@
<p class="section-lead">Fra en let bøjning til total, uigenkaldelig destruktion — her er hvad du kan forvente.</p>
<div class="scale">
<!-- PRIME KNÆK — særklasse øverst -->
<div class="grade-chip prime-grade">
<div class="prime-grade-star">💀</div>
<div class="prime-grade-info">
@@ -897,7 +1032,7 @@
<div class="grade-chip"><span class="grade-score">V10</span><span class="grade-label">Vandbad Premium</span></div>
<div class="grade-chip"><span class="grade-score">V7</span><span class="grade-label">Vandbad Standard</span></div>
<div class="grade-chip"><span class="grade-score">R5</span><span class="grade-label">Ridset m. Kærlighed</span></div>
<div class="grade-chip"><span class="grade-score">M1</span><span class="grade-label">Mild Berøring</span></div>
<div class="grade-chip"><span class="grade-score">M1</span><span class="grade-label">Mistet på lager</span></div>
</div>
</div>
</section>
@@ -1131,6 +1266,7 @@
<option>Premium Knæk (1.299 kr)</option>
<option>Deluxe Vandbad (2.999 kr)</option>
<option>PRIME KNÆK (9.999 kr)</option>
<option>🎲 Overrask mig — vi finder på noget</option>
</select>
</div>
<div class="form-group full">
@@ -1156,13 +1292,41 @@
<div id="toast">✓ Din forespørgsel er modtaget — vi knækker dem snart!</div>
<button id="scroll-top" onclick="window.scrollTo({top:0,behavior:'smooth'})" aria-label="Til toppen">↑</button>
<script>
function handleSubmit() {
const toast = document.getElementById('toast');
toast.classList.add('show');
setTimeout(() => toast.classList.remove('show'), 3500);
function toggleTheme() {
const body = document.body;
const btn = document.getElementById('themeBtn');
body.classList.toggle('dark-mode');
const isDark = body.classList.contains('dark-mode');
btn.textContent = isDark ? '🌙' : '☀️';
localStorage.setItem('primegrading-theme', isDark ? 'dark' : 'light');
}
// Load saved theme on page load
(function() {
const saved = localStorage.getItem('primegrading-theme');
const body = document.body;
const btn = document.getElementById('themeBtn');
if (saved === 'dark') {
body.classList.add('dark-mode');
btn.textContent = '🌙';
} else {
btn.textContent = '☀️';
}
})();
// Scroll-to-top visibility
window.addEventListener('scroll', function() {
const btn = document.getElementById('scroll-top');
if (window.scrollY > 400) {
btn.classList.add('visible');
} else {
btn.classList.remove('visible');
}
});
function toggleMenu() {
const btn = document.querySelector('.hamburger');
const menu = document.getElementById('nav-menu');
@@ -1176,6 +1340,12 @@
btn.classList.remove('active');
menu.classList.remove('open');
}
function handleSubmit() {
const toast = document.getElementById('toast');
toast.classList.add('show');
setTimeout(() => toast.classList.remove('show'), 3500);
}
</script>
</body>
</html>