|
|
<!DOCTYPE html> |
|
|
<html lang="cs"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Rozšiřuje Vaše Možnosti | Budoucnost práce s umělou inteligencí</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#4F46E5', |
|
|
secondary: '#7C3AED', |
|
|
accent: '#0EA5E9', |
|
|
dark: '#1E293B', |
|
|
light: '#F8FAFC' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background: linear-gradient(135deg, #f0f4f8 0%, #e6eef7 100%); |
|
|
} |
|
|
|
|
|
.hero-gradient { |
|
|
background: linear-gradient(120deg, #4F46E5 0%, #7C3AED 50%, #0EA5E9 100%); |
|
|
} |
|
|
|
|
|
.card-gradient { |
|
|
background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%); |
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02); |
|
|
} |
|
|
|
|
|
.card-gradient:hover { |
|
|
transform: translateY(-5px); |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.profession-select { |
|
|
background: rgba(255, 255, 255, 0.15); |
|
|
backdrop-filter: blur(10px); |
|
|
} |
|
|
|
|
|
.task-card { |
|
|
animation: fadeIn 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.transition-all { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen text-dark"> |
|
|
|
|
|
<header class="hero-gradient text-white"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<nav class="flex items-center justify-between py-4"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="bg-white p-2 rounded-lg"> |
|
|
<i class="fas fa-brain text-accent text-2xl"></i> |
|
|
</div> |
|
|
<span class="text-xl font-bold">AI Enhancer</span> |
|
|
</div> |
|
|
<div class="space-x-6 hidden md:flex"> |
|
|
<a href="#" class="hover:text-accent transition-colors">Jak to funguje</a> |
|
|
<a href="#" class="hover:text-accent transition-colors">Příklady využití</a> |
|
|
<a href="#" class="hover:text-accent transition-colors">O projektu</a> |
|
|
</div> |
|
|
<button class="md:hidden text-white"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="flex flex-col items-center py-16 md:py-24 text-center"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold max-w-3xl leading-tight"> |
|
|
<span class="block">AI vás nepřišlo nahradit,</span> |
|
|
<span class="block mt-2 bg-clip-text text-transparent bg-gradient-to-r from-accent via-white to-accent">přišlo vás vylepšit</span> |
|
|
</h1> |
|
|
<p class="mt-6 text-xl max-w-2xl opacity-90"> |
|
|
Objevte, jak vám umělá inteligence pomůže zlepšit výkon, ušetřit čas a zvýšit kvalitu vaší práce ve vaší profesi. |
|
|
</p> |
|
|
|
|
|
|
|
|
<div class="mt-10 w-full max-w-2xl"> |
|
|
<div class="profession-select rounded-xl p-1 shadow-lg"> |
|
|
<div class="relative"> |
|
|
<input type="text" id="profession-search" placeholder="Zadejte své povolání..." |
|
|
class="w-full p-4 rounded-xl bg-white/90 text-dark focus:outline-none focus:ring-2 focus:ring-accent"> |
|
|
<div class="absolute right-3 top-1/2 transform -translate-y-1/2 bg-accent text-white p-2 rounded-lg"> |
|
|
<i class="fas fa-search"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div id="profession-results" class="hidden mt-1 max-h-60 overflow-y-auto bg-white/90 rounded-xl shadow-lg border border-gray-200"></div> |
|
|
</div> |
|
|
<div id="selected-profession" class="mt-4 font-semibold text-lg hidden"> |
|
|
<span class="bg-white/20 px-3 py-1 rounded-lg inline-block">Vybraná profese: <span id="profession-name" class="text-accent"></span></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main> |
|
|
|
|
|
<section id="activities-section" class="py-16 hidden"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold">Jak vám AI pomůže <span id="profession-title" class="text-primary"></span>?</h2> |
|
|
<p class="mt-4 text-xl text-gray-600 max-w-2xl mx-auto"> |
|
|
Objevte konkrétní oblasti, kde vám umělá inteligence pomůže být efektivnější a výkonnější ve vaší profesi. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="activities-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"></div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gradient-to-br from-light to-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row items-center justify-between"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold">Připravte se na budoucnost práce s AI</h2> |
|
|
<p class="mt-4 text-lg text-gray-600"> |
|
|
Umělá inteligence mění způsob naší práce - nezůstaňte pozadu a naučte se využívat její potenciál pro svůj růst. |
|
|
</p> |
|
|
<div class="mt-6 flex flex-wrap gap-4"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="bg-primary text-white p-2 rounded-full"> |
|
|
<i class="fas fa-bolt"></i> |
|
|
</div> |
|
|
<span>Zefektivněte rutinní úkoly</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="bg-primary text-white p-2 rounded-full"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<span>Získejte konkurenční výhodu</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="bg-primary text-white p-2 rounded-full"> |
|
|
<i class="fas fa-lightbulb"></i> |
|
|
</div> |
|
|
<span>Rozviňte kreativní potenciál</span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="mt-8 px-6 py-3 bg-gradient-to-r from-primary to-secondary text-white rounded-xl hover:opacity-90 transition-opacity shadow-lg"> |
|
|
Začněte s AI ještě dnes |
|
|
</button> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<div class="relative max-w-md"> |
|
|
<div class="card-gradient rounded-2xl p-6 transform rotate-3 w-full h-full"> |
|
|
<div class="flex items-center space-x-3 mb-4"> |
|
|
<div class="bg-accent text-white p-3 rounded-full"> |
|
|
<i class="fas fa-chart-pie text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold">Analýza dat</h3> |
|
|
<p class="text-sm text-gray-500">AI pomáhá při zpracování velkých dat</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3 mb-4"> |
|
|
<div class="bg-secondary text-white p-3 rounded-full"> |
|
|
<i class="fas fa-file-alt text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold">Tvorba obsahu</h3> |
|
|
<p class="text-sm text-gray-500">Generuje koncepty rychleji</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="bg-primary text-white p-3 rounded-full"> |
|
|
<i class="fas fa-robot text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold">Automatizace</h3> |
|
|
<p class="text-sm text-gray-500">Uvolňuje čas pro strategické úkoly</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute top-0 right-0 bg-yellow-400 text-dark px-3 py-1 rounded-bl-xl rounded-tr-2xl font-bold text-sm"> |
|
|
<i class="fas fa-rocket mr-1"></i> +45% efektivita |
|
|
</div> |
|
|
</div> |
|
|
<div class="card-gradient rounded-2xl p-6 absolute top-5 left-5 -z-10 transform -rotate-2 w-full h-full opacity-70"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-dark text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center space-x-2 mb-4"> |
|
|
<div class="bg-white p-1 rounded-lg"> |
|
|
<i class="fas fa-brain text-accent text-xl"></i> |
|
|
</div> |
|
|
<span class="text-xl font-bold">AI Enhancer</span> |
|
|
</div> |
|
|
<p class="opacity-75"> |
|
|
Pomáháme lidem využít potenciál umělé inteligence pro jejich profesní růst. |
|
|
</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Nápověda</h3> |
|
|
<ul class="space-y-2 opacity-75"> |
|
|
<li><a href="#" class="hover:text-accent transition-colors">Jak na to</a></li> |
|
|
<li><a href="#" class="hover:text-accent transition-colors">Často kladené dotazy</a></li> |
|
|
<li><a href="#" class="hover:text-accent transition-colors">Příklady použití</a></li> |
|
|
<li><a href="#" class="hover:text-accent transition-colors">Nápady pro začátek</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">O nás</h3> |
|
|
<ul class="space-y-2 opacity-75"> |
|
|
<li><a href="#" class="hover:text-accent transition-colors">O projektu</a></li> |
|
|
<li><a href="#" class="hover:text-accent transition-colors">Tým</a></li> |
|
|
<li><a href="#" class="hover:text-accent transition-colors">Kariéra</a></li> |
|
|
<li><a href="#" class="hover:text-accent transition-colors">Partneři</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Kontakt</h3> |
|
|
<ul class="space-y-2 opacity-75"> |
|
|
<li class="flex items-center space-x-2"> |
|
|
<i class="fas fa-envelope text-accent"></i> |
|
|
<span>[email protected]</span> |
|
|
</li> |
|
|
<li class="flex items-center space-x-2"> |
|
|
<i class="fas fa-phone text-accent"></i> |
|
|
<span>+420 123 456 789</span> |
|
|
</li> |
|
|
<li class="flex items-center space-x-2"> |
|
|
<i class="fab fa-linkedin text-accent"></i> |
|
|
<span>LinkedIn</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-700 mt-8 pt-6 text-center opacity-75"> |
|
|
<p>© 2023 AI Enhancer. Všechna práva vyhrazena.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const professionsData = { |
|
|
"Marketingový specialista": [ |
|
|
"Tvorba SEO optimalizovaného obsahu", |
|
|
"Analýza konkurence a tržních trendů", |
|
|
"Personalizace marketingových kampaní", |
|
|
"Generování nápadů na obsah", |
|
|
"Automatizace e-mail marketingu", |
|
|
"Optimalizace reklamních kampaní v reálném čase" |
|
|
], |
|
|
"Programátor": [ |
|
|
"Generování kódu z popisu", |
|
|
"Automatické hledání chyb v kódu", |
|
|
"Návrh efektivnějších algoritmů", |
|
|
"Automatizace testování", |
|
|
"Generování technické dokumentace", |
|
|
"Převod kódu mezi programovacími jazyky" |
|
|
], |
|
|
"Grafický designer": [ |
|
|
"Generování prvotních návrhů", |
|
|
"Automatické rozšíření pozadí obrázků", |
|
|
"Tvorba variací designů", |
|
|
"Odstraňování nežádoucích objektů z fotek", |
|
|
"Generování ikon a ilustrací", |
|
|
"Optimalizace barevných schémat" |
|
|
], |
|
|
"Finanční poradce": [ |
|
|
"Analýza trhu v reálném čase", |
|
|
"Predikce vývoje investic", |
|
|
"Personalizované investiční strategie", |
|
|
"Detekce rizikových finančních produktů", |
|
|
"Automatické vytváření finančních reportů", |
|
|
"Optimalizace daňového plánování" |
|
|
], |
|
|
"HR manažer": [ |
|
|
"Automatické třídění životopisů", |
|
|
"Generování pracovních popisů", |
|
|
"Analýza soft skills kandidátů", |
|
|
"Předpovídání fluktuace zaměstnanců", |
|
|
"Personalizované rozvojové plány", |
|
|
"Generování interview otázek" |
|
|
], |
|
|
"Učitel": [ |
|
|
"Vytváření testů a cvičení", |
|
|
"Personalizované učební plány", |
|
|
"Automatické hodnocení úkolů", |
|
|
"Generování vzdělávacích materiálů", |
|
|
"Identifikace problémových oblastí", |
|
|
"Vytváření vizualizací složitých témat" |
|
|
], |
|
|
"Obchodní zástupce": [ |
|
|
"Analýza potenciálu zákazníků", |
|
|
"Generování osobních e-mailů", |
|
|
"Predikce prodejních příležitostí", |
|
|
"Příprava na schůzky s klienty", |
|
|
"Tvorba nabídek a kalkulací", |
|
|
"Hledání optimálních obchodních cest" |
|
|
], |
|
|
"Zdravotní sestra": [ |
|
|
"Automatické vyplňování dokumentace", |
|
|
"Generování souhrnů pacientů", |
|
|
"Připomínky léků a procedur", |
|
|
"Prediktivní analýza zdravotních rizik", |
|
|
"Tvorba edukačních materiálů", |
|
|
"Asistence při diagnostice" |
|
|
] |
|
|
}; |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const searchInput = document.getElementById('profession-search'); |
|
|
const resultsContainer = document.getElementById('profession-results'); |
|
|
const selectedProfession = document.getElementById('selected-profession'); |
|
|
const professionName = document.getElementById('profession-name'); |
|
|
const activitiesSection = document.getElementById('activities-section'); |
|
|
const activitiesContainer = document.getElementById('activities-container'); |
|
|
const professionTitle = document.getElementById('profession-title'); |
|
|
|
|
|
|
|
|
searchInput.addEventListener('input', function() { |
|
|
const query = this.value.toLowerCase(); |
|
|
|
|
|
if (query.length < 2) { |
|
|
resultsContainer.classList.add('hidden'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const filteredProfessions = Object.keys(professionsData) |
|
|
.filter(profession => profession.toLowerCase().includes(query)); |
|
|
|
|
|
if (filteredProfessions.length === 0) { |
|
|
resultsContainer.innerHTML = '<div class="p-4 text-gray-500">Žádná profese nenalezena</div>'; |
|
|
resultsContainer.classList.remove('hidden'); |
|
|
return; |
|
|
} |
|
|
|
|
|
resultsContainer.innerHTML = filteredProfessions |
|
|
.map(profession => |
|
|
`<div class="p-3 hover:bg-gray-100 cursor-pointer transition-all profession-item">${profession}</div>` |
|
|
) |
|
|
.join(''); |
|
|
|
|
|
resultsContainer.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.profession-item').forEach(item => { |
|
|
item.addEventListener('click', function() { |
|
|
selectProfession(this.textContent); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function selectProfession(profession) { |
|
|
professionName.textContent = profession; |
|
|
selectedProfession.classList.remove('hidden'); |
|
|
resultsContainer.classList.add('hidden'); |
|
|
searchInput.value = profession; |
|
|
|
|
|
|
|
|
activitiesSection.classList.remove('hidden'); |
|
|
professionTitle.textContent = `v ${profession}`; |
|
|
|
|
|
|
|
|
const activities = professionsData[profession]; |
|
|
activitiesContainer.innerHTML = activities |
|
|
.map((activity, index) => ` |
|
|
<div class="task-card card-gradient p-6 rounded-xl transition-all"> |
|
|
<div class="flex items-center"> |
|
|
<div class="text-2xl text-white bg-gradient-to-r from-accent to-primary p-3 rounded-lg w-12 h-12 flex items-center justify-center"> |
|
|
${index + 1} |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="font-semibold text-lg">${activity}</h3> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 text-gray-600"> |
|
|
<p>AI nástroje vám pomohou tuto činnost provádět rychleji a efektivněji, což vám uvolní čas pro strategičtější práci.</p> |
|
|
</div> |
|
|
</div> |
|
|
`) |
|
|
.join(''); |
|
|
} |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
searchInput.value = "Marketingový specialista"; |
|
|
selectProfession("Marketingový specialista"); |
|
|
}, 1000); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=KairosEtp/enhance" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
