init
This commit is contained in:
Oliver
147
app.js
Normal file
147
app.js
Normal file
@@ -0,0 +1,147 @@
|
||||
// Accordion script
|
||||
const accTitles = document.querySelectorAll('.accordion-title');
|
||||
|
||||
accTitles.forEach(title => {
|
||||
title.addEventListener('click', () => {
|
||||
// Close all other accordions
|
||||
accTitles.forEach(otherTitle => {
|
||||
if (otherTitle !== title) {
|
||||
otherTitle.classList.remove('active');
|
||||
otherTitle.nextElementSibling.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle the clicked one
|
||||
const content = title.nextElementSibling;
|
||||
const isOpen = content.style.display === 'block';
|
||||
title.classList.toggle('active');
|
||||
content.style.display = isOpen ? 'none' : 'block';
|
||||
});
|
||||
});
|
||||
|
||||
// Slider script
|
||||
const slides = document.querySelectorAll('.slide');
|
||||
let currentIndex = 0;
|
||||
|
||||
function nextSlide() {
|
||||
if (slides.length === 0) return;
|
||||
|
||||
slides[currentIndex].classList.remove('active');
|
||||
currentIndex = (currentIndex + 1) % slides.length;
|
||||
slides[currentIndex].classList.add('active');
|
||||
}
|
||||
|
||||
// Initial display
|
||||
if (slides.length > 0) {
|
||||
slides[currentIndex].classList.add('active');
|
||||
// Change slide every 10 seconds
|
||||
setInterval(nextSlide, 10000);
|
||||
}
|
||||
|
||||
// Chat widget script
|
||||
(function () {
|
||||
const preamble = `
|
||||
We use what we preach — this chatbot is powered by our own n8n automation 🤖 to help you quickly find what you need.
|
||||
|
||||
Want to talk to a real automation expert? Just buy a service pack 💼 — it includes a 1-hour get-to-know session with our team 👥.
|
||||
|
||||
If it’s not the right fit, no worries — we’ll refund you 💸.
|
||||
`;
|
||||
|
||||
const logo="logo.svg"
|
||||
const api='https://ai.odoo4projects.com/webhook/81742473-b50b-4845-a5f9-916d9fe60876/chat'
|
||||
|
||||
// Elements
|
||||
const chatToggle = document.getElementById('cw-chatToggle');
|
||||
const chatWidget = document.getElementById('cw-chatWidget');
|
||||
const chatForm = document.getElementById('cw-chatForm');
|
||||
const chatInput = document.getElementById('cw-chatInput');
|
||||
const chatMessages = document.getElementById('cw-chatMessages');
|
||||
const sessionId = crypto.randomUUID();
|
||||
|
||||
let chatOpened = false;
|
||||
|
||||
function appendMessage(text, sender) {
|
||||
const msg = document.createElement('div');
|
||||
msg.classList.add('mywidget-message', sender === 'user' ? 'user' : 'bot');
|
||||
msg.innerHTML = text;
|
||||
|
||||
chatMessages.appendChild(msg);
|
||||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||||
}
|
||||
|
||||
chatToggle.addEventListener('click', () => {
|
||||
const isVisible = chatWidget.classList.toggle('active');
|
||||
if (isVisible && !chatOpened) {
|
||||
appendMessage(
|
||||
preamble,
|
||||
'bot'
|
||||
);
|
||||
chatOpened = true;
|
||||
}
|
||||
});
|
||||
|
||||
chatForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const input = chatInput.value.trim();
|
||||
if (!input) return;
|
||||
appendMessage(input, 'user');
|
||||
chatInput.value = '';
|
||||
chatInput.focus();
|
||||
|
||||
try {
|
||||
const response = await fetch(api, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ action: 'sendMessage', sessionId, chatInput: input })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
appendMessage(data.output, 'bot');
|
||||
} catch (error) {
|
||||
appendMessage('Fehler beim Verbinden mit dem Server. Bitte versuchen Sie es später erneut.', 'bot');
|
||||
console.error(error);
|
||||
}
|
||||
});
|
||||
|
||||
function handleBuyClick(buttonId, message) {
|
||||
const btn = document.getElementById(buttonId);
|
||||
if (!btn) return;
|
||||
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Open chat if not already visible
|
||||
if (!chatWidget.classList.contains('active')) {
|
||||
chatWidget.classList.add('active');
|
||||
if (!chatOpened) {
|
||||
appendMessage(preamble, 'bot');
|
||||
chatOpened = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Send predefined message
|
||||
appendMessage(message, 'user');
|
||||
|
||||
fetch(api, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ action: 'sendMessage', sessionId, chatInput: message })
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
appendMessage(data.output, 'bot');
|
||||
})
|
||||
.catch((error) => {
|
||||
appendMessage('Fehler beim Verbinden mit dem Server. Bitte versuchen Sie es später erneut.', 'bot');
|
||||
console.error(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Attach all three buttons
|
||||
handleBuyClick('buy-3h', 'I want to buy the 3 Hours pack for $450.');
|
||||
handleBuyClick('buy-5h', 'I want to buy the 5 Hours pack for $675.');
|
||||
handleBuyClick('buy-10h', 'I want to buy the 10 Hours pack for $1200.');
|
||||
handleBuyClick('buy-bundle', 'I want to buy the ODOO and N8N bundle for $395 per year.');
|
||||
})();
|
||||
348
index.html
Normal file
348
index.html
Normal file
@@ -0,0 +1,348 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Unlock your business potential with OD8N, your expert partners in Odoo and n8n automation. Get a free 1-hour consultation with our automation engineers. Risk-free guarantee!">
|
||||
<meta name="keywords" content="OD8N, Odoo, n8n, automation, business automation, consulting, integration, service packs, Odoo development, n8n workflows">
|
||||
<meta name="author" content="OD8N">
|
||||
<title>OD8N - Odoo & n8n Automation Experts</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script defer src="./app.js"></script>
|
||||
|
||||
<button id="cw-chatToggle" aria-label="Toggle chat widget" type="button">
|
||||
<img src="logo.svg"><span class="text-xs">Agent</span>
|
||||
</button>
|
||||
|
||||
<div id="cw-chatWidget" role="region" aria-live="polite" aria-label="Customer support chat widget">
|
||||
<div class="logo-container">
|
||||
<img src="logo.svg" alt="Logo" />
|
||||
</div>
|
||||
<div class="header">Kundenservice</div>
|
||||
<div id="cw-chatMessages"></div>
|
||||
<form id="cw-chatForm" autocomplete="off">
|
||||
<input type="text" id="cw-chatInput" placeholder="Type your message..." required autocomplete="off" />
|
||||
<button type="submit">Senden</button>
|
||||
</form>
|
||||
</div>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
"name": "OD8N",
|
||||
"url": "https://www.od8n.com/",
|
||||
"logo": "https://www.od8n.com/logo.svg",
|
||||
"description": "OD8N are experts in Odoo and n8n automation, offering flexible man-hour service packs with a free 1-hour consultation.",
|
||||
"contactPoint": {
|
||||
"@type": "ContactPoint",
|
||||
"telephone": "",
|
||||
"contactType": "customer service"
|
||||
},
|
||||
"sameAs": []
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Service",
|
||||
"serviceType": "Odoo & n8n Automation Consulting",
|
||||
"provider": {
|
||||
"@type": "Organization",
|
||||
"name": "OD8N"
|
||||
},
|
||||
"name": "3 Hours Service Pack",
|
||||
"description": "Quick fixes and small automation improvements.",
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "450",
|
||||
"priceCurrency": "USD"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Service",
|
||||
"serviceType": "Odoo & n8n Automation Consulting",
|
||||
"provider": {
|
||||
"@type": "Organization",
|
||||
"name": "OD8N"
|
||||
},
|
||||
"name": "5 Hours Service Pack",
|
||||
"description": "Ideal for mid-level integrations and custom workflows.",
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "675",
|
||||
"priceCurrency": "USD"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Service",
|
||||
"serviceType": "Odoo & n8n Automation Consulting",
|
||||
"provider": {
|
||||
"@type": "Organization",
|
||||
"name": "OD8N"
|
||||
},
|
||||
"name": "10 Hours Service Pack",
|
||||
"description": "Perfect for large projects and advanced automation.",
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "1200",
|
||||
"priceCurrency": "USD"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Service",
|
||||
"serviceType": "Odoo & n8n Automation Consulting",
|
||||
"provider": {
|
||||
"@type": "Organization",
|
||||
"name": "OD8N"
|
||||
},
|
||||
"name": "ODOO & N8N Bundle",
|
||||
"description": "Perfect for taking conrtol over your company automation installation.",
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "395",
|
||||
"priceCurrency": "USD"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Person",
|
||||
"name": "Oliver Arnold",
|
||||
"jobTitle": "Expert in Odoo & System Design",
|
||||
"worksFor": {
|
||||
"@type": "Organization",
|
||||
"name": "OD8N"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Person",
|
||||
"name": "Mark Gutmann",
|
||||
"jobTitle": "Expert in AI and Process Consulting",
|
||||
"worksFor": {
|
||||
"@type": "Organization",
|
||||
"name": "OD8N"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Header Section -->
|
||||
<header class="hero">
|
||||
<div class="hero-content">
|
||||
<h1>OD8N - Odoo & n8n Automation Experts</h1>
|
||||
<p>We charge upfront — this lets us skip the sales talk and give serious clients immediate access to our best engineers.</p>
|
||||
<ul class="hero-list">
|
||||
<li>One-hour get-to-know session included — not satisfied? Full refund, no questions asked</li>
|
||||
<li>Experts in Odoo and n8n — no outsourcing, no fluff</li>
|
||||
<li>Hosting solutions for Odoo & n8n available</li>
|
||||
<li>Custom development tailored to your workflows</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Product Packages -->
|
||||
<section id="packages" class="packages">
|
||||
<h2>Our OD8N Service Packs for Odoo & n8n Automation</h2>
|
||||
<div class="package-list">
|
||||
<div class="package">
|
||||
<h3>3 Hours</h3>
|
||||
<p>Quick fixes and small automation improvements.</p>
|
||||
<span class="price">$450</span>
|
||||
<a href="#" class="btn-secondary" id="buy-3h">Choose Plan</a>
|
||||
</div>
|
||||
<div class="package featured">
|
||||
<h3>5 Hours</h3>
|
||||
<p>Ideal for mid-level integrations and custom workflows.</p>
|
||||
<span class="price">$675</span>
|
||||
|
||||
<a href="#" class="btn-secondary" id="buy-5h">Choose Plan</a>
|
||||
|
||||
</div>
|
||||
<div class="package">
|
||||
<h3>10 Hours</h3>
|
||||
<p>Perfect for large projects and advanced automation.</p>
|
||||
<span class="price">$1.200</span>
|
||||
<a href="#" class="btn-secondary" id="buy-10h">Choose Plan</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="package">
|
||||
<h3>ODOO & N8N Bundle</h3>
|
||||
<p>Perfect for taking conrtol over your company automation installation.</p>
|
||||
<span class="price">$395 per Year</span>
|
||||
<a href="#" class="btn-secondary" id="buy-bundle">Choose Plan</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<p class="free-offer">All hour packs include <strong>1 Free Consulting Hour for first clients</strong> — with a 100% refund if you’re not satisfied!</p>
|
||||
</section>
|
||||
|
||||
<!-- Image Slider -->
|
||||
<section class="slider-section">
|
||||
|
||||
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<div class="slide-image">
|
||||
<img src="oliver.webp" alt="Oliver Arnold, Odoo & System Design Expert at OD8N">
|
||||
</div>
|
||||
<div class="slide-text">
|
||||
<h2>Oliver Arnold</h2>
|
||||
<h4>Expert in Odoo & System Design</h4>
|
||||
<p>I am an expert in Odoo and system design with years of experience in consulting.</p>
|
||||
<ul>
|
||||
<li>Odoo functional consulting & development</li>
|
||||
<li>N8N workflow design & custom nodes</li>
|
||||
<li>System integration & architecture design</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="slide">
|
||||
<div class="slide-content">
|
||||
<div class="slide-image">
|
||||
<img src="mark.webp" alt="Mark Gutmann, AI and Process Consulting Expert at OD8N">
|
||||
</div>
|
||||
<div class="slide-text">
|
||||
<h2>Mark Gutmann</h2>
|
||||
<h4>Expert in AI and Process Consulting</h4>
|
||||
<p>I am an expert in Odoo and system design with years of experience in consulting.</p>
|
||||
<ul>
|
||||
<li>Odoo functional consulting & development</li>
|
||||
<li>N8N workflow design & custom nodes</li>
|
||||
<li>System integration & architecture design</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<!-- Success Stories Accordion -->
|
||||
<section class="accordion-section">
|
||||
<h2>OD8N Success Stories in Automation</h2>
|
||||
<div class="accordion">
|
||||
<div class="accordion-item">
|
||||
<button class="accordion-title">From Manual Tracking to Automated Precision: A Retailer's Story</button>
|
||||
<div class="accordion-content">
|
||||
<section style="font-family: Arial, sans-serif; background: #f9f9f9; padding: 2rem; border-radius: 12px; max-width: 800px; margin: 2rem auto; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
|
||||
<h2 style="font-size: 2em; margin-bottom: 0.5em;">The Challenge: No API, No Problem.</h2>
|
||||
<p style="font-size: 1.1em; line-height: 1.6;">
|
||||
A growing retail client was struggling with a major operational bottleneck: their shipping provider offered no API for tracking. This meant hours of manual data entry, a high risk of errors, and no real-time visibility into their 800+ daily shipments.
|
||||
</p>
|
||||
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.2em;">
|
||||
We engineered a robust solution using n8n and Puppeteer to create a custom web scraper. This automated system intelligently mimics human interaction to extract shipment statuses twice daily, ensuring near real-time accuracy.
|
||||
</p>
|
||||
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.2em;">
|
||||
<strong>The Result:</strong> Complete automation, zero manual entry, and a system that provides flawless, up-to-the-minute tracking data. All running seamlessly on our n8n community instance.
|
||||
</p>
|
||||
<div style="margin-top: 2em;">
|
||||
<a href="#packages" class="btn-secondary">Automate Your Repetitive Tasks</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<button class="accordion-title">Scaling on Demand: Automated Odoo Instance Management</button>
|
||||
<div class="accordion-content">
|
||||
<section style="font-family: Arial, sans-serif; background: #f9f9f9; padding: 2rem; border-radius: 12px; max-width: 800px; margin: 2rem auto; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
|
||||
<h2 style="font-size: 2em; margin-bottom: 0.5em;">The Challenge: Global Scale, Local Management</h2>
|
||||
<p style="font-size: 1.1em; line-height: 1.6;">
|
||||
ODOO4projects needed to instantly deploy new Odoo instances for clients worldwide, a process that was manual, time-consuming, and prone to configuration errors. They required a system that could scale globally and provide centralized oversight.
|
||||
</p>
|
||||
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.2em;">
|
||||
We built a smart agent powered by an n8n workflow that completely automates the provisioning of Odoo instances. The system also generates a weekly server status report, providing a clear, consolidated view of their entire infrastructure.
|
||||
</p>
|
||||
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.2em;">
|
||||
<strong>The Result:</strong> A fully automated, scalable, and reliable system for Odoo instance management, all running on our cost-effective n8n community instance.
|
||||
</p>
|
||||
<div style="margin-top: 2em;">
|
||||
<a href="#packages" class="btn-secondary">Scale Your Operations with Automation</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<button class="accordion-title">From Simple Chatbot to Intelligent Odoo-Powered Agent</button>
|
||||
<div class="accordion-content">
|
||||
<section style="font-family: Arial, sans-serif; background: #f9f9f9; padding: 2rem; border-radius: 12px; max-width: 800px; margin: 2rem auto; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
|
||||
<h2 style="font-size: 2em; margin-bottom: 0.5em;">The Challenge: Unlocking the Power of Conversational AI</h2>
|
||||
<p style="font-size: 1.1em; line-height: 1.6;">
|
||||
A client wanted to move beyond a basic FAQ chatbot. They needed an intelligent agent that could handle complex internal tasks, provide instant knowledge base access, and integrate seamlessly with their Odoo chatter.
|
||||
</p>
|
||||
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.2em;">
|
||||
Leveraging powerful OCA modules and an n8n-powered backend, we built a sophisticated AI agent. This solution connects to LLMs, agents, and RAG pipelines, transforming their Odoo chatter into a powerful, intelligent hub for communication and task management.
|
||||
</p>
|
||||
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.2em;">
|
||||
<strong>The Result:</strong> A truly intelligent conversational AI that streamlines employee onboarding, provides instant knowledge access, and can be embedded on any website.
|
||||
</p>
|
||||
<div style="margin-top: 2em;">
|
||||
<a href="#packages" class="btn-secondary">Integrate AI into Your Workflows</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<button class="accordion-title">The Future of Sales: A Checkout Process Inside a Chatbox</button>
|
||||
<div class="accordion-content">
|
||||
<section style="font-family: Arial, sans-serif; background: #f9f9f9; padding: 2rem; border-radius: 12px; max-width: 800px; margin: auto; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
|
||||
<h2 style="font-size: 2em; margin-bottom: 0.5em;">The Challenge: Reinventing the Sales Funnel</h2>
|
||||
<p style="font-size: 1.1em; line-height: 1.6;">
|
||||
We asked ourselves: could we transform a simple conversation into a complete sales transaction? The goal was to create a frictionless procurement workflow that eliminates the need for emails, forms, and spreadsheets.
|
||||
</p>
|
||||
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.5em;">
|
||||
Using only n8n and PayPal, we built a revolutionary checkout process that lives entirely within a chatbox. This allows for a seamless, conversational sales experience, from initial inquiry to final purchase.
|
||||
</p>
|
||||
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.5em;">
|
||||
<strong>The Result:</strong> A groundbreaking, conversational commerce solution that redefines the client interaction and digital selling. Ready to see it in action?
|
||||
</p>
|
||||
<div style="margin-top: 2em;">
|
||||
<a href="#packages" class="btn-secondary">Experience the Future of Sales</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 OD8N. All Rights Reserved.</p>
|
||||
</footer>
|
||||
|
||||
<script defer src="./app.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
50
logo.svg
Normal file
50
logo.svg
Normal file
@@ -0,0 +1,50 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
version="1.1"
|
||||
width="593.94275"
|
||||
height="187.60291"
|
||||
id="svg10"
|
||||
sodipodi:docname="odin_ohne_hintergrund.svg"
|
||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs14" />
|
||||
<sodipodi:namedview
|
||||
id="namedview12"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
showgrid="false"
|
||||
inkscape:zoom="0.23046875"
|
||||
inkscape:cx="-475.11864"
|
||||
inkscape:cy="130.16949"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1044"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg10" />
|
||||
<path
|
||||
d="m 401.50255,17.955415 c 8.2654,6.195673 13.71668,13.942456 15.93359,24.160156 1.53845,12.912035 -2.65646,22.707449 -10.4375,32.722656 -0.58008,0.727032 -0.58008,0.727032 -1.17188,1.46875 0.52465,0.09281 1.0493,0.185626 1.58985,0.28125 14.19816,4.234137 26.29674,15.356982 34.53515,27.214843 4.1765,7.80482 5.36662,15.23149 5.25,24.00391 0.0116,0.8727 0.0232,1.74539 0.0352,2.64453 -0.0701,15.78139 -7.6961,28.46666 -18.17578,39.75782 -15.50224,14.86193 -36.22089,17.56863 -56.76562,17.30859 -17.89622,-0.50685 -33.52117,-5.65632 -47.46875,-17.21094 -0.64453,-0.51949 -1.28906,-1.03898 -1.95313,-1.57422 -8.92174,-7.97732 -15.34516,-20.89768 -16.21826,-32.75293 -0.90182,-17.10573 1.75261,-30.02697 12.75733,-43.63379 8.57983,-9.249482 19.86938,-14.530489 31.41406,-19.039063 -0.48212,-0.652265 -0.96422,-1.304531 -1.46094,-1.976562 -0.63164,-0.873984 -1.26328,-1.747969 -1.91407,-2.648438 -0.62648,-0.858515 -1.25296,-1.717031 -1.89843,-2.601562 -4.47323,-7.185503 -4.45669,-14.537329 -3.72657,-22.773438 2.65633,-11.022392 8.74048,-19.476242 18,-25.999999 13.4072,-6.787842 28.45553,-7.4960125 41.67579,0.648437 z m -35.05079,21.789062 c -3.01159,4.749058 -4.11252,7.838604 -3.15234,13.578125 1.34632,5.066164 4.21941,7.993287 8.46484,10.796875 4.26821,2.452629 4.26821,2.452629 9.0625,3.1875 5.97307,-2.287557 10.649,-5.733801 13.9375,-11.25 1.59021,-5.612475 1.13815,-10.202428 -1.125,-15.5625 -3.39962,-4.102992 -6.9558,-6.285483 -12.1875,-7.187499 -6.26845,-0.443972 -10.70394,2.028391 -15,6.437499 z m 2.33594,51.234375 c -2.25474,1.011363 -4.51041,1.971951 -6.79687,2.90625 -12.68339,5.237157 -22.35826,10.865968 -28.27735,23.867188 -2.51521,7.24647 -2.65879,15.38068 0.11328,22.55469 6.24817,12.30636 16.57533,18.83624 29.31641,23.11328 4.10501,0.98817 7.79447,1.23246 11.99609,1.19922 0.74911,-0.006 1.49822,-0.0113 2.27002,-0.0171 13.23496,-0.28915 24.78853,-6.07071 34.40967,-15.08838 6.9702,-7.66179 10.52117,-16.29603 10.25391,-26.65625 -0.6086,-6.3082 -2.62818,-12.0876 -7.03125,-16.73827 C 404.02464,97.103825 382.51929,84.668545 368.7877,90.978852 Z"
|
||||
fill="#000000"
|
||||
id="path2" />
|
||||
<path
|
||||
d="m 267.82677,0.30697522 c 2.02378,0.95093668 4.0287,1.94454578 6,2.99999998 0.15449,15.4214758 0.3025,30.8430038 0.44296,46.2646128 0.0654,7.161747 0.13281,14.323463 0.20523,21.485143 0.0632,6.247678 0.12234,12.495379 0.17686,18.743139 0.029,3.303072 0.0604,6.606089 0.0955,9.909104 0.039,3.702156 0.0709,7.404316 0.10119,11.106546 0.0129,1.07535 0.0259,2.15071 0.0392,3.25864 0.12422,18.13129 -1.98044,33.35465 -13.06095,48.23282 -0.52207,0.70512 -1.04414,1.41023 -1.58204,2.13672 -10.09791,12.50569 -25.06442,20.79692 -41,22.67969 -18.804,1.01004 -35.70852,-4.08572 -50.23046,-16.44141 -12.47763,-12.02357 -19.16831,-28.53685 -19.5,-45.75 -0.0396,-18.89505 7.41793,-34.670553 20.03906,-48.519536 10.431,-10.178266 26.25494,-15.967637 40.58594,-16.542969 16.41357,0.452111 28.60057,6.861439 40.6875,17.4375 0.33,-24.42 0.66,-48.84 1,-73.9999998 9.64102,-3.6153846 9.64102,-3.6153846 16,-2.99999998 z M 179.94395,96.5101 c -7.81124,11.22621 -10.33465,22.29527 -9.11718,35.79688 2.37441,11.04443 8.83234,20.48186 18,27 9.89439,5.93979 19.67604,8.6358 31.14062,6.38281 11.85379,-3.17412 21.46184,-9.8016 27.85938,-20.38281 5.24471,-10.8904 7.34848,-23.00112 3.5,-34.75 -5.31178,-12.455837 -14.29417,-21.438231 -26.75,-26.750005 -16.21299,-5.188156 -33.57651,-0.234129 -44.63282,12.703125 z"
|
||||
fill="#000000"
|
||||
id="path4" />
|
||||
<path
|
||||
d="m 105.82677,72.306975 c 1.03447,0.746367 1.03447,0.746367 2.08984,1.507813 11.77009,9.276231 20.20391,24.282685 22.62891,38.949222 2.01191,18.19106 -2.84921,34.95134 -13.71875,49.54297 -0.48856,0.66644 -0.97711,1.33289 -1.48047,2.01953 -10.2389,12.81758 -26.542298,20.62288 -42.519534,22.98047 -16.970715,1.51096 -34.833914,-2.72819 -48.292969,-13.54687 -6.277019,-5.36796 -11.456447,-11.35286 -15.7070314,-18.45313 -0.38543,-0.63036 -0.770859,-1.26071 -1.167969,-1.91016 -7.543321,-13.61265 -9.380541,-30.87427 -6.101561,-46.03906 0.9086,-3.13375 1.97576,-6.05761 3.26953,-9.050785 0.33902,-0.85207 0.67805,-1.704141 1.027344,-2.582031 C 12.958762,79.669947 26.972236,68.947616 42.826766,62.306975 c 21.590965,-7.389421 44.773355,-3.878156 63.000004,10 z M 36.119735,90.486662 c -9.33234,8.945427 -14.634358,19.435108 -15.542969,32.382818 0.252237,12.19911 5.342397,22.21576 13.375,31.1875 10.027651,9.39384 21.945146,12.8008 35.28125,12.55859 13.062547,-1.12168 23.494857,-7.99211 31.835934,-17.83594 7.73351,-10.87847 8.8422,-22.51918 7.75782,-35.47265 C 106.44419,102.4152 98.565717,93.804137 89.826766,87.306975 72.161994,76.263439 52.456678,77.332241 36.119735,90.486662 Z"
|
||||
fill="#000000"
|
||||
id="path6" />
|
||||
<path
|
||||
d="m 568.23302,67.553065 c 13.30616,8.997695 22.50006,21.821966 25.59375,37.753905 0.0892,2.60867 0.1263,5.18968 0.11352,7.79785 1.5e-4,0.78087 2.9e-4,1.56174 4.4e-4,2.36628 -6.9e-4,2.57552 -0.009,5.15098 -0.0163,7.7265 -0.002,1.7879 -0.003,3.5758 -0.004,5.36371 -0.004,4.70177 -0.0136,9.40352 -0.0247,14.10528 -0.0102,4.79939 -0.0148,9.59879 -0.0198,14.39819 -0.0107,9.41408 -0.0278,18.82814 -0.0488,28.2422 -1.73943,0.0357 -3.47908,0.061 -5.21875,0.082 -0.96873,0.0152 -1.93746,0.0305 -2.93554,0.0461 -4.71349,-0.2123 -8.66728,-1.5629 -12.5414,-4.34659 -1.93142,-2.63817 -1.67597,-4.73143 -1.6732,-7.97445 -0.007,-1.27919 -0.0138,-2.55837 -0.0209,-3.87632 0.005,-1.02642 0.005,-1.02642 0.01,-2.07359 0.009,-2.15483 -0.001,-4.3088 -0.0166,-6.46358 -0.04,-6.12648 -0.0413,-12.2529 -0.0391,-18.37949 5e-5,-3.75138 -0.0194,-7.5023 -0.0493,-11.25356 -0.0107,-2.10097 0.001,-4.20101 0.0138,-6.30195 -0.0883,-11.53553 -1.76157,-22.50294 -9.47009,-31.521079 -8.01923,-7.547508 -16.91126,-10.393065 -27.74219,-10.183593 -10.67647,0.792246 -17.76701,5.370741 -25.0664,12.933593 -6.66352,7.926239 -8.32229,18.071009 -8.45533,28.144039 -0.0149,0.98155 -0.0149,0.98155 -0.03,1.98293 -0.0313,2.14254 -0.0563,4.2851 -0.0811,6.42772 -0.0206,1.49359 -0.0416,2.98717 -0.063,4.48074 -0.055,3.91586 -0.10449,7.83177 -0.15284,11.74771 -0.0504,4.00202 -0.10599,8.00397 -0.16114,12.00592 -0.10729,7.84109 -0.2088,15.68224 -0.30664,23.52345 -4.67303,0.83674 -9.13646,1.12219 -13.875,1.0625 -0.68836,-0.005 -1.37672,-0.009 -2.08593,-0.0137 -1.67973,-0.0117 -3.35941,-0.0296 -5.03907,-0.0488 -0.89032,-3.0591 -1.12869,-5.78723 -1.13281,-8.96875 -0.002,-1.02465 -0.004,-2.04929 -0.007,-3.10498 0.007,-1.69601 0.007,-1.69601 0.0147,-3.42627 0.007,-1.79075 0.007,-1.79075 0.0147,-3.61768 0.0217,-3.48602 0.0523,-6.97175 0.0875,-10.45765 0.0246,-2.60866 0.0428,-5.21733 0.0609,-7.82605 0.0365,-4.85218 0.0973,-9.70366 0.17145,-14.55542 0.0267,-1.92554 0.0471,-3.85117 0.0609,-5.77685 0.15673,-19.96899 3.40451,-36.761502 17.83893,-51.500733 19.65383,-19.236253 48.73989,-22.341919 72.29685,-8.519532 z"
|
||||
fill="#000000"
|
||||
id="path8" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.7 KiB |
BIN
oliver.webp
Normal file
BIN
oliver.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
4
robots.txt
Normal file
4
robots.txt
Normal file
@@ -0,0 +1,4 @@
|
||||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
Sitemap: https://www.od8n.com/sitemap.xml
|
||||
9
sitemap.xml
Normal file
9
sitemap.xml
Normal file
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
<url>
|
||||
<loc>https://www.od8n.com/</loc>
|
||||
<lastmod>2025-07-24</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>1.0</priority>
|
||||
</url>
|
||||
</urlset>
|
||||
421
style.css
Normal file
421
style.css
Normal file
@@ -0,0 +1,421 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
background: linear-gradient(to right, #4a90e2, #0070c0);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #fff;
|
||||
color: #0070c0;
|
||||
padding: 12px 24px;
|
||||
text-decoration: none;
|
||||
border-radius: 25px;
|
||||
font-weight: bold;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
/* Packages */
|
||||
.packages {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.packages h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.package-list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.package {
|
||||
background: #f5f5f5;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
width: 250px;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.package:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.package.featured {
|
||||
border: 2px solid #0070c0;
|
||||
background: #eaf4ff;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 1.5rem;
|
||||
color: #0070c0;
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #0070c0;
|
||||
color: #fff;
|
||||
padding: 10px 20px;
|
||||
text-decoration: none;
|
||||
border-radius: 20px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #005a9e;
|
||||
}
|
||||
|
||||
.free-offer {
|
||||
margin-top: 20px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.slider-section {
|
||||
position: relative;
|
||||
height: 500px; /* Adjust as needed */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: relative;
|
||||
height: 400px; /* Or auto if content is static height */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slide {
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 40px;
|
||||
background: linear-gradient(135deg, #f0f4f8, #d9e4f5);
|
||||
border-radius: 16px;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
transition: opacity 1s ease-in-out;
|
||||
width: 100%;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.slide-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-width: 1000px;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.slide-image img {
|
||||
max-width: 300px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.slide-text {
|
||||
flex: 1;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.slide-text h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 8px;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.slide-text h4 {
|
||||
font-size: 1.2rem;
|
||||
color: #666;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.slide-text p {
|
||||
font-size: 1rem;
|
||||
color: #444;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.slide-text ul {
|
||||
list-style-type: disc;
|
||||
padding-left: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.slide-text ul li {
|
||||
margin-bottom: 8px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.slide-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.slide-image img {
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.slide.active {
|
||||
opacity: 1;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Accordion */
|
||||
.accordion-section {
|
||||
padding: 60px 20px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.accordion-title {
|
||||
background: #0070c0;
|
||||
color: #fff;
|
||||
padding: 15px;
|
||||
border: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.accordion-title.active {
|
||||
background: #005a9e;
|
||||
}
|
||||
|
||||
.accordion-content {
|
||||
display: none;
|
||||
padding: 15px;
|
||||
background: #f1f1f1;
|
||||
border-radius: 0 0 8px 8px;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background: #333;
|
||||
color: #fff;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.hero-list {
|
||||
list-style: none;
|
||||
text-align: left;
|
||||
max-width: 600px;
|
||||
margin: 30px auto 0;
|
||||
padding: 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.hero-list li {
|
||||
margin-bottom: 12px;
|
||||
padding-left: 28px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-list li::before {
|
||||
content: "✔";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #fff;
|
||||
background: #0070c0;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* cw.css */
|
||||
|
||||
/* Container */
|
||||
#cw-chatToggle {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
background-color: #FFA500;
|
||||
color: white;
|
||||
padding: 12px 16px;
|
||||
border-radius: 25px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
z-index: 100000;
|
||||
border: none;
|
||||
user-select: none;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
#cw-chatToggle:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
#cw-chatToggle div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
#cw-chatToggle img {
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
}
|
||||
#cw-chatToggle span.text-sm {
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem; /* 14px */
|
||||
}
|
||||
#cw-chatToggle span.text-xs {
|
||||
font-size: 0.75rem; /* 12px */
|
||||
}
|
||||
|
||||
/* Chat widget container */
|
||||
#cw-chatWidget {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 100px;
|
||||
right: 24px;
|
||||
width: 500px;
|
||||
max-height: 70vh;
|
||||
background: white;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 12px;
|
||||
flex-direction: column;
|
||||
z-index: 100000;
|
||||
font-family: system-ui, sans-serif;
|
||||
}
|
||||
#cw-chatWidget.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Logo container */
|
||||
#cw-chatWidget .logo-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
#cw-chatWidget .logo-container img {
|
||||
height: 40px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
#cw-chatWidget .header {
|
||||
background-color: #0070c0;
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Messages container */
|
||||
#cw-chatMessages {
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.4;
|
||||
user-select: text;
|
||||
scroll-behavior: smooth;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
/* Chat form */
|
||||
#cw-chatForm {
|
||||
display: flex;
|
||||
margin: 0px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
#cw-chatInput {
|
||||
flex: 1;
|
||||
border: none;
|
||||
padding: 8px 20px;
|
||||
font-size: 1rem;
|
||||
outline-offset: 2px;
|
||||
border-radius: 0 0 0 12px;
|
||||
}
|
||||
#cw-chatInput:focus {
|
||||
outline: 0px solid #0070c0;
|
||||
}
|
||||
#cw-chatForm button {
|
||||
background-color: #0070c0;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 0 16px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
border-radius: 0 0 12px 0;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
#cw-chatForm button:hover {
|
||||
background-color: #005a9e;
|
||||
}
|
||||
|
||||
/* Message bubbles */
|
||||
.cw-message {
|
||||
max-width: 75%;
|
||||
margin-bottom: 8px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 12px;
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.cw-message.user {
|
||||
background-color: #eaf4ff;
|
||||
color: #333;
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
}
|
||||
.cw-message.bot {
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
margin-right: auto;
|
||||
text-align: left;
|
||||
}
|
||||
Reference in New Issue
Block a user