admin/felhom.eu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

D3 Part 2: index + kapcsolat on design system v2

Browse Source 
- Both pages: Google Fonts links + preconnects removed; ONE stylesheet
  (/assets/site.css?v=1); embedded <style> blocks deleted; body classes
  page-index/page-kapcsolat; canonical nav/footer (active marker per
  page; index's #szolgaltatasok href normalized to /#szolgaltatasok);
  all emoji -> sprite icons (feature tiles = .ico-tile 48px bg-2
  squares; headings .ico-lg; inline .ico) or plain text.
- kapcsolat: the contact form is functionally frozen — every field
  name/id, the submit JS, and the /api/contact endpoint byte-identical;
  only the visual layer changed (upload/paperclip + file-type icons as
  sprite refs in JS strings, the x button as &#215;, status-message
  emoji prefixes dropped).
- site.css: CSS-generated marks (content '✓'/'✗'/'⚠'/'★ …') replaced by
  currentColor mask-based marks / plain text (emoji-free stylesheet;
  gate now scans it too); .ico-tile is svg-as-tile (immune to container
  display rules), .ico-lg added.
- Gates: zero failures for the two converted pages; the remaining five
  convert in Part 3.
This commit is contained in:
authentik Default Admin
2026-07-02 22:06:27 +02:00
parent dd54e4cdf6
commit bed8675930
4 changed files with 83 additions and 1287 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/kapcsolat.html
+27 -677
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kapcsolat — Kérj személyre szabott ajánlatot otthoni szerveredhez | Felhom.eu</title>
<meta name="description" content="Írj nekünk és személyre szabott ajánlatot készítünk otthoni szerveredhez. Kérdésed van? Segítünk! Email: info@felhom.eu"> <link rel="preconnect" href="https://fonts.googleapis.com">
<meta name="description" content="Írj nekünk és személyre szabott ajánlatot készítünk otthoni szerveredhez. Kérdésed van? Segítünk! Email: info@felhom.eu">
<meta name="keywords" content="kapcsolat, ajánlatkérés, otthoni szerver ajánlat, Felhom elérhetőség">
<meta name="robots" content="index, follow">
@@ -22,662 +22,12 @@
<meta name="twitter:title" content="Kapcsolat — Felhom.eu">
<meta name="twitter:description" content="Kérdésed van? Írj nekünk: info@felhom.eu">
<meta name="twitter:image" content="https://felhom.eu/assets/og-image.png">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<!-- shared assets: bump ?v= together on any site.css/icons.svg change -->
<link rel="stylesheet" href="/assets/site.css?v=1">
<link rel="icon" type="image/png" href="/assets/logo_favicon_2.svg">
<script defer src="https://stats.felhom.eu/script.js" data-website-id="d419db57-5e1c-48df-bdb3-c29f25fb1661"></script>
<style>
/* ============================================
UNIFIED CSS - felhom.eu
============================================ */
/* --- CSS Variables --- */
:root {
--bg-primary: #0d1117;
--bg-secondary: #161b22;
--bg-card: #1c2128;
--text-primary: #e6edf3;
--text-secondary: #8b949e;
--text-muted: #6e7681;
--accent-blue: #0088cc;
--accent-light: #00aaff;
--accent-glow: rgba(0, 136, 204, 0.3);
--border-color: #30363d;
--success-green: #238636;
--warning-orange: #d29922;
--error-red: #da3633;
}
/* --- Reset & Base --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
min-height: 100vh;
}
body::before {
content: '';
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-image:
linear-gradient(rgba(0, 136, 204, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 136, 204, 0.03) 1px, transparent 1px);
background-size: 50px 50px;
pointer-events: none;
z-index: -1;
}
/* --- Layout --- */
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
/* --- Navigation --- */
nav {
position: fixed;
top: 0; left: 0; right: 0;
padding: 20px 0;
background: rgba(13, 17, 23, 0.9);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-color);
z-index: 200;
}
nav .container { display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo img { height: 40px; width: auto; }
.logo-text { font-size: 1.5rem; font-weight: 700; color: var(--accent-light); letter-spacing: -0.02em; }
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a {
color: var(--text-secondary);
text-decoration: none;
font-weight: 500;
font-size: 0.95rem;
transition: color 0.2s ease;
}
.nav-links a:hover,
.nav-links a.active { color: var(--accent-light); }
/* --- Typography with gradient span support --- */
h1 span, h2 span, h3 span, h4 span {
background: linear-gradient(135deg, var(--accent-light), var(--accent-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* --- Page Header --- */
.page-header { padding: 140px 0 60px; text-align: center; }
.page-header h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-bottom: 16px; letter-spacing: -0.02em; }
.page-header p { font-size: 1.1rem; color: var(--text-secondary); max-width: 700px; margin: 0 auto; }
/* --- Content Sections --- */
.content-section { padding: 80px 0; }
.content-section.alt-bg { background: var(--bg-secondary); }
/* --- Footer --- */
footer {
padding: 40px 0;
border-top: 1px solid var(--border-color);
text-align: center;
}
footer p { color: var(--text-secondary); font-size: 0.9rem; }
/* ============================================
CONTACT PAGE SPECIFIC
============================================ */
.contact-layout {
display: grid;
grid-template-columns: 1fr 380px;
gap: 60px;
align-items: start;
}
/* --- Form Styles --- */
.contact-form-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 40px;
}
.form-group {
margin-bottom: 24px;
}
.form-group label {
display: block;
font-size: 0.9rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
.form-group label .required {
color: var(--accent-light);
margin-left: 2px;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 14px 16px;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-primary);
font-family: inherit;
font-size: 0.95rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--accent-blue);
box-shadow: 0 0 0 3px var(--accent-glow);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: var(--text-muted);
}
.form-group input.error,
.form-group select.error,
.form-group textarea.error {
border-color: var(--error-red);
box-shadow: 0 0 0 3px rgba(218, 54, 51, 0.2);
}
.form-group .error-message {
color: var(--error-red);
font-size: 0.8rem;
margin-top: 6px;
display: none;
}
.form-group .error-message.visible {
display: block;
}
.form-group select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b949e' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
cursor: pointer;
}
.form-group select option {
background: var(--bg-primary);
color: var(--text-primary);
}
.form-group textarea {
resize: vertical;
min-height: 140px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
/* --- File Upload Zone --- */
.file-upload-zone {
border: 2px dashed var(--border-color);
border-radius: 12px;
padding: 32px 24px;
text-align: center;
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease;
position: relative;
}
.file-upload-zone:hover,
.file-upload-zone.dragover {
border-color: var(--accent-blue);
background: rgba(0, 136, 204, 0.05);
}
.file-upload-zone input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.upload-icon {
font-size: 2rem;
margin-bottom: 12px;
}
.upload-text {
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.6;
}
.upload-text strong {
color: var(--accent-light);
}
.upload-hint {
color: var(--text-muted);
font-size: 0.8rem;
margin-top: 8px;
}
/* --- File List --- */
.file-list {
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.file-item {
display: flex;
align-items: center;
gap: 12px;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 10px 14px;
font-size: 0.85rem;
}
.file-item .file-icon {
font-size: 1.2rem;
flex-shrink: 0;
}
.file-item .file-info {
flex: 1;
min-width: 0;
}
.file-item .file-name {
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.file-item .file-size {
color: var(--text-muted);
font-size: 0.75rem;
}
.file-item .file-remove {
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: 1.1rem;
padding: 4px;
border-radius: 4px;
transition: color 0.2s ease, background 0.2s ease;
flex-shrink: 0;
}
.file-item .file-remove:hover {
color: var(--error-red);
background: rgba(218, 54, 51, 0.1);
}
.file-total-size {
font-size: 0.8rem;
color: var(--text-muted);
margin-top: 8px;
text-align: right;
}
.file-total-size.warning {
color: var(--warning-orange);
}
.file-total-size.error-text {
color: var(--error-red);
}
/* --- Submit Button --- */
.submit-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-light));
color: white;
padding: 16px 32px;
border: none;
border-radius: 8px;
font-family: inherit;
font-weight: 600;
font-size: 1.05rem;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
box-shadow: 0 4px 20px var(--accent-glow);
}
.submit-button:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 8px 30px var(--accent-glow);
}
.submit-button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.submit-button .spinner {
display: none;
width: 18px;
height: 18px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.submit-button.loading .spinner { display: block; }
.submit-button.loading .btn-text { display: none; }
@keyframes spin {
to { transform: rotate(360deg); }
}
/* --- Success / Error States --- */
.form-status {
display: none;
padding: 16px 20px;
border-radius: 8px;
font-size: 0.9rem;
margin-bottom: 24px;
line-height: 1.5;
}
.form-status.success {
display: block;
background: rgba(35, 134, 54, 0.15);
border: 1px solid var(--success-green);
color: #3fb950;
}
.form-status.error-state {
display: block;
background: rgba(218, 54, 51, 0.15);
border: 1px solid var(--error-red);
color: #f85149;
}
/* --- Sidebar Info Cards --- */
.contact-sidebar {
display: flex;
flex-direction: column;
gap: 24px;
position: sticky;
top: 120px;
}
.sidebar-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 28px;
}
.sidebar-card h3 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 10px;
}
.sidebar-card h3 .icon {
font-size: 1.3rem;
}
.sidebar-card p {
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.7;
margin-bottom: 12px;
}
.sidebar-card p:last-child {
margin-bottom: 0;
}
.sidebar-card a {
color: var(--accent-light);
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
}
.sidebar-card a:hover {
color: var(--text-primary);
}
.sidebar-list {
list-style: none;
margin: 0;
}
.sidebar-list li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 0;
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.5;
}
.sidebar-list li .li-icon {
flex-shrink: 0;
margin-top: 2px;
}
.direct-email {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-primary);
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
transition: border-color 0.2s ease, background 0.2s ease;
}
.direct-email:hover {
border-color: var(--accent-blue);
background: rgba(0, 136, 204, 0.1);
}
/* --- GDPR Checkbox --- */
.checkbox-group {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 24px;
}
.checkbox-group input[type="checkbox"] {
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: var(--accent-blue);
flex-shrink: 0;
cursor: pointer;
}
.checkbox-group label {
font-size: 0.85rem;
color: var(--text-secondary);
line-height: 1.5;
cursor: pointer;
}
.checkbox-group label a {
color: var(--accent-light);
text-decoration: none;
}
.checkbox-group label a:hover {
text-decoration: underline;
}
/* --- Responsive --- */
@media (max-width: 900px) {
.contact-layout {
grid-template-columns: 1fr;
gap: 40px;
}
.contact-sidebar {
position: static;
order: -1;
}
}
@media (max-width: 600px) {
.page-header { padding: 120px 0 40px; }
.content-section { padding: 60px 0; }
.contact-form-card { padding: 24px; }
.form-row { grid-template-columns: 1fr; gap: 0; }
.sidebar-card { padding: 20px; }
}
/* --- Hamburger Button --- */
.hamburger {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 8px;
z-index: 200;
-webkit-tap-highlight-color: transparent;
}
.hamburger-box {
width: 28px;
height: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.hamburger-line {
display: block;
width: 100%;
height: 2px;
background: var(--text-primary);
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.3s ease;
transform-origin: center;
}
/* Hamburger → X animation */
.hamburger.is-active .hamburger-line:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
.hamburger.is-active .hamburger-line:nth-child(2) {
opacity: 0;
}
.hamburger.is-active .hamburger-line:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}
/* --- Mobile Menu Overlay --- */
.mobile-overlay {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 140;
opacity: 0;
transition: opacity 0.3s ease;
}
.mobile-overlay.is-visible {
opacity: 1;
}
/* --- Mobile Nav Styles --- */
@media (max-width: 900px) {
.hamburger {
display: block;
}
.nav-links {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
right: -280px;
width: 280px;
height: 100vh;
height: 100dvh;
background: var(--bg-secondary);
border-left: 1px solid var(--border-color);
padding: 80px 32px 32px;
gap: 0;
z-index: 150;
transition: right 0.3s ease;
overflow-y: auto;
}
.nav-links.is-open {
right: 0;
}
.nav-links li {
border-bottom: 1px solid var(--border-color);
}
.nav-links a {
display: block;
padding: 16px 0;
font-size: 1.05rem;
}
.mobile-overlay {
display: block;
pointer-events: none;
}
.mobile-overlay.is-visible {
pointer-events: auto;
}
/* Prevent body scroll when menu is open */
body.menu-open {
overflow: hidden;
}
}
</style>
</head>
<body>
<body class="page-kapcsolat">
<nav>
<div class="container">
<a href="/" class="logo">
@@ -755,10 +105,10 @@
</div>
<div class="form-group">
<label>Fájl csatolás <span style="color: var(--text-muted); font-weight: 400;">(opcionális)</span></label>
<label>Fájl csatolás <span style="color: var(--text-3); font-weight: 400;">(opcionális)</span></label>
<div class="file-upload-zone" id="dropZone">
<input type="file" id="fileInput" multiple accept=".pdf,.doc,.docx,.xls,.xlsx,.png,.jpg,.jpeg,.gif,.webp,.txt,.csv,.zip,.7z">
<div class="upload-icon">📎</div>
<div class="upload-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-paperclip"/></svg></div>
<div class="upload-text">
<strong>Kattints ide</strong> vagy húzd ide a fájlokat
</div>
@@ -786,27 +136,27 @@
<!-- Sidebar -->
<div class="contact-sidebar">
<div class="sidebar-card">
<h3><span class="icon">✉️</span> Közvetlen email</h3>
<h3><span class="icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-mail"/></svg></span> Közvetlen email</h3>
<p>Ha inkább emailben írnál:</p>
<a href="mailto:info@felhom.eu" class="direct-email">
📧 info@felhom.eu
<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-mail"/></svg> info@felhom.eu
</a>
</div>
<div class="sidebar-card">
<h3><span class="icon">⏱️</span> Válaszidő</h3>
<p>Általában <strong style="color: var(--accent-light);">24 órán belül</strong> válaszolunk munkanapokon.</p>
<h3><span class="icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-clock"/></svg></span> Válaszidő</h3>
<p>Általában <strong style="color: var(--blue-bright);">24 órán belül</strong> válaszolunk munkanapokon.</p>
<p>Sürgős támogatási kérdés esetén jelezd a tárgyban.</p>
</div>
<div class="sidebar-card">
<h3><span class="icon">💡</span> Miben segíthetünk?</h3>
<h3><span class="icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-lightbulb"/></svg></span> Miben segíthetünk?</h3>
<ul class="sidebar-list">
<li><span class="li-icon">🖥️</span> Szerver konfiguráció tanácsadás</li>
<li><span class="li-icon">📦</span> Alkalmazás telepítés és beállítás</li>
<li><span class="li-icon">🔒</span> Biztonsági mentés kialakítás</li>
<li><span class="li-icon">🌐</span> Távoli elérés beállítása</li>
<li><span class="li-icon">🛠️</span> Meglévő szerver karbantartás</li>
<li><span class="li-icon"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-monitor"/></svg></span> Szerver konfiguráció tanácsadás</li>
<li><span class="li-icon"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-package"/></svg></span> Alkalmazás telepítés és beállítás</li>
<li><span class="li-icon"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-lock"/></svg></span> Biztonsági mentés kialakítás</li>
<li><span class="li-icon"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-globe"/></svg></span> Távoli elérés beállítása</li>
<li><span class="li-icon"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-wrench"/></svg></span> Meglévő szerver karbantartás</li>
</ul>
</div>
</div>
@@ -919,11 +269,11 @@
function getFileIcon(name) {
const ext = name.split('.').pop().toLowerCase();
const icons = {
pdf: '📄', doc: '📝', docx: '📝', xls: '📊', xlsx: '📊',
png: '🖼️', jpg: '🖼️', jpeg: '🖼️', gif: '🖼️', webp: '🖼️',
txt: '📃', csv: '📊', zip: '📦', '7z': '📦',
pdf: '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-file-text"/></svg>', doc: '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-file-text"/></svg>', docx: '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-file-text"/></svg>', xls: '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-chart-column"/></svg>', xlsx: '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-chart-column"/></svg>',
png: '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-image"/></svg>', jpg: '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-image"/></svg>', jpeg: '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-image"/></svg>', gif: '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-image"/></svg>', webp: '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-image"/></svg>',
txt: '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-file-text"/></svg>', csv: '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-chart-column"/></svg>', zip: '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-package"/></svg>', '7z': '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-package"/></svg>',
};
return icons[ext] || '📎';
return icons[ext] || '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-paperclip"/></svg>';
}
function getTotalFileSize() {
@@ -989,7 +339,7 @@
<div class="file-name" title="${file.name}">${file.name}</div>
<div class="file-size">${formatFileSize(file.size)}</div>
</div>
<button type="button" class="file-remove" data-index="${i}" title="Eltávolítás">✕</button>
<button type="button" class="file-remove" data-index="${i}" title="Eltávolítás">&#215;</button>
</div>
`).join('');
@@ -1116,7 +466,7 @@
throw new Error(`Szerver hiba: ${response.status}`);
}
showStatus('✅ Üzeneted sikeresen elküldtük! Hamarosan válaszolunk.', 'success');
showStatus('Üzeneted sikeresen elküldtük! Hamarosan válaszolunk.', 'success');
form.reset();
attachedFiles = [];
renderFileList();
@@ -1135,14 +485,14 @@
window.location.href = mailtoUrl;
if (attachedFiles.length > 0) {
showStatus('⚠️ Az email kliens megnyílt. A csatolt fájlokat kézzel kell hozzáadnod az emailhez, mert a mailto: link nem támogatja a mellékleteket.', 'error-state');
showStatus('Az email kliens megnyílt. A csatolt fájlokat kézzel kell hozzáadnod az emailhez, mert a mailto: link nem támogatja a mellékleteket.', 'error-state');
} else {
showStatus('✅ Az email kliens megnyílt az üzeneteddel. Küld el az emailt a kapcsolatfelvételhez!', 'success');
showStatus('Az email kliens megnyílt az üzeneteddel. Küld el az emailt a kapcsolatfelvételhez!', 'success');
}
}
} catch (err) {
console.error('Form submission error:', err);
showStatus(`❌ Hiba történt a küldés során. Kérlek, próbáld újra vagy írj közvetlenül az info@felhom.eu címre.`, 'error-state');
showStatus(`Hiba történt a küldés során. Kérlek, próbáld újra vagy írj közvetlenül az info@felhom.eu címre.`, 'error-state');
} finally {
submitBtn.classList.remove('loading');
submitBtn.disabled = false;
@@ -1154,8 +504,8 @@
// ==============================================
// Uncomment to test form states:
// window.debugForm = {
// showSuccess: () => showStatus('✅ Üzeneted sikeresen elküldtük!', 'success'),
// showError: () => showStatus('❌ Hiba történt.', 'error-state'),
// showSuccess: () => showStatus('Üzeneted sikeresen elküldtük!', 'success'),
// showError: () => showStatus('Hiba történt.', 'error-state'),
// getFiles: () => console.log(attachedFiles),
// getFormData: () => {
// const fd = new FormData(form);