2154 lines
67 KiB
Plaintext
2154 lines
67 KiB
Plaintext
"./chatbot.js" :
|
||
"""
|
||
/*
|
||
DEDICATED JAVASCRIPT FOR AIMOJSTER.SI CHATBOT WIDGET
|
||
Last Updated: 16. September 2025 (v5.0 - FINAL DIAGNOSTIC VERSION WITH ALERTS)
|
||
Author: Gemini AI for AIMojster.si
|
||
*/
|
||
|
||
// ================================================================================= //
|
||
// === KORAK 1: DOKAZ, DA SE NALAGA PRAVA DATOTEKA === //
|
||
// To opozorilno okno MORATE videti, ko se stran naloži. //
|
||
// Če ga ne vidite, se ta datoteka sploh ne nalaga. //
|
||
// ================================================================================= //
|
||
alert("DIAGNOSTIC CHATBOT.JS v5.0 SE NALAGA!");
|
||
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
|
||
// --- DOM ELEMENTI ---
|
||
const chatWidgetButton = document.getElementById('chat-widget-button');
|
||
const chatContainer = document.getElementById('chat-widget-container');
|
||
const chatInputForm = document.getElementById('chat-input-form');
|
||
const N8N_WEBHOOK_URL = 'https://n8n.spletnimojster.si/webhook/joze/chat';
|
||
|
||
// --- UPRAVLJANJE S SEJO ---
|
||
function getSessionId() {
|
||
let sessionId = sessionStorage.getItem('chatbot_session_id_v5');
|
||
if (!sessionId) {
|
||
sessionId = crypto.randomUUID();
|
||
sessionStorage.setItem('chatbot_session_id_v5', sessionId);
|
||
}
|
||
return sessionId;
|
||
}
|
||
|
||
// --- POŠILJANJE SPOROČILA ---
|
||
async function sendMessageToBot(userMessage) {
|
||
|
||
const currentSessionId = getSessionId();
|
||
|
||
const payload = {
|
||
sessionId: currentSessionId,
|
||
chatInput: userMessage,
|
||
action: "sendMessage"
|
||
};
|
||
|
||
// ================================================================================= //
|
||
// === KORAK 2: DOKAZ, KAJ SE POŠILJA === //
|
||
// To opozorilno okno se MORA prikazati, preden se sporočilo pošlje. //
|
||
// V njem boste videli TOČNO vsebino, ki se pošilja. //
|
||
// ================================================================================= //
|
||
alert("DIAGNOSTIKA: PODATKI ZA POŠILJANJE:\n\n" + JSON.stringify(payload, null, 2));
|
||
|
||
try {
|
||
// Dejansko pošiljanje je v tej verziji zakomentirano, da se osredotočimo na podatke.
|
||
// Odkomentirajte spodnje vrstice, ko potrdite, da je `payload` pravilen.
|
||
|
||
/*
|
||
const response = await fetch(N8N_WEBHOOK_URL, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(payload)
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error(`Server returned status ${response.status}`);
|
||
}
|
||
const data = await response.json();
|
||
// ... obdelava odgovora ...
|
||
*/
|
||
|
||
} catch (error) {
|
||
console.error('API Error:', error);
|
||
alert("Prišlo je do napake pri pošiljanju. Poglejte konzolo.");
|
||
}
|
||
}
|
||
|
||
// --- EVENT LISTENERS ---
|
||
function handleFormSubmit(event) {
|
||
event.preventDefault();
|
||
const chatInputField = document.getElementById('chat-input');
|
||
const userMessage = chatInputField.value.trim();
|
||
if (userMessage) {
|
||
// Dodajmo sporočilo v UI, da vidimo, da se je dogodek sprožil
|
||
const chatMessagesContainer = document.getElementById('chat-messages');
|
||
const messageElement = document.createElement('div');
|
||
messageElement.classList.add('chat-message', 'user-message');
|
||
messageElement.textContent = userMessage;
|
||
chatMessagesContainer.appendChild(messageElement);
|
||
chatMessagesContainer.scrollTop = chatMessagesContainer.scrollHeight;
|
||
|
||
sendMessageToBot(userMessage);
|
||
chatInputField.value = '';
|
||
}
|
||
}
|
||
|
||
chatInputForm.addEventListener('submit', handleFormSubmit);
|
||
|
||
// Ostale UI funkcije za odpiranje/zapiranje (poenostavljeno)
|
||
chatWidgetButton.addEventListener('click', () => chatContainer.classList.remove('hidden'));
|
||
document.getElementById('close-chat-btn').addEventListener('click', () => chatContainer.classList.add('hidden'));
|
||
|
||
console.log("Chatbot v5.0 (DIAGNOSTIC) initialized.");
|
||
});"""
|
||
|
||
|
||
"./debug_webhook.html" :
|
||
"""
|
||
<!DOCTYPE html>
|
||
<html lang="sl">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>n8n Webhook Debugger (Popravljena Verzija)</title>
|
||
<style>
|
||
body { font-family: sans-serif; line-height: 1.6; padding: 20px; background-color: #f4f4f4; }
|
||
h1 { color: #333; }
|
||
p { color: #555; }
|
||
strong { color: #0066cc; }
|
||
button { font-size: 16px; padding: 10px 15px; margin: 5px; cursor: pointer; border: 1px solid #ccc; border-radius: 5px; }
|
||
button#test-post-json { background-color: #d4edda; border-color: #c3e6cb;}
|
||
button:hover { background-color: #e9e9e9; }
|
||
#results {
|
||
white-space: pre-wrap;
|
||
background-color: #2d2d2d;
|
||
color: #
|
||
;
|
||
padding: 15px;
|
||
border-radius: 5px;
|
||
margin-top: 20px;
|
||
max-height: 600px;
|
||
overflow-y: auto;
|
||
font-family: monospace;
|
||
font-size: 14px;
|
||
}
|
||
.success { color: #28a745; font-weight: bold; }
|
||
.error { color: #dc3545; font-weight: bold; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>n8n Webhook Debugger (Popravljena Verzija)</h1>
|
||
<p>Ta stran bo testirala klic na vaš n8n webhook s <strong>pravilnim formatom podatkov</strong>.</p>
|
||
<p>Pričakujemo, da bo <strong>Test 1</strong> zdaj uspešen in vrnil `Status: 200 OK`.</p>
|
||
|
||
<div>
|
||
<button id="test-post-json">1. Testiraj POST z JSON (Pravilen format)</button>
|
||
<button id="test-get">2. Testiraj GET</button>
|
||
<button id="test-post-form">3. Testiraj POST z Form Data (Pravilen format)</button>
|
||
</div>
|
||
|
||
<h2>Rezultati:</h2>
|
||
<pre id="results"></pre>
|
||
|
||
<script>
|
||
const webhookUrl = 'https://n8n.spletnimojster.si/webhook/joze/chat';
|
||
const resultsEl = document.getElementById('results');
|
||
|
||
function logToResults(message, type = '') {
|
||
const span = document.createElement('span');
|
||
if (type === 'success') {
|
||
span.className = 'success';
|
||
} else if (type === 'error') {
|
||
span.className = 'error';
|
||
}
|
||
span.textContent = message;
|
||
|
||
resultsEl.appendChild(span);
|
||
resultsEl.append('\n\n' + '-'.repeat(50) + '\n\n');
|
||
resultsEl.scrollTop = resultsEl.scrollHeight;
|
||
}
|
||
|
||
async function runTest(testName, url, options) {
|
||
logToResults(`🏃 Zagon testa: ${testName}`);
|
||
logToResults(`URL: ${url}`);
|
||
logToResults(`Opcije: ${JSON.stringify(options, null, 2)}`);
|
||
|
||
try {
|
||
const response = await fetch(url, options);
|
||
let responseBody = '';
|
||
|
||
const responseToParse = response.clone();
|
||
|
||
try {
|
||
const jsonData = await responseToParse.json();
|
||
responseBody = JSON.stringify(jsonData, null, 2);
|
||
} catch (e) {
|
||
responseBody = await responseToParse.text();
|
||
if (!responseBody) {
|
||
responseBody = "[Prazno telo odgovora]";
|
||
}
|
||
}
|
||
|
||
let responseHeaders = '';
|
||
for (const [key, value] of response.headers.entries()) {
|
||
responseHeaders += `${key}: ${value}\n`;
|
||
}
|
||
|
||
const resultType = response.ok ? 'success' : 'error';
|
||
logToResults(
|
||
`Status: ${response.status} ${response.statusText}
|
||
Glave odgovora (Headers):
|
||
${responseHeaders}
|
||
Telo odgovora (Body):
|
||
${responseBody}`, resultType
|
||
);
|
||
|
||
} catch (error) {
|
||
logToResults(
|
||
`Napaka: ${error.toString()}
|
||
|
||
Možni vzroki:
|
||
1. CORS napaka (preverite konzolo brskalnika za podrobnosti!).
|
||
2. Mrežna napaka (napačen URL, strežnik ni dosegljiv).`, 'error'
|
||
);
|
||
}
|
||
}
|
||
|
||
// --- DEFINICIJE TESTOV S POPRAVLJENIM FORMATOM PODATKOV ---
|
||
|
||
// Test 1: POST z JSON v pravilnem formatu, ki ga pričakuje n8n Chat Trigger
|
||
document.getElementById('test-post-json').addEventListener('click', () => {
|
||
runTest(
|
||
'POST z application/json (Pravilen format)',
|
||
webhookUrl,
|
||
{
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
chatInput: 'Živjo, to je popravljen JSON test!',
|
||
action: 'sendMessage'
|
||
})
|
||
}
|
||
);
|
||
});
|
||
|
||
// Test 2: Preprost GET za preverjanje osnovne povezave
|
||
document.getElementById('test-get').addEventListener('click', () => {
|
||
runTest(
|
||
'GET',
|
||
webhookUrl,
|
||
{ method: 'GET' }
|
||
);
|
||
});
|
||
|
||
// Test 3: Pošiljanje kot klasičen spletni obrazec s pravilnimi imeni polj
|
||
document.getElementById('test-post-form').addEventListener('click', () => {
|
||
runTest(
|
||
'POST z application/x-www-form-urlencoded (Pravilen format)',
|
||
webhookUrl,
|
||
{
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||
body: new URLSearchParams({
|
||
chatInput: 'Živjo, to je popravljen form data test!',
|
||
action: 'sendMessage'
|
||
})
|
||
}
|
||
);
|
||
});
|
||
|
||
</script>
|
||
</body>
|
||
</html>"""
|
||
|
||
|
||
"./index.html" :
|
||
"""
|
||
<!DOCTYPE html>
|
||
<html lang="sl">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
<!-- Primary Meta Tags -->
|
||
<title>AI Mojster - AI Chatboti in Avtomatizacija za Vaše Podjetje</title>
|
||
<meta name="title" content="AI Mojster - AI Chatboti in Avtomatizacija za Vaše Podjetje">
|
||
<meta name="description" content="Povečajte prodajo, znižajte stroške in zagotovite podporo 24/7 z naprednimi AI chatboti in avtomatizacijo poslovnih procesov po meri.">
|
||
<meta name="keywords" content="ai chatbot, umetna inteligenca, avtomatizacija, izdelava chatbota, poslovna avtomatizacija, ai mojster, n8n, chatbot slovenija">
|
||
<meta name="author" content="AI Mojster">
|
||
<meta name="robots" content="index, follow">
|
||
|
||
<!-- Open Graph / Facebook -->
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://aimojster.si/">
|
||
<meta property="og:title" content="AI Mojster - AI Chatboti in Avtomatizacija za Vaše Podjetje">
|
||
<meta property="og:description" content="Povečajte prodajo, znižajte stroške in zagotovite podporo 24/7 z naprednimi AI chatboti in avtomatizacijo poslovnih procesov po meri.">
|
||
<meta property="og:image" content="https://aimojster.si/images/og-image-ai.jpg">
|
||
|
||
<!-- Twitter -->
|
||
<meta property="twitter:card" content="summary_large_image">
|
||
<meta property="twitter:url" content="https://aimojster.si/">
|
||
<meta property="twitter:title" content="AI Mojster - AI Chatboti in Avtomatizacija za Vaše Podjetje">
|
||
<meta property="twitter:description" content="Povečajte prodajo, znižajte stroške in zagotovite podporo 24/7 z naprednimi AI chatboti in avtomatizacijo poslovnih procesov po meri.">
|
||
<meta property="twitter:image" content="https://aimojster.si/images/og-image-ai.jpg">
|
||
|
||
<!-- Favicon & Manifest -->
|
||
<link rel="icon" type="image/png" href="images/favicon.png">
|
||
<link rel="manifest" href="site.webmanifest">
|
||
<meta name="theme-color" content="#7B2DFF">
|
||
|
||
<!-- Google Analytics 4 -->
|
||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-NCHQR1VBE8"></script>
|
||
<script>
|
||
window.dataLayer = window.dataLayer || [];
|
||
function gtag(){dataLayer.push(arguments);}
|
||
gtag('js', new Date());
|
||
gtag('config', 'G-NCHQR1VBE8');
|
||
</script>
|
||
|
||
<!-- Fonts & Styles -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||
</head>
|
||
<body>
|
||
<header class="header">
|
||
<nav class="navbar">
|
||
<div class="logo">
|
||
<a href="#">
|
||
<img src="images/logo.png" alt="AI Mojster Logo">
|
||
</a>
|
||
</div>
|
||
<div class="menu-toggle">
|
||
<i class="fas fa-bars"></i>
|
||
</div>
|
||
<div class="nav-links">
|
||
<a href="#solutions">Rešitve</a>
|
||
<a href="#packages">Paketi</a>
|
||
<a href="#benefits">Prednosti</a>
|
||
<a href="#process">Postopek</a>
|
||
<a href="#about">O nas</a>
|
||
<a href="#contact" class="cta-button">Kontakt</a>
|
||
<a href="tel:040654730" class="phone-number"><i class="fas fa-phone"></i> 040 654 730</a>
|
||
<a href="/en/" class="language-switch"><i class="fas fa-globe"></i> EN</a>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
|
||
<main>
|
||
<section class="hero">
|
||
<h1>Preobrazite Svoje Poslovanje z Močjo Umetne Inteligence</h1>
|
||
<p class="hero-text">Nudimo napredne AI chatbote in avtomatizacijo po meri, ki znižujejo stroške, povečujejo prodajo in zagotavljajo podporo 24/7.</p>
|
||
<div class="hero-features">
|
||
<div class="hero-feature">
|
||
<i class="fas fa-headset"></i>
|
||
<span>Podpora 24/7</span>
|
||
</div>
|
||
<div class="hero-feature">
|
||
<i class="fas fa-chart-line"></i>
|
||
<span>Povečana Prodaja</span>
|
||
</div>
|
||
<div class="hero-feature">
|
||
<i class="fas fa-cogs"></i>
|
||
<span>Avtomatizacija Procesov</span>
|
||
</div>
|
||
<div class="hero-feature">
|
||
<i class="fas fa-euro-sign"></i>
|
||
<span>Znižanje Stroškov</span>
|
||
</div>
|
||
</div>
|
||
<a href="#packages" class="cta-button">Odkrijte Svojo AI Rešitev</a>
|
||
</section>
|
||
|
||
<section id="solutions" class="about">
|
||
<div class="container">
|
||
<h2>Naše Rešitve za Vaš Uspeh</h2>
|
||
<p class="section-subtitle">Specializirani smo za dve ključni področji, ki prinašata takojšnje in merljive rezultate za vaše podjetje.</p>
|
||
<div class="about-content">
|
||
<div class="about-text">
|
||
<h3><i class="fas fa-comments"></i> AI Chatboti po Meri</h3>
|
||
<p>Pozabite na generične odgovore. Razvijemo inteligentne chatbote, ki razumejo vaše stranke, odgovarjajo na njihova vprašanja v realnem času, zbirajo povpraševanja in jih vodijo skozi nakupni proces. Izboljšajte uporabniško izkušnjo in pretvorite obiskovalce v zveste stranke.</p>
|
||
</div>
|
||
<div class="about-text">
|
||
<h3><i class="fas fa-robot"></i> AI Avtomatizacija Procesov</h3>
|
||
<p>Osvobodite svojo ekipo ponavljajočih se nalog. Povežemo vaše aplikacije (CRM, e-pošta, socialna omrežja) v pametne delovne tokove, ki delujejo samodejno. Od avtomatiziranega pošiljanja ponudb do sinhronizacije podatkov – prihranite čas, zmanjšajte napake in se osredotočite na rast.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="packages" class="packages">
|
||
<h2>Izberite Paket, ki Poganja Vašo Rast</h2>
|
||
<p class="section-subtitle">Pregledne cene, brez skritih stroškov. Naložba v AI se vam bo večkratno povrnila.</p>
|
||
<div class="billing-toggle">
|
||
<span>Mesečni najem</span>
|
||
<label class="toggle-switch">
|
||
<input type="checkbox" id="billing-toggle">
|
||
<span class="toggle-slider"></span>
|
||
</label>
|
||
<span>Letni najem <span class="yearly-discount">Prihranite do 20%</span></span>
|
||
</div>
|
||
<div class="package-grid">
|
||
<div class="package-card" data-package="asistent">
|
||
<h3>AI Asistent</h3>
|
||
<p class="subtitle">Za podjetja, ki želijo avtomatizirati podporo in zbirati kontakte.</p>
|
||
<div class="price-period">
|
||
<div class="price">39 €<span>/mesec</span></div>
|
||
<small class="vat-price">47,58 € z DDV</small>
|
||
</div>
|
||
<ul>
|
||
<li>Chatbot z odgovori na pogosta vprašanja</li>
|
||
<li>Zbiranje kontaktnih podatkov (leadov)</li>
|
||
<li>Namestitev na vašo spletno stran</li>
|
||
<li>Osnovno poročanje o pogovorih</li>
|
||
<li>E-mail podpora</li>
|
||
</ul>
|
||
<a href="#contact" class="package-button">Izberi Asistenta</a>
|
||
</div>
|
||
|
||
<div class="package-card featured" data-package="partner">
|
||
<div class="popular-badge">Najbolj priljubljen</div>
|
||
<h3>AI Strateški Partner</h3>
|
||
<p class="subtitle">Za podjetja, ki želijo integracijo, personalizacijo in večjo prodajo.</p>
|
||
<div class="price-period">
|
||
<div class="price">89 €<span>/mesec</span></div>
|
||
<small class="vat-price">108,58 € z DDV</small>
|
||
</div>
|
||
<ul>
|
||
<li>Vse iz paketa AI Asistent</li>
|
||
<li>Integracija s CRM sistemom</li>
|
||
<li>Napredni pogovorni scenariji</li>
|
||
<li>Kvalifikacija potencialnih strank</li>
|
||
<li>Možnost večjezične podpore</li>
|
||
<li>Telefonska podpora</li>
|
||
</ul>
|
||
<a href="#contact" class="package-button">Izberi Partnerja</a>
|
||
</div>
|
||
|
||
<div class="package-card" data-package="avtomatizacija">
|
||
<h3>AI Avtomatizacija</h3>
|
||
<p class="subtitle">Za podjetja, ki želijo celovito avtomatizacijo internih in zunanjih procesov.</p>
|
||
<div class="price-period">
|
||
<div class="price">149 €<span>/mesec</span></div>
|
||
<small class="vat-price">181,78 € z DDV</small>
|
||
</div>
|
||
<ul>
|
||
<li>Vse iz paketa AI Partner</li>
|
||
<li>Kompleksni avtomatizacijski tokovi (n8n)</li>
|
||
<li>API integracije po meri</li>
|
||
<li>Povezava z e-poštnimi orodji</li>
|
||
<li>Avtomatizirano upravljanje s podatki</li>
|
||
<li>Prioritetna tehnična podpora</li>
|
||
</ul>
|
||
<a href="#contact" class="package-button">Izberi Avtomatizacijo</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="benefits" class="why-us">
|
||
<div class="container">
|
||
<h2>Prednosti Umetne Inteligence za Vas</h2>
|
||
<p class="section-subtitle">To niso le tehnične rešitve. To so konkretne koristi, ki jih bo vaše podjetje občutilo takoj.</p>
|
||
<div class="benefits-grid">
|
||
<div class="benefit-card">
|
||
<div class="benefit-icon"><i class="fas fa-clock"></i></div>
|
||
<h3>Neprekinjena Dosegljivost 24/7</h3>
|
||
<p>Vaš AI asistent nikoli ne spi. Strankam je na voljo podnevi in ponoči, med vikendi in prazniki, kar zagotavlja takojšnjo podporo in večje zadovoljstvo.</p>
|
||
</div>
|
||
<div class="benefit-card">
|
||
<div class="benefit-icon"><i class="fas fa-piggy-bank"></i></div>
|
||
<h3>Takojšnji Prihranki</h3>
|
||
<p>Zmanjšajte stroške za podporo strankam za do 30%. Avtomatizirajte odgovore na ponavljajoča se vprašanja in sprostite svojo ekipo za naloge, ki prinašajo večjo vrednost.</p>
|
||
</div>
|
||
<div class="benefit-card">
|
||
<div class="benefit-icon"><i class="fas fa-rocket"></i></div>
|
||
<h3>Povečana Prodaja in Leadi</h3>
|
||
<p>AI chatbot aktivno nagovarja obiskovalce, jih kvalificira in zbira njihove podatke. Nikoli več ne zamudite priložnosti za posel, tudi ko niste na voljo.</p>
|
||
</div>
|
||
<div class="benefit-card">
|
||
<div class="benefit-icon"><i class="fas fa-brain"></i></div>
|
||
<h3>Inteligentno Zbiranje Podatkov</h3>
|
||
<p>Spoznajte svoje stranke bolje kot kdajkoli prej. Chatbot zbira ključne informacije o njihovih željah in težavah, kar vam omogoča sprejemanje pametnejših poslovnih odločitev.</p>
|
||
</div>
|
||
<div class="benefit-card">
|
||
<div class="benefit-icon"><i class="fas fa-tasks"></i></div>
|
||
<h3>Nič Več Ponavljajočega Dela</h3>
|
||
<p>Ročno prepisovanje podatkov, pošiljanje istih e-mailov in ostala dolgočasna opravila postanejo preteklost. Osredotočite se na tisto, kar je resnično pomembno – rast vašega posla.</p>
|
||
</div>
|
||
<div class="benefit-card">
|
||
<div class="benefit-icon"><i class="fas fa-user-friends"></i></div>
|
||
<h3>Izjemna Uporabniška Izkušnja</h3>
|
||
<p>Stranke cenijo hitre in natančne odgovore. Z AI zagotovite dosledno in profesionalno komunikacijo, ki gradi zaupanje in lojalnost vaši blagovni znamki.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="process" class="process">
|
||
<div class="container">
|
||
<h2>Od Ideje do Rezultatov v 4 Korakih</h2>
|
||
<p class="section-subtitle">Naš proces je preprost, pregleden in osredotočen na doseganje vaših ciljev.</p>
|
||
<div class="process-steps">
|
||
<div class="step">
|
||
<div class="step-number">1</div>
|
||
<h3>Posvet in Analiza</h3>
|
||
<p>Skupaj definiramo vaše cilje in analiziramo procese, ki so zreli za avtomatizacijo.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-number">2</div>
|
||
<h3>Načrtovanje in Razvoj</h3>
|
||
<p>Zasnovo chatbota ali avtomatizacije prilagodimo vašim specifičnim potrebam in blagovni znamki.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-number">3</div>
|
||
<h3>Implementacija in Testiranje</h3>
|
||
<p>Rešitev integriramo v vaše okolje in jo temeljito stestiramo za brezhibno delovanje.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-number">4</div>
|
||
<h3>Zagon in Optimizacija</h3>
|
||
<p>Po zagonu spremljamo delovanje in ga nenehno izboljšujemo za doseganje maksimalnih rezultatov.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="about" class="about">
|
||
<div class="container">
|
||
<h2>Kdo Smo?</h2>
|
||
<div class="about-content">
|
||
<div class="about-text">
|
||
<h3>Vaši Strokovnjaki za Umetno Inteligenco</h3>
|
||
<p>Smo ekipa navdušencev nad tehnologijo, ki verjame, da umetna inteligenca ni več prihodnost, ampak sedanjost. Naše poslanstvo je, da napredne AI rešitve približamo podjetjem vseh velikosti in jim pomagamo postati učinkovitejši, bolj konkurenčni in uspešnejši.</p>
|
||
|
||
<h3>Zaupajo nam uspešni:</h3>
|
||
<ul class="client-list">
|
||
<li><strong><a href="https://4spaces.io" target="_blank">4spaces</a></strong> - Podjetje za pametne rešitve</li>
|
||
<li><strong><a href="https://oblikovalnica.eu" target="_blank">Oblikovalnica</a></strong> - Kopirnica</li>
|
||
<li><strong><a href="https://pc-pomlad.si" target="_blank">PC Pomlad</a></strong> - Psihoterapevtski center</li>
|
||
<li><strong><a href="https://pekarnakovac.si" target="_blank">Pekarna Kovač</a></strong> - Pekarna in slaščičarna</li>
|
||
</ul>
|
||
|
||
<a href="#contact" class="about-cta">Naredimo korak naprej skupaj!</a>
|
||
</div>
|
||
<div class="about-features">
|
||
<div class="about-feature">
|
||
<i class="fas fa-lightbulb"></i>
|
||
<h4>Strateško Načrtovanje</h4>
|
||
<p>Ne prodajamo le tehnologije, ampak celovite rešitve, ki rešujejo vaše poslovne izzive.</p>
|
||
</div>
|
||
<div class="about-feature">
|
||
<i class="fas fa-code"></i>
|
||
<h4>Razvoj po Meri</h4>
|
||
<p>Vsak chatbot in avtomatizacija sta 100% prilagojena vašemu poslu in ciljem.</p>
|
||
</div>
|
||
<div class="about-feature">
|
||
<i class="fas fa-wrench"></i>
|
||
<h4>Zanesljiva Podpora</h4>
|
||
<p>Smo vaš dolgoročni partner. Nudimo redno vzdrževanje, optimizacijo in tehnično podporo.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contact" class="contact">
|
||
<h2>Pripravljeni na Prihodnost?</h2>
|
||
<p class="contact-text">Naredite prvi korak k pametnejšemu poslovanju. Kontaktirajte nas za neobvezujoč pogovor in odkrijte, kako lahko AI pomaga tudi vam.</p>
|
||
<p class="contact-options">Izpolnite obrazec ali nam pišite na <a href="mailto:info@aimojster.si">info@aimojster.si</a></p>
|
||
<form id="contact-form" class="contact-form">
|
||
<div class="form-group">
|
||
<label for="name">Ime in priimek</label>
|
||
<input type="text" id="name" name="name" required placeholder="Vnesite vaše ime in priimek">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="email">E-poštni naslov</label>
|
||
<input type="email" id="email" name="email" required placeholder="Vnesite vaš e-poštni naslov">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="phone">Telefonska številka (neobvezno)</label>
|
||
<input type="tel" id="phone" name="phone" placeholder="Vnesite vašo telefonsko številko">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="package">Zanima me paket</label>
|
||
<select id="package" name="package" required>
|
||
<option value="">Izberite paket...</option>
|
||
<option value="asistent">AI Asistent - 39€/mesec</option>
|
||
<option value="partner">AI Strateški Partner - 89€/mesec</option>
|
||
<option value="avtomatizacija">AI Avtomatizacija - 149€/mesec</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="message">Vaše sporočilo</label>
|
||
<textarea id="message" name="message" required placeholder="Na kratko opišite vaše potrebe in cilje..."></textarea>
|
||
</div>
|
||
<button type="submit" class="submit-button">
|
||
Pošlji Povpraševanje
|
||
</button>
|
||
</form>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="footer">
|
||
<div class="footer-content">
|
||
<div class="footer-logo">
|
||
<a href="#">
|
||
<img src="images/logo-white.png" alt="AI Mojster Logo">
|
||
</a>
|
||
<p>Inteligentne rešitve za pametno poslovanje.</p>
|
||
</div>
|
||
<div class="footer-links">
|
||
<h4>Navigacija</h4>
|
||
<a href="#solutions">Rešitve</a>
|
||
<a href="#packages">Paketi</a>
|
||
<a href="#benefits">Prednosti</a>
|
||
<a href="#about">O nas</a>
|
||
<a href="#contact">Kontakt</a>
|
||
</div>
|
||
<div class="footer-contact-info">
|
||
<h4>Kontakt</h4>
|
||
<p class="company-name">LEO MEDIA d.o.o.</p>
|
||
<p class="address">Župančičeva ulica 3C<br>1233 Dob, Slovenia</p>
|
||
<div class="contact-methods">
|
||
<a href="tel:040654730"><i class="fas fa-phone"></i> 040 654 730</a>
|
||
<a href="mailto:info@aimojster.si"><i class="fas fa-envelope"></i> info@aimojster.si</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<div class="legal-links">
|
||
<a href="privacy.html">Pravilnik o zasebnosti</a>
|
||
<a href="terms.html">Pogoji uporabe</a>
|
||
</div>
|
||
<p>© 2025 LEO Media d.o.o. - Vse pravice pridržane</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Chatbot Widget HTML -->
|
||
<div id="chat-widget-container" class="hidden">
|
||
<div class="chat-header">
|
||
<h3>AI Asistent</h3>
|
||
<button id="close-chat-btn">×</button>
|
||
</div>
|
||
<div id="chat-messages"></div>
|
||
<form id="chat-input-form">
|
||
<input type="text" id="chat-input" placeholder="Vpišite sporočilo..." autocomplete="off">
|
||
<button type="submit" aria-label="Pošlji sporočilo"><i class="fas fa-paper-plane"></i></button>
|
||
</form>
|
||
</div>
|
||
<button id="chat-widget-button" aria-label="Odpri klepet">
|
||
<img src="images/chatbot-icon.svg" alt="Chatbot ikona">
|
||
</button>
|
||
|
||
<!-- Scripts -->
|
||
<script src="script.js"></script>
|
||
<script src="chatbot.js"></script>
|
||
<script>
|
||
// Register Service Worker
|
||
if ('serviceWorker' in navigator) {
|
||
window.addEventListener('load', () => {
|
||
navigator.serviceWorker.register('/sw.js')
|
||
.then(registration => {
|
||
console.log('ServiceWorker registration successful');
|
||
})
|
||
.catch(err => {
|
||
console.log('ServiceWorker registration failed: ', err);
|
||
});
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>"""
|
||
|
||
|
||
"./script.js" :
|
||
"""
|
||
/*
|
||
GENERAL JAVASCRIPT FOR AIMOJSTER.SI
|
||
Last Updated: 16. September 2025
|
||
Author: Gemini AI for AIMojster.si
|
||
|
||
This script handles general functionalities for the website, including:
|
||
- Mobile navigation menu.
|
||
- Smooth scrolling for anchor links.
|
||
- Billing toggle (monthly/yearly) for pricing packages.
|
||
- Contact form submission.
|
||
- Intersection Observer for animations.
|
||
*/
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
|
||
//======================================================================
|
||
// 1. MOBILNI MENI (NAVIGATION)
|
||
//======================================================================
|
||
const menuToggle = document.querySelector('.menu-toggle');
|
||
const navLinks = document.querySelector('.nav-links');
|
||
|
||
if (menuToggle && navLinks) {
|
||
menuToggle.addEventListener('click', function(e) {
|
||
e.stopPropagation();
|
||
navLinks.classList.toggle('active');
|
||
const icon = menuToggle.querySelector('i');
|
||
if (icon) {
|
||
icon.classList.toggle('fa-bars');
|
||
icon.classList.toggle('fa-times');
|
||
}
|
||
});
|
||
|
||
document.addEventListener('click', function(e) {
|
||
const isClickInsideNav = navLinks.contains(e.target);
|
||
const isClickOnToggle = menuToggle.contains(e.target);
|
||
if (!isClickInsideNav && !isClickOnToggle && navLinks.classList.contains('active')) {
|
||
navLinks.classList.remove('active');
|
||
const icon = menuToggle.querySelector('i');
|
||
if (icon) {
|
||
icon.classList.remove('fa-times');
|
||
icon.classList.add('fa-bars');
|
||
}
|
||
}
|
||
});
|
||
|
||
navLinks.querySelectorAll('a').forEach(link => {
|
||
link.addEventListener('click', () => {
|
||
if (navLinks.classList.contains('active')) {
|
||
navLinks.classList.remove('active');
|
||
const icon = menuToggle.querySelector('i');
|
||
if (icon) {
|
||
icon.classList.remove('fa-times');
|
||
icon.classList.add('fa-bars');
|
||
}
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
//======================================================================
|
||
// 2. GLADKO DRSENJE (SMOOTH SCROLLING)
|
||
//======================================================================
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
const targetId = this.getAttribute('href');
|
||
const targetElement = document.querySelector(targetId);
|
||
|
||
if (targetElement) {
|
||
targetElement.scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'start'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
|
||
//======================================================================
|
||
// 3. PREKLOP MED MESEČNIM IN LETNIM NAJEMOM (BILLING TOGGLE)
|
||
//======================================================================
|
||
const billingToggle = document.getElementById('billing-toggle');
|
||
if (billingToggle) {
|
||
const packagePrices = {
|
||
'asistent': { monthly: 39, yearly: 29 },
|
||
'partner': { monthly: 89, yearly: 69 },
|
||
'avtomatizacija': { monthly: 149, yearly: 119 }
|
||
};
|
||
|
||
const updatePrices = (isYearly) => {
|
||
document.querySelectorAll('.package-card').forEach(card => {
|
||
const packageName = card.dataset.package;
|
||
if (!packageName || !packagePrices[packageName]) return;
|
||
|
||
const priceValue = isYearly ? packagePrices[packageName].yearly : packagePrices[packageName].monthly;
|
||
const priceWithVat = (priceValue * 1.22).toFixed(2).replace('.', ',');
|
||
|
||
const priceElement = card.querySelector('.price');
|
||
const vatElement = card.querySelector('.vat-price');
|
||
|
||
if (priceElement) {
|
||
priceElement.innerHTML = `${priceValue} €<span>/mesec</span>`;
|
||
}
|
||
if (vatElement) {
|
||
vatElement.textContent = `${priceWithVat} € z DDV`;
|
||
}
|
||
});
|
||
updateContactFormPackageOptions(isYearly);
|
||
};
|
||
|
||
const updateContactFormPackageOptions = (isYearly) => {
|
||
const packageSelect = document.getElementById('package');
|
||
if (!packageSelect) return;
|
||
|
||
Array.from(packageSelect.options).forEach(option => {
|
||
const packageName = option.value;
|
||
if (packageName && packagePrices[packageName]) {
|
||
const price = isYearly ? packagePrices[packageName].yearly : packagePrices[packageName].monthly;
|
||
const packageTitle = option.text.split(' - ')[0];
|
||
option.text = `${packageTitle} - ${price}€/mesec`;
|
||
}
|
||
});
|
||
};
|
||
|
||
updatePrices(billingToggle.checked);
|
||
billingToggle.addEventListener('change', (e) => {
|
||
updatePrices(e.target.checked);
|
||
});
|
||
}
|
||
|
||
//======================================================================
|
||
// 4. IZBIRA PAKETA IN POSODOBITEV KONTAKTNEGA OBRAZCA
|
||
//======================================================================
|
||
document.querySelectorAll('.package-button').forEach(button => {
|
||
button.addEventListener('click', function() {
|
||
const packageCard = this.closest('.package-card');
|
||
if (packageCard) {
|
||
const selectedPackage = packageCard.dataset.package;
|
||
const contactFormPackageSelect = document.getElementById('package');
|
||
if (contactFormPackageSelect) {
|
||
contactFormPackageSelect.value = selectedPackage;
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
|
||
//======================================================================
|
||
// 5. POŠILJANJE KONTAKTNEGA OBRAZCA (FORM SUBMISSION)
|
||
//======================================================================
|
||
const contactForm = document.getElementById('contact-form');
|
||
if (contactForm) {
|
||
contactForm.addEventListener('submit', async function(e) {
|
||
e.preventDefault();
|
||
const name = document.getElementById('name').value.trim();
|
||
const email = document.getElementById('email').value.trim();
|
||
const message = document.getElementById('message').value.trim();
|
||
const selectedPackage = document.getElementById('package').value;
|
||
const submitButton = this.querySelector('.submit-button');
|
||
|
||
if (!name || !email || !message || !selectedPackage) {
|
||
alert('Prosimo, izpolnite vsa obvezna polja.');
|
||
return;
|
||
}
|
||
|
||
const originalButtonText = submitButton.textContent;
|
||
submitButton.textContent = 'Pošiljanje...';
|
||
submitButton.disabled = true;
|
||
|
||
const formData = {
|
||
name: name,
|
||
email: email,
|
||
phone: document.getElementById('phone').value.trim(),
|
||
package: selectedPackage,
|
||
message: message
|
||
};
|
||
|
||
try {
|
||
const response = await fetch('send_email.php', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(formData)
|
||
});
|
||
|
||
if (!response.ok) throw new Error('Težava z omrežno povezavo.');
|
||
|
||
const result = await response.json();
|
||
if (result.success) {
|
||
alert('Hvala za vaše sporočilo! Odgovorili vam bomo v najkrajšem možnem času.');
|
||
contactForm.reset();
|
||
} else {
|
||
throw new Error(result.error || 'Prišlo je do napake pri pošiljanju sporočila.');
|
||
}
|
||
} catch (error) {
|
||
console.error('Error:', error);
|
||
alert('Napaka: ' + error.message);
|
||
} finally {
|
||
submitButton.textContent = originalButtonText;
|
||
submitButton.disabled = false;
|
||
}
|
||
});
|
||
}
|
||
|
||
//======================================================================
|
||
// 6. ANIMACIJE OB DRSENJU (INTERSECTION OBSERVER)
|
||
//======================================================================
|
||
const animatedElements = document.querySelectorAll('.fade-in');
|
||
if ('IntersectionObserver' in window) {
|
||
const observer = new IntersectionObserver((entries, observer) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('visible');
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.1 });
|
||
animatedElements.forEach(el => observer.observe(el));
|
||
} else {
|
||
animatedElements.forEach(el => el.classList.add('visible'));
|
||
}
|
||
|
||
});"""
|
||
|
||
|
||
"./send_email.php" :
|
||
"""
|
||
<?php
|
||
/**
|
||
* SEND_EMAIL.PHP - Skripta za obdelavo in pošiljanje kontaktnega obrazca za AIMojster.si
|
||
* Last Updated: 16. September 2025
|
||
* Author: Gemini AI for AIMojster.si
|
||
*
|
||
* Ta skripta sprejme podatke v JSON formatu, jih validira, sanitizira
|
||
* in pošlje kot formatirano e-poštno sporočilo na določen naslov.
|
||
* Vrne JSON odgovor o uspešnosti operacije.
|
||
*/
|
||
|
||
//======================================================================
|
||
// 1. ZAČETNE NASTAVITVE IN VARNOST
|
||
//======================================================================
|
||
|
||
// Nastavimo glavo (header), da bo odgovor vedno v JSON formatu.
|
||
// To je ključno za pravilno delovanje na strani odjemalca (JavaScript).
|
||
header('Content-Type: application/json; charset=UTF-8');
|
||
|
||
// Varnostna preverba: Dovolimo samo metodo POST.
|
||
// S tem preprečimo, da bi kdo skripto klical neposredno preko brskalnika (z GET metodo).
|
||
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
|
||
// Pošljemo HTTP status 405 Method Not Allowed in sporočilo o napaki.
|
||
http_response_code(405);
|
||
echo json_encode(['success' => false, 'error' => 'Napačna metoda zahteve. Dovoljena je samo metoda POST.']);
|
||
exit; // Takoj prekinemo izvajanje skripte.
|
||
}
|
||
|
||
//======================================================================
|
||
// 2. SPREJEM IN DEKODIRANJE PODATKOV
|
||
//======================================================================
|
||
|
||
// Preberemo необdelane podatke iz telesa zahteve (request body).
|
||
// To je potrebno, ker JavaScript pošilja podatke kot JSON, ne kot klasičen form-data.
|
||
$json_payload = file_get_contents('php://input');
|
||
|
||
// Dekodiramo JSON niz v PHP asociativno polje.
|
||
// Drugi parameter `true` zagotovi, da dobimo polje namesto objekta.
|
||
$data = json_decode($json_payload, true);
|
||
|
||
// Preverimo, ali je prišlo do napake pri dekodiranju JSON-a.
|
||
if (json_last_error() !== JSON_ERROR_NONE) {
|
||
http_response_code(400); // Bad Request
|
||
echo json_encode(['success' => false, 'error' => 'Neveljaven JSON format podatkov.']);
|
||
exit;
|
||
}
|
||
|
||
//======================================================================
|
||
// 3. VALIDACIJA PREJETIH PODATKOV
|
||
//======================================================================
|
||
|
||
// Definiramo obvezna polja.
|
||
$required_fields = ['name', 'email', 'message', 'package'];
|
||
$errors = [];
|
||
|
||
foreach ($required_fields as $field) {
|
||
if (empty($data[$field])) {
|
||
$errors[] = "Polje '{$field}' je obvezno.";
|
||
}
|
||
}
|
||
|
||
// Posebej preverimo veljavnost e-poštnega naslova.
|
||
if (!empty($data['email']) && !filter_var($data['email'], FILTER_VALIDATE_EMAIL)) {
|
||
$errors[] = "Vneseni e-poštni naslov ni v veljavni obliki.";
|
||
}
|
||
|
||
// Če so se pojavile napake pri validaciji, jih vrnemo odjemalcu.
|
||
if (!empty($errors)) {
|
||
http_response_code(400); // Bad Request
|
||
echo json_encode(['success' => false, 'error' => implode(' ', $errors)]);
|
||
exit;
|
||
}
|
||
|
||
//======================================================================
|
||
// 4. SANITIZACIJA PODATKOV IN PRIPRAVA SPREMENLJIVK
|
||
//======================================================================
|
||
|
||
// Sanitiziramo vse prejete podatke, da preprečimo XSS napade in druge zlorabe.
|
||
// Uporabimo htmlspecialchars za kodiranje posebnih znakov in trim za odstranitev presledkov.
|
||
$name = htmlspecialchars(trim($data['name']));
|
||
$email = filter_var(trim($data['email']), FILTER_SANITIZE_EMAIL);
|
||
$phone = isset($data['phone']) ? htmlspecialchars(trim($data['phone'])) : 'Ni vneseno';
|
||
$package = htmlspecialchars(trim($data['package']));
|
||
$message = htmlspecialchars(trim($data['message']));
|
||
|
||
|
||
//======================================================================
|
||
// 5. SESTAVLJANJE IN POŠILJANJE E-POŠTNEGA SPOROČILA
|
||
//======================================================================
|
||
|
||
// --- Nastavitve E-pošte ---
|
||
$to_email = 'info@aimojster.si'; // **POMEMBNO: Vnesite vaš pravi e-poštni naslov!**
|
||
$subject = 'Novo povpraševanje s spletne strani AIMojster.si';
|
||
|
||
// --- Telo sporočila (Email Body) ---
|
||
// Uporabimo jasne oznake za preglednost.
|
||
$email_body = "Prejeli ste novo povpraševanje preko kontaktnega obrazca na spletni strani AIMojster.si.\n\n";
|
||
$email_body .= "--------------------------------------------------\n";
|
||
$email_body .= "Ime in priimek: " . $name . "\n";
|
||
$email_body .= "E-poštni naslov: " . $email . "\n";
|
||
$email_body .= "Telefonska številka: " . $phone . "\n";
|
||
$email_body .= "Izbrani paket: " . $package . "\n\n";
|
||
$email_body .= "Sporočilo:\n" . $message . "\n";
|
||
$email_body .= "--------------------------------------------------\n";
|
||
$email_body .= "To sporočilo je bilo poslano samodejno.";
|
||
|
||
// --- Glave sporočila (Email Headers) ---
|
||
// Pravilno nastavljene glave so ključne za zanesljivo dostavo in preprečevanje, da bi sporočilo končalo v vsiljeni pošti.
|
||
$headers = "From: no-reply@aimojster.si\r\n"; // Uporabite naslov z vaše domene.
|
||
$headers .= "Reply-To: " . $email . "\r\n"; // To vam omogoča, da direktno odgovorite pošiljatelju.
|
||
$headers .= "Content-Type: text/plain; charset=UTF-8\r\n";
|
||
$headers .= "X-Mailer: PHP/" . phpversion();
|
||
|
||
// --- Pošiljanje ---
|
||
// Uporabimo PHP funkcijo mail(). Če je pošiljanje uspešno, vrne true.
|
||
if (mail($to_email, $subject, $email_body, $headers)) {
|
||
// Pošiljanje je uspelo, vrnemo pozitiven odgovor.
|
||
echo json_encode(['success' => true]);
|
||
} else {
|
||
// Pošiljanje ni uspelo. Vrnemo napako.
|
||
http_response_code(500); // Internal Server Error
|
||
echo json_encode(['success' => false, 'error' => 'Napaka strežnika pri pošiljanju sporočila. Prosimo, poskusite kasneje.']);
|
||
}
|
||
|
||
exit; // Zaključimo izvajanje skripte.
|
||
|
||
?>"""
|
||
|
||
|
||
"./style.css" :
|
||
"""
|
||
/*
|
||
STYLESHEET FOR AIMOJSTER.SI
|
||
Last Updated: 16. September 2025
|
||
Author: Gemini AI for AIMojster.si
|
||
*/
|
||
|
||
:root {
|
||
/* Tech & AI Inspired Color Scheme */
|
||
--primary-color: #7B2DFF; /* Vibrant Purple */
|
||
--secondary-color: #9A5BFF; /* Lighter Violet */
|
||
--accent-color: #00F5D4; /* Bright Teal/Cyan */
|
||
--accent-light: #70F8E3; /* Light Teal */
|
||
--text-color: #1D2B48; /* Deep Blue-Black */
|
||
--light-text: #6B7C93; /* Muted Gray-Blue */
|
||
--background: #ffffff; /* Pure White */
|
||
--light-background: #F9F7FF; /* Very Light Purple Tint */
|
||
--border-color: #EAE6FF; /* Light Purple-Gray Border */
|
||
--success-color: #4CD5B0; /* Minty Green */
|
||
|
||
--shadow: 0 4px 10px rgba(123, 45, 255, 0.08);
|
||
--shadow-lg: 0 10px 25px rgba(123, 45, 255, 0.12);
|
||
|
||
--gradient-primary: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||
--gradient-accent: linear-gradient(135deg, var(--accent-color), var(--accent-light));
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||
line-height: 1.6;
|
||
color: var(--text-color);
|
||
background-color: var(--background);
|
||
}
|
||
|
||
/* --- Header & Navigation --- */
|
||
.header {
|
||
background: var(--background);
|
||
box-shadow: var(--shadow);
|
||
position: fixed;
|
||
width: 100%;
|
||
top: 0;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.navbar {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 1rem 1.5rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.logo {
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.logo a {
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.logo img {
|
||
height: 100%;
|
||
width: auto;
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
gap: 2rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav-links a {
|
||
text-decoration: none;
|
||
color: var(--text-color);
|
||
font-weight: 500;
|
||
transition: color 0.3s ease;
|
||
position: relative;
|
||
padding: 5px 0;
|
||
}
|
||
|
||
.nav-links a::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 0;
|
||
height: 2px;
|
||
background: var(--accent-color);
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
.nav-links a:hover {
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.nav-links a:hover::after {
|
||
width: 100%;
|
||
}
|
||
|
||
.phone-number {
|
||
font-weight: 600;
|
||
color: var(--primary-color);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.language-switch {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--light-background);
|
||
color: var(--primary-color);
|
||
border-radius: 2rem;
|
||
padding: 0.5rem 1rem;
|
||
font-weight: 600;
|
||
transition: all 0.3s ease;
|
||
margin-left: 0.5rem;
|
||
}
|
||
|
||
.language-switch i {
|
||
margin-right: 0.5rem;
|
||
}
|
||
|
||
.language-switch:hover {
|
||
background: var(--primary-color);
|
||
color: white;
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
/* --- Hero Section --- */
|
||
.hero {
|
||
padding: 8rem 1rem 4rem;
|
||
text-align: center;
|
||
background: linear-gradient(rgba(29, 43, 72, 0.7), rgba(29, 43, 72, 0.6)), url('images/hero-bg-ai.webp');
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
min-height: 90vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 2.5rem;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: 4.5rem;
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
line-height: 1.2;
|
||
color: white;
|
||
font-weight: 800;
|
||
letter-spacing: -1px;
|
||
animation: fadeInUp 1s ease-out;
|
||
}
|
||
|
||
.hero-text {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
font-size: 1.5rem;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
line-height: 1.8;
|
||
font-weight: 400;
|
||
animation: fadeInUp 1s ease-out 0.2s backwards;
|
||
}
|
||
|
||
.hero-features {
|
||
display: flex;
|
||
gap: 2rem;
|
||
margin-top: 2rem;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
animation: fadeInUp 1s ease-out 0.6s backwards;
|
||
}
|
||
|
||
.hero-feature {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
color: var(--text-color);
|
||
font-weight: 500;
|
||
padding: 0.75rem 1.5rem;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
border-radius: 1rem;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||
backdrop-filter: blur(10px);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.hero-feature:hover {
|
||
transform: translateY(-5px) scale(1.05);
|
||
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.hero-feature i {
|
||
color: var(--primary-color);
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.hero .cta-button {
|
||
font-size: 1.2rem;
|
||
padding: 1.2rem 3.5rem;
|
||
border-radius: 50px;
|
||
background: var(--gradient-primary);
|
||
color: white;
|
||
text-decoration: none;
|
||
box-shadow: var(--shadow);
|
||
animation: fadeInUp 1s ease-out 0.4s backwards;
|
||
transition: all 0.3s ease;
|
||
border: none;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.hero .cta-button:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: var(--shadow-lg);
|
||
background: var(--gradient-accent);
|
||
color: var(--text-color);
|
||
}
|
||
|
||
/* --- General Section Styling --- */
|
||
section {
|
||
padding: 6rem 1.5rem;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
h2 {
|
||
text-align: center;
|
||
margin-bottom: 1.5rem;
|
||
font-size: 2.8rem;
|
||
color: var(--text-color);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.section-subtitle {
|
||
text-align: center;
|
||
color: var(--light-text);
|
||
font-size: 1.2rem;
|
||
max-width: 700px;
|
||
margin: 0 auto 4rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
|
||
/* --- Packages Section --- */
|
||
.packages {
|
||
background: var(--light-background);
|
||
}
|
||
|
||
.billing-toggle {
|
||
text-align: center;
|
||
margin-bottom: 3rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.billing-toggle span {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.toggle-switch {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 60px;
|
||
height: 30px;
|
||
}
|
||
|
||
.toggle-switch input {
|
||
opacity: 0;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.toggle-slider {
|
||
position: absolute;
|
||
cursor: pointer;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: var(--secondary-color);
|
||
transition: .4s;
|
||
border-radius: 34px;
|
||
}
|
||
|
||
.toggle-slider:before {
|
||
position: absolute;
|
||
content: "";
|
||
height: 22px;
|
||
width: 22px;
|
||
left: 4px;
|
||
bottom: 4px;
|
||
background-color: white;
|
||
transition: .4s;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
input:checked + .toggle-slider {
|
||
background: var(--gradient-accent);
|
||
}
|
||
|
||
input:checked + .toggle-slider:before {
|
||
transform: translateX(30px);
|
||
}
|
||
|
||
.yearly-discount {
|
||
background: var(--gradient-accent);
|
||
color: var(--text-color);
|
||
padding: 0.4rem 1rem;
|
||
border-radius: 1rem;
|
||
font-size: 0.8rem;
|
||
margin-left: 0.5rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.package-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 2rem;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.package-card {
|
||
background: white;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 1.5rem;
|
||
padding: 2.5rem 2rem;
|
||
text-align: center;
|
||
position: relative;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.package-card:hover {
|
||
transform: translateY(-10px);
|
||
box-shadow: var(--shadow-lg);
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
.package-card h3 {
|
||
font-size: 1.8rem;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.package-card .subtitle {
|
||
font-size: 1.1rem;
|
||
color: var(--light-text);
|
||
margin: 0.5rem 0 1rem;
|
||
min-height: 44px; /* Align heights */
|
||
}
|
||
|
||
.price-period {
|
||
margin: 1rem 0;
|
||
}
|
||
|
||
.price {
|
||
font-size: 3.5rem;
|
||
font-weight: 700;
|
||
color: var(--primary-color);
|
||
line-height: 1;
|
||
}
|
||
|
||
.price span {
|
||
font-size: 1.2rem;
|
||
color: var(--light-text);
|
||
margin-left: 0.3rem;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.vat-price {
|
||
font-size: 0.9rem;
|
||
color: var(--light-text);
|
||
display: block;
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
.package-card ul {
|
||
list-style: none;
|
||
margin: 1.5rem 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
text-align: left;
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.package-card li {
|
||
font-size: 1rem;
|
||
color: var(--text-color);
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 0.75rem;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.package-card li::before {
|
||
content: "✓";
|
||
color: var(--success-color);
|
||
font-weight: bold;
|
||
font-size: 1.2rem;
|
||
min-width: 20px;
|
||
}
|
||
|
||
.package-button {
|
||
display: inline-block;
|
||
padding: 1rem 2.5rem;
|
||
background: var(--gradient-primary);
|
||
color: white;
|
||
text-decoration: none;
|
||
border-radius: 50px;
|
||
font-weight: 600;
|
||
font-size: 1.1rem;
|
||
transition: all 0.3s ease;
|
||
margin-top: auto;
|
||
border: none;
|
||
}
|
||
|
||
.package-button:hover {
|
||
background: var(--gradient-accent);
|
||
color: var(--text-color);
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.package-card.featured {
|
||
border: 2px solid var(--primary-color);
|
||
transform: scale(1.05);
|
||
z-index: 2;
|
||
}
|
||
|
||
.package-card.featured .package-button {
|
||
background: var(--gradient-primary);
|
||
}
|
||
|
||
.popular-badge {
|
||
position: absolute;
|
||
top: -15px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: var(--gradient-primary);
|
||
color: white;
|
||
padding: 0.7rem 2rem;
|
||
border-radius: 50px;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
/* --- Why Us / Benefits Section --- */
|
||
.why-us {
|
||
background: var(--background);
|
||
}
|
||
|
||
.benefits-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||
gap: 2rem;
|
||
}
|
||
|
||
.benefit-card {
|
||
background: var(--light-background);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 1.5rem;
|
||
padding: 2rem;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.benefit-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: var(--shadow);
|
||
background: white;
|
||
}
|
||
|
||
.benefit-icon {
|
||
width: 70px;
|
||
height: 70px;
|
||
background: white;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 1.5rem;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.benefit-icon i {
|
||
font-size: 2rem;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.benefit-card h3 {
|
||
color: var(--text-color);
|
||
font-size: 1.5rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.benefit-card p {
|
||
color: var(--light-text);
|
||
font-size: 1.1rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* --- Process Section --- */
|
||
.process {
|
||
background: var(--light-background);
|
||
}
|
||
|
||
.process-steps {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 2rem;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
}
|
||
|
||
.step {
|
||
text-align: center;
|
||
padding: 2rem;
|
||
}
|
||
|
||
.step-number {
|
||
width: 4.5rem;
|
||
height: 4.5rem;
|
||
background: var(--gradient-accent);
|
||
color: var(--text-color);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto 1.5rem;
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
box-shadow: var(--shadow);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.step:hover .step-number {
|
||
transform: scale(1.1) rotate(10deg);
|
||
}
|
||
|
||
.step h3 {
|
||
font-size: 1.4rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.step p {
|
||
color: var(--light-text);
|
||
}
|
||
|
||
/* --- About Section --- */
|
||
.about {
|
||
background: white;
|
||
}
|
||
|
||
.about-content {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 4rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.about-text h3 {
|
||
font-size: 1.8rem;
|
||
color: var(--primary-color);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.about-text p {
|
||
font-size: 1.1rem;
|
||
line-height: 1.8;
|
||
color: var(--light-text);
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.client-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.client-list li {
|
||
margin-bottom: 1rem;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.client-list a {
|
||
color: var(--primary-color);
|
||
text-decoration: none;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.about-cta {
|
||
display: inline-block;
|
||
margin-top: 1.5rem;
|
||
padding: 1rem 2rem;
|
||
background: var(--gradient-primary);
|
||
color: white;
|
||
text-decoration: none;
|
||
border-radius: 50px;
|
||
font-weight: 600;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.about-cta:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
/* --- Contact Section --- */
|
||
.contact {
|
||
background: var(--light-background);
|
||
}
|
||
|
||
.contact-text {
|
||
max-width: 600px;
|
||
margin: 0 auto 2rem;
|
||
font-size: 1.2rem;
|
||
line-height: 1.8;
|
||
color: var(--light-text);
|
||
}
|
||
|
||
.contact-options {
|
||
text-align: center;
|
||
margin-bottom: 2rem;
|
||
color: var(--light-text);
|
||
}
|
||
|
||
.contact-options a {
|
||
color: var(--primary-color);
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.contact-options a:hover {
|
||
color: var(--accent-color);
|
||
}
|
||
|
||
.contact-form {
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
padding: 3rem;
|
||
background: var(--background);
|
||
border-radius: 20px;
|
||
box-shadow: var(--shadow-lg);
|
||
display: grid;
|
||
gap: 1.5rem;
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
|
||
.form-group {
|
||
text-align: left;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 0.5rem;
|
||
color: var(--text-color);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.form-group input,
|
||
.form-group select,
|
||
.form-group textarea {
|
||
width: 100%;
|
||
padding: 1rem;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 12px;
|
||
font-size: 1rem;
|
||
color: var(--text-color);
|
||
background: var(--light-background);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.form-group input:focus,
|
||
.form-group select:focus,
|
||
.form-group textarea:focus {
|
||
outline: none;
|
||
border-color: var(--primary-color);
|
||
box-shadow: 0 0 0 3px rgba(123, 45, 255, 0.1);
|
||
background: white;
|
||
}
|
||
|
||
.form-group textarea {
|
||
min-height: 150px;
|
||
resize: vertical;
|
||
}
|
||
|
||
.submit-button {
|
||
padding: 1.2rem 2.5rem;
|
||
background: var(--gradient-primary);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 12px;
|
||
font-weight: 600;
|
||
font-size: 1.1rem;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.submit-button:hover {
|
||
background: var(--gradient-accent);
|
||
color: var(--text-color);
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
|
||
/* --- Footer --- */
|
||
.footer {
|
||
background: var(--text-color);
|
||
color: white;
|
||
padding: 4rem 2rem 2rem;
|
||
}
|
||
|
||
.footer-content {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: 2fr 1fr 1.5fr;
|
||
gap: 4rem;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.footer-logo img {
|
||
height: 40px;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.footer-logo p {
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
|
||
.footer h4 {
|
||
color: white;
|
||
font-size: 1.1rem;
|
||
margin-bottom: 1.5rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.footer-links {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.footer-links a {
|
||
color: rgba(255, 255, 255, 0.8);
|
||
text-decoration: none;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.footer-links a:hover {
|
||
color: var(--accent-color);
|
||
}
|
||
|
||
.contact-methods a {
|
||
color: rgba(255, 255, 255, 0.8);
|
||
text-decoration: none;
|
||
transition: color 0.3s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.contact-methods a:hover {
|
||
color: var(--accent-color);
|
||
}
|
||
|
||
.footer-bottom {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding-top: 2rem;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.legal-links {
|
||
display: flex;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.legal-links a {
|
||
color: rgba(255, 255, 255, 0.6);
|
||
text-decoration: none;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.legal-links a:hover {
|
||
color: white;
|
||
}
|
||
|
||
/* --- Chatbot Widget --- */
|
||
#chat-widget-button {
|
||
position: fixed;
|
||
bottom: 25px;
|
||
right: 25px;
|
||
width: 60px;
|
||
height: 60px;
|
||
background: var(--gradient-primary);
|
||
border-radius: 50%;
|
||
border: none;
|
||
cursor: pointer;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||
z-index: 998;
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
#chat-widget-button:hover {
|
||
transform: scale(1.1);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
#chat-widget-button img {
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
|
||
#chat-widget-container {
|
||
position: fixed;
|
||
bottom: 100px;
|
||
right: 25px;
|
||
width: 370px;
|
||
max-width: 90vw;
|
||
height: 70vh;
|
||
max-height: 600px;
|
||
background: white;
|
||
border-radius: 15px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
z-index: 999;
|
||
transform-origin: bottom right;
|
||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||
}
|
||
|
||
#chat-widget-container.hidden {
|
||
transform: scale(0);
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.chat-header {
|
||
background: var(--gradient-primary);
|
||
color: white;
|
||
padding: 1rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.chat-header h3 {
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
margin: 0;
|
||
}
|
||
|
||
#close-chat-btn {
|
||
background: none;
|
||
border: none;
|
||
color: white;
|
||
font-size: 1.8rem;
|
||
cursor: pointer;
|
||
line-height: 1;
|
||
opacity: 0.8;
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
|
||
#close-chat-btn:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
#chat-messages {
|
||
flex-grow: 1;
|
||
padding: 1rem;
|
||
overflow-y: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.chat-message {
|
||
padding: 0.75rem 1rem;
|
||
border-radius: 18px;
|
||
max-width: 80%;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.bot-message {
|
||
background-color: var(--light-background);
|
||
color: var(--text-color);
|
||
border-bottom-left-radius: 4px;
|
||
align-self: flex-start;
|
||
}
|
||
|
||
.user-message {
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
border-bottom-right-radius: 4px;
|
||
align-self: flex-end;
|
||
}
|
||
|
||
.typing-indicator {
|
||
align-self: flex-start;
|
||
color: var(--light-text);
|
||
font-style: italic;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
#chat-input-form {
|
||
display: flex;
|
||
padding: 1rem;
|
||
border-top: 1px solid var(--border-color);
|
||
}
|
||
|
||
#chat-input {
|
||
flex-grow: 1;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 50px;
|
||
padding: 0.75rem 1rem;
|
||
font-size: 1rem;
|
||
transition: border-color 0.2s;
|
||
}
|
||
|
||
#chat-input:focus {
|
||
outline: none;
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
#chat-input-form button {
|
||
background: var(--primary-color);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 50%;
|
||
width: 45px;
|
||
height: 45px;
|
||
margin-left: 0.5rem;
|
||
cursor: pointer;
|
||
font-size: 1.2rem;
|
||
transition: background-color 0.2s;
|
||
}
|
||
|
||
#chat-input-form button:hover {
|
||
background-color: var(--secondary-color);
|
||
}
|
||
|
||
|
||
/* --- Mobile Menu & Responsive --- */
|
||
.menu-toggle {
|
||
display: none;
|
||
font-size: 1.5rem;
|
||
color: var(--text-color);
|
||
cursor: pointer;
|
||
}
|
||
|
||
@media (max-width: 992px) {
|
||
.package-grid {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
.package-card.featured {
|
||
grid-column: 1 / -1;
|
||
max-width: 500px;
|
||
margin: 0 auto;
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
body {
|
||
font-size: 16px;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 2.2rem;
|
||
}
|
||
|
||
.section-subtitle {
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.navbar {
|
||
padding: 1rem;
|
||
}
|
||
|
||
.menu-toggle {
|
||
display: block;
|
||
z-index: 1001;
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100vh;
|
||
background: white;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 2rem;
|
||
transform: translateX(100%);
|
||
transition: transform 0.3s ease-in-out;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.nav-links.active {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
.hero {
|
||
padding: 6rem 1rem 4rem;
|
||
min-height: 80vh;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: 2.5rem;
|
||
}
|
||
|
||
.hero-text {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.hero-features {
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.package-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.package-card.featured {
|
||
max-width: 100%;
|
||
transform: scale(1);
|
||
}
|
||
|
||
.benefits-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.process-steps {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.about-content {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.footer-content {
|
||
grid-template-columns: 1fr;
|
||
text-align: center;
|
||
}
|
||
|
||
.footer-bottom {
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
#chat-widget-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
bottom: 0;
|
||
right: 0;
|
||
border-radius: 0;
|
||
max-height: 100%;
|
||
}
|
||
|
||
#chat-widget-button {
|
||
bottom: 20px;
|
||
right: 20px;
|
||
}
|
||
}
|
||
|
||
/* --- Animations --- */
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}"""
|
||
|
||
|