<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radarska Slika Padavin - Slovenija | V živo</title> <meta name="description" content="Natančna radarska slika padavin za Slovenijo. Spremljajte nevihte in dež v realnem času z našo animacijo.">
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    
    <link rel="stylesheet" href="style.css">
</head>
<body class="bg-white text-slate-800">

<nav class="fixed w-full z-50 bg-white/90 backdrop-blur-md border-b border-slate-200 shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div id="logo-btn" class="flex items-center cursor-pointer">
                    <i class="fas fa-satellite-dish text-blue-600 text-2xl mr-2"></i> <span class="font-bold text-xl tracking-tight text-slate-900">Radarska<span class="text-blue-600">.si</span></span>
                </div>
                <div class="hidden md:flex space-x-8"> <a href="#features" class="text-slate-600 hover:text-blue-600 transition font-medium">Prednosti</a>
                    <a href="#legend" class="text-slate-600 hover:text-blue-600 transition font-medium">Legenda</a>
                    <a href="http://radarska.si/" class="text-white bg-blue-600 px-4 py-2 rounded-full hover:bg-blue-700 transition font-bold text-sm">
                        Odpri Aplikacijo </a>
                </div>
            </div>
        </div>
    </nav>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="lg:grid lg:grid-cols-12 lg:gap-16 items-center">
                
                <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left"> <span class="inline-block py-1 px-3 rounded-full bg-blue-100 text-blue-800 text-xs font-bold tracking-wide uppercase mb-4">
                        <i class="fas fa-bolt mr-1"></i> Posodobljeno v živo </span>
                    <h1 class="text-4xl tracking-tight font-extrabold text-slate-900 sm:text-5xl md:text-6xl mb-6">
                        Spremljajte vreme <br>
                        <span class="text-blue-600">v realnem času</span> </h1>
                    <p class="mt-3 text-base text-slate-600 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
                        Natančna radarska slika padavin za Slovenijo. Bodite pripravljeni na nevihte, točo in nalive z našo napredno animacijo gibanja oblakov. </p>
                    
                    <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0 flex flex-col sm:flex-row gap-4">
                        <a href="http://radarska.si/" class="flex items-center justify-center px-8 py-4 border border-transparent text-base font-bold rounded-lg text-white bg-blue-600 hover:bg-blue-700 md:text-lg shadow-lg hover:shadow-xl transition-all duration-200 transform hover:-translate-y-1">
                            <i class="fas fa-play-circle mr-2"></i> Animacija v živo </a>
                        <a href="http://radarska.si/" class="flex items-center justify-center px-8 py-4 border-2 border-slate-200 text-base font-bold rounded-lg text-slate-700 bg-white hover:bg-slate-50 hover:border-slate-300 md:text-lg transition-all duration-200">
                            Radarska slika padavin </a>
                    </div>
                    <p class="mt-4 text-sm text-slate-400">
                        *Podatki Agencije RS za okolje (ARSO). </p>
                </div>

<div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6">
                    <div class="relative mx-auto w-full rounded-2xl shadow-2xl lg:max-w-md overflow-hidden bg-slate-900 border-4 border-white transform rotate-1 hover:rotate-0 transition duration-500">
                        <div class="aspect-[4/3] w-full relative bg-slate-800 p-4 overflow-hidden"> <div class="absolute inset-0 opacity-20" style="background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 20px 20px;"></div> <div class="absolute top-1/2 left-1/2 w-[160%] h-[160%] -translate-x-1/2 -translate-y-1/2 bg-[conic-gradient(from_0deg,transparent_0deg,transparent_200deg,rgba(59,130,246,0.3)_360deg)] rounded-full animate-[spin_4s_linear_infinite]"></div> <div class="absolute top-1/3 left-1/4 w-20 h-20 bg-red-500/60 rounded-full blur-xl animate-pulse"></div> <div class="absolute bottom-1/3 right-1/3 w-24 h-24 bg-blue-500/50 rounded-full blur-xl"></div>
                            
                            <div class="relative z-10 flex flex-col justify-between h-full pointer-events-none"> <div class="flex justify-between items-start">
                                    <span class="bg-black/60 text-white text-xs px-2 py-1 rounded backdrop-blur">SLOVENIJA</span> <div class="flex space-x-1 bg-black/60 px-2 py-1 rounded backdrop-blur">
                                        <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div> <span class="text-[10px] text-white font-mono">LIVE</span>
                                    </div>
                                </div>
                                <div class="bg-white/10 backdrop-blur p-2 rounded border border-white/20">
                                    <div class="h-2 w-full bg-gradient-to-r from-green-400 via-yellow-400 to-red-600 rounded-full"></div> <div class="flex justify-between text-[10px] text-white mt-1 font-mono">
                                        <span>Rahlo</span>
                                        <span>Močno</span> </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

<section id="features" class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-base text-blue-600 font-bold tracking-wide uppercase">Funkcionalnosti</h2>
                <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-slate-900 sm:text-4xl">
                    Zakaj uporabljati našo aplikacijo? </p>
                <p class="mt-4 max-w-2xl text-xl text-slate-500 mx-auto">
                    Najhitrejši dostop do vremenskih podatkov, ko jih najbolj potrebujete. </p>
            </div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
                <div class="bg-slate-50 rounded-2xl p-8 hover:shadow-lg transition duration-300 border border-slate-100">
                    <div class="w-14 h-14 bg-blue-100 rounded-xl flex items-center justify-center mb-6 text-blue-600 text-2xl"> <i class="fas fa-history"></i>
                    </div>
                    <h3 class="text-xl font-bold text-slate-900 mb-3">Zgodovina in Napoved</h3>
                    <p class="text-slate-600 leading-relaxed">
                        Oglejte si animacijo preteklega gibanja padavin, da boste lažje predvideli, kam se nevihta premika v naslednjih minutah. </p>
                </div>

<div class="bg-slate-50 rounded-2xl p-8 hover:shadow-lg transition duration-300 border border-slate-100">
                    <div class="w-14 h-14 bg-teal-100 rounded-xl flex items-center justify-center mb-6 text-teal-600 text-2xl">
                        <i class="fas fa-map-marked-alt"></i> </div>
                    <h3 class="text-xl font-bold text-slate-900 mb-3">Visoka Ločljivost</h3>
                    <p class="text-slate-600 leading-relaxed">
                        Natančen zemljevid Slovenije vam omogoča, da vidite padavine specifično za vašo lokacijo, vas ali mesto. </p>
                </div>

<div class="bg-slate-50 rounded-2xl p-8 hover:shadow-lg transition duration-300 border border-slate-100">
                    <div class="w-14 h-14 bg-indigo-100 rounded-xl flex items-center justify-center mb-6 text-indigo-600 text-2xl">
                        <i class="fas fa-mobile-alt"></i> </div>
                    <h3 class="text-xl font-bold text-slate-900 mb-3">Mobilim prijazno</h3>
                    <p class="text-slate-600 leading-relaxed">
                        Aplikacija je optimizirana za vse naprave. Hitro preverite stanje na cesti, v hribih ali na morju kar preko telefona. </p>
                </div>
            </div>
        </div>
    </section>

<section id="legend" class="py-20 bg-slate-50 border-t border-slate-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="lg:grid lg:grid-cols-2 lg:gap-16 items-center">
                <div class="mb-10 lg:mb-0"> <h3 class="text-3xl font-extrabold text-slate-900 mb-6">
                        Razumevanje radarske slike
                    </h3>
                    <p class="text-lg text-slate-600 mb-8">
                        Barve na radarski sliki niso le okras – povedo vam, kako intenziven je dež. Naučite se jih brati za večjo varnost. </p>
                    
                    <div class="space-y-6">
                        <div class="flex items-start"> <div class="flex-shrink-0 mt-1">
                                <div class="w-4 h-4 rounded-full bg-blue-400"></div>
                            </div>
                            <div class="ml-4"> <h4 class="text-lg font-bold text-slate-900">Modra in Zelena</h4>
                                <p class="text-slate-500">Rahle do zmerne padavine. Pomeni običajen dež, ki navadno ne povzroča težav.</p> </div>
                        </div>

<div class="flex items-start"> <div class="flex-shrink-0 mt-1">
                                <div class="w-4 h-4 rounded-full bg-yellow-400"></div>
                            </div>
                            <div class="ml-4">
                                <h4 class="text-lg font-bold text-slate-900">Rumena in Oranžna</h4>
                                <p class="text-slate-500">Močni nalivi. Pričakujte slabšo vidljivost na cesti in večje količine vode.</p> </div>
                        </div>

<div class="flex items-start"> <div class="flex-shrink-0 mt-1">
                                <div class="w-4 h-4 rounded-full bg-red-600 animate-pulse"></div>
                            </div>
                            <div class="ml-4">
                                <h4 class="text-lg font-bold text-slate-900">Rdeča in Vijolična</h4>
                                <p class="text-slate-500">Nevarnost toče in neviht. Priporočljivo je poiskati zavetje in zaščititi premoženje.</p> </div>
                        </div>
                    </div>
                </div>

<div class="bg-white rounded-2xl shadow-xl p-8 border border-slate-100 text-center"> <h4 class="text-2xl font-bold text-slate-900 mb-4">Preverite stanje zdaj!</h4>
                    <p class="text-slate-500 mb-8">Ne pustite, da vas vreme preseneti. Kliknite spodaj za ogled trenutne situacije.</p> <a href="http://radarska.si/" class="block w-full py-4 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-bold rounded-lg hover:from-blue-700 hover:to-indigo-700 transition shadow-lg transform hover:-translate-y-1">
                        Odpri Radarsko Sliko
                    </a>
                </div>
            </div>
        </div>
    </section>

<footer class="bg-slate-900 text-slate-300 py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
                <div>
                    <div class="flex items-center mb-4"> <i class="fas fa-satellite-dish text-blue-500 text-xl mr-2"></i>
                        <span class="font-bold text-xl text-white">Radarska.si</span>
                    </div>
                    <p class="text-sm text-slate-400">
                        Vaš zanesljiv vir za vremenske informacije v Sloveniji. Spremljajte padavine kjerkoli in kadarkoli. </p>
                </div>
                <div>
                    <h4 class="text-white font-bold mb-4 uppercase text-sm tracking-wider">Povezave</h4>
                    <ul class="space-y-2 text-sm"> <li><a href="http://radarska.si/" class="hover:text-white transition">Domov</a></li>
                        <li><a href="http://radarska.si/" class="hover:text-white transition">Aplikacija</a></li>
                        <li><a href="#features" class="hover:text-white transition">O nas</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-white font-bold mb-4 uppercase text-sm tracking-wider">Kontakt</h4>
                    <p class="text-sm text-slate-400 mb-2">Imate vprašanje ali predlog?</p>
                    <a href="mailto:info@radarska.si" class="text-blue-400 hover:text-blue-300 text-sm">info@radarska.si</a> </div>
            </div>
            <div class="border-t border-slate-800 pt-8 flex flex-col md:flex-row justify-between items-center text-sm">
                <p>&copy; 2025 Radarska.si. Vse pravice pridržane.</p> <div class="flex space-x-4 mt-4 md:mt-0">
                    <a href="#" class="hover:text-white"><i class="fab fa-facebook"></i></a>
                    <a href="#" class="hover:text-white"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="hover:text-white"><i class="fab fa-instagram"></i></a>
                </div> </div>
        </div>
    </footer>

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground