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> |