<!DOCTYPE html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>INFODC TV OS</title>

<style>

body{
margin:0;
background:black;
font-family:-apple-system,Helvetica;
overflow:hidden;
color:white;
}

.background{
position:absolute;
width:100%;
height:100%;
background:url("https://images.unsplash.com/photo-1606813907291-d86efa9b94db") center/cover;
filter:blur(18px) brightness(0.35);
transform:scale(1.2);
}

.topbar{
position:absolute;
top:20px;
left:40px;
font-size:26px;
font-weight:600;
}

.clock{
position:absolute;
top:20px;
right:40px;
font-size:22px;
opacity:0.9;
}

.container{
position:absolute;
bottom:140px;
width:100%;
display:flex;
justify-content:center;
}

.row{
display:flex;
gap:40px;
}

.app{

width:150px;
height:150px;

border-radius:32px;

background:rgba(255,255,255,0.08);

backdrop-filter:blur(20px);

display:flex;
align-items:center;
justify-content:center;

font-size:50px;

transition:0.3s;

box-shadow:0 20px 40px rgba(0,0,0,0.5);

cursor:pointer;

}

.app:hover{

transform:scale(1.25);

background:rgba(255,255,255,0.18);

}

.label{

text-align:center;
margin-top:12px;
font-size:18px;

}

.appblock{

display:flex;
flex-direction:column;
align-items:center;

}

.footer{

position:absolute;
bottom:40px;
width:100%;
text-align:center;
opacity:0.7;

}

</style>

</head>

<body>

<div class="background"></div>

<div class="topbar">
INFODC TV
</div>

<div class="clock" id="clock"></div>

<div class="container">

<div class="row">

<div class="appblock">
<div class="app" onclick="openApp('tv')">📺</div>
<div class="label">TV</div>
</div>

<div class="appblock">
<div class="app" onclick="openApp('films')">🎬</div>
<div class="label">Films</div>
</div>

<div class="appblock">
<div class="app" onclick="openApp('radio')">📻</div>
<div class="label">Radio</div>
</div>

<div class="appblock">
<div class="app" onclick="openApp('music')">🎧</div>
<div class="label">Musique</div>
</div>

<div class="appblock">
<div class="app" onclick="openApp('iptv')">📡</div>
<div class="label">IPTV</div>
</div>

<div class="appblock">
<div class="app" onclick="openApp('youtube')">🌍</div>
<div class="label">YouTube</div>
</div>

</div>

</div>

<div class="footer">
INFODC TV OS
</div>

<script>

function updateClock(){

let now = new Date()

let h = now.getHours().toString().padStart(2,'0')
let m = now.getMinutes().toString().padStart(2,'0')

document.getElementById("clock").innerHTML = h + ":" + m

}

setInterval(updateClock,1000)

updateClock()

function openApp(app){

if(app=="youtube")
window.open("https://youtube.com")

if(app=="radio")
window.open("https://radio.garden")

if(app=="tv")
alert("Module TV bientôt disponible")

if(app=="films")
alert("Module Films")

if(app=="music")
alert("Lecteur musique")

if(app=="iptv")
alert("Module IPTV")

}

</script>

</body>

</html>