Spaces:
Running
Running
<html lang="sl"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Zvezek LM - Ustvarjanje Podcastov</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"> | |
<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-color: #f9fafb; | |
} | |
.gradient-bg { | |
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); | |
} | |
.note-card:hover { | |
transform: translateY(-2px); | |
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
} | |
.waveform { | |
background: linear-gradient(90deg, #4f46e5, #7c3aed); | |
height: 60px; | |
border-radius: 8px; | |
position: relative; | |
overflow: hidden; | |
} | |
.waveform::after { | |
content: ""; | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
background: linear-gradient(90deg, | |
transparent 0%, | |
rgba(255,255,255,0.3) 50%, | |
transparent 100%); | |
animation: wave 2s linear infinite; | |
} | |
@keyframes wave { | |
0% { transform: translateX(-100%); } | |
100% { transform: translateX(100%); } | |
} | |
.recording { | |
animation: pulse 1.5s infinite; | |
} | |
@keyframes pulse { | |
0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } | |
70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } | |
100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } | |
} | |
.play-btn { | |
transition: all 0.2s; | |
} | |
.play-btn:hover { | |
transform: scale(1.1); | |
} | |
.sidebar { | |
transition: all 0.3s ease; | |
} | |
@media (max-width: 768px) { | |
.sidebar { | |
transform: translateX(-100%); | |
position: fixed; | |
z-index: 50; | |
height: 100vh; | |
} | |
.sidebar-open { | |
transform: translateX(0); | |
} | |
} | |
</style> | |
</head> | |
<body class="bg-gray-50"> | |
<!-- Mobile Menu Button --> | |
<div class="md:hidden fixed top-4 left-4 z-50"> | |
<button id="menuBtn" class="p-2 rounded-lg bg-white shadow-md text-indigo-600"> | |
<i class="fas fa-bars text-xl"></i> | |
</button> | |
</div> | |
<!-- Sidebar --> | |
<div id="sidebar" class="sidebar w-64 bg-white shadow-lg fixed h-full md:relative md:translate-x-0"> | |
<div class="p-4 gradient-bg text-white"> | |
<h1 class="text-2xl font-bold">Zvezek LM</h1> | |
<p class="text-indigo-100">Vaša osebna raziskovalna pomočnica</p> | |
</div> | |
<div class="p-4 border-b"> | |
<button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-lg flex items-center justify-center"> | |
<i class="fas fa-plus mr-2"></i> Nov projekt | |
</button> | |
</div> | |
<div class="p-4"> | |
<h3 class="font-semibold text-gray-500 uppercase text-xs mb-2">Moji projekti</h3> | |
<ul> | |
<li class="mb-1"> | |
<a href="#" class="flex items-center p-2 text-gray-700 hover:bg-gray-100 rounded-lg"> | |
<i class="fas fa-microphone-alt mr-3 text-indigo-500"></i> | |
<span>Podcast o umetni inteligenci</span> | |
</a> | |
</li> | |
<li class="mb-1"> | |
<a href="#" class="flex items-center p-2 text-gray-700 hover:bg-gray-100 rounded-lg"> | |
<i class="fas fa-book mr-3 text-blue-500"></i> | |
<span>Raziskava o trajnostnem razvoju</span> | |
</a> | |
</li> | |
<li class="mb-1"> | |
<a href="#" class="flex items-center p-2 text-gray-700 hover:bg-gray-100 rounded-lg"> | |
<i class="fas fa-chart-line mr-3 text-green-500"></i> | |
<span>Analiza trga 2023</span> | |
</a> | |
</li> | |
</ul> | |
<h3 class="font-semibold text-gray-500 uppercase text-xs mt-6 mb-2">Predlogi</h3> | |
<ul> | |
<li class="mb-1"> | |
<a href="#" class="flex items-center p-2 text-gray-700 hover:bg-gray-100 rounded-lg"> | |
<i class="fas fa-lightbulb mr-3 text-yellow-500"></i> | |
<span>Kako ustvariti vsebino za podcast</span> | |
</a> | |
</li> | |
<li class="mb-1"> | |
<a href="#" class="flex items-center p-2 text-gray-700 hover:bg-gray-100 rounded-lg"> | |
<i class="fas fa-question-circle mr-3 text-purple-500"></i> | |
<span>Pogosta vprašanja o Zvezku LM</span> | |
</a> | |
</li> | |
</ul> | |
</div> | |
<div class="absolute bottom-0 left-0 right-0 p-4 border-t"> | |
<div class="flex items-center"> | |
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-2"> | |
<i class="fas fa-user"></i> | |
</div> | |
<div> | |
<p class="text-sm font-medium">Janez Novak</p> | |
<p class="text-xs text-gray-500">Profil</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- Main Content --> | |
<div class="md:ml-64"> | |
<!-- Header --> | |
<header class="bg-white shadow-sm p-4"> | |
<div class="flex justify-between items-center"> | |
<h2 class="text-xl font-semibold text-gray-800">Ustvarjanje Podcasta</h2> | |
<div class="flex items-center space-x-2"> | |
<button class="p-2 rounded-lg hover:bg-gray-100 text-gray-600"> | |
<i class="fas fa-bell"></i> | |
</button> | |
<button class="p-2 rounded-lg hover:bg-gray-100 text-gray-600"> | |
<i class="fas fa-cog"></i> | |
</button> | |
</div> | |
</div> | |
</header> | |
<!-- Main Content Area --> | |
<main class="p-4 md:p-6"> | |
<!-- Podcast Creation Section --> | |
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-6"> | |
<div class="p-6"> | |
<div class="flex justify-between items-center mb-4"> | |
<h3 class="text-lg font-semibold">Nov podcast</h3> | |
<div class="flex space-x-2"> | |
<button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm"> | |
<i class="fas fa-save mr-1"></i> Shrani | |
</button> | |
<button class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm"> | |
<i class="fas fa-share-alt mr-1"></i> Deli | |
</button> | |
</div> | |
</div> | |
<div class="mb-6"> | |
<label class="block text-sm font-medium text-gray-700 mb-1">Naslov podcasta</label> | |
<input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Vnesite naslov..."> | |
</div> | |
<div class="mb-6"> | |
<label class="block text-sm font-medium text-gray-700 mb-1">Opis</label> | |
<textarea class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" rows="3" placeholder="Kratek opis vašega podcasta..."></textarea> | |
</div> | |
<div class="mb-6"> | |
<label class="block text-sm font-medium text-gray-700 mb-1">Kategorija</label> | |
<select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
<option>Izberite kategorijo</option> | |
<option>Tehnologija</option> | |
<option>Znanost</option> | |
<option>Poslovni svet</option> | |
<option>Kultura</option> | |
<option>Zdravje</option> | |
</select> | |
</div> | |
<div class="mb-6"> | |
<label class="block text-sm font-medium text-gray-700 mb-1">Ključne besede</label> | |
<div class="flex flex-wrap gap-2"> | |
<span class="inline-flex items-center px-3 py-1 rounded-full bg-indigo-100 text-indigo-800 text-sm"> | |
AI <button class="ml-1 text-indigo-600 hover:text-indigo-800">×</button> | |
</span> | |
<span class="inline-flex items-center px-3 py-1 rounded-full bg-indigo-100 text-indigo-800 text-sm"> | |
tehnologija <button class="ml-1 text-indigo-600 hover:text-indigo-800">×</button> | |
</span> | |
<span class="inline-flex items-center px-3 py-1 rounded-full bg-indigo-100 text-indigo-800 text-sm"> | |
prihodnost <button class="ml-1 text-indigo-600 hover:text-indigo-800">×</button> | |
</span> | |
<button class="inline-flex items-center px-2 py-1 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 text-sm"> | |
<i class="fas fa-plus mr-1 text-xs"></i> Dodaj | |
</button> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- Audio Recording Section --> | |
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-6"> | |
<div class="p-6"> | |
<h3 class="text-lg font-semibold mb-4">Snemanje zvoka</h3> | |
<div class="flex flex-col md:flex-row gap-6"> | |
<!-- Recording Controls --> | |
<div class="flex-1"> | |
<div class="waveform mb-4"></div> | |
<div class="flex justify-center space-x-4 mb-4"> | |
<button id="recordBtn" class="w-12 h-12 rounded-full bg-red-500 text-white flex items-center justify-center recording"> | |
<i class="fas fa-microphone"></i> | |
</button> | |
<button class="w-12 h-12 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center hover:bg-gray-300"> | |
<i class="fas fa-pause"></i> | |
</button> | |
<button class="w-12 h-12 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center hover:bg-gray-300"> | |
<i class="fas fa-stop"></i> | |
</button> | |
</div> | |
<div class="text-center text-sm text-gray-500 mb-4"> | |
<p>Kliknite na mikrofon za začetek snemanja</p> | |
</div> | |
<div class="flex justify-center"> | |
<button class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm"> | |
<i class="fas fa-magic mr-1"></i> Avtomatsko preoblikovanje v besedilo | |
</button> | |
</div> | |
</div> | |
<!-- Transcription Preview --> | |
<div class="flex-1"> | |
<div class="border border-gray-200 rounded-lg p-4 h-full"> | |
<h4 class="font-medium text-gray-700 mb-2">Prevod v besedilo</h4> | |
<div class="text-sm text-gray-600 italic mb-2"> | |
<p>Ko začnete snemati, bo vaš govor samodejno pretvorjen v besedilo.</p> | |
</div> | |
<div id="transcription" class="text-sm text-gray-800 h-40 overflow-y-auto"> | |
<!-- Transcription will appear here --> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- AI Suggestions Section --> | |
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-6"> | |
<div class="p-6"> | |
<div class="flex justify-between items-center mb-4"> | |
<h3 class="text-lg font-semibold">Predlogi umetne inteligence</h3> | |
<button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm"> | |
<i class="fas fa-sync-alt mr-1"></i> Osveži | |
</button> | |
</div> | |
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
<!-- Suggestion 1 --> | |
<div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 transition-colors"> | |
<div class="flex items-start mb-2"> | |
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-2"> | |
<i class="fas fa-lightbulb"></i> | |
</div> | |
<h4 class="font-medium text-gray-800">Teme za razpravo</h4> | |
</div> | |
<ul class="text-sm text-gray-600 pl-10"> | |
<li class="mb-1">• Vpliv AI na slovensko gospodarstvo</li> | |
<li class="mb-1">• Etični vidiki uporabe AI</li> | |
<li class="mb-1">• Primeri uspešne implementacije AI</li> | |
</ul> | |
</div> | |
<!-- Suggestion 2 --> | |
<div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 transition-colors"> | |
<div class="flex items-start mb-2"> | |
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-2"> | |
<i class="fas fa-question"></i> | |
</div> | |
<h4 class="font-medium text-gray-800">Vprašanja za goste</h4> | |
</div> | |
<ul class="text-sm text-gray-600 pl-10"> | |
<li class="mb-1">• Kako se AI razvija v Sloveniji?</li> | |
<li class="mb-1">• Katere panoge bodo najbolj prizadete?</li> | |
<li class="mb-1">• Kako se pripraviti na spremembe?</li> | |
</ul> | |
</div> | |
<!-- Suggestion 3 --> | |
<div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 transition-colors"> | |
<div class="flex items-start mb-2"> | |
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-2"> | |
<i class="fas fa-link"></i> | |
</div> | |
<h4 class="font-medium text-gray-800">Povezane vsebine</h4> | |
</div> | |
<ul class="text-sm text-gray-600 pl-10"> | |
<li class="mb-1">• <a href="#" class="text-indigo-600 hover:underline">Strategija AI v EU</a></li> | |
<li class="mb-1">• <a href="#" class="text-indigo-600 hover:underline">Primerjava z drugimi državami</a></li> | |
<li class="mb-1">• <a href="#" class="text-indigo-600 hover:underline">Izobraževanje za AI</a></li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- Saved Recordings --> | |
<div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
<div class="p-6"> | |
<h3 class="text-lg font-semibold mb-4">Shranjene posnetke</h3> | |
<div class="space-y-4"> | |
<!-- Recording 1 --> | |
<div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"> | |
<div class="flex items-center justify-between mb-2"> | |
<h4 class="font-medium">Uvod v podcast</h4> | |
<span class="text-xs text-gray-500">12. junij 2023</span> | |
</div> | |
<div class="flex items-center justify-between"> | |
<div class="flex items-center"> | |
<button class="play-btn w-8 h-8 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3"> | |
<i class="fas fa-play text-xs"></i> | |
</button> | |
<span class="text-sm text-gray-600">2:45</span> | |
</div> | |
<div class="flex space-x-2"> | |
<button class="p-1 text-gray-500 hover:text-indigo-600"> | |
<i class="fas fa-edit"></i> | |
</button> | |
<button class="p-1 text-gray-500 hover:text-red-600"> | |
<i class="fas fa-trash"></i> | |
</button> | |
<button class="p-1 text-gray-500 hover:text-green-600"> | |
<i class="fas fa-download"></i> | |
</button> | |
</div> | |
</div> | |
</div> | |
<!-- Recording 2 --> | |
<div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"> | |
<div class="flex items-center justify-between mb-2"> | |
<h4 class="font-medium">Intervju z strokovnjakom</h4> | |
<span class="text-xs text-gray-500">5. junij 2023</span> | |
</div> | |
<div class="flex items-center justify-between"> | |
<div class="flex items-center"> | |
<button class="play-btn w-8 h-8 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3"> | |
<i class="fas fa-play text-xs"></i> | |
</button> | |
<span class="text-sm text-gray-600">15:32</span> | |
</div> | |
<div class="flex space-x-2"> | |
<button class="p-1 text-gray-500 hover:text-indigo-600"> | |
<i class="fas fa-edit"></i> | |
</button> | |
<button class="p-1 text-gray-500 hover:text-red-600"> | |
<i class="fas fa-trash"></i> | |
</button> | |
<button class="p-1 text-gray-500 hover:text-green-600"> | |
<i class="fas fa-download"></i> | |
</button> | |
</div> | |
</div> | |
</div> | |
<!-- Recording 3 --> | |
<div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"> | |
<div class="flex items-center justify-between mb-2"> | |
<h4 class="font-medium">Zaključne misli</h4> | |
<span class="text-xs text-gray-500">1. junij 2023</span> | |
</div> | |
<div class="flex items-center justify-between"> | |
<div class="flex items-center"> | |
<button class="play-btn w-8 h-8 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3"> | |
<i class="fas fa-play text-xs"></i> | |
</button> | |
<span class="text-sm text-gray-600">4:18</span> | |
</div> | |
<div class="flex space-x-2"> | |
<button class="p-1 text-gray-500 hover:text-indigo-600"> | |
<i class="fas fa-edit"></i> | |
</button> | |
<button class="p-1 text-gray-500 hover:text-red-600"> | |
<i class="fas fa-trash"></i> | |
</button> | |
<button class="p-1 text-gray-500 hover:text-green-600"> | |
<i class="fas fa-download"></i> | |
</button> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</main> | |
</div> | |
<script> | |
// Mobile menu toggle | |
const menuBtn = document.getElementById('menuBtn'); | |
const sidebar = document.getElementById('sidebar'); | |
menuBtn.addEventListener('click', () => { | |
sidebar.classList.toggle('sidebar-open'); | |
}); | |
// Recording simulation | |
const recordBtn = document.getElementById('recordBtn'); | |
const transcription = document.getElementById('transcription'); | |
const sampleTexts = [ | |
"Dober dan in dobrodošli v našem podcastu o umetni inteligenci.", | |
"Danes bomo razpravljali o tem, kako AI spreminja naš vsakdan.", | |
"V Sloveniji imamo veliko talentiranih strokovnjakov na tem področju.", | |
"Kako lahko posamezniki in podjetja izkoristijo prednosti AI?", | |
"Ne smemo pozabiti tudi na etične vidike te tehnologije.", | |
"Kaj mislite, ali bo AI ustvaril več delovnih mest ali jih bo uničil?", | |
"Hvala za poslušanje in se slišimo naslednjič!" | |
]; | |
recordBtn.addEventListener('click', function() { | |
if (this.classList.contains('recording')) { | |
this.classList.remove('recording'); | |
this.innerHTML = '<i class="fas fa-microphone"></i>'; | |
transcription.innerHTML = ''; | |
} else { | |
this.classList.add('recording'); | |
this.innerHTML = '<i class="fas fa-stop"></i>'; | |
// Simulate recording with sample text | |
transcription.innerHTML = ''; | |
let i = 0; | |
const interval = setInterval(() => { | |
if (i < sampleTexts.length) { | |
const p = document.createElement('p'); | |
p.className = 'mb-2'; | |
p.textContent = sampleTexts[i]; | |
transcription.appendChild(p); | |
transcription.scrollTop = transcription.scrollHeight; | |
i++; | |
} else { | |
clearInterval(interval); | |
recordBtn.classList.remove('recording'); | |
recordBtn.innerHTML = '<i class="fas fa-microphone"></i>'; | |
} | |
}, 2000); | |
} | |
}); | |
// Play button effects | |
const playButtons = document.querySelectorAll('.play-btn'); | |
playButtons.forEach(button => { | |
button.addEventListener('click', function() { | |
this.innerHTML = this.innerHTML.includes('play') ? | |
'<i class="fas fa-pause text-xs"></i>' : | |
'<i class="fas fa-play text-xs"></i>'; | |
}); | |
}); | |
</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=designfailure/podkast" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
</html> |