Hugging Face's logo

Spaces:
Worldrex
/
akva
Running

App Files Community
Worldrex commited on
Commit
848e016
·
verified ·
1 Parent(s): 53b0bd1

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +717 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Akva
3
- emoji: 📉
4
  colorFrom: yellow
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: akva
3
+ emoji: 🐳
4
  colorFrom: yellow
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,717 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ Here's a complete responsive HTML file for an aquarium expert website with a ticket system, using TailwindCSS for styling:
2
+
3
+ ```html
4
+ <!DOCTYPE html>
5
+ <html lang="hu">
6
+ <head>
7
+ <meta charset="UTF-8">
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
+ <title>AquaExpert - Akvárium szakértő</title>
10
+ <script src="https://cdn.tailwindcss.com"></script>
11
+ <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
12
+ <style>
13
+ body {
14
+ font-family: 'Open Sans', sans-serif;
15
+ background-color: #f8fafc;
16
+ }
17
+ .underwater-bg {
18
+ background: linear-gradient(rgba(0, 153, 204, 0.8), rgba(51, 204, 204, 0.8)), url('https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
19
+ background-size: cover;
20
+ background-position: center;
21
+ }
22
+ .ticket-status-new {
23
+ background-color: #3b82f6;
24
+ }
25
+ .ticket-status-in-progress {
26
+ background-color: #f59e0b;
27
+ }
28
+ .ticket-status-resolved {
29
+ background-color: #10b981;
30
+ }
31
+ .gallery-item {
32
+ transition: transform 0.3s ease;
33
+ }
34
+ .gallery-item:hover {
35
+ transform: scale(1.03);
36
+ }
37
+ .lightbox {
38
+ display: none;
39
+ position: fixed;
40
+ top: 0;
41
+ left: 0;
42
+ width: 100%;
43
+ height: 100%;
44
+ background-color: rgba(0, 0, 0, 0.9);
45
+ z-index: 1000;
46
+ justify-content: center;
47
+ align-items: center;
48
+ }
49
+ .lightbox-content {
50
+ max-width: 90%;
51
+ max-height: 90%;
52
+ }
53
+ .lightbox-close {
54
+ position: absolute;
55
+ top: 20px;
56
+ right: 30px;
57
+ color: white;
58
+ font-size: 40px;
59
+ cursor: pointer;
60
+ }
61
+ </style>
62
+ </head>
63
+ <body>
64
+ <!-- Navigation -->
65
+ <nav class="bg-white shadow-lg">
66
+ <div class="max-w-6xl mx-auto px-4">
67
+ <div class="flex justify-between">
68
+ <div class="flex space-x-7">
69
+ <div>
70
+ <a href="#" class="flex items-center py-4 px-2">
71
+ <span class="font-semibold text-2xl text-[#0099CC]">AquaExpert</span>
72
+ </a>
73
+ </div>
74
+ </div>
75
+ <div class="hidden md:flex items-center space-x-1">
76
+ <a href="#home" class="py-4 px-2 text-[#0099CC] font-semibold border-b-4 border-[#0099CC]">Főoldal</a>
77
+ <a href="#about" class="py-4 px-2 text-gray-500 font-semibold hover:text-[#0099CC] transition duration-300">Rólam</a>
78
+ <a href="#services" class="py-4 px-2 text-gray-500 font-semibold hover:text-[#0099CC] transition duration-300">Szolgáltatások</a>
79
+ <a href="#portfolio" class="py-4 px-2 text-gray-500 font-semibold hover:text-[#0099CC] transition duration-300">Portfólió</a>
80
+ <a href="#blog" class="py-4 px-2 text-gray-500 font-semibold hover:text-[#0099CC] transition duration-300">Blog</a>
81
+ <a href="#contact" class="py-4 px-2 text-gray-500 font-semibold hover:text-[#0099CC] transition duration-300">Kapcsolat</a>
82
+ <a href="#tickets" class="py-4 px-2 bg-[#0099CC] text-white rounded-md hover:bg-[#33CCCC] transition duration-300">Ticket rendszer</a>
83
+ </div>
84
+ <div class="md:hidden flex items-center">
85
+ <button class="outline-none mobile-menu-button">
86
+ <svg class="w-6 h-6 text-gray-500" x-show="!showMenu" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
87
+ <path d="M4 6h16M4 12h16M4 18h16"></path>
88
+ </svg>
89
+ </button>
90
+ </div>
91
+ </div>
92
+ </div>
93
+ <div class="hidden mobile-menu">
94
+ <ul>
95
+ <li><a href="#home" class="block text-sm px-2 py-4 text-white bg-[#0099CC] font-semibold">Főoldal</a></li>
96
+ <li><a href="#about" class="block text-sm px-2 py-4 hover:bg-[#33CCCC] transition duration-300">Rólam</a></li>
97
+ <li><a href="#services" class="block text-sm px-2 py-4 hover:bg-[#33CCCC] transition duration-300">Szolgáltatások</a></li>
98
+ <li><a href="#portfolio" class="block text-sm px-2 py-4 hover:bg-[#33CCCC] transition duration-300">Portfólió</a></li>
99
+ <li><a href="#blog" class="block text-sm px-2 py-4 hover:bg-[#33CCCC] transition duration-300">Blog</a></li>
100
+ <li><a href="#contact" class="block text-sm px-2 py-4 hover:bg-[#33CCCC] transition duration-300">Kapcsolat</a></li>
101
+ <li><a href="#tickets" class="block text-sm px-2 py-4 bg-[#0099CC] text-white font-semibold">Ticket rendszer</a></li>
102
+ </ul>
103
+ </div>
104
+ </nav>
105
+
106
+ <!-- Hero Section -->
107
+ <section id="home" class="underwater-bg text-white py-20 md:py-32">
108
+ <div class="container mx-auto px-4 text-center">
109
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Egyedi akváriumok a Te otthonodba</h1>
110
+ <p class="text-xl md:text-2xl mb-8">Növények, halak és élő dekoráció - álmaid akváriuma valóra válik</p>
111
+ <div class="flex flex-col md:flex-row justify-center gap-4">
112
+ <a href="#portfolio" class="bg-[#66CC66] hover:bg-[#55BB55] text-white font-bold py-3 px-6 rounded-full transition duration-300">Tekintsd meg portfóliót</a>
113
+ <a href="#contact" class="bg-transparent hover:bg-white hover:text-[#0099CC] text-white font-bold py-3 px-6 border-2 border-white rounded-full transition duration-300">Kérj árajánlatot</a>
114
+ </div>
115
+ </div>
116
+ </section>
117
+
118
+ <!-- About Section -->
119
+ <section id="about" class="py-16 bg-white">
120
+ <div class="container mx-auto px-4">
121
+ <h2 class="text-3xl font-bold text-center text-[#0099CC] mb-12">Rólam</h2>
122
+ <div class="flex flex-col md:flex-row items-center gap-8">
123
+ <div class="md:w-1/2">
124
+ <img src="https://images.unsplash.com/photo-1560275619-4662e36fa65c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Akvárium szakértő" class="rounded-lg shadow-xl w-full">
125
+ </div>
126
+ <div class="md:w-1/2">
127
+ <h3 class="text-2xl font-semibold text-[#33CCCC] mb-4">Bemutatkozás</h3>
128
+ <p class="text-gray-700 mb-4">Több mint 15 éves tapasztalattal rendelkezem az akváriumok tervezésében, kivitelezésében és karbantartásában. Célom, hogy minden akvárium egy élő műalkotás legyen, amely harmonikusan illeszkedik az otthonodba.</p>
129
+ <p class="text-gray-700 mb-6">Az akváriumok nem csak dekorációk számomra, hanem komplex ökoszisztémák, amelyek gondos tervezést és folyamatos gondozást igényelnek. Minden projekt egyedi kihívás és lehetőség egyben.</p>
130
+ <div class="bg-[#f0f9ff] p-4 rounded-lg border-l-4 border-[#0099CC]">
131
+ <p class="italic text-gray-700">"Az akváriumok varázsa abban rejlik, hogy egy teljes ökoszisztémát hozunk létre a lakásunkba - egy kis darabka természetet, amely mindennap inspirál és nyugtat."</p>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </section>
137
+
138
+ <!-- Services Section -->
139
+ <section id="services" class="py-16 bg-gray-50">
140
+ <div class="container mx-auto px-4">
141
+ <h2 class="text-3xl font-bold text-center text-[#0099CC] mb-12">Szolgáltatások</h2>
142
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
143
+ <!-- Service 1 -->
144
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300">
145
+ <div class="text-[#33CCCC] text-4xl mb-4">
146
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
147
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
148
+ </svg>
149
+ </div>
150
+ <h3 class="text-xl font-semibold text-[#0099CC] mb-2">Akvárium telepítés</h3>
151
+ <p class="text-gray-600">Teljes körű akvárium telepítés, technikai háttérrel, szűrőrendszerrel és megfelelő világítással. Minden méretben és stílusban.</p>
152
+ <p class="mt-4 text-[#66CC66] font-medium">Ár: 50.000 Ft-tól</p>
153
+ </div>
154
+
155
+ <!-- Service 2 -->
156
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300">
157
+ <div class="text-[#33CCCC] text-4xl mb-4">
158
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
159
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
160
+ </svg>
161
+ </div>
162
+ <h3 class="text-xl font-semibold text-[#0099CC] mb-2">Növény és hal telepítés</h3>
163
+ <p class="text-gray-600">Professzionális növény- és haltelepítés, fajta kiválasztás, egészséges egyedekkel. Összehangolt közösségek tervezése.</p>
164
+ <p class="mt-4 text-[#66CC66] font-medium">Ár: 25.000 Ft-tól</p>
165
+ </div>
166
+
167
+ <!-- Service 3 -->
168
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300">
169
+ <div class="text-[#33CCCC] text-4xl mb-4">
170
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
171
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
172
+ </svg>
173
+ </div>
174
+ <h3 class="text-xl font-semibold text-[#0099CC] mb-2">Karbantartás és tisztítás</h3>
175
+ <p class="text-gray-600">Rendszeres karbantartás, vízcsere, szűrő tisztítás, növényvágás és algamentesítés. Havi/havonta kétszeri látogatások.</p>
176
+ <p class="mt-4 text-[#66CC66] font-medium">Ár: 15.000 Ft/látogatás</p>
177
+ </div>
178
+
179
+ <!-- Service 4 -->
180
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300">
181
+ <div class="text-[#33CCCC] text-4xl mb-4">
182
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
183
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
184
+ </svg>
185
+ </div>
186
+ <h3 class="text-xl font-semibold text-[#0099CC] mb-2">Egyedi design tervezés</h3>
187
+ <p class="text-gray-600">Egyedi akvárium design tervezés 3D modellezéssel, térkoncepcióval és anyag kiválasztással. Minden elképzelés megvalósítható.</p>
188
+ <p class="mt-4 text-[#66CC66] font-medium">Ár: 30.000 Ft-tól</p>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </section>
193
+
194
+ <!-- Portfolio Section -->
195
+ <section id="portfolio" class="py-16 bg-white">
196
+ <div class="container mx-auto px-4">
197
+ <h2 class="text-3xl font-bold text-center text-[#0099CC] mb-12">Portfólió</h2>
198
+ <div class="flex justify-center mb-8">
199
+ <div class="inline-flex rounded-md shadow-sm">
200
+ <button type="button" class="px-4 py-2 text-sm font-medium rounded-l-lg bg-[#0099CC] text-white focus:z-10 focus:ring-2 focus:ring-[#33CCCC]">
201
+ Mind
202
+ </button>
203
+ <button type="button" class="px-4 py-2 text-sm font-medium border-t border-b border-gray-200 hover:bg-gray-100 focus:z-10 focus:ring-2 focus:ring-[#33CCCC]">
204
+ Édesvízi
205
+ </button>
206
+ <button type="button" class="px-4 py-2 text-sm font-medium border-t border-b border-gray-200 hover:bg-gray-100 focus:z-10 focus:ring-2 focus:ring-[#33CCCC]">
207
+ Tengeri
208
+ </button>
209
+ <button type="button" class="px-4 py-2 text-sm font-medium border-t border-b border-gray-200 hover:bg-gray-100 focus:z-10 focus:ring-2 focus:ring-[#33CCCC]">
210
+ Növényes
211
+ </button>
212
+ <button type="button" class="px-4 py-2 text-sm font-medium rounded-r-md border border-gray-200 hover:bg-gray-100 focus:z-10 focus:ring-2 focus:ring-[#33CCCC]">
213
+ Dekor
214
+ </button>
215
+ </div>
216
+ </div>
217
+
218
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
219
+ <!-- Portfolio Item 1 -->
220
+ <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
221
+ <img src="https://images.unsplash.com/photo-1545165375-48a465e13704?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Modern lakóakvárium" class="w-full h-48 object-cover cursor-pointer" onclick="openLightbox(this.src, 'Modern lakóakvárium')">
222
+ <div class="p-4">
223
+ <h3 class="text-xl font-semibold text-[#0099CC] mb-2">Modern lakóakvárium</h3>
224
+ <p class="text-gray-600 mb-2"><span class="font-medium">Méret:</span> 120x50x60 cm</p>
225
+ <p class="text-gray-600 mb-2"><span class="font-medium">Típus:</span> Édesvízi, növényes</p>
226
+ <p class="text-gray-600"><span class="font-medium">Különlegesség:</span> Tropikus növények, neonhalak</p>
227
+ </div>
228
+ </div>
229
+
230
+ <!-- Portfolio Item 2 -->
231
+ <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
232
+ <img src="https://images.unsplash.com/photo-1455659817273-68adca43708a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Tengeri korall akvárium" class="w-full h-48 object-cover cursor-pointer" onclick="openLightbox(this.src, 'Tengeri korall akvárium')">
233
+ <div class="p-4">
234
+ <h3 class="text-xl font-semibold text-[#0099CC] mb-2">Tengeri korall akvárium</h3>
235
+ <p class="text-gray-600 mb-2"><span class="font-medium">Méret:</span> 200x60x70 cm</p>
236
+ <p class="text-gray-600 mb-2"><span class="font-medium">Típus:</span> Tengeri, korallos</p>
237
+ <p class="text-gray-600"><span class="font-medium">Különlegesség:</span> Élő korallok, tengeri csillagok</p>
238
+ </div>
239
+ </div>
240
+
241
+ <!-- Portfolio Item 3 -->
242
+ <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
243
+ <img src="https://images.unsplash.com/photo-1560275531-183b42d414e8?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Iwagumi stílusú akvárium" class="w-full h-48 object-cover cursor-pointer" onclick="openLightbox(this.src, 'Iwagumi stílusú akvárium')">
244
+ <div class="p-4">
245
+ <h3 class="text-xl font-semibold text-[#0099CC] mb-2">Iwagumi stílusú akvárium</h3>
246
+ <p class="text-gray-600 mb-2"><span class="font-medium">Méret:</span> 90x45x45 cm</p>
247
+ <p class="text-gray-600 mb-2"><span class="font-medium">Típus:</span> Édesvízi, minimalista</p>
248
+ <p class="text-gray-600"><span class="font-medium">Különlegesség:</span> Japán kavicsok, fűnövények</p>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Portfolio Item 4 -->
253
+ <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
254
+ <img src="https://images.unsplash.com/photo-1560275619-4662e36fa65c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Díszfalba épített akvárium" class="w-full h-48 object-cover cursor-pointer" onclick="openLightbox(this.src, 'Díszfalba épített akvárium')">
255
+ <div class="p-4">
256
+ <h3 class="text-xl font-semibold text-[#0099CC] mb-2">Díszfalba épített akvárium</h3>
257
+ <p class="text-gray-600 mb-2"><span class="font-medium">Méret:</span> 180x40x60 cm</p>
258
+ <p class="text-gray-600 mb-2"><span class="font-medium">Típus:</span> Édesvízi, dekoratív</p>
259
+ <p class="text-gray-600"><span class="font-medium">Különlegesség:</span> Beépített világítás, szivárványhalak</p>
260
+ </div>
261
+ </div>
262
+
263
+ <!-- Portfolio Item 5 -->
264
+ <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
265
+ <img src="https://images.unsplash.com/photo-1505118380757-91f5f5632de0?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Holland stílusú növényes akvárium" class="w-full h-48 object-cover cursor-pointer" onclick="openLightbox(this.src, 'Holland stílusú növényes akvárium')">
266
+ <div class="p-4">
267
+ <h3 class="text-xl font-semibold text-[#0099CC] mb-2">Holland stílusú növényes akvárium</h3>
268
+ <p class="text-gray-600 mb-2"><span class="font-medium">Méret:</span> 150x50x50 cm</p>
269
+ <p class="text-gray-600 mb-2"><span class="font-medium">Típus:</span> Édesvízi, növényes</p>
270
+ <p class="text-gray-600"><span class="font-medium">Különlegesség:</span> 20+ növényfajta, színes levelű fajok</p>
271
+ </div>
272
+ </div>
273
+
274
+ <!-- Portfolio Item 6 -->
275
+ <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
276
+ <img src="https://images.unsplash.com/photo-1559253664-ca249d4608c6?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Nano akvárium" class="w-full h-48 object-cover cursor-pointer" onclick="openLightbox(this.src, 'Nano akvárium')">
277
+ <div class="p-4">
278
+ <h3 class="text-xl font-semibold text-[#0099CC] mb-2">Nano akvárium</h3>
279
+ <p class="text-gray-600 mb-2"><span class="font-medium">Méret:</span> 30x30x30 cm</p>
280
+ <p class="text-gray-600 mb-2"><span class="font-medium">Típus:</span> Édesvízi, mini</p>
281
+ <p class="text-gray-600"><span class="font-medium">Különlegesség:</span> Törpe garnélák, moszaterdő</p>
282
+ </div>
283
+ </div>
284
+ </div>
285
+
286
+ <div class="text-center mt-10">
287
+ <a href="#contact" class="bg-[#0099CC] hover:bg-[#33CCCC] text-white font-bold py-3 px-6 rounded-full transition duration-300 inline-block">További referenciák</a>
288
+ </div>
289
+ </div>
290
+ </section>
291
+
292
+ <!-- Blog Section -->
293
+ <section id="blog" class="py-16 bg-gray-50">
294
+ <div class="container mx-auto px-4">
295
+ <h2 class="text-3xl font-bold text-center text-[#0099CC] mb-12">Blog & Tippek</h2>
296
+
297
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
298
+ <!-- Blog Post 1 -->
299
+ <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
300
+ <img src="https://images.unsplash.com/photo-1535591273668-578e31182c4f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Akvárium növények gondozása" class="w-full h-48 object-cover">
301
+ <div class="p-6">
302
+ <div class="flex items-center text-sm text-gray-500 mb-2">
303
+ <span>2023. május 15.</span>
304
+ <span class="mx-2">•</span>
305
+ <span>Növények</span>
306
+ </div>
307
+ <h3 class="text-xl font-semibold text-[#0099CC] mb-3">Akvárium növények gondozása - alapok</h3>
308
+ <p class="text-gray-600 mb-4">Az akvárium növények nem csak dekorációk, hanem létfontosságú elemei az akvárium ökoszisztémájának. Megfelelő gondozás nélkül azonban gyorsan elpusztulhatnak...</p>
309
+ <a href="#" class="text-[#33CCCC] font-medium hover:text-[#0099CC] transition duration-300">Tovább olvasom →</a>
310
+ </div>
311
+ </div>
312
+
313
+ <!-- Blog Post 2 -->
314
+ <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
315
+ <img src="https://images.unsplash.com/photo-1559253664-ca249d4608c6?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Nano akváriumok világa" class="w-full h-48 object-cover">
316
+ <div class="p-6">
317
+ <div class="flex items-center text-sm text-gray-500 mb-2">
318
+ <span>2023. április 28.</span>
319
+ <span class="mx-2">•</span>
320
+ <span>Technika</span>
321
+ </div>
322
+ <h3 class="text-xl font-semibold text-[#0099CC] mb-3">Nano akváriumok világa - kis terek, nagy lehetőségek</h3>
323
+ <p class="text-gray-600 mb-4">A nano akváriumok népszerűsége az utóbbi években robbanásszerűen nőtt. Kis méretük ellenére csodálatos mikrovilágot rejtenek, amely kevesebb helyet foglal...</p>
324
+ <a href="#" class="text-[#33CCCC] font-medium hover:text-[#0099CC] transition duration-300">Tovább olvasom →</a>
325
+ </div>
326
+ </div>
327
+
328
+ <!-- Blog Post 3 -->
329
+ <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
330
+ <img src="https://images.unsplash.com/photo-1455659817273-68adca43708a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Tengeri akvárium kihívásai" class="w-full h-48 object-cover">
331
+ <div class="p-6">
332
+ <div class="flex items-center text-sm text-gray-500 mb-2">
333
+ <span>2023. április 10.</span>
334
+ <span class="mx-2">•</span>
335
+ <span>Tengeri</span>
336
+ </div>
337
+ <h3 class="text-xl font-semibold text-[#0099CC] mb-3">Tengeri akvárium kihívásai - kezdőknek</h3>
338
+ <p class="text-gray-600 mb-4">A tengeri akváriumok lenyűgöző szépségűek, de jelentős szakértelemet és odafigyelést igényelnek. Mielőtt belevágnál egy tengeri akvárium projektbe, fontos...</p>
339
+ <a href="#" class="text-[#33CCCC] font-medium hover:text-[#0099CC] transition duration-300">Tovább olvasom →</a>
340
+ </div>
341
+ </div>
342
+ </div>
343
+
344
+ <div class="mt-12 bg-white p-6 rounded-lg shadow-md">
345
+ <h3 class="text-xl font-semibold text-[#0099CC] mb-4">Iratkozz fel hírlevelünkre!</h3>
346
+ <p class="text-gray-600 mb-4">Kapj értesítést az új blogbejegyzésekről, akvárium tippekről és exkluzív akcióinkról!</p>
347
+ <form class="flex flex-col md:flex-row gap-2">
348
+ <input type="email" placeholder="Email címed" class="flex-grow px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#33CCCC]">
349
+ <button type="submit" class="bg-[#0099CC] hover:bg-[#33CCCC] text-white font-medium py-2 px-6 rounded-md transition duration-300">Feliratkozom</button>
350
+ </form>
351
+ </div>
352
+ </div>
353
+ </section>
354
+
355
+ <!-- Contact Section -->
356
+ <section id="contact" class="py-16 bg-white">
357
+ <div class="container mx-auto px-4">
358
+ <h2 class="text-3xl font-bold text-center text-[#0099CC] mb-12">Kapcsolat</h2>
359
+
360
+ <div class="flex flex-col lg:flex-row gap-8">
361
+ <div class="lg:w-1/2">
362
+ <div class="bg-white p-6 rounded-lg shadow-md">
363
+ <h3 class="text-xl font-semibold text-[#0099CC] mb-4">Küldj üzenetet</h3>
364
+ <form>
365
+ <div class="mb-4">
366
+ <label for="name" class="block text-gray-700 mb-2">Név</label>
367
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#33CCCC]">
368
+ </div>
369
+ <div class="mb-4">
370
+ <label for="email" class="block text-gray-700 mb-2">Email</label>
371
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#33CCCC]">
372
+ </div>
373
+ <div class="mb-4">
374
+ <label for="subject" class="block text-gray-700 mb-2">Tárgy</label>
375
+ <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#33CCCC]">
376
+ </div>
377
+ <div class="mb-4">
378
+ <label for="message" class="block text-gray-700 mb-2">Üzenet</label>
379
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#33CCCC]"></textarea>
380
+ </div>
381
+ <button type="submit" class="bg-[#0099CC] hover:bg-[#33CCCC] text-white font-bold py-2 px-6 rounded-md transition duration-300">Üzenet küldése</button>
382
+ </form>
383
+ </div>
384
+ </div>
385
+
386
+ <div class="lg:w-1/2">
387
+ <div class="bg-white p-6 rounded-lg shadow-md mb-6">
388
+ <h3 class="text-xl font-semibold text-[#0099CC] mb-4">Elérhetőségek</h3>
389
+ <div class="space-y-4">
390
+ <div class="flex items-start">
391
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-[#33CCCC] mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
392
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
393
+ </svg>
394
+ <div>
395
+ <p class="text-gray-600">+36 30 123 4567</p>
396
+ <p class="text-sm text-gray-500">H-P: 9:00 - 17:00</p>
397
+ </div>
398
+ </div>
399
+ <div class="flex items-start">
400
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-[#33CCCC] mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
401
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
402
+ </svg>
403
+ <div>
404
+ <p class="text-gray-600">info@aquaexpert.hu</p>
405
+ <p class="text-sm text-gray-500">Válasz 24 órán belül</p>
406
+ </div>
407
+ </div>
408
+ <div class="flex items-start">
409
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-[#33CCCC] mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
410
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
411
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
412
+ </svg>
413
+ <div>
414
+ <p class="text-gray-600">1061 Budapest, Andrássy út 66.</p>
415
+ <p class="text-sm text-gray-500">Előzetes egyeztetés alapján</p>
416
+ </div>
417
+ </div>
418
+ </div>
419
+ </div>
420
+
421
+ <div class="bg-white p-6 rounded-lg shadow-md">
422
+ <h3 class="text-xl font-semibold text-[#0099CC] mb-4">Kövess minket</h3>
423
+ <div class="flex space-x-4">
424
+ <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-full transition duration-300">
425
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
426
+ <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/>
427
+ </svg>
428
+ </a>
429
+ <a href="#" class="bg-pink-600 hover:bg-pink-700 text-white p-3 rounded-full transition duration-300">
430
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
431
+ <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/>
432
+ </svg>
433
+ </a>
434
+ <a href="#" class="bg-red-600 hover:bg-red-700 text-white p-3 rounded-full transition duration-300">
435
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
436
+ <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/>
437
+ </svg>
438
+ </a>
439
+ <a href="#" class="bg-blue-400 hover:bg-blue-500 text-white p-3 rounded-full transition duration-300">
440
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
441
+ <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
442
+ </svg>
443
+ </a>
444
+ </div>
445
+ </div>
446
+ </div>
447
+ </div>
448
+
449
+ <div class="mt-8 rounded-lg overflow-hidden">
450
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2695.506404700698!2d19.0588213156272!3d47.50190297917795!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4741dc3f1fb27a39%3A0x1a7e0e9b4a5d8a0e!2sAndr%C3%A1ssy%20%C3%BAt%2066%2C%201061%20Budapest!5e0!3m2!1sen!2shu!4v1620000000000!5m2!1sen!2shu" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
451
+ </div>
452
+ </div>
453
+ </section>
454
+
455
+ <!-- Ticket System Section -->
456
+ <section id="tickets" class="py-16 bg-gray-50">
457
+ <div class="container mx-auto px-4">
458
+ <h2 class="text-3xl font-bold text-center text-[#0099CC] mb-12">Ügyfélszolgálat - Ticket rendszer</h2>
459
+
460
+ <div class="flex flex-col lg:flex-row gap-8">
461
+ <div class="lg:w-1/2">
462
+ <div class="bg-white p-6 rounded-lg shadow-md mb-6">
463
+ <h3 class="text-xl font-semibold text-[#0099CC] mb-4">Új ticket létrehozása</h3>
464
+ <form id="ticketForm">
465
+ <div class="mb-4">
466
+ <label for="ticket-name" class="block text-gray-700 mb-2">Név</label>
467
+ <input type="text" id="ticket-name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#33CCCC]" required>
468
+ </div>
469
+ <div class="mb-4">
470
+ <label for="ticket-email" class="block text-gray-700 mb-2">Email</label>
471
+ <input type="email" id="ticket-email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#33CCCC]" required>
472
+ </div>
473
+ <div class="mb-4">
474
+ <label for="ticket-subject" class="block text-gray-700 mb-2">Tárgy</label>
475
+ <input type="text" id="ticket-subject" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#33CCCC]" required>
476
+ </div>
477
+ <div class="mb-4">
478
+ <label for="ticket-category" class="block text-gray-700 mb-2">Kategória</label>
479
+ <select id="ticket-category" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#33CCCC]">
480
+ <option value="general">Általános kérdés</option>
481
+ <option value="technical">Technikai probléma</option>
482
+ <option value="service">Szolgáltatás</option>
483
+ <option value="other">Egyéb</option>
484
+ </select>
485
+ </div>
486
+ <div class="mb-4">
487
+ <label for="ticket-message" class="block text-gray-700 mb-2">Üzenet</label>
488
+ <textarea id="ticket-message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#33CCCC]" required></textarea>
489
+ </div>
490
+ <div class="mb-4">
491
+ <label for="ticket-file" class="block text-gray-700 mb-2">Fájl csatolása (opcionális)</label>
492
+ <input type="file" id="ticket-file" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#33CCCC]">
493
+ <p class="text-sm text-gray-500 mt-1">Max. 5MB méretű képet vagy dokumentumot tölthetsz fel</p>
494
+ </div>
495
+ <button type="submit" class="bg-[#0099CC] hover:bg-[#33CCCC] text-white font-bold py-2 px-6 rounded-md transition duration-300">Ticket küldése</button>
496
+ </form>
497
+ </div>
498
+ </div>
499
+
500
+ <div class="lg:w-1/2">
501
+ <div class="bg-white p-6 rounded-lg shadow-md">
502
+ <h3 class="text-xl font-semibold text-[#0099CC] mb-4">Ticket állapot lekérdezése</h3>
503
+ <form class="mb-6">
504
+ <div class="mb-4">
505
+ <label for="ticket-id" class="block text-gray-700 mb-2">Ticket azonosító</label>
506
+ <input type="text" id="ticket-id" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#33CCCC]" placeholder="TR-123456">
507
+ </div>
508
+ <div class="mb-4">
509
+ <label for="ticket-email-check" class="block text-gray-700 mb-2">Email cím</label>
510
+ <input type="email" id="ticket-email-check" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#33CCCC]">
511
+ </div>
512
+ <button type="button" onclick="checkTicketStatus()" class="bg-[#66CC66] hover:bg-[#55BB55] text-white font-bold py-2 px-6 rounded-md transition duration-300">Állapot lekérdezése</button>
513
+ </form>
514
+
515
+ <div id="ticketStatusResult" class="hidden">
516
+ <h4 class="text-lg font-medium text-gray-800 mb-2">Ticket információk</h4>
517
+ <div class="border border-gray-200 rounded-lg p-4">
518
+ <div class="flex justify-between items-center mb-2">
519
+ <span class="font-medium">Ticket azonosító:</span>
520
+ <span id="result-id" class="font-semibold">TR-123456</span>
521
+ </div>
522
+ <div class="flex justify-between items-center mb-2">
523
+ <span class="font-medium">Létrehozva:</span>
524
+ <span id="result-date">2023.05.15 14:30</span>
525
+ </div>
526
+ <div class="flex justify-between items-center mb-2">
527
+ <span class="font-medium">Tárgy:</span>
528
+ <span id="result-subject">Akvárium szivárgás problémája</span>
529
+ </div>
530
+ <div class="flex justify-between items-center mb-4">
531
+ <span class="font-medium">Állapot:</span>
532
+ <span id="result-status" class="px-3 py-1 rounded-full text-white ticket-status-new text-sm">Új</span>
533
+ </div>
534
+ <div>
535
+ <p class="font-medium mb-1">Üzenet:</p>
536
+ <p id="result-message" class="text-gray-700">Az akvárium alján kis szivárgást észleltem. Kérem segítsenek a probléma megoldásában.</p>
537
+ </div>
538
+ <div id="result-response" class="mt-4 bg-gray-50 p-3 rounded hidden">
539
+ <p class="font-medium mb-1">Válasz:</p>
540
+ <p class="text-gray-700">Köszönjük a bejelentést! Munkatársunk 24 órán belül felveszi Önnel a kapcsolatot a probléma megoldásához.</p>
541
+ </div>
542
+ </div>
543
+ </div>
544
+ </div>
545
+
546
+ <div class="bg-white p-6 rounded-lg shadow-md mt-6">
547
+ <h3 class="text-xl font-semibold text-[#0099CC] mb-4">Gyakran ismételt kérdések</h3>
548
+ <div class="space-y-4">
549
+ <div class="border-b border-gray-200 pb-4">
550
+ <button class="flex justify-between items-center w-full text-left font-medium text-gray-800" onclick="toggleFAQ(this)">
551
+ <span>Mennyi idő alatt válaszolnak a ticketre?</span>
552
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#33CCCC]" viewBox="0 0 20 20" fill="currentColor">
553
+ <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
554
+ </svg>
555
+ </button>
556
+ <div class="hidden mt-2 text-gray-600">
557
+ <p>Általában 24 órán belül válaszolunk minden ticketre. Hétvégén és ünnepnapokon a válaszidő elérheti a 48 órát is.</p>
558
+ </div>
559
+ </div>
560
+ <div class="border-b border-gray-200 pb-4">
561
+ <button class="flex justify-between items-center w-full text-left font-medium text-gray-800" onclick="toggleFAQ(this)">
562
+ <span>Milyen fájlokat csatolhatok a tickethez?</span>
563
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#33CCCC]" viewBox="0 0 20 20" fill="currentColor">
564
+ <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
565
+ </svg>
566
+ </button>
567
+ <div class="hidden mt-2 text-gray-600">
568
+ <p>JPG, PNG képeket (max. 5MB), valamint PDF, DOC, DOCX dokumentumokat (max. 5MB) csatolhat. Videókat és nagy méretű fájlokat kérjük a felhőtárhelyen osszon meg és küldje el a linket.</p>
569
+ </div>
570
+ </div>
571
+ <div class="border-b border-gray-200 pb-4">
572
+ <button class="flex justify-between items-center w-full text-left font-medium text-gray-800" onclick="toggleFAQ(this)">
573
+ <span>Hogyan frissíthetem a ticketemet?</span>
574
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#33CCCC]" viewBox="0 0 20 20" fill="currentColor">
575
+ <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
576
+ </svg>
577
+ </button>
578
+ <div class="hidden mt-2 text-gray-600">
579
+ <p>Az emailben kapott linken keresztül válaszolhat a ticketre, vagy használja az állapot lekérdező űrlapot, ahol lehetőség van új üzenet hozzáadására is.</p>
580
+ </div>
581
+ </div>
582
+ </div>
583
+ </div>
584
+ </div>
585
+ </div>
586
+ </div>
587
+ </section>
588
+
589
+ <!-- Lightbox -->
590
+ <div id="lightbox" class="lightbox">
591
+ <span class="lightbox-close" onclick="closeLightbox()">&times;</span>
592
+ <img id="lightbox-img" class="lightbox-content" src="" alt="">
593
+ <div id="lightbox-caption" class="text-white text-center mt-4 text-xl"></div>
594
+ </div>
595
+
596
+ <!-- Footer -->
597
+ <footer class="bg-[#0099CC] text-white py-8">
598
+ <div class="container mx-auto px-4">
599
+ <div class="flex flex-col md:flex-row justify-between">
600
+ <div class="mb-6 md:mb-0">
601
+ <h3 class="text-2xl font-bold mb-4">AquaExpert</h3>
602
+ <p class="max-w-xs">Az akváriumok szakértője - álmaid akváriuma valóra válik professzionális tervezéssel és kivitelezéssel.</p>
603
+ </div>
604
+ <div class="mb-6 md:mb-0">
605
+ <h4 class="text-lg font-semibold mb-4">Linkek</h4>
606
+ <ul class="space-y-2">
607
+ <li><a href="#home" class="hover:text-[#33CCCC] transition duration-300">Főoldal</a></li>
608
+ <li><a href="#about" class="hover:text-[#33CCCC] transition duration-300">Rólam</a></li>
609
+ <li><a href="#services" class="hover:text-[#33CCCC] transition duration-300">Szolgáltatások</a></li>
610
+ <li><a href="#portfolio" class="hover:text-[#33CCCC] transition duration-300">Portfólió</a></li>
611
+ <li><a href="#contact" class="hover:text-[#33CCCC] transition duration-300">Kapcsolat</a></li>
612
+ </ul>
613
+ </div>
614
+ <div class="mb-6 md:mb-0">
615
+ <h4 class="text-lg font-semibold mb-4">Kapcsolat</h4>
616
+ <ul class="space-y-2">
617
+ <li>+36 30 123 4567</li>
618
+ <li>info@aquaexpert.hu</li>
619
+ <li>1061 Budapest, Andrássy út 66.</li>
620
+ </ul>
621
+ </div>
622
+ <div>
623
+ <h4 class="text-lg font-semibold mb-4">Kövess minket</h4>
624
+ <div class="flex space-x-4">
625
+ <a href="#" class="hover:text-[#33CCCC] transition duration-300">
626
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
627
+ <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/>
628
+ </svg>
629
+ </a>
630
+ <a href="#" class="hover:text-[#33CCCC] transition duration-300">
631
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
632
+ <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/>
633
+ </svg>
634
+ </a>
635
+ <a href="#" class="hover:text-[#33CCCC] transition duration-300">
636
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
637
+ <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/>
638
+ </svg>
639
+ </a>
640
+ </div>
641
+ </div>
642
+ </div>
643
+ <div class="border-t border-[#33CCCC] mt-8 pt-6 text-center">
644
+ <p>&copy; 2023 AquaExpert - Minden jog fenntartva</p>
645
+ </div>
646
+ </div>
647
+ </footer>
648
+
649
+ <script>
650
+ // Mobile menu toggle
651
+ const mobileMenuButton = document.querySelector('.mobile-menu-button');
652
+ const mobileMenu = document.querySelector('.mobile-menu');
653
+
654
+ mobileMenuButton.addEventListener('click', () => {
655
+ mobileMenu.classList.toggle('hidden');
656
+ });
657
+
658
+ // Lightbox functionality
659
+ function openLightbox(src, caption) {
660
+ const lightbox = document.getElementById('lightbox');
661
+ const lightboxImg = document.getElementById('lightbox-img');
662
+ const lightboxCaption = document.getElementById('lightbox-caption');
663
+
664
+ lightboxImg.src = src;
665
+ lightboxCaption.textContent = caption;
666
+ lightbox.style.display = 'flex';
667
+ document.body.style.overflow = 'hidden';
668
+ }
669
+
670
+ function closeLightbox() {
671
+ const lightbox = document.getElementById('lightbox');
672
+ lightbox.style.display = 'none';
673
+ document.body.style.overflow = 'auto';
674
+ }
675
+
676
+ // Ticket form submission
677
+ document.getElementById('ticketForm').addEventListener('submit', function(e) {
678
+ e.preventDefault();
679
+
680
+ // Here you would normally send the form data to a server
681
+ // For demo purposes, we'll just show an alert
682
+ alert('Köszönjük a ticket létrehozását! Hamarosan felvesszük Önnel a kapcsolatot.');
683
+ this.reset();
684
+ });
685
+
686
+ // Check ticket status (demo)
687
+ function checkTicketStatus() {
688
+ const ticketId = document.getElementById('ticket-id').value;
689
+ const email = document.getElementById('ticket-email-check').value;
690
+
691
+ if (!ticketId || !email) {
692
+ alert('Kérjük, töltse ki mindkét mezőt!');
693
+ return;
694
+ }
695
+
696
+ // In a real app, this would be an API call to check the status
697
+ // For demo, we'll just show some sample data
698
+ document.getElementById('result-id').textContent = ticketId;
699
+ document.getElementById('result-date').textContent = '2023.05.15 14:30';
700
+ document.getElementById('result-subject').textContent = 'Akvárium szivárgás problémája';
701
+ document.getElementById('result-message').textContent = 'Az akvárium alján kis szivárgást észleltem. Kérem segítsenek a probléma megoldásában.';
702
+
703
+ // Random status for demo
704
+ const statuses = ['new', 'in-progress', 'resolved'];
705
+ const randomStatus = statuses[Math.floor(Math.random() * statuses.length)];
706
+
707
+ const statusElement = document.getElementById('result-status');
708
+ statusElement.className = 'px-3 py-1 rounded-full text-white text-sm';
709
+
710
+ if (randomStatus === 'new') {
711
+ statusElement.textContent = 'Új';
712
+ statusElement.classList.add('ticket-status-new');
713
+ } else if (randomStatus === 'in-progress') {
714
+ statusElement.textContent = 'Folyamatban';
715
+ statusElement.classList.add('ticket-status-in-progress');
716
+ } else {
717
+ statusElement.textContent = '