podkast / index.html
designfailure's picture
undefined - Initial Deployment
dae6a52 verified
<!DOCTYPE html>
<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">&times;</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">&times;</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">&times;</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>