BladeSzaSza commited on
Commit
4b79bde
·
verified ·
1 Parent(s): 919bdcb

We are going to create a responsive landing page for CopyComp.sk with four main sections as in the markdown. We'll use Tailwind CSS for styling. We'll have a header and then a grid of four cards for the topics, plus detailed sub-pages for each service. Development Steps Setup HTML with Tailwind CSS via CDN Create a header with the title and welcome message Create a grid (grid-cols-1 sm:grid-cols-2 lg:grid-cols-4) for the four cards Each card will have: A heading (h3) with a link and the title An image that is also linked A description paragraph Create detailed sub-sections for each service Add contact forms and equipment specifications Include Modico technology details and equipment portfolio We'll try to make it modern and clean, improving upon their current basic design. Company Information Company Name: CopyComp Full Title: Kancelárske potreby, pečiatky a lacné tonery URL Source: http://www.copycomp.sk/ Language: Slovak Location: Bratislava, Slovensko Main Navigation Structure Domov (Home) Služby (Services) Pečiatky (Stamps) Zariadenia (Equipment) Kontakt (Contact) Header Design Background: Gradient background (blue theme) or clean white with colored accents Title: "CopyComp - Kancelárske potreby, pečiatky a lacné tonery" Welcome Message: "Vítajte na stránke CopyCompu. Vyberte si tému ktorá Vás zaujíma!" Navigation: Sticky navigation with smooth scrolling CTA Button: "Žiadosť o ponuku" (Request Quote) Four Main Service Cards 1. Kancelárska technika (Office Equipment) Card Design: Blue theme with office icon Heading: "Kancelárska technika" Description: "Ponúkame na predaj a na prenájom značkové tlačiarne a multifunkčné zariadenia, príslušenstvo do kancelárií. Ak nemáte peniaze na kúpu kvalitnej tlačiarne prenajmite naše stroje od 0,01 centov." Key Features: Brand-name printers and multifunction devices Sales and rental options Office accessories Unique Selling Point: Rental from 0.01 cents per page Sub-page Content: Equipment portfolio with detailed specifications Pricing calculator Full service included Free toner included Monthly fee from 0 Euro Contact form for quotes 2. Tonery (Toners & Cartridges) Card Design: Green theme with cartridge icon Heading: "Tonery" Description: "Potrebujete lacný toner alebo náplň do vašej tlačiarne? Ponúkame Vám kvalitné tonery a náplňe za výhodné ceny. Ponuka pre firmy, vyberte si u nás. Široký sortiment za nízke ceny. Posielame po celom Slovensku!" Key Features: Quality toners and cartridges at competitive prices Wide selection for various printer brands Special offers for businesses Slovakia-wide shipping Next-day delivery Sub-page Content: Current status: "Momentálne sa pripravuje webshop, ale dovtedy si môžete žiadať cenovú ponuku mailom" Email quote system "Ponúkame nové tonery do vašich tlačiarni za dobré ceny" "Tonery posielame zvyčajne deň po objednávke" Contact form with printer model selection 3. Servis a služby (IT Services) Card Design: Purple theme with computer icon Heading: "Servis a služby" Description: "Prvom rade ponúkame pozáručnú opravu notebookov na professionalnej úrovni. Medzi naše ďalšie služby sú správca počítačových sietí, výroba a google optimalizácia webových strán." Services Include: Primary: Professional post-warranty laptop repair Computer network administration Website development and creation Google SEO optimization Technical support Sub-page Content: Service portfolio Repair process explanation Network management services Web development examples SEO optimization packages Contact form for technical support 4. Modico pečiatky - razítka (Modico Stamps) Card Design: Red theme with stamp icon Heading: "Modico pečiatky - razítka" Description: "Novinka so svete pečiatok. Vyrobíme vám pečiatky do 5 minút od prijatia objednávky. Štočok s rozlíšením 1200dpi umožňuje tlačiť tenké čiary a drobné písmo. Vyrobíme Vám pečiatku aj s fotografiou alebo môžete mať perá s pečiatkou." Detailed Modico Technology Section Technology Overview Main Title: "M O D I C O – kvalitné pečiatky za dobrú cenu" Technology Description: "Na výrobu pečiatok MODICO sa využíva nová, revolučná flash-technológia, ktorá bola vyvinutá v Japonsku. Táto technológia funguje na princípe záblesku." Environmental Benefits "Výroba takýchto pečiatok je omnoho ekologickejšia než pečiatky vyrobené pomocou polyméru ktoré využívajú Colop a Trodat. Pečiatky MODICO ponúkajú vyžší štandard ako pečiatky na báze polyméru alebo gumy." Technical Advantages "S pečiatkami MODICO je možné tlačit najmenšie písmená, ponúkajú vyžšie detaily a odtiene farieb. Neobsahujú otáčací mechanizmus čím vzniká menšia šanca na poruchu. Dovolujú tlačiť fotografie." Manufacturing Process "Modico sa vyrába v špeciálnom prístroji, kde dôjde v priebehu niekoľkých sekúnd k osvieteniu špeciálnej fotorezistentnej mikroporéznej gumy s rozlíšením 1200 dpi." Key Specifications Resolution: 1200 DPI Production Time: 5 minutes from order Durability: 20,000 impressions with one ink pad Special Features: Photo reproduction, fine lines, small text Advantages: No rotating mechanism, modern appearance, sharp and uniform impression Stamp Types Štandardné pečiatky (Standard Stamps) Veľkoplošné pečiatky (Large Format Stamps) Vreckové a guľaté pečiatky (Pocket and Round Stamps) Online Ordering: "Cenník pečiatok a online objednávku nájdete tu" Equipment Portfolio Kyocera FS-1128 Full Title: "Kyocera FS-1128" Category: Multifunkčné zariadenie Technical Specifications General Parameters: Technology: Laserová technológia Kyocera ECOSYS, jednozložkový systém Print Speed: 28 strán A4/min Duplex Unit: Áno, 60–105 g/m2 Memory: Štandardne 256 MB (2x128MB DIMM), max. 768MB (256MB + 512MB DIMM) Resolution: 1200 x 1200 dpi pre tlač, 600 x 600 kopírovanie/skenovania First Copy: 6 sekúnd alebo menej Warm-up Time: Menej než 20 sekúnd Paper Feeding: Univerzálny zásobník na 250 listov, 60-120g/m2; Multifunkčný podávač na 50 listov 60-220g/m2 Maximum Input Capacity: 800 listov Noise Level: tlač 68,8 dB, pohotovostný režim 47 dB Power Consumption: tlač/kopíroavanie 494 W, pohotovostný režim 91 W, režim spánku 10W Dimensions: 494 x 410 x 366 (š x d x v) Copier Functions: Maximum Original Size: A4/Letter Continuous Copying: 1 – 999 kópií Features: Funkcia viacnásobného kopírovania, úprava hustoty tlače, rezervovanie úlohy, prioritná tlač, program, automatická duplexná kópia, rozdelená kópie, 1 na viac kópií, kontinuálne skenovanie, viac kópií na 1 list, úsporný režim toneru, triedenie, ID kódy (20 kódov), automatické prepínanie zásobníkov, zoom 25-400% po 1% Printer Functions: CPU: PowerPC 440 / 667 MHz Emulations: PCL 6 (5e/XL), KPDL 3 (kompatibilní s PostScript 3), Line Printer, IBM Proprinter X24E, Epson LQ-850, Diablo 630, PRESCRIBE, PDF 1.5, XPS Print Functions: PDF priama tlač, SIPP tlač, e-mail tlač – úsporný režim toneru, vyhladenie, ECO pamäť, internet tlač, e-mail tlač, webové stránka, WSD tlač Interface: USB 2.0 (Hi-Speed), Fast Ethernet 10/100Base-TX Scanner Functions: Features: Skenovanie do e-mailu, skenovanie na FTP, skenovanieí do SMB, skenovanie na USB Flash disk, TWAIN, WSD Scanning Speed: Čiernobialo: 28 orig./min. (300 dpi, A4) farebne: 14 orig./min. (300 dpi, A4) Original Types: Text, foto, text + foto, OCR Resolution: 600, 400, 300, 200 dpi (256 odtieňov šedej) Output Format: TIFF, PDF, JPEG, XPS Fax Functions: Compatibility: ITU-T Super G3 Memory Reception: 100 strán Features: Sieťové faxovanie, duplexný príjem Kyocera KM-3035 Full Title: "Kyocera KM-3035" Category: Vysokovýkonné zariadenie Technical Specifications General Parameters: Technology: Laserová technológia Kyocera Mita Print Speed: 30 strán A4/min, 20 strán A3/min Duplex Unit: Áno, 60–105 g/m2 Memory: Štandardne 64 MB RAM, max. 576 MB RAM, optional 20 GB HDD Resolution: fast 1200 dpi pre tlač, 600 x 600 dpi kopírovanie/skenovania First Copy: 3.9 sekúnd alebo menej Warm-up Time: Menej než 25 sekúnd Paper Feeding: Univerzálny zásobník na 2×500 listov, 60-120g/m2; Multifunkčný podávač na 200 listov 60-220g/m2; Možnosť pridávania papierov počas tlače Noise Level: tlač 68,8 dB, pohotovostný režim 47 dB Power Consumption: tlač/kopíroavanie 670 W, pohotovostný režim 175 W, režim spánku 1 W Dimensions: 585 x 646 x 745 (š x d x v) Copier Functions: Maximum Original Size: A3/Legal Continuous Copying: 1 – 999 kópií Features: Funkcia viacnásobného kopírovania, automatický výber velkosti papiera, úprava hustoty tlače, rezervovanie úlohy, prioritná tlač, program, automatická duplexná kópia, rozdelená kópie, 1 na viac kópií, kontinuálne skenovanie, viac kópií na 1 list, úsporný režim toneru, triedenie, ID kódy (20 kódov), automatické prepínanie zásobníkov, zoom 25-400% po 1% Printer Functions: CPU: PowerPC 750 / 500 MHz Emulations: PCL 6 (5e/XL), KPDL 3 (kompatibilní s PostScript 3), Line Printer, IBM Proprinter X24E, Epson LQ-850, Diablo 630, PRESCRIBE, PDF 1.5, XPS Print Functions: PDF priama tlač, SIPP tlač, e-mail tlač – úsporný režim toneru, vyhladenie, ECO pamäť, internet tlač, e-mail tlač, WSD tlač Interface: High Speed USB 2.0, parallel IEEE1284, Fast Ethernet 10/100Base-TX Scanner Functions: Features: Skenovanie do e-mailu, skenovanie na FTP, skenovanie do SMB, skenovanie na USB Flash disk, TWAIN, WSD, skenovanie na MAC Scanning Speed: do 50 strán/min Original Types: Text, foto, text + foto, OCR Resolution: 600, 400, 300, 200 dpi Output Format: TIFF, PDF, JPEG, XPS Fax Functions: Compatibility: ITU-T Super G3 Memory Reception: 100 strán Features: Sieťové faxovanie, duplexný príjem Pricing Structure for Equipment Universal Pricing Model What's Included: Full servis zadarmo (Full service free) Toner zadarmo (Toner free) Mesačný poplatok: od 0 Euro (Monthly fee: from 0 Euro) Main Pricing: Poplatok za tlač 0,01 Euro za stranu (0.01 Euro per page) Call to Action: "Žiadajte ponuku cez email!" Contact Information Contact Page Content Welcome Message: "Načítáva sa... Výtajte na webovej stránke CopyCompu. Na dole uvedených adresách sa môžete na nás kontaktovať osobne a budeme sa snažiť vyhovieť vaším požiadavkám." Contact Details Email: info@copycomp.sk Location: Bratislava, Slovensko Business Hours: Po-Pia: 8:00 - 17:00 So: 9:00 - 12:00 Contact Form Fields Meno a priezvisko (Name and Surname) Email Telefón (Phone) Služba (Service) - Dropdown with options: Prenájom tlačiarní (Printer Rental) Tonery a náplne (Toners and Cartridges) Modico pečiatky (Modico Stamps) IT služby (IT Services) Správa (Message) - Textarea for requirements Design Guidelines Card Styling Shadow: Modern drop shadow Corners: Rounded corners Hover Effects: Subtle hover animations Icons: Modern SVG icons for each service Colors: Kancelárska technika: Blue theme Tonery: Green theme Servis a služby: Purple theme Modico pečiatky: Red theme Layout Structure Container: Centered content with max-width Grid: Responsive grid (grid-cols-1 sm:grid-cols-2 lg:grid-cols-4) Navigation: Sticky header with smooth scrolling Mobile: Fully responsive design Content Sections to Include Hero Section with welcome message Four Main Service Cards Detailed Modico Technology Section Equipment Portfolio with specifications Contact Section with form Footer with additional links Additional Features Quote Request Forms for each service Equipment Comparison Table Service Benefits Highlights Customer Testimonials Section (placeholder) FAQ Section for common questions Slovakia Map showing service coverage Technical Requirements Framework: Tailwind CSS via CDN Responsive: Mobile-first design Performance: Optimized loading SEO: Proper meta tags and structure Accessibility: WCAG compliant elements Key Messages to Emphasize 0.01 Euro per page rental pricing Free service and toner included 5-minute stamp production Slovakia-wide delivery Professional IT services Quality equipment from Kyocera Eco-friendly Modico technology This comprehensive prompt includes all the detailed information needed to create a complete, professional website for CopyComp that accurately represents their services, equipment, and pricing structure. - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +578 -18
index.html CHANGED
@@ -1,20 +1,580 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>My app</title>
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <meta charset="utf-8">
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- </head>
9
- <body class="flex justify-center items-center h-screen overflow-hidden bg-white font-sans text-center px-6">
10
- <div class="w-full">
11
- <span class="text-xs rounded-full mb-2 inline-block px-2 py-1 border border-amber-500/15 bg-amber-500/15 text-amber-500">🔥 New version dropped!</span>
12
- <h1 class="text-4xl lg:text-6xl font-bold font-sans">
13
- <span class="text-2xl lg:text-4xl text-gray-400 block font-medium">I'm ready to work,</span>
14
- Ask me anything.
15
- </h1>
16
- </div>
17
- <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="absolute bottom-8 left-0 w-[100px] transform rotate-[30deg]" />
18
- <script></script>
19
- <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=BladeSzaSza/copycomp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
20
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
+ <html lang="sk">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CopyComp - Kancelárske potreby, pečiatky a lacné tonery</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .hero-gradient {
11
+ background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
12
+ }
13
+ .card-hover {
14
+ transition: all 0.3s ease;
15
+ }
16
+ .card-hover:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
19
+ }
20
+ .sticky-nav {
21
+ position: sticky;
22
+ top: 0;
23
+ z-index: 50;
24
+ }
25
+ .service-icon {
26
+ font-size: 2.5rem;
27
+ margin-bottom: 1rem;
28
+ }
29
+ </style>
30
+ </head>
31
+ <body class="font-sans bg-gray-50">
32
+ <!-- Header with Navigation -->
33
+ <header class="sticky-nav bg-white shadow-md">
34
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
35
+ <div class="flex items-center">
36
+ <img src="https://via.placeholder.com/50" alt="CopyComp Logo" class="h-10 mr-3">
37
+ <h1 class="text-xl font-bold text-blue-800">CopyComp</h1>
38
+ </div>
39
+ <nav class="hidden md:flex space-x-6">
40
+ <a href="#home" class="text-blue-600 hover:text-blue-800 font-medium">Domov</a>
41
+ <a href="#services" class="text-gray-600 hover:text-blue-800 font-medium">Služby</a>
42
+ <a href="#stamps" class="text-gray-600 hover:text-blue-800 font-medium">Pečiatky</a>
43
+ <a href="#equipment" class="text-gray-600 hover:text-blue-800 font-medium">Zariadenia</a>
44
+ <a href="#contact" class="text-gray-600 hover:text-blue-800 font-medium">Kontakt</a>
45
+ </nav>
46
+ <button class="md:hidden text-gray-600">
47
+ <i class="fas fa-bars text-2xl"></i>
48
+ </button>
49
+ </div>
50
+ </header>
51
+
52
+ <!-- Hero Section -->
53
+ <section id="home" class="hero-gradient text-white py-16 md:py-24">
54
+ <div class="container mx-auto px-4 text-center">
55
+ <h1 class="text-3xl md:text-5xl font-bold mb-6">CopyComp - Kancelárske potreby, pečiatky a lacné tonery</h1>
56
+ <p class="text-xl md:text-2xl mb-8">Vítajte na stránke CopyCompu. Vyberte si tému ktorá Vás zaujíma!</p>
57
+ <a href="#contact" class="bg-white text-blue-600 font-bold py-3 px-8 rounded-full hover:bg-blue-50 transition duration-300 inline-block">
58
+ Žiadosť o ponuku
59
+ </a>
60
+ </div>
61
+ </section>
62
+
63
+ <!-- Main Services Grid -->
64
+ <section id="services" class="py-16 bg-white">
65
+ <div class="container mx-auto px-4">
66
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Naše služby</h2>
67
+
68
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
69
+ <!-- Office Equipment Card -->
70
+ <div class="bg-blue-50 rounded-xl p-6 shadow-lg card-hover border-t-4 border-blue-500">
71
+ <div class="text-center">
72
+ <i class="fas fa-print service-icon text-blue-600"></i>
73
+ <h3 class="text-xl font-bold mb-3 text-blue-800">Kancelárska technika</h3>
74
+ </div>
75
+ <p class="text-gray-700 mb-4">
76
+ Ponúkame na predaj a na prenájom značkové tlačiarne a multifunkčné zariadenia, príslušenstvo do kancelárií.
77
+ Ak nemáte peniaze na kúpu kvalitnej tlačiarne prenajmite naše stroje od 0,01 centov.
78
+ </p>
79
+ <div class="mb-4">
80
+ <h4 class="font-semibold text-blue-700">Výhody:</h4>
81
+ <ul class="list-disc list-inside text-sm text-gray-600">
82
+ <li>Značkové tlačiarne a MF zariadenia</li>
83
+ <li>Predaj aj prenájom</li>
84
+ <li>Prenájom od 0,01€ za stranu</li>
85
+ <li>Kompletný servis zadarmo</li>
86
+ </ul>
87
+ </div>
88
+ <a href="#equipment" class="text-blue-600 font-medium hover:text-blue-800 inline-flex items-center">
89
+ Viac informácií <i class="fas fa-arrow-right ml-2"></i>
90
+ </a>
91
+ </div>
92
+
93
+ <!-- Toners Card -->
94
+ <div class="bg-green-50 rounded-xl p-6 shadow-lg card-hover border-t-4 border-green-500">
95
+ <div class="text-center">
96
+ <i class="fas fa-tint service-icon text-green-600"></i>
97
+ <h3 class="text-xl font-bold mb-3 text-green-800">Tonery</h3>
98
+ </div>
99
+ <p class="text-gray-700 mb-4">
100
+ Potrebujete lacný toner alebo náplň do vašej tlačiarne? Ponúkame Vám kvalitné tonery a náplňe za výhodné ceny.
101
+ Ponuka pre firmy, vyberte si u nás. Široký sortiment za nízke ceny. Posielame po celom Slovensku!
102
+ </p>
103
+ <div class="mb-4">
104
+ <h4 class="font-semibold text-green-700">Výhody:</h4>
105
+ <ul class="list-disc list-inside text-sm text-gray-600">
106
+ <li>Kvalitné tonery za výhodné ceny</li>
107
+ <li>Široký sortiment pre všetky značky</li>
108
+ <li>Doručenie po celom Slovensku</li>
109
+ <li>Expresné dodanie</li>
110
+ </ul>
111
+ </div>
112
+ <a href="#toners" class="text-green-600 font-medium hover:text-green-800 inline-flex items-center">
113
+ Viac informácií <i class="fas fa-arrow-right ml-2"></i>
114
+ </a>
115
+ </div>
116
+
117
+ <!-- IT Services Card -->
118
+ <div class="bg-purple-50 rounded-xl p-6 shadow-lg card-hover border-t-4 border-purple-500">
119
+ <div class="text-center">
120
+ <i class="fas fa-laptop service-icon text-purple-600"></i>
121
+ <h3 class="text-xl font-bold mb-3 text-purple-800">Servis a služby</h3>
122
+ </div>
123
+ <p class="text-gray-700 mb-4">
124
+ Prvom rade ponúkame pozáručnú opravu notebookov na professionalnej úrovni. Medzi naše ďalšie služby sú správca
125
+ počítačových sietí, výroba a google optimalizácia webových strán.
126
+ </p>
127
+ <div class="mb-4">
128
+ <h4 class="font-semibold text-purple-700">Služby:</h4>
129
+ <ul class="list-disc list-inside text-sm text-gray-600">
130
+ <li>Pozáručné opravy notebookov</li>
131
+ <li>Správa počítačových sietí</li>
132
+ <li>Tvorba webových stránok</li>
133
+ <li>SEO optimalizácia</li>
134
+ </ul>
135
+ </div>
136
+ <a href="#it-services" class="text-purple-600 font-medium hover:text-purple-800 inline-flex items-center">
137
+ Viac informácií <i class="fas fa-arrow-right ml-2"></i>
138
+ </a>
139
+ </div>
140
+
141
+ <!-- Modico Stamps Card -->
142
+ <div class="bg-red-50 rounded-xl p-6 shadow-lg card-hover border-t-4 border-red-500">
143
+ <div class="text-center">
144
+ <i class="fas fa-stamp service-icon text-red-600"></i>
145
+ <h3 class="text-xl font-bold mb-3 text-red-800">Modico pečiatky</h3>
146
+ </div>
147
+ <p class="text-gray-700 mb-4">
148
+ Novinka so svete pečiatok. Vyrobíme vám pečiatky do 5 minút od prijatia objednávky. Štočok s rozlíšením 1200dpi
149
+ umožňuje tlačiť tenké čiary a drobné písmo. Vyrobíme Vám pečiatku aj s fotografiou.
150
+ </p>
151
+ <div class="mb-4">
152
+ <h4 class="font-semibold text-red-700">Výhody:</h4>
153
+ <ul class="list-disc list-inside text-sm text-gray-600">
154
+ <li>Výroba do 5 minút</li>
155
+ <li>Vysoké rozlíšenie 1200dpi</li>
156
+ <li>Možnosť fotopečiatok</li>
157
+ <li>Ekologická výroba</li>
158
+ </ul>
159
+ </div>
160
+ <a href="#stamps" class="text-red-600 font-medium hover:text-red-800 inline-flex items-center">
161
+ Viac informácií <i class="fas fa-arrow-right ml-2"></i>
162
+ </a>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </section>
167
+
168
+ <!-- Modico Stamps Section -->
169
+ <section id="stamps" class="py-16 bg-gray-50">
170
+ <div class="container mx-auto px-4">
171
+ <div class="text-center mb-12">
172
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">M O D I C O – kvalitné pečiatky za dobrú cenu</h2>
173
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
174
+ Revolučná technológia výroby pečiatok s vysokým rozlíšením a rýchlou dodávkou
175
+ </p>
176
+ </div>
177
+
178
+ <div class="grid md:grid-cols-2 gap-8 items-center">
179
+ <div>
180
+ <img src="https://via.placeholder.com/600x400" alt="Modico pečiatky" class="rounded-lg shadow-xl w-full">
181
+ </div>
182
+ <div>
183
+ <h3 class="text-2xl font-bold text-red-600 mb-4">Technológia MODICO</h3>
184
+ <p class="text-gray-700 mb-4">
185
+ Na výrobu pečiatok MODICO sa využíva nová, revolučná flash-technológia, ktorá bola vyvinutá v Japonsku.
186
+ Táto technológia funguje na princípe záblesku.
187
+ </p>
188
+ <p class="text-gray-700 mb-4">
189
+ Výroba takýchto pečiatok je omnoho ekologickejšia než pečiatky vyrobené pomocou polyméru ktoré využívajú
190
+ Colop a Trodat. Pečiatky MODICO ponúkajú vyžší štandard ako pečiatky na báze polyméru alebo gumy.
191
+ </p>
192
+ <p class="text-gray-700 mb-6">
193
+ S pečiatkami MODICO je možné tlačiť najmenšie písmená, ponúkajú vyžšie detaily a odtiene farieb. Neobsahujú
194
+ otáčací mechanizmus čím vzniká menšia šanca na poruchu. Dovolujú tlačiť fotografie.
195
+ </p>
196
+ <a href="#contact" class="bg-red-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-red-700 transition duration-300 inline-block">
197
+ Objednať pečiatku
198
+ </a>
199
+ </div>
200
+ </div>
201
+
202
+ <div class="mt-16 grid md:grid-cols-3 gap-8">
203
+ <div class="bg-white p-6 rounded-lg shadow-md">
204
+ <div class="text-red-600 mb-4">
205
+ <i class="fas fa-bolt text-3xl"></i>
206
+ </div>
207
+ <h4 class="font-bold text-lg mb-2">Rýchla výroba</h4>
208
+ <p class="text-gray-600">Pečiatku vyrobíme do 5 minút od prijatia objednávky. Ideálne pre urgentné prípady.</p>
209
+ </div>
210
+ <div class="bg-white p-6 rounded-lg shadow-md">
211
+ <div class="text-red-600 mb-4">
212
+ <i class="fas fa-expand text-3xl"></i>
213
+ </div>
214
+ <h4 class="font-bold text-lg mb-2">Vysoké rozlíšenie</h4>
215
+ <p class="text-gray-600">Štočok s rozlíšením 1200dpi umožňuje tlačiť tenké čiary a drobné písmo.</p>
216
+ </div>
217
+ <div class="bg-white p-6 rounded-lg shadow-md">
218
+ <div class="text-red-600 mb-4">
219
+ <i class="fas fa-camera text-3xl"></i>
220
+ </div>
221
+ <h4 class="font-bold text-lg mb-2">Fotopečiatky</h4>
222
+ <p class="text-gray-600">Vyrobíme Vám pečiatku aj s fotografiou alebo môžete mať perá s pečiatkou.</p>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </section>
227
+
228
+ <!-- Equipment Section -->
229
+ <section id="equipment" class="py-16 bg-white">
230
+ <div class="container mx-auto px-4">
231
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Ponuka zariadení</h2>
232
+
233
+ <div class="mb-12 bg-blue-50 rounded-xl p-8 text-center">
234
+ <h3 class="text-2xl font-bold text-blue-800 mb-4">Výhodný prenájom tlačiarní</h3>
235
+ <p class="text-lg text-gray-700 mb-4">
236
+ Mesačný poplatok od 0€ s poplatkom za tlač len 0,01€ za stranu. Kompletný servis a tonery sú v cene!
237
+ </p>
238
+ <a href="#contact" class="bg-blue-600 text-white font-bold py-3 px-8 rounded-full hover:bg-blue-700 transition duration-300 inline-block">
239
+ Žiadosť o ponuku
240
+ </a>
241
+ </div>
242
+
243
+ <div class="grid md:grid-cols-2 gap-8">
244
+ <!-- Kyocera FS-1128 -->
245
+ <div class="border border-gray-200 rounded-lg overflow-hidden shadow-lg">
246
+ <div class="bg-gray-100 p-4">
247
+ <h3 class="text-xl font-bold text-gray-800">Kyocera FS-1128</h3>
248
+ <p class="text-gray-600">Multifunkčné zariadenie</p>
249
+ </div>
250
+ <div class="p-6">
251
+ <img src="https://via.placeholder.com/400x300" alt="Kyocera FS-1128" class="w-full mb-4 rounded">
252
+ <div class="mb-4">
253
+ <h4 class="font-semibold text-blue-700 mb-2">Technické parametre:</h4>
254
+ <ul class="space-y-2 text-sm text-gray-700">
255
+ <li><span class="font-medium">Technológia:</span> Laserová technológia Kyocera ECOSYS</li>
256
+ <li><span class="font-medium">Rýchlosť:</span> 28 strán A4/min</li>
257
+ <li><span class="font-medium">Duplex:</span> Áno</li>
258
+ <li><span class="font-medium">Rozlíšenie:</span> 1200 x 1200 dpi</li>
259
+ <li><span class="font-medium">Pamäť:</span> 256 MB (max. 768MB)</li>
260
+ <li><span class="font-medium">Rozmery:</span> 494 x 410 x 366 mm</li>
261
+ </ul>
262
+ </div>
263
+ <div class="flex justify-between items-center">
264
+ <span class="text-blue-600 font-bold">0,01€/strana</span>
265
+ <a href="#contact" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 text-sm">
266
+ Objednať
267
+ </a>
268
+ </div>
269
+ </div>
270
+ </div>
271
+
272
+ <!-- Kyocera KM-3035 -->
273
+ <div class="border border-gray-200 rounded-lg overflow-hidden shadow-lg">
274
+ <div class="bg-gray-100 p-4">
275
+ <h3 class="text-xl font-bold text-gray-800">Kyocera KM-3035</h3>
276
+ <p class="text-gray-600">Vysokovýkonné zariadenie</p>
277
+ </div>
278
+ <div class="p-6">
279
+ <img src="https://via.placeholder.com/400x300" alt="Kyocera KM-3035" class="w-full mb-4 rounded">
280
+ <div class="mb-4">
281
+ <h4 class="font-semibold text-blue-700 mb-2">Technické parametre:</h4>
282
+ <ul class="space-y-2 text-sm text-gray-700">
283
+ <li><span class="font-medium">Technológia:</span> Laserová technológia Kyocera Mita</li>
284
+ <li><span class="font-medium">Rýchlosť:</span> 30 strán A4/min, 20 A3/min</li>
285
+ <li><span class="font-medium">Duplex:</span> Áno</li>
286
+ <li><span class="font-medium">Rozlíšenie:</span> 1200 dpi</li>
287
+ <li><span class="font-medium">Pamäť:</span> 64 MB (max. 576MB)</li>
288
+ <li><span class="font-medium">Rozmery:</span> 585 x 646 x 745 mm</li>
289
+ </ul>
290
+ </div>
291
+ <div class="flex justify-between items-center">
292
+ <span class="text-blue-600 font-bold">0,01€/strana</span>
293
+ <a href="#contact" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 text-sm">
294
+ Objednať
295
+ </a>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ </section>
302
+
303
+ <!-- Toners Section -->
304
+ <section id="toners" class="py-16 bg-green-50">
305
+ <div class="container mx-auto px-4">
306
+ <div class="text-center mb-12">
307
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Tonery a náplne</h2>
308
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
309
+ Kvalitné tonery za výhodné ceny s expresným doručením po celom Slovensku
310
+ </p>
311
+ </div>
312
+
313
+ <div class="bg-white rounded-xl shadow-lg p-8 max-w-4xl mx-auto">
314
+ <div class="text-center mb-8">
315
+ <i class="fas fa-exclamation-circle text-4xl text-yellow-500 mb-4"></i>
316
+ <h3 class="text-2xl font-bold text-gray-800 mb-2">Momentálne sa pripravuje webshop</h3>
317
+ <p class="text-gray-600">
318
+ Dovtedy si môžete žiadať cenovú ponuku mailom. Tonery posielame zvyčajne deň po objednávke.
319
+ </p>
320
+ </div>
321
+
322
+ <div class="grid md:grid-cols-2 gap-8">
323
+ <div>
324
+ <h4 class="font-bold text-lg mb-4 text-green-700">Ponúkame:</h4>
325
+ <ul class="space-y-3 text-gray-700">
326
+ <li class="flex items-start">
327
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
328
+ <span>Nové tonery do vašich tlačiarni za dobré ceny</span>
329
+ </li>
330
+ <li class="flex items-start">
331
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
332
+ <span>Široký výber pre všetky hlavné značky tlačiarní</span>
333
+ </li>
334
+ <li class="flex items-start">
335
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
336
+ <span>Expresné dodanie - väčšinou nasledujúci deň</span>
337
+ </li>
338
+ <li class="flex items-start">
339
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
340
+ <span>Doručenie po celom Slovensku</span>
341
+ </li>
342
+ </ul>
343
+ </div>
344
+ <div>
345
+ <h4 class="font-bold text-lg mb-4 text-green-700">Ako objednať?</h4>
346
+ <ol class="space-y-3 text-gray-700 list-decimal list-inside">
347
+ <li>Vyplňte kontaktný formulár nižšie</li>
348
+ <li>Uveďte model vašej tlačiarne</li>
349
+ <li>My vám pošleme cenovú ponuku</li>
350
+ <li>Po potvrdení expedujeme tonery</li>
351
+ </ol>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </section>
357
+
358
+ <!-- IT Services Section -->
359
+ <section id="it-services" class="py-16 bg-purple-50">
360
+ <div class="container mx-auto px-4">
361
+ <div class="text-center mb-12">
362
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">IT služby</h2>
363
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
364
+ Profesionálne IT riešenia pre vašu firmu alebo domácnosť
365
+ </p>
366
+ </div>
367
+
368
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
369
+ <div class="bg-white p-6 rounded-lg shadow-md text-center">
370
+ <div class="text-purple-600 mb-4">
371
+ <i class="fas fa-tools text-4xl"></i>
372
+ </div>
373
+ <h3 class="text-xl font-bold mb-3">Opravy notebookov</h3>
374
+ <p class="text-gray-600">
375
+ Pozáručné opravy notebookov na profesionálnej úrovni. Rýchle a spoľahlivé riešenia problémov.
376
+ </p>
377
+ </div>
378
+ <div class="bg-white p-6 rounded-lg shadow-md text-center">
379
+ <div class="text-purple-600 mb-4">
380
+ <i class="fas fa-network-wired text-4xl"></i>
381
+ </div>
382
+ <h3 class="text-xl font-bold mb-3">Správa sietí</h3>
383
+ <p class="text-gray-600">
384
+ Komplexná správa počítačových sietí. Nastavenie, údržba a zabezpečenie vašej firemnej siete.
385
+ </p>
386
+ </div>
387
+ <div class="bg-white p-6 rounded-lg shadow-md text-center">
388
+ <div class="text-purple-600 mb-4">
389
+ <i class="fas fa-code text-4xl"></i>
390
+ </div>
391
+ <h3 class="text-xl font-bold mb-3">Tvorba webov</h3>
392
+ <p class="text-gray-600">
393
+ Tvorba moderných responzívnych webových stránok na mieru. Od jednoduchých prezentácií po komplexné eshopy.
394
+ </p>
395
+ </div>
396
+ <div class="bg-white p-6 rounded-lg shadow-md text-center">
397
+ <div class="text-purple-600 mb-4">
398
+ <i class="fas fa-search text-4xl"></i>
399
+ </div>
400
+ <h3 class="text-xl font-bold mb-3">SEO optimalizácia</h3>
401
+ <p class="text-gray-600">
402
+ Optimalizácia webových stránok pre vyhľadávače. Zvýšenie viditeľnosti vášho webu v Google.
403
+ </p>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </section>
408
+
409
+ <!-- Contact Section -->
410
+ <section id="contact" class="py-16 bg-gray-800 text-white">
411
+ <div class="container mx-auto px-4">
412
+ <div class="text-center mb-12">
413
+ <h2 class="text-3xl font-bold mb-4">Kontaktujte nás</h2>
414
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
415
+ Vyplňte formulár a my sa vám čo najskôr ozveme späť
416
+ </p>
417
+ </div>
418
+
419
+ <div class="grid md:grid-cols-2 gap-12">
420
+ <div>
421
+ <form class="space-y-6">
422
+ <div>
423
+ <label for="name" class="block text-sm font-medium mb-1">Meno a priezvisko *</label>
424
+ <input type="text" id="name" class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
425
+ </div>
426
+ <div>
427
+ <label for="email" class="block text-sm font-medium mb-1">Email *</label>
428
+ <input type="email" id="email" class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
429
+ </div>
430
+ <div>
431
+ <label for="phone" class="block text-sm font-medium mb-1">Telefón</label>
432
+ <input type="tel" id="phone" class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
433
+ </div>
434
+ <div>
435
+ <label for="service" class="block text-sm font-medium mb-1">Služba *</label>
436
+ <select id="service" class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
437
+ <option value="">Vyberte službu</option>
438
+ <option value="rental">Prenájom tlačiarní</option>
439
+ <option value="toners">Tonery a náplne</option>
440
+ <option value="stamps">Modico pečiatky</option>
441
+ <option value="it">IT služby</option>
442
+ </select>
443
+ </div>
444
+ <div>
445
+ <label for="message" class="block text-sm font-medium mb-1">Správa *</label>
446
+ <textarea id="message" rows="4" class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
447
+ </div>
448
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
449
+ Odoslať správu
450
+ </button>
451
+ </form>
452
+ </div>
453
+ <div>
454
+ <div class="bg-gray-700 rounded-lg p-6 h-full">
455
+ <h3 class="text-xl font-bold mb-6">Kontaktné údaje</h3>
456
+ <div class="space-y-4">
457
+ <div class="flex items-start">
458
+ <i class="fas fa-envelope text-blue-400 mt-1 mr-4"></i>
459
+ <div>
460
+ <h4 class="font-medium">Email</h4>
461
+ <p class="text-gray-300">info@copycomp.sk</p>
462
+ </div>
463
+ </div>
464
+ <div class="flex items-start">
465
+ <i class="fas fa-map-marker-alt text-blue-400 mt-1 mr-4"></i>
466
+ <div>
467
+ <h4 class="font-medium">Adresa</h4>
468
+ <p class="text-gray-300">Bratislava, Slovensko</p>
469
+ </div>
470
+ </div>
471
+ <div class="flex items-start">
472
+ <i class="fas fa-clock text-blue-400 mt-1 mr-4"></i>
473
+ <div>
474
+ <h4 class="font-medium">Otváracie hodiny</h4>
475
+ <p class="text-gray-300">Po-Pia: 8:00 - 17:00</p>
476
+ <p class="text-gray-300">So: 9:00 - 12:00</p>
477
+ </div>
478
+ </div>
479
+ </div>
480
+ <div class="mt-8">
481
+ <h4 class="font-bold mb-4">Nájdete nás</h4>
482
+ <div class="aspect-w-16 aspect-h-9 bg-gray-600 rounded-lg overflow-hidden">
483
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d10615.746369018785!2d17.1079955!3d48.1358243!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476c89360a2e001d%3A0xdc7c6dcfd3458b1e!2sBratislava!5e0!3m2!1sen!2ssk!4v1620000000000!5m2!1sen!2ssk" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ </div>
490
+ </section>
491
+
492
+ <!-- Footer -->
493
+ <footer class="bg-gray-900 text-gray-400 py-12">
494
+ <div class="container mx-auto px-4">
495
+ <div class="grid md:grid-cols-4 gap-8">
496
+ <div>
497
+ <h3 class="text-white text-lg font-bold mb-4">CopyComp</h3>
498
+ <p class="mb-4">
499
+ Kancelárske potreby, pečiatky a lacné tonery pre firmy aj jednotlivcov.
500
+ </p>
501
+ <div class="flex space-x-4">
502
+ <a href="#" class="text-gray-400 hover:text-white">
503
+ <i class="fab fa-facebook-f"></i>
504
+ </a>
505
+ <a href="#" class="text-gray-400 hover:text-white">
506
+ <i class="fab fa-instagram"></i>
507
+ </a>
508
+ <a href="#" class="text-gray-400 hover:text-white">
509
+ <i class="fab fa-linkedin-in"></i>
510
+ </a>
511
+ </div>
512
+ </div>
513
+ <div>
514
+ <h3 class="text-white text-lg font-bold mb-4">Služby</h3>
515
+ <ul class="space-y-2">
516
+ <li><a href="#equipment" class="hover:text-white">Kancelárska technika</a></li>
517
+ <li><a href="#toners" class="hover:text-white">Tonery a náplne</a></li>
518
+ <li><a href="#it-services" class="hover:text-white">IT služby</a></li>
519
+ <li><a href="#stamps" class="hover:text-white">Modico pečiatky</a></li>
520
+ </ul>
521
+ </div>
522
+ <div>
523
+ <h3 class="text-white text-lg font-bold mb-4">Rýchle odkazy</h3>
524
+ <ul class="space-y-2">
525
+ <li><a href="#home" class="hover:text-white">Domov</a></li>
526
+ <li><a href="#services" class="hover:text-white">Služby</a></li>
527
+ <li><a href="#contact" class="hover:text-white">Kontakt</a></li>
528
+ <li><a href="#" class="hover:text-white">Ochrana osobných údajov</a></li>
529
+ </ul>
530
+ </div>
531
+ <div>
532
+ <h3 class="text-white text-lg font-bold mb-4">Newsletter</h3>
533
+ <p class="mb-4">
534
+ Prihláste sa na odber noviniek a získajte exkluzívne ponuky.
535
+ </p>
536
+ <form class="flex">
537
+ <input type="email" placeholder="Váš email" class="px-4 py-2 rounded-l-lg bg-gray-800 text-white focus:outline-none w-full">
538
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r-lg">
539
+ <i class="fas fa-paper-plane"></i>
540
+ </button>
541
+ </form>
542
+ </div>
543
+ </div>
544
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center">
545
+ <p>&copy; 2023 CopyComp. Všetky práva vyhradené.</p>
546
+ </div>
547
+ </div>
548
+ </footer>
549
+
550
+ <script>
551
+ // Smooth scrolling for anchor links
552
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
553
+ anchor.addEventListener('click', function (e) {
554
+ e.preventDefault();
555
+
556
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
557
+ behavior: 'smooth'
558
+ });
559
+ });
560
+ });
561
+
562
+ // Mobile menu toggle
563
+ const mobileMenuButton = document.querySelector('.md\\:hidden');
564
+ const navLinks = document.querySelector('nav');
565
+
566
+ mobileMenuButton.addEventListener('click', () => {
567
+ navLinks.classList.toggle('hidden');
568
+ navLinks.classList.toggle('flex');
569
+ navLinks.classList.toggle('flex-col');
570
+ navLinks.classList.toggle('absolute');
571
+ navLinks.classList.toggle('top-16');
572
+ navLinks.classList.toggle('right-4');
573
+ navLinks.classList.toggle('bg-white');
574
+ navLinks.classList.toggle('p-4');
575
+ navLinks.classList.toggle('rounded-lg');
576
+ navLinks.classList.toggle('shadow-lg');
577
+ });
578
+ </script>
579
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=BladeSzaSza/copycomp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
580
+ </html>