Dreamcore
799 lines
48 KiB
HTML
799 lines
48 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="Content-Language" content="en">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||
<title>AI Automation Studio — custom AI bots & automation for your business</title>
|
||
<meta name="description" content="Custom Telegram bots, AI chatbots trained on your data, and business automation. 24/7 lead capture, multilingual, no hallucinations. From €150, delivered in 2–4 days.">
|
||
<meta property="og:title" content="AI Automation Studio — custom AI bots for your business">
|
||
<meta property="og:description" content="Telegram bots & AI chatbots that capture leads 24/7, answer in your customer's language, and never invent answers. From €150 — quoted to your scope.">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://antonsemenovser.github.io/ai-automation-studio-site/">
|
||
<meta property="og:site_name" content="AI Automation Studio">
|
||
<meta property="og:image" content="https://antonsemenovser.github.io/ai-automation-studio-site/assets/lead-bot.png">
|
||
<meta property="og:locale" content="en">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="AI Automation Studio — custom AI bots & automation">
|
||
<meta name="twitter:description" content="Telegram bots & AI chatbots that capture leads 24/7, answer in your customer's language, and never invent answers. From €150.">
|
||
<meta name="twitter:image" content="https://antonsemenovser.github.io/ai-automation-studio-site/assets/lead-bot.png">
|
||
<meta name="robots" content="index, follow, max-image-preview:large">
|
||
<meta name="keywords" content="AI chatbot, Telegram bot development, business automation, custom chatbot, RAG chatbot, lead capture bot, no-code automation, AI assistant for business">
|
||
<link rel="canonical" href="https://antonsemenovser.github.io/ai-automation-studio-site/">
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@graph": [
|
||
{
|
||
"@type": "ProfessionalService",
|
||
"@id": "https://antonsemenovser.github.io/ai-automation-studio-site/#studio",
|
||
"name": "AI Automation Studio",
|
||
"url": "https://antonsemenovser.github.io/ai-automation-studio-site/",
|
||
"image": "https://antonsemenovser.github.io/ai-automation-studio-site/assets/lead-bot.png",
|
||
"description": "A small studio building custom Telegram bots, AI chatbots trained on your data, and business automation. 24/7 lead capture, multilingual, no hallucinations. Text-only, no calls. From €150.",
|
||
"priceRange": "€60–€1500+",
|
||
"areaServed": "Worldwide",
|
||
"availableLanguage": ["English", "German", "Russian", "Ukrainian"],
|
||
"knowsAbout": ["AI chatbots", "Telegram bot development", "business process automation", "retrieval-augmented generation", "lead capture automation", "AI assistants"],
|
||
"sameAs": [
|
||
"https://t.me/cotsemen_lead_bot",
|
||
"https://t.me/ai_bots_for_business"
|
||
],
|
||
"contactPoint": {
|
||
"@type": "ContactPoint",
|
||
"contactType": "sales",
|
||
"url": "https://t.me/cotsemen_lead_bot",
|
||
"availableLanguage": ["English", "German", "Russian", "Ukrainian"]
|
||
},
|
||
"hasOfferCatalog": {
|
||
"@type": "OfferCatalog",
|
||
"name": "AI bots & automation services",
|
||
"itemListElement": [
|
||
{ "@type": "Offer", "priceCurrency": "EUR", "price": "150", "itemOffered": { "@type": "Service", "name": "Chatbots & messaging bots", "description": "Custom Telegram and messaging bots for lead capture, FAQ and orders, 24/7, multilingual." } },
|
||
{ "@type": "Offer", "priceCurrency": "EUR", "price": "300", "itemOffered": { "@type": "Service", "name": "AI assistants on your data", "description": "AI chatbot that answers strictly from your FAQ, prices and docs — no hallucinations, honest handoff to a human otherwise." } },
|
||
{ "@type": "Offer", "priceCurrency": "EUR", "price": "150", "itemOffered": { "@type": "Service", "name": "Automation & integrations", "description": "Connect your tools and automate repetitive workflows: capture, routing, reminders, reports." } },
|
||
{ "@type": "Offer", "priceCurrency": "EUR", "price": "60", "itemOffered": { "@type": "Service", "name": "AI content & language", "description": "AI-generated content, translation and transcription in your customers' languages." } },
|
||
{ "@type": "Offer", "priceCurrency": "EUR", "price": "120", "itemOffered": { "@type": "Service", "name": "Data & reports", "description": "Automated KPI reports and dashboards delivered to Telegram, email or chat." } },
|
||
{ "@type": "Offer", "priceCurrency": "EUR", "price": "180", "itemOffered": { "@type": "Service", "name": "Web presence", "description": "Portfolio, menu and catalog websites." } },
|
||
{ "@type": "Offer", "priceCurrency": "EUR", "price": "1500", "itemOffered": { "@type": "Service", "name": "Web & mobile apps · MVPs", "description": "Larger builds — web and mobile apps, startup MVPs, admin panels and backends, built with our team." } }
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"@type": "WebSite",
|
||
"@id": "https://antonsemenovser.github.io/ai-automation-studio-site/#website",
|
||
"url": "https://antonsemenovser.github.io/ai-automation-studio-site/",
|
||
"name": "AI Automation Studio",
|
||
"publisher": { "@id": "https://antonsemenovser.github.io/ai-automation-studio-site/#studio" },
|
||
"inLanguage": "en"
|
||
},
|
||
{
|
||
"@type": "FAQPage",
|
||
"@id": "https://antonsemenovser.github.io/ai-automation-studio-site/#faq",
|
||
"mainEntity": [
|
||
{ "@type": "Question", "name": "How much does a custom AI bot cost?", "acceptedAnswer": { "@type": "Answer", "text": "Chatbots and automation start from €150, AI chatbots trained on your data from €300, and larger web or mobile app builds from €1500. Every project is quoted to your scope — message the bot for a free estimate." } },
|
||
{ "@type": "Question", "name": "How long does it take to build a bot?", "acceptedAnswer": { "@type": "Answer", "text": "A working bot in 2–4 days, customised to your texts, branding and logic." } },
|
||
{ "@type": "Question", "name": "What languages can the bot speak?", "acceptedAnswer": { "@type": "Answer", "text": "Any. Bots are built multilingual and answer each visitor in their own language — English, German, Russian, Ukrainian and more." } },
|
||
{ "@type": "Question", "name": "Do I need to get on a call?", "acceptedAnswer": { "@type": "Answer", "text": "No. The whole process is text-based and asynchronous — no calls. You message the bot or us, we sketch a solution for free, build it, and hand over the source." } },
|
||
{ "@type": "Question", "name": "Will the AI make up answers?", "acceptedAnswer": { "@type": "Answer", "text": "No. AI chatbots answer strictly from your data — your FAQ, prices and policies. When something is outside the knowledge base, the bot hands off honestly to a human instead of inventing an answer." } }
|
||
]
|
||
}
|
||
]
|
||
}
|
||
</script>
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%236366f1'/><stop offset='1' stop-color='%234f46e5'/></linearGradient></defs><rect width='64' height='64' rx='16' fill='url(%23g)'/><text x='32' y='44' font-family='Arial,Helvetica,sans-serif' font-size='30' font-weight='700' fill='white' text-anchor='middle'>AI</text></svg>">
|
||
<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=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root{ --bg:#0a0f1e; --panel:#111c34; --panel2:#16223d; --line:#243049;
|
||
--accent:#6366f1; --accent2:#4f46e5; --accent3:#22d3ee; --text:#eef2f7; --muted:#93a4c0; --green:#5eba7d;
|
||
--shadow:0 18px 40px rgba(0,0,0,.42); }
|
||
*{ box-sizing:border-box; margin:0; padding:0; }
|
||
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
|
||
body{ font-family:'Inter',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
|
||
background:var(--bg); color:var(--text); line-height:1.55;
|
||
overflow-x:hidden; -webkit-font-smoothing:antialiased; }
|
||
/* ambient background glow + faint grid — gives the page depth like a real SaaS site */
|
||
body:before{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
|
||
background:
|
||
radial-gradient(58% 44% at 50% -8%, rgba(99,102,241,.22), transparent 72%),
|
||
radial-gradient(40% 30% at 88% 6%, rgba(34,211,238,.10), transparent 70%),
|
||
radial-gradient(45% 35% at 10% 12%, rgba(79,70,229,.12), transparent 72%); }
|
||
body:after{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.5;
|
||
background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
|
||
linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
|
||
background-size:46px 46px;
|
||
-webkit-mask-image:radial-gradient(70% 55% at 50% 0%,#000,transparent 75%);
|
||
mask-image:radial-gradient(70% 55% at 50% 0%,#000,transparent 75%); }
|
||
a{ color:inherit; text-decoration:none; }
|
||
img{ max-width:100%; height:auto; }
|
||
section[id]{ scroll-margin-top:78px; }
|
||
.wrap{ max-width:1300px; margin:0 auto; padding:0 24px; }
|
||
@media(max-width:680px){ .wrap{ padding:0 16px; } }
|
||
.btn{ display:inline-block; padding:14px 24px; border-radius:12px; font-weight:600;
|
||
font-size:15px; cursor:pointer; transition:transform .12s ease, box-shadow .2s, opacity .2s; }
|
||
.btn:hover{ transform:translateY(-2px); }
|
||
.btn-primary{ background:linear-gradient(135deg,#6366f1,#4f46e5); color:#fff;
|
||
box-shadow:0 10px 26px rgba(79,70,229,.42); }
|
||
.btn-primary:hover{ box-shadow:0 14px 34px rgba(99,102,241,.55); }
|
||
.btn-ghost{ background:rgba(24,35,61,.7); color:#cdd7ea; border:1px solid var(--line); }
|
||
.btn-ghost:hover{ border-color:#3a4a73; background:#1d2a49; }
|
||
|
||
header{ padding:14px 0; border-bottom:1px solid var(--line); position:sticky; top:0;
|
||
background:rgba(11,17,32,.92); backdrop-filter:blur(8px); z-index:10; }
|
||
.nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
|
||
.brand{ font-weight:700; font-size:17px; display:flex; align-items:center; gap:9px; }
|
||
.brand .dot{ width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg,#6366f1,#4f46e5);
|
||
display:flex; align-items:center; justify-content:center; font-size:15px; flex:0 0 auto; }
|
||
.nav-right{ display:flex; align-items:center; gap:16px; }
|
||
.nav .links{ display:flex; gap:20px; font-size:14px; color:var(--muted); }
|
||
.nav .links a:hover{ color:#fff; }
|
||
@media(max-width:680px){ .nav .links{ display:none; } }
|
||
|
||
/* language switcher */
|
||
.lang{ position:relative; display:flex; align-items:center; }
|
||
.lang select{ -webkit-appearance:none; appearance:none; cursor:pointer;
|
||
background:#18233d; color:#dbe4f5; border:1px solid var(--line);
|
||
border-radius:11px; padding:9px 34px 9px 34px; font-size:14px; font-weight:600;
|
||
max-width:160px; }
|
||
.lang:before{ content:"🌐"; position:absolute; left:11px; font-size:14px; pointer-events:none; }
|
||
.lang:after{ content:"▾"; position:absolute; right:13px; color:var(--muted); pointer-events:none; }
|
||
.lang select:focus{ outline:none; border-color:var(--accent); }
|
||
|
||
.hero{ text-align:center; padding:76px 0 54px; position:relative; }
|
||
.badge{ display:inline-flex; align-items:center; gap:8px; margin-bottom:22px;
|
||
background:rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.35);
|
||
color:#c7d0f0; padding:7px 15px; border-radius:30px; font-size:13px; font-weight:500; }
|
||
.badge .pulse{ width:8px; height:8px; border-radius:50%; background:var(--green);
|
||
box-shadow:0 0 0 0 rgba(94,186,125,.6); animation:pulse 2.2s infinite; }
|
||
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(94,186,125,.55);} 70%{box-shadow:0 0 0 9px rgba(94,186,125,0);} 100%{box-shadow:0 0 0 0 rgba(94,186,125,0);} }
|
||
.hero h1{ font-size:50px; line-height:1.1; font-weight:800; letter-spacing:-.025em;
|
||
background:linear-gradient(180deg,#fff,#aab8d6); -webkit-background-clip:text;
|
||
background-clip:text; color:transparent; }
|
||
.hero h1 .grad{ background:linear-gradient(120deg,#818cf8,#22d3ee); -webkit-background-clip:text;
|
||
background-clip:text; color:transparent; }
|
||
.hero p{ color:var(--muted); font-size:18.5px; max-width:660px; margin:20px auto 32px; }
|
||
.hero .cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
|
||
.chips{ display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin-top:36px; }
|
||
.chips span{ background:rgba(17,28,52,.7); border:1px solid var(--line); color:#cbd5e1;
|
||
padding:8px 14px; border-radius:20px; font-size:13px; backdrop-filter:blur(4px); }
|
||
|
||
/* two-column hero: copy on the left, live phone/chat mockup on the right */
|
||
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center; text-align:left; }
|
||
.hero-copy .cta{ justify-content:flex-start; }
|
||
.hero-copy .chips{ justify-content:flex-start; }
|
||
.hero-copy p{ margin:20px 0 32px; }
|
||
.hero-visual{ display:flex; justify-content:center; }
|
||
.phone{ width:300px; max-width:100%; background:#0e1730; border:1px solid #2b3a5e; border-radius:32px;
|
||
padding:14px 12px 20px; position:relative;
|
||
box-shadow:0 34px 80px rgba(0,0,0,.55), 0 0 0 7px rgba(99,102,241,.06); }
|
||
.phone .notch{ width:110px; height:6px; border-radius:6px; background:#2b3a5e; margin:2px auto 13px; }
|
||
.chat-head{ display:flex; align-items:center; gap:10px; padding:0 6px 12px; border-bottom:1px solid #1e2c4a; margin-bottom:13px; }
|
||
.chat-head .av{ width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#6366f1,#4f46e5);
|
||
display:flex; align-items:center; justify-content:center; font-size:18px; flex:0 0 auto; }
|
||
.chat-head .who{ font-size:13.5px; font-weight:600; }
|
||
.chat-head .st{ font-size:11px; color:var(--green); }
|
||
.msgs{ display:flex; flex-direction:column; gap:9px; padding:0 4px; }
|
||
.msg{ max-width:84%; padding:9px 12px; border-radius:15px; font-size:13px; line-height:1.42; }
|
||
.msg.in{ align-self:flex-start; background:#1b2949; border-bottom-left-radius:5px; color:#dbe4f5; }
|
||
.msg.out{ align-self:flex-end; background:linear-gradient(135deg,#6366f1,#4f46e5); color:#fff; border-bottom-right-radius:5px; }
|
||
|
||
@media(max-width:860px){
|
||
.hero-grid{ grid-template-columns:1fr; gap:34px; text-align:center; }
|
||
.hero-copy .cta, .hero-copy .chips{ justify-content:center; }
|
||
.hero-copy p{ margin:20px auto 32px; }
|
||
.hero-visual{ order:2; }
|
||
}
|
||
@media(max-width:680px){
|
||
.hero{ padding:40px 0 34px; }
|
||
.hero h1{ font-size:33px; }
|
||
.hero p{ font-size:16px; }
|
||
.hero-copy .cta .btn{ width:100%; }
|
||
.phone{ width:280px; }
|
||
}
|
||
|
||
section{ padding:48px 0; }
|
||
.sec-title{ text-align:center; font-size:28px; font-weight:700; margin-bottom:8px; }
|
||
.sec-sub{ text-align:center; color:var(--muted); margin-bottom:34px; }
|
||
@media(max-width:680px){ section{ padding:36px 0; } .sec-title{ font-size:23px; } }
|
||
|
||
.offers{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
|
||
@media(max-width:880px){ .offers{ grid-template-columns:1fr; max-width:440px; margin:0 auto; } }
|
||
.card{ background:linear-gradient(180deg,#13203b,#101a31); border:1px solid var(--line); border-radius:18px;
|
||
overflow:hidden; display:flex; flex-direction:column;
|
||
transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease; }
|
||
.card:hover{ transform:translateY(-4px); border-color:#3a4a73; box-shadow:var(--shadow); }
|
||
.card .shot{ background:radial-gradient(120% 100% at 50% 0%,#1b2949,#13203b); padding:18px; text-align:center; border-bottom:1px solid var(--line); }
|
||
.card .shot img{ max-width:100%; border-radius:10px; max-height:360px; box-shadow:0 8px 22px rgba(0,0,0,.4); }
|
||
.card .body{ padding:22px; flex:1; display:flex; flex-direction:column; }
|
||
.card h3{ font-size:20px; margin-bottom:6px; }
|
||
.card .price{ color:var(--green); font-weight:700; margin-bottom:12px; }
|
||
.card ul{ list-style:none; color:var(--muted); font-size:14px; margin-bottom:18px; }
|
||
.card ul li{ padding:4px 0 4px 22px; position:relative; }
|
||
.card ul li:before{ content:"✓"; position:absolute; left:0; color:var(--accent); }
|
||
.card .btn{ margin-top:auto; text-align:center; }
|
||
|
||
/* live video feed — auto-updated from feed.json by automation/site_feed.py */
|
||
.feed{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
|
||
@media(max-width:880px){ .feed{ grid-template-columns:1fr 1fr; } }
|
||
@media(max-width:560px){ .feed{ grid-template-columns:1fr; } }
|
||
.vcard{ background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;
|
||
display:flex; flex-direction:column; transition:transform .16s ease, border-color .2s ease, box-shadow .2s ease; }
|
||
.vcard:hover{ transform:translateY(-3px); border-color:#3a4a73; box-shadow:var(--shadow); }
|
||
.vthumb{ position:relative; aspect-ratio:16/9; background:#0e1730; overflow:hidden; }
|
||
.vthumb img{ width:100%; height:100%; object-fit:cover; display:block; }
|
||
.vthumb .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
|
||
background:rgba(8,12,24,.20); opacity:0; transition:opacity .2s; }
|
||
.vcard:hover .vthumb .play{ opacity:1; }
|
||
.vthumb .play span{ width:52px; height:52px; border-radius:50%; background:rgba(99,102,241,.95);
|
||
display:flex; align-items:center; justify-content:center; font-size:19px; color:#fff; padding-left:3px; }
|
||
.vthumb .vtag{ position:absolute; top:10px; left:10px; background:rgba(8,12,24,.8);
|
||
border:1px solid var(--line); color:#cbd5e1; font-size:11px; font-weight:600;
|
||
padding:4px 9px; border-radius:20px; }
|
||
.vph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
|
||
padding:16px; background:radial-gradient(120% 100% at 50% 0%,#1b2949,#0e1730);
|
||
color:#9fb0d0; font-weight:700; font-size:15px; }
|
||
|
||
/* 3-column layout: news rails flank the central video grid */
|
||
.feed-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.2fr) minmax(0,1fr); gap:20px; align-items:start;
|
||
position:relative; left:50%; transform:translateX(-50%); width:min(95vw,1560px); }
|
||
.feed-center{ padding:18px 22px 22px; border:1px solid var(--line); border-radius:16px;
|
||
background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0)); }
|
||
.feed-center .feed{ grid-template-columns:repeat(2,1fr); }
|
||
.news-rail{ display:flex; flex-direction:column; gap:14px; padding:0; }
|
||
.rail-h{ font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
|
||
color:var(--muted); padding:0 2px 13px; }
|
||
.center-h{ color:#aab8d6; }
|
||
.nrail-card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; display:block;
|
||
transition:transform .16s ease, border-color .2s ease, box-shadow .2s ease; }
|
||
.nrail-card:hover{ transform:translateY(-2px); border-color:#3a4a73; box-shadow:var(--shadow); }
|
||
.nrail-card .nthumb{ position:relative; aspect-ratio:16/9; background:#0e1730; overflow:hidden; }
|
||
.nrail-card .nthumb img{ width:100%; height:100%; object-fit:cover; display:block; }
|
||
.nrail-card .ntag{ position:absolute; top:8px; left:8px; background:rgba(8,12,24,.8); border:1px solid var(--line);
|
||
color:#cbd5e1; font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:20px; }
|
||
.nrail-card .nb{ padding:11px 12px 13px; }
|
||
.nrail-card .nt{ font-size:13px; font-weight:600; line-height:1.35; display:-webkit-box;
|
||
-webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
|
||
.nrail-card .nm{ font-size:11.5px; color:var(--muted); margin-top:7px; }
|
||
@media(max-width:980px){
|
||
.feed-layout{ grid-template-columns:1fr; left:auto; transform:none; width:auto; gap:26px; }
|
||
.feed-center{ order:-1; border:0; padding:0; background:none; }
|
||
.news-rail{ flex-direction:row; flex-wrap:wrap; padding:0; }
|
||
.news-rail .rail-h{ flex-basis:100%; }
|
||
.news-rail .nrail-card{ flex:1 1 calc(50% - 7px); }
|
||
}
|
||
@media(max-width:560px){
|
||
.feed-center .feed{ grid-template-columns:1fr; }
|
||
.news-rail .nrail-card{ flex-basis:100%; }
|
||
}
|
||
.vbody{ padding:14px 15px 16px; display:flex; flex-direction:column; gap:9px; flex:1; }
|
||
.vbody .t{ font-size:14.5px; font-weight:600; line-height:1.35; display:-webkit-box;
|
||
-webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
|
||
.vbody .m{ margin-top:auto; font-size:12.5px; color:var(--muted); display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
|
||
.vbody .m .src{ color:#9fb0d0; font-weight:600; }
|
||
.feed-updated{ text-align:center; color:var(--muted); font-size:12.5px; margin-top:20px; }
|
||
|
||
/* in-page video player (lightbox) — keeps the visitor on the site */
|
||
.vmodal{ position:fixed; inset:0; background:rgba(4,7,14,.86); backdrop-filter:blur(3px);
|
||
display:none; align-items:center; justify-content:center; z-index:60; padding:20px; }
|
||
.vmodal.open{ display:flex; }
|
||
.vmodal-box{ width:min(920px,100%); position:relative; }
|
||
.vmodal-frame{ position:relative; aspect-ratio:16/9; background:#000; border-radius:14px;
|
||
overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.6); }
|
||
.vmodal-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
|
||
.vmodal-x{ position:absolute; top:-46px; right:0; width:38px; height:38px; border-radius:50%;
|
||
background:#1b2949; border:1px solid var(--line); color:#fff; font-size:20px; cursor:pointer;
|
||
display:flex; align-items:center; justify-content:center; }
|
||
.vmodal-x:hover{ background:#26365c; }
|
||
|
||
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
|
||
@media(max-width:780px){ .features{ grid-template-columns:1fr; } }
|
||
.feat{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px;
|
||
transition:transform .16s ease, border-color .2s ease, box-shadow .2s ease; }
|
||
.feat:hover{ transform:translateY(-3px); border-color:#3a4a73; box-shadow:var(--shadow); }
|
||
.feat .ic{ font-size:24px; margin-bottom:10px; }
|
||
.feat h4{ font-size:16px; margin-bottom:5px; }
|
||
.feat p{ color:var(--muted); font-size:14px; }
|
||
|
||
.catalog{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
|
||
@media(max-width:880px){ .catalog{ grid-template-columns:1fr 1fr; } }
|
||
@media(max-width:600px){ .catalog{ grid-template-columns:1fr; } }
|
||
.cat{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px;
|
||
display:flex; flex-direction:column;
|
||
transition:transform .16s ease, border-color .2s ease, box-shadow .2s ease; }
|
||
.cat:hover{ transform:translateY(-3px); border-color:#3a4a73; box-shadow:var(--shadow); }
|
||
.cat:hover .cat-h .ic{ background:linear-gradient(135deg,#6366f1,#4f46e5); }
|
||
.cat-h{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
|
||
.cat-h .ic{ font-size:22px; width:40px; height:40px; border-radius:11px; background:var(--panel2);
|
||
display:flex; align-items:center; justify-content:center; flex:0 0 auto; transition:background .2s ease; }
|
||
.cat-h h3{ font-size:16px; line-height:1.25; }
|
||
.cat ul{ list-style:none; color:var(--muted); font-size:14px; flex:1; }
|
||
.cat ul li{ padding:5px 0 5px 20px; position:relative; }
|
||
.cat ul li:before{ content:"›"; position:absolute; left:4px; color:var(--accent); font-weight:700; }
|
||
.cat .price{ margin-top:14px; color:var(--green); font-weight:700; font-size:14px; }
|
||
|
||
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:s; }
|
||
@media(max-width:780px){ .steps{ grid-template-columns:1fr; } }
|
||
.step{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px; position:relative;
|
||
transition:transform .16s ease, border-color .2s ease, box-shadow .2s ease; }
|
||
.step:hover{ transform:translateY(-3px); border-color:#3a4a73; box-shadow:var(--shadow); }
|
||
.step:before{ counter-increment:s; content:counter(s); position:absolute; top:-14px; left:20px;
|
||
width:30px; height:30px; border-radius:9px; background:var(--accent2); color:#fff;
|
||
display:flex; align-items:center; justify-content:center; font-weight:700; }
|
||
.step h4{ margin:10px 0 5px; font-size:16px; }
|
||
.step p{ color:var(--muted); font-size:14px; }
|
||
|
||
.final{ text-align:center; background:linear-gradient(135deg,#1a2342,#141d36);
|
||
border:1px solid var(--line); border-radius:20px; padding:48px 24px; }
|
||
.final h2{ font-size:30px; margin-bottom:10px; }
|
||
.final p{ color:var(--muted); margin-bottom:26px; }
|
||
.final .btn{ margin:6px; }
|
||
@media(max-width:680px){ .final{ padding:36px 18px; } .final h2{ font-size:24px; } .final .btn{ width:100%; } }
|
||
|
||
footer{ text-align:center; color:#5b6b86; font-size:13px; padding:36px 0 50px; border-top:1px solid var(--line); margin-top:20px; }
|
||
|
||
/* scroll-reveal — subtle fade-up as sections enter view (added via JS, degrades safely) */
|
||
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
|
||
.reveal.in{ opacity:1; transform:none; }
|
||
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }
|
||
|
||
/* hide Google Translate chrome (banner / tooltip / body shift) */
|
||
.goog-te-banner-frame, .goog-te-gadget, #google_translate_element{ display:none !important; }
|
||
.goog-tooltip, .goog-tooltip:hover{ display:none !important; }
|
||
.goog-text-highlight{ background:none !important; box-shadow:none !important; }
|
||
body{ top:0 !important; position:static !important; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header><div class="wrap nav">
|
||
<div class="brand"><span class="dot">🤖</span> AI Automation Studio</div>
|
||
<div class="nav-right">
|
||
<nav class="links">
|
||
<a href="#offers">Demos</a>
|
||
<a href="#feed">Videos</a>
|
||
<a href="#services">Services</a>
|
||
<a href="#how">How it works</a>
|
||
</nav>
|
||
<div class="lang">
|
||
<select id="langSelect" aria-label="Choose language" onchange="doGTranslate(this.value)">
|
||
<option value="en">English</option>
|
||
<optgroup label="Europe">
|
||
<option value="de">Deutsch — German</option>
|
||
<option value="fr">Français — French</option>
|
||
<option value="es">Español — Spanish</option>
|
||
<option value="it">Italiano — Italian</option>
|
||
<option value="pt">Português — Portuguese</option>
|
||
<option value="nl">Nederlands — Dutch</option>
|
||
<option value="pl">Polski — Polish</option>
|
||
<option value="sv">Svenska — Swedish</option>
|
||
<option value="fi">Suomi — Finnish</option>
|
||
<option value="da">Dansk — Danish</option>
|
||
<option value="no">Norsk — Norwegian</option>
|
||
<option value="is">Íslenska — Icelandic</option>
|
||
<option value="ru">Русский — Russian</option>
|
||
<option value="uk">Українська — Ukrainian</option>
|
||
<option value="be">Беларуская — Belarusian</option>
|
||
<option value="cs">Čeština — Czech</option>
|
||
<option value="sk">Slovenčina — Slovak</option>
|
||
<option value="hu">Magyar — Hungarian</option>
|
||
<option value="ro">Română — Romanian</option>
|
||
<option value="bg">Български — Bulgarian</option>
|
||
<option value="el">Ελληνικά — Greek</option>
|
||
<option value="hr">Hrvatski — Croatian</option>
|
||
<option value="sr">Српски — Serbian</option>
|
||
<option value="sl">Slovenščina — Slovenian</option>
|
||
<option value="bs">Bosanski — Bosnian</option>
|
||
<option value="mk">Македонски — Macedonian</option>
|
||
<option value="sq">Shqip — Albanian</option>
|
||
<option value="lt">Lietuvių — Lithuanian</option>
|
||
<option value="lv">Latviešu — Latvian</option>
|
||
<option value="et">Eesti — Estonian</option>
|
||
<option value="ga">Gaeilge — Irish</option>
|
||
<option value="mt">Malti — Maltese</option>
|
||
<option value="ca">Català — Catalan</option>
|
||
<option value="eu">Euskara — Basque</option>
|
||
<option value="gl">Galego — Galician</option>
|
||
<option value="cy">Cymraeg — Welsh</option>
|
||
<option value="lb">Lëtzebuergesch — Luxembourgish</option>
|
||
<option value="tr">Türkçe — Turkish</option>
|
||
</optgroup>
|
||
<optgroup label="World">
|
||
<option value="ar">العربية — Arabic</option>
|
||
<option value="he">עברית — Hebrew</option>
|
||
<option value="zh-CN">中文 — Chinese</option>
|
||
<option value="ja">日本語 — Japanese</option>
|
||
<option value="ko">한국어 — Korean</option>
|
||
<option value="hi">हिन्दी — Hindi</option>
|
||
<option value="id">Bahasa Indonesia</option>
|
||
<option value="vi">Tiếng Việt — Vietnamese</option>
|
||
<option value="th">ไทย — Thai</option>
|
||
</optgroup>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div></header>
|
||
|
||
<main class="wrap">
|
||
|
||
<section class="hero">
|
||
<div class="hero-grid">
|
||
<div class="hero-copy">
|
||
<span class="badge"><span class="pulse"></span> Live demo bots you can try right now</span>
|
||
<h1>Custom AI bots & <span class="grad">automation</span><br>for your business</h1>
|
||
<p>Bots, AI assistants trained on your data, automation, content and web —
|
||
built fast, all in text, no calls. From capturing leads 24/7 to answering
|
||
customers in any language without ever inventing facts.</p>
|
||
<div class="cta">
|
||
<a class="btn btn-primary" href="demo.html">🤖 Try the live AI demo</a>
|
||
<a class="btn btn-ghost" href="https://t.me/cotsemen_lead_bot?start=site">💬 Message the bot</a>
|
||
</div>
|
||
<div class="chips">
|
||
<span>🌍 Any language</span>
|
||
<span>🛟 No hallucinations</span>
|
||
<span>⚡ 24/7</span>
|
||
<span>🚀 Ready in 2–4 days</span>
|
||
<span>💬 Text-based</span>
|
||
</div>
|
||
</div>
|
||
<div class="hero-visual">
|
||
<div class="phone">
|
||
<div class="notch"></div>
|
||
<div class="chat-head">
|
||
<span class="av">🤖</span>
|
||
<div><div class="who">AI Studio Bot</div><div class="st">● online · replies instantly</div></div>
|
||
</div>
|
||
<div class="msgs">
|
||
<div class="msg in">Hi! Do you build Telegram bots for business?</div>
|
||
<div class="msg out">Yes — lead capture, FAQ & orders, 24/7, in any language. What's your business? 🙂</div>
|
||
<div class="msg in">Магазин квітів 🌷</div>
|
||
<div class="msg out">Perfect. A bot that takes orders and answers FAQs in your customers' language. Want a free quote? 💬</div>
|
||
<div class="msg in">Yes please!</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="offers">
|
||
<h2 class="sec-title">Featured — try them live</h2>
|
||
<p class="sec-sub">Working bots you can test right now, not slides.</p>
|
||
<div class="offers">
|
||
<div class="card">
|
||
<div class="shot"><img src="assets/lead-bot.png" alt="Telegram lead-capture bot demo"></div>
|
||
<div class="body">
|
||
<h3>Telegram Lead-Capture Bot</h3>
|
||
<div class="price">from €150</div>
|
||
<ul>
|
||
<li>Captures every lead 24/7, even after hours</li>
|
||
<li>Auto-answers FAQs in the customer's language</li>
|
||
<li>Instantly notifies you about each new lead</li>
|
||
<li>Built-in mini-CRM (/leads, /stats)</li>
|
||
</ul>
|
||
<a class="btn btn-primary" href="https://t.me/cotsemen_lead_bot?start=site">Try it live →</a>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="shot"><img src="assets/ai-chatbot.png" alt="AI chatbot trained on business data demo"></div>
|
||
<div class="body">
|
||
<h3>AI Chatbot on Your Data</h3>
|
||
<div class="price">from €300</div>
|
||
<ul>
|
||
<li>Answers strictly from your FAQ, prices & policies</li>
|
||
<li>Replies in any language your customer writes in</li>
|
||
<li>Hands off to a human when unsure — never invents</li>
|
||
<li>Closes up to 80% of routine support questions</li>
|
||
</ul>
|
||
<a class="btn btn-primary" href="https://t.me/cotsemen_lead_bot?start=site">Request this bot →</a>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="shot"><img src="assets/automation.png" alt="Automated daily report delivered to Telegram"></div>
|
||
<div class="body">
|
||
<h3>Automated Daily Report</h3>
|
||
<div class="price">from €150</div>
|
||
<ul>
|
||
<li>Turns your raw data into a morning briefing</li>
|
||
<li>KPIs, trends & top performers, auto-calculated</li>
|
||
<li>Plain-language AI summary — no spreadsheets</li>
|
||
<li>Delivered to Telegram on a schedule</li>
|
||
</ul>
|
||
<a class="btn btn-primary" href="https://t.me/cotsemen_lead_bot?start=site">Automate my reports →</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="feed">
|
||
<h2 class="sec-title">Fresh in AI & automation</h2>
|
||
<p class="sec-sub">Fresh videos in the middle, latest AI news on the sides — auto-updated daily
|
||
by our own bots, straight from the source. A taste of the automation we build.</p>
|
||
<div class="feed-layout">
|
||
<aside class="news-rail" id="newsLeft" aria-label="Latest AI news"></aside>
|
||
<div class="feed-center">
|
||
<div class="rail-h center-h">🎬 Fresh videos</div>
|
||
<div class="feed" id="feedGrid"></div>
|
||
</div>
|
||
<aside class="news-rail" id="newsRight" aria-label="Latest AI news"></aside>
|
||
</div>
|
||
<p class="feed-updated" id="feedUpdated"></p>
|
||
</section>
|
||
|
||
<section id="services">
|
||
<h2 class="sec-title">Everything we can build for you</h2>
|
||
<p class="sec-sub">Bots, AI assistants, automation, content and web — pick what moves your business.</p>
|
||
<div class="catalog">
|
||
|
||
<div class="cat">
|
||
<div class="cat-h"><span class="ic">🤖</span><h3>Chatbots & messaging bots</h3></div>
|
||
<ul>
|
||
<li>Telegram lead-capture & FAQ bots</li>
|
||
<li>WhatsApp / Instagram / Messenger bots</li>
|
||
<li>Discord & Slack bots for teams & communities</li>
|
||
<li>Booking & appointment bots</li>
|
||
<li>Order & delivery notification bots</li>
|
||
</ul>
|
||
<div class="price">from €150</div>
|
||
</div>
|
||
|
||
<div class="cat">
|
||
<div class="cat-h"><span class="ic">🧠</span><h3>AI assistants on your data</h3></div>
|
||
<ul>
|
||
<li>AI chatbot trained on your FAQ, prices & docs</li>
|
||
<li>Website chat widget that answers 24/7</li>
|
||
<li>Internal assistant that searches company docs</li>
|
||
<li>Support auto-responder with human handoff</li>
|
||
<li>Multilingual answers in any language</li>
|
||
</ul>
|
||
<div class="price">from €300</div>
|
||
</div>
|
||
|
||
<div class="cat">
|
||
<div class="cat-h"><span class="ic">⚙️</span><h3>Automation & integrations</h3></div>
|
||
<ul>
|
||
<li>Connect your tools: forms → Sheets → email → CRM</li>
|
||
<li>Auto-reply & smart email routing</li>
|
||
<li>Scraping & price / competitor monitoring</li>
|
||
<li>Scheduled reports & alerts</li>
|
||
<li>Invoice / receipt processing (OCR + extraction)</li>
|
||
</ul>
|
||
<div class="price">from €150</div>
|
||
</div>
|
||
|
||
<div class="cat">
|
||
<div class="cat-h"><span class="ic">✍️</span><h3>AI content & language</h3></div>
|
||
<ul>
|
||
<li>Blog, product & SEO content generation</li>
|
||
<li>Social media posts + auto-scheduling</li>
|
||
<li>Translation & localization</li>
|
||
<li>Email, offer & proposal drafting</li>
|
||
<li>Audio & video transcription (speech → text)</li>
|
||
<li>Document & meeting summarization</li>
|
||
</ul>
|
||
<div class="price">from €60</div>
|
||
</div>
|
||
|
||
<div class="cat">
|
||
<div class="cat-h"><span class="ic">📊</span><h3>Data & reports</h3></div>
|
||
<ul>
|
||
<li>CSV / Excel → insights & charts</li>
|
||
<li>Automated dashboards</li>
|
||
<li>Lead enrichment & list building</li>
|
||
<li>Review & feedback analysis</li>
|
||
<li>Survey / form analysis</li>
|
||
</ul>
|
||
<div class="price">from €120</div>
|
||
</div>
|
||
|
||
<div class="cat">
|
||
<div class="cat-h"><span class="ic">🌐</span><h3>Web presence</h3></div>
|
||
<ul>
|
||
<li>Landing pages & one-page sites</li>
|
||
<li>Portfolio / menu / catalog sites</li>
|
||
<li>Booking & contact pages</li>
|
||
<li>Telegram channel setup + content automation</li>
|
||
<li>Email newsletter automation</li>
|
||
</ul>
|
||
<div class="price">from €180</div>
|
||
</div>
|
||
|
||
<div class="cat">
|
||
<div class="cat-h"><span class="ic">🚀</span><h3>Web & mobile apps · MVPs</h3></div>
|
||
<ul>
|
||
<li>Custom web apps & client dashboards</li>
|
||
<li>MVP for your startup — idea to working product</li>
|
||
<li>Internal tools, admin panels & CRMs</li>
|
||
<li>API & database back-ends</li>
|
||
<li>Larger multi-part systems — handled by our team</li>
|
||
</ul>
|
||
<div class="price">from €1,500</div>
|
||
</div>
|
||
|
||
</div>
|
||
<p class="sec-sub" style="margin-top:26px;margin-bottom:0">
|
||
We're a small studio with a team, so we take on bigger builds too — not just quick bots.
|
||
Prices shown are starting points; every project is quoted to your exact scope —
|
||
<a href="https://t.me/cotsemen_lead_bot?start=site" style="color:#8aa0c8">message the bot</a> for a
|
||
free estimate in your language. If it can be done in software, we can probably build it.
|
||
</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h2 class="sec-title">Why it works</h2>
|
||
<p class="sec-sub">The things a business actually cares about.</p>
|
||
<div class="features">
|
||
<div class="feat"><div class="ic">🌍</div><h4>Speaks your customer's language</h4><p>Auto-detects and replies in the visitor's own language — one bot, every visitor.</p></div>
|
||
<div class="feat"><div class="ic">🛟</div><h4>Never makes things up</h4><p>Answers only from your data; hands off to a human when it doesn't know.</p></div>
|
||
<div class="feat"><div class="ic">⚡</div><h4>Always on</h4><p>Captures and answers 24/7, so you never lose a lead to a slow reply.</p></div>
|
||
<div class="feat"><div class="ic">🚀</div><h4>Delivered in days</h4><p>A working bot in 2–4 days, with source code and a short guide.</p></div>
|
||
<div class="feat"><div class="ic">💬</div><h4>All in text</h4><p>Everything async and in writing — precise, with a clear record. No calls.</p></div>
|
||
<div class="feat"><div class="ic">🔧</div><h4>Yours to keep</h4><p>You get the source. Re-skin or extend it anytime.</p></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="how">
|
||
<h2 class="sec-title">How it works</h2>
|
||
<p class="sec-sub">From idea to a working bot in three steps.</p>
|
||
<div class="steps">
|
||
<div class="step"><h4>1 · Tell me the task</h4><p>Message the bot or me with what you need. I sketch a solution for free.</p></div>
|
||
<div class="step"><h4>2 · I build it</h4><p>A working bot in 2–4 days, customised to your texts, branding and logic.</p></div>
|
||
<div class="step"><h4>3 · You go live</h4><p>I deploy it, hand over the source, and stay on for support.</p></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<div class="final">
|
||
<h2>Got a task to automate?</h2>
|
||
<p>Message the live bot — it'll take your request in your language. Free assessment, no calls.</p>
|
||
<a class="btn btn-primary" href="https://t.me/cotsemen_lead_bot?start=site">💬 Message the bot</a>
|
||
<a class="btn btn-ghost" href="https://t.me/ai_bots_for_business">📢 Follow the channel</a>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<footer>
|
||
AI Automation Studio · custom AI bots & automation ·
|
||
<a href="https://t.me/cotsemen_lead_bot?start=site" style="color:#8aa0c8">@cotsemen_lead_bot</a>
|
||
<br><br>
|
||
<a href="demo.html" style="color:#a9b8d8; font-weight:600">🤖 Live AI demo</a><br><br>
|
||
<strong style="color:#8aa0c8">Guides:</strong>
|
||
<a href="answers/what-is-an-ai-agent.html" style="color:#8aa0c8">What is an AI agent</a> ·
|
||
<a href="answers/ai-agent-for-business.html" style="color:#8aa0c8">AI agent for business</a> ·
|
||
<a href="answers/ai-chatbot-on-your-own-data.html" style="color:#8aa0c8">AI chatbot on your data (RAG)</a> ·
|
||
<a href="answers/connect-ai-to-your-tools.html" style="color:#8aa0c8">Connect AI to your tools</a> ·
|
||
<a href="answers/ai-vs-automation.html" style="color:#8aa0c8">AI vs automation</a> ·
|
||
<a href="answers/ai-document-processing.html" style="color:#8aa0c8">AI document processing</a> ·
|
||
<a href="answers/custom-ai-vs-off-the-shelf.html" style="color:#8aa0c8">Custom AI vs off-the-shelf</a> ·
|
||
<a href="answers/ai-agent-guardrails.html" style="color:#8aa0c8">AI agent guardrails</a> ·
|
||
<a href="answers/telegram-bot-cost.html" style="color:#8aa0c8">Telegram bot cost</a> ·
|
||
<a href="answers/ai-chatbot-cost.html" style="color:#8aa0c8">AI chatbot cost</a> ·
|
||
<a href="answers/telegram-bot-for-business.html" style="color:#8aa0c8">What a Telegram bot can do</a> ·
|
||
<a href="answers/business-automation-cost.html" style="color:#8aa0c8">Business automation cost</a> ·
|
||
<a href="answers/telegram-vs-whatsapp-bot.html" style="color:#8aa0c8">Telegram vs WhatsApp bot</a> ·
|
||
<a href="answers/how-to-add-chatbot-to-website.html" style="color:#8aa0c8">Add a chatbot to your website</a> ·
|
||
<a href="answers/telegram-bot-for-restaurant.html" style="color:#8aa0c8">Bot for a restaurant</a> ·
|
||
<a href="answers/telegram-bot-for-online-shop.html" style="color:#8aa0c8">Bot for an online shop</a> ·
|
||
<a href="answers/how-long-to-build-a-telegram-bot.html" style="color:#8aa0c8">How long to build a bot</a> ·
|
||
<a href="answers/do-i-need-a-bot-or-an-app.html" style="color:#8aa0c8">Bot or app?</a> ·
|
||
<a href="answers/telegram-bot-for-real-estate.html" style="color:#8aa0c8">Bot for real estate</a> ·
|
||
<a href="answers/lead-generation-bot.html" style="color:#8aa0c8">Lead-generation bot</a> ·
|
||
<a href="answers/appointment-booking-bot.html" style="color:#8aa0c8">Appointment-booking bot</a> ·
|
||
<a href="answers/chatbot-vs-human-support.html" style="color:#8aa0c8">Chatbot vs human support</a>
|
||
</footer>
|
||
|
||
<!-- subtle scroll-reveal; if unsupported, content stays fully visible -->
|
||
<script>
|
||
(function(){
|
||
if(!('IntersectionObserver' in window)) return;
|
||
var els = document.querySelectorAll('#offers .card, .catalog .cat, .features .feat, .steps .step, .final');
|
||
els.forEach(function(el){ el.classList.add('reveal'); });
|
||
var io = new IntersectionObserver(function(entries){
|
||
entries.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); } });
|
||
}, { threshold:0.06, rootMargin:'0px 0px -30px 0px' });
|
||
els.forEach(function(el){ io.observe(el); });
|
||
})();
|
||
</script>
|
||
|
||
<!-- in-page video player -->
|
||
<div class="vmodal" id="vmodal" role="dialog" aria-modal="true">
|
||
<div class="vmodal-box">
|
||
<button class="vmodal-x" id="vmodalX" aria-label="Close">×</button>
|
||
<div class="vmodal-frame" id="vmodalFrame"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- live video feed: pull feed.json (auto-updated by automation/site_feed.py); click = play in-page -->
|
||
<script>
|
||
(function(){
|
||
var grid=document.getElementById('feedGrid'); if(!grid) return;
|
||
var modal=document.getElementById('vmodal'), frame=document.getElementById('vmodalFrame');
|
||
function esc(s){ return (s||'').replace(/[&<>"]/g,function(c){return {'&':'&','<':'<','>':'>','"':'"'}[c];}); }
|
||
function openVid(em){ if(!modal||!frame||!em) return;
|
||
frame.innerHTML='<iframe src="'+em+'?autoplay=1&rel=0" allow="autoplay; encrypted-media; picture-in-picture; fullscreen" allowfullscreen></iframe>';
|
||
modal.classList.add('open'); document.body.style.overflow='hidden'; }
|
||
function closeVid(){ if(!modal||!frame) return; modal.classList.remove('open'); frame.innerHTML=''; document.body.style.overflow=''; }
|
||
if(modal){
|
||
grid.addEventListener('click',function(ev){ var c=ev.target.closest('.vcard'); if(!c) return;
|
||
var em=c.getAttribute('data-embed'); if(!em) return; ev.preventDefault(); openVid(em); });
|
||
modal.addEventListener('click',function(ev){ if(ev.target===modal) closeVid(); });
|
||
var x=document.getElementById('vmodalX'); if(x) x.addEventListener('click',closeVid);
|
||
document.addEventListener('keydown',function(ev){ if(ev.key==='Escape') closeVid(); });
|
||
}
|
||
function videoCard(it){
|
||
var thumb = it.thumb ? '<img loading="lazy" src="'+esc(it.thumb)+'" alt="">' : '<div class="vph">'+esc(it.source)+'</div>';
|
||
return '<a class="vcard" href="'+esc(it.url)+'" target="_blank" rel="noopener" data-embed="'+esc(it.embed)+'">'
|
||
+'<div class="vthumb">'+thumb+'<div class="play"><span>▶</span></div></div>'
|
||
+'<div class="vbody"><div class="t">'+esc(it.title)+'</div>'
|
||
+'<div class="m"><span class="src">'+esc(it.source)+'</span><span>· '+esc(it.published)+'</span></div></div></a>';
|
||
}
|
||
function newsCard(it){
|
||
var thumb = it.thumb ? '<img loading="lazy" src="'+esc(it.thumb)+'" alt="">' : '<div class="vph">'+esc(it.source)+'</div>';
|
||
return '<a class="nrail-card" href="'+esc(it.url)+'" target="_blank" rel="noopener">'
|
||
+'<div class="nthumb">'+thumb+'<div class="ntag">📰 '+esc(it.source)+'</div></div>'
|
||
+'<div class="nb"><div class="nt">'+esc(it.title)+'</div><div class="nm">'+esc(it.published)+'</div></div></a>';
|
||
}
|
||
fetch('https://git.oleks.space/anton/ai-automation-studio-site/raw/branch/main/feed.json?cb='+Date.now()).then(function(r){ return r.json(); }).then(function(d){
|
||
var items=(d&&d.items)||[];
|
||
var vids=items.filter(function(it){ return it.kind==='video'; });
|
||
var news=items.filter(function(it){ return it.kind!=='video'; });
|
||
if(!vids.length && !news.length){ var s=document.getElementById('feed'); if(s) s.style.display='none'; return; }
|
||
grid.innerHTML=vids.map(videoCard).join('');
|
||
var L=document.getElementById('newsLeft'), R=document.getElementById('newsRight');
|
||
if(L) L.innerHTML='<div class="rail-h">Latest AI news</div>';
|
||
if(R) R.innerHTML='<div class="rail-h">More news</div>';
|
||
news.forEach(function(it,i){ var box=(i%2===0?L:R); if(box) box.insertAdjacentHTML('beforeend', newsCard(it)); });
|
||
var u=document.getElementById('feedUpdated'); if(u&&d.updated) u.textContent='Updated '+d.updated+' · auto-refreshed daily';
|
||
}).catch(function(){ var s=document.getElementById('feed'); if(s) s.style.display='none'; });
|
||
})();
|
||
</script>
|
||
|
||
<!-- language engine: hidden Google Translate, driven by our own dropdown -->
|
||
<div id="google_translate_element"></div>
|
||
<script>
|
||
function googleTranslateElementInit(){
|
||
new google.translate.TranslateElement(
|
||
{ pageLanguage:'en', autoDisplay:false }, 'google_translate_element');
|
||
}
|
||
function setCookie(name, value){
|
||
document.cookie = name+'='+value+'; path=/';
|
||
try{
|
||
var h = location.hostname;
|
||
document.cookie = name+'='+value+'; path=/; domain=.'+h;
|
||
}catch(e){}
|
||
}
|
||
function doGTranslate(lang){
|
||
if(!lang){ return; }
|
||
localStorage.setItem('site_lang', lang);
|
||
if(lang === 'en'){
|
||
// back to source: clear translate cookie and reload clean
|
||
setCookie('googtrans', '');
|
||
location.reload();
|
||
return;
|
||
}
|
||
setCookie('googtrans', '/en/'+lang);
|
||
(function fire(tries){
|
||
var c = document.querySelector('.goog-te-combo');
|
||
if(c){ c.value = lang; c.dispatchEvent(new Event('change')); }
|
||
else if(tries < 25){ setTimeout(function(){ fire(tries+1); }, 250); }
|
||
else { location.reload(); }
|
||
})(0);
|
||
}
|
||
// restore the visitor's last choice + sync the dropdown
|
||
(function(){
|
||
var saved = localStorage.getItem('site_lang');
|
||
if(saved && saved !== 'en'){
|
||
var apply = function(){
|
||
var sel = document.getElementById('langSelect');
|
||
if(sel){ sel.value = saved; }
|
||
doGTranslate(saved);
|
||
};
|
||
if(document.readyState !== 'loading'){ apply(); }
|
||
else { document.addEventListener('DOMContentLoaded', apply); }
|
||
}
|
||
})();
|
||
</script>
|
||
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
|
||
</body>
|
||
</html>
|