|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Windows 11 AI Interface</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> |
|
|
@keyframes float { |
|
|
0%, 100% { transform: translateY(0); } |
|
|
50% { transform: translateY(-10px); } |
|
|
} |
|
|
.floating { animation: float 3s ease-in-out infinite; } |
|
|
.glass-effect { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
backdrop-filter: blur(10px); |
|
|
-webkit-backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.2); |
|
|
} |
|
|
.icon-hover { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.icon-hover:hover { |
|
|
transform: scale(1.1); |
|
|
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5)); |
|
|
} |
|
|
.taskbar-icon { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.taskbar-icon:hover { |
|
|
transform: scale(1.15); |
|
|
} |
|
|
.start-menu { |
|
|
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
|
|
} |
|
|
.widget { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.widget:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
.video-thumbnail { |
|
|
aspect-ratio: 16/9; |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-white h-screen overflow-hidden select-none"> |
|
|
|
|
|
<div class="absolute inset-0 overflow-hidden"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-blue-900 via-purple-900 to-gray-900 opacity-90"></div> |
|
|
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1677442136016-3c0a1f1f3249?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')] bg-cover bg-center opacity-30"></div> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<div class="h-64 w-64 rounded-full bg-blue-500 opacity-10 blur-3xl"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="absolute top-0 left-0 p-6 grid gap-6"> |
|
|
|
|
|
<div class="flex flex-col items-center w-20 text-center icon-hover" onclick="openApp('explorer')"> |
|
|
<div class="bg-blue-500/20 p-3 rounded-xl glass-effect"> |
|
|
<i class="fas fa-folder text-blue-400 text-3xl"></i> |
|
|
</div> |
|
|
<span class="text-xs mt-1 text-white/80">Explorateur</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col items-center w-20 text-center icon-hover" onclick="openApp('browser')"> |
|
|
<div class="bg-green-500/20 p-3 rounded-xl glass-effect"> |
|
|
<i class="fas fa-globe text-green-400 text-3xl"></i> |
|
|
</div> |
|
|
<span class="text-xs mt-1 text-white/80">Edge</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col items-center w-20 text-center icon-hover" onclick="openApp('store')"> |
|
|
<div class="bg-purple-500/20 p-3 rounded-xl glass-effect"> |
|
|
<i class="fas fa-shopping-bag text-purple-400 text-3xl"></i> |
|
|
</div> |
|
|
<span class="text-xs mt-1 text-white/80">Store</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col items-center w-20 text-center icon-hover" onclick="openApp('settings')"> |
|
|
<div class="bg-gray-500/20 p-3 rounded-xl glass-effect"> |
|
|
<i class="fas fa-cog text-gray-300 text-3xl"></i> |
|
|
</div> |
|
|
<span class="text-xs mt-1 text-white/80">Paramètres</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col items-center w-20 text-center icon-hover" onclick="openApp('youtube')"> |
|
|
<div class="bg-red-500/20 p-3 rounded-xl glass-effect"> |
|
|
<i class="fab fa-youtube text-red-500 text-3xl"></i> |
|
|
</div> |
|
|
<span class="text-xs mt-1 text-white/80">YouTube</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="absolute top-6 right-6 grid gap-4 w-80"> |
|
|
|
|
|
<div class="glass-effect rounded-2xl p-4 widget"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<h3 class="font-semibold">Paris, France</h3> |
|
|
<p class="text-sm text-white/70">Ensoleillé</p> |
|
|
</div> |
|
|
<i class="fas fa-sun text-yellow-400 text-2xl"></i> |
|
|
</div> |
|
|
<div class="flex justify-between mt-4"> |
|
|
<div class="text-center"> |
|
|
<p class="text-3xl font-light">24°</p> |
|
|
<p class="text-xs text-white/60">Actuel</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<p class="text-lg font-light">28°</p> |
|
|
<p class="text-xs text-white/60">Max</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<p class="text-lg font-light">18°</p> |
|
|
<p class="text-xs text-white/60">Min</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-effect rounded-2xl p-4 widget"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h3 class="font-semibold">Calendrier</h3> |
|
|
<span class="text-sm text-white/70">Aujourd'hui</span> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center mr-2"> |
|
|
<span class="text-blue-400 text-xs">10</span> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm">Réunion d'équipe</p> |
|
|
<p class="text-xs text-white/60">10:00 - 11:30</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-purple-500/20 flex items-center justify-center mr-2"> |
|
|
<span class="text-purple-400 text-xs">14</span> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm">Présentation client</p> |
|
|
<p class="text-xs text-white/60">14:00 - 15:00</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-effect rounded-2xl p-4 widget"> |
|
|
<h3 class="font-semibold mb-2">Actualités</h3> |
|
|
<div class="text-sm space-y-2"> |
|
|
<p class="line-clamp-2">Nouvelle avancée en intelligence artificielle : Google dévoile son modèle Gemini</p> |
|
|
<p class="line-clamp-2 text-white/70">Microsoft annonce Windows 12 pour 2024 avec des fonctionnalités révolutionnaires</p> |
|
|
<p class="line-clamp-2 text-white/70">La NASA prépare une mission habitée vers Mars d'ici 2030</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="absolute bottom-0 left-0 right-0 glass-effect rounded-t-xl mx-auto w-11/12 max-w-4xl h-14 flex items-center justify-center px-4"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
|
|
|
<div class="taskbar-icon w-10 h-10 flex items-center justify-center rounded-md hover:bg-white/10" id="start-button"> |
|
|
<i class="fab fa-windows text-white text-lg"></i> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="taskbar-icon w-10 h-10 flex items-center justify-center rounded-md hover:bg-white/10"> |
|
|
<i class="fas fa-search text-white/80 text-lg"></i> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="taskbar-icon w-10 h-10 flex items-center justify-center rounded-md hover:bg-white/10" onclick="openApp('explorer')"> |
|
|
<i class="fas fa-folder text-blue-400 text-lg"></i> |
|
|
</div> |
|
|
<div class="taskbar-icon w-10 h-10 flex items-center justify-center rounded-md hover:bg-white/10" onclick="openApp('browser')"> |
|
|
<i class="fas fa-globe text-green-400 text-lg"></i> |
|
|
</div> |
|
|
<div class="taskbar-icon w-10 h-10 flex items-center justify-center rounded-md hover:bg-white/10" onclick="openApp('store')"> |
|
|
<i class="fas fa-shopping-bag text-purple-400 text-lg"></i> |
|
|
</div> |
|
|
<div class="taskbar-icon w-10 h-10 flex items-center justify-center rounded-md hover:bg-white/10" onclick="openApp('mail')"> |
|
|
<i class="fas fa-envelope text-yellow-400 text-lg"></i> |
|
|
</div> |
|
|
<div class="taskbar-icon w-10 h-10 flex items-center justify-center rounded-md hover:bg-white/10" onclick="openApp('youtube')"> |
|
|
<i class="fab fa-youtube text-red-500 text-lg"></i> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="h-6 w-px bg-white/20 mx-1"></div> |
|
|
|
|
|
|
|
|
<div class="taskbar-icon px-2 h-10 flex items-center justify-center rounded-md hover:bg-white/10"> |
|
|
<span class="text-sm">14:25</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="taskbar-icon w-10 h-10 flex items-center justify-center rounded-md hover:bg-white/10"> |
|
|
<i class="fas fa-bell text-white/80 text-lg"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="absolute bottom-20 left-1/2 transform -translate-x-1/2 glass-effect rounded-2xl p-4 w-96 hidden start-menu" id="start-menu"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<input type="text" placeholder="Rechercher" class="bg-white/10 rounded-full px-4 py-2 w-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-3 gap-4"> |
|
|
|
|
|
<div class="flex flex-col items-center p-2 rounded-lg hover:bg-white/10" onclick="openApp('explorer')"> |
|
|
<div class="bg-blue-500/20 p-3 rounded-xl mb-1"> |
|
|
<i class="fas fa-folder text-blue-400 text-xl"></i> |
|
|
</div> |
|
|
<span class="text-xs">Explorateur</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center p-2 rounded-lg hover:bg-white/10" onclick="openApp('browser')"> |
|
|
<div class="bg-green-500/20 p-3 rounded-xl mb-1"> |
|
|
<i class="fas fa-globe text-green-400 text-xl"></i> |
|
|
</div> |
|
|
<span class="text-xs">Edge</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center p-2 rounded-lg hover:bg-white/10" onclick="openApp('store')"> |
|
|
<div class="bg-purple-500/20 p-3 rounded-xl mb-1"> |
|
|
<i class="fas fa-shopping-bag text-purple-400 text-xl"></i> |
|
|
</div> |
|
|
<span class="text-xs">Store</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center p-2 rounded-lg hover:bg-white/10" onclick="openApp('mail')"> |
|
|
<div class="bg-yellow-500/20 p-3 rounded-xl mb-1"> |
|
|
<i class="fas fa-envelope text-yellow-400 text-xl"></i> |
|
|
</div> |
|
|
<span class="text-xs">Mail</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center p-2 rounded-lg hover:bg-white/10" onclick="openApp('photos')"> |
|
|
<div class="bg-pink-500/20 p-3 rounded-xl mb-1"> |
|
|
<i class="fas fa-images text-pink-400 text-xl"></i> |
|
|
</div> |
|
|
<span class="text-xs">Photos</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center p-2 rounded-lg hover:bg-white/10" onclick="openApp('settings')"> |
|
|
<div class="bg-gray-500/20 p-3 rounded-xl mb-1"> |
|
|
<i class="fas fa-cog text-gray-300 text-xl"></i> |
|
|
</div> |
|
|
<span class="text-xs">Paramètres</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center p-2 rounded-lg hover:bg-white/10" onclick="openApp('youtube')"> |
|
|
<div class="bg-red-500/20 p-3 rounded-xl mb-1"> |
|
|
<i class="fab fa-youtube text-red-500 text-xl"></i> |
|
|
</div> |
|
|
<span class="text-xs">YouTube</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 pt-4 border-t border-white/10"> |
|
|
<div class="flex items-center p-2 rounded-lg hover:bg-white/10"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-power-off text-blue-400 text-sm"></i> |
|
|
</div> |
|
|
<span class="text-sm">Arrêter</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="absolute inset-0 flex items-center justify-center hidden" id="app-window"> |
|
|
<div class="glass-effect rounded-2xl overflow-hidden w-3/4 max-w-3xl h-3/4 max-h-[600px] flex flex-col"> |
|
|
<div class="bg-white/10 h-10 flex items-center px-4 justify-between"> |
|
|
<span class="text-sm font-medium" id="app-title">Application</span> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="w-6 h-6 flex items-center justify-center hover:bg-white/20 rounded"> |
|
|
<i class="fas fa-minus text-xs"></i> |
|
|
</button> |
|
|
<button class="w-6 h-6 flex items-center justify-center hover:bg-white/20 rounded"> |
|
|
<i class="fas fa-square text-xs"></i> |
|
|
</button> |
|
|
<button class="w-6 h-6 flex items-center justify-center hover:bg-red-500/50 rounded" onclick="closeApp()"> |
|
|
<i class="fas fa-times text-xs"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-1 p-6 overflow-auto" id="app-content"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
// Gestion du menu Démarrer |
|
|
document.getElementById('start-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('start-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
// Fonction pour ouvrir une application |
|
|
function openApp(appName) { |
|
|
const appWindow = document.getElementById('app-window'); |
|
|
const appTitle = document.getElementById('app-title'); |
|
|
const appContent = document.getElementById('app-content'); |
|
|
|
|
|
// Masquer le menu Démarrer s'il est ouvert |
|
|
document.getElementById('start-menu').classList.add('hidden'); |
|
|
|
|
|
// Configurer l'application en fonction du nom |
|
|
switch(appName) { |
|
|
case 'explorer': |
|
|
appTitle.textContent = 'Explorateur de fichiers'; |
|
|
appContent.innerHTML = ` |
|
|
<div class="flex h-full"> |
|
|
<div class="w-48 bg-white/5 rounded-lg p-3"> |
|
|
<div class="p-2 rounded hover:bg-white/10 flex items-center"> |
|
|
<i class="fas fa-desktop text-blue-400 mr-2"></i> |
|
|
<span>Bureau</span> |
|
|
</div> |
|
|
<div class="p-2 rounded hover:bg-white/10 flex items-center"> |
|
|
<i class="fas fa-download text-green-400 mr-2"></i> |
|
|
<span>Téléchargements</span> |
|
|
</div> |
|
|
<div class="p-2 rounded hover:bg-white/10 flex items-center"> |
|
|
<i class="fas fa-image text-yellow-400 mr-2"></i> |
|
|
<span>Images</span> |
|
|
</div> |
|
|
<div class="p-2 rounded hover:bg-white/10 flex items-center"> |
|
|
<i class="fas fa-music text-purple-400 mr-2"></i> |
|
|
<span>Musique</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-1 ml-4"> |
|
|
<div class="grid grid-cols-5 gap-4"> |
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="bg-blue-500/20 p-4 rounded-xl mb-1"> |
|
|
<i class="fas fa-folder text-blue-400 text-2xl"></i> |
|
|
</div> |
|
|
<span class="text-xs">Documents</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="bg-green-500/20 p-4 rounded-xl mb-1"> |
|
|
<i class="fas fa-folder text-green-400 text-2xl"></i> |
|
|
</div> |
|
|
<span class="text-xs">Images</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="bg-yellow-500/20 p-4 rounded-xl mb-1"> |
|
|
<i class="fas fa-folder text-yellow-400 text-2xl"></i> |
|
|
</div> |
|
|
<span class="text-xs">Musique</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="bg-purple-500/20 p-4 rounded-xl mb-1"> |
|
|
<i class="fas fa-folder text-purple-400 text-2xl"></i> |
|
|
</div> |
|
|
<span class="text-xs">Vidéos</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="bg-red-500/20 p-4 rounded-xl mb-1"> |
|
|
<i class="fas fa-folder text-red-400 text-2xl"></i> |
|
|
</div> |
|
|
<span class="text-xs">Téléchargements</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
break; |
|
|
|
|
|
case 'browser': |
|
|
appTitle.textContent = 'Microsoft Edge'; |
|
|
appContent.innerHTML = ` |
|
|
<div class="flex flex-col h-full"> |
|
|
<div class="flex items-center bg-white/10 rounded-full px-4 py-2 mb-4"> |
|
|
<i class="fas fa-search text-white/50 mr-2"></i> |
|
|
<input type="text" placeholder="Rechercher sur le web ou saisir une URL" class="bg-transparent border-none w-full focus:outline-none text-sm"> |
|
|
</div> |
|
|
<div class="flex-1 bg-white/5 rounded-lg p-4"> |
|
|
<h3 class="text-lg font-medium mb-4">Page d'accueil</h3> |
|
|
<div class="grid grid-cols-3 gap-4"> |
|
|
<div class="bg-white/10 rounded-lg p-3 hover:bg-white/20 cursor-pointer"> |
|
|
<div class="h-20 bg-blue-500/20 rounded-lg mb-2 flex items-center justify-center"> |
|
|
<i class="fab fa-windows text-blue-400 text-2xl"></i> |
|
|
</div> |
|
|
<p class="text-sm">Microsoft</p> |
|
|
</div> |
|
|
<div class="bg-white/10 rounded-lg p-3 hover:bg-white/20 cursor-pointer"> |
|
|
<div class="h-20 bg-red-500/20 rounded-lg mb-2 flex items-center justify-center"> |
|
|
<i class="fab fa-youtube text-red-400 text-2xl"></i> |
|
|
</div> |
|
|
<p class="text-sm">YouTube</p> |
|
|
</div> |
|
|
<div class="bg-white/10 rounded-lg p-3 hover:bg-white/20 cursor-pointer"> |
|
|
<div class="h-20 bg-blue-400/20 rounded-lg mb-2 flex items-center justify-center"> |
|
|
<i class="fab fa-twitter text-blue-400 text-2xl"></i> |
|
|
</div> |
|
|
<p class="text-sm">Twitter</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
break; |
|
|
|
|
|
case 'store': |
|
|
appTitle.textContent = 'Microsoft Store'; |
|
|
appContent.innerHTML = ` |
|
|
<div class="flex flex-col h-full"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<h2 class="text-xl font-semibold">Microsoft Store</h2> |
|
|
<div class="ml-auto flex space-x-2"> |
|
|
<button class="px-3 py-1 bg-white/10 rounded-full text-sm">Applications</button> |
|
|
<button class="px-3 py-1 bg-white/5 rounded-full text-sm">Jeux</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-3 gap-4 flex-1 overflow-auto"> |
|
|
<div class="bg-white/10 rounded-xl p-3 hover:bg-white/20 cursor-pointer"> |
|
|
<div class="h-32 bg-purple-500/20 rounded-lg mb-2 flex items-center justify-center"> |
|
|
<i class="fas fa-gamepad text-purple-400 text-4xl"></i> |
|
|
</div> |
|
|
<p class="font-medium">Minecraft</p> |
|
|
<p class="text-xs text-white/60">Jeu de construction</p> |
|
|
</div> |
|
|
<div class="bg-white/10 rounded-xl p-3 hover:bg-white/20 cursor-pointer"> |
|
|
<div class="h-32 bg-blue-500/20 rounded-lg mb-2 flex items-center justify-center"> |
|
|
<i class="fas fa-film text-blue-400 text-4xl"></i> |
|
|
</div> |
|
|
<p class="font-medium">Netflix</p> |
|
|
<p class="text-xs text-white/60">Streaming vidéo</p> |
|
|
</div> |
|
|
<div class="bg-white/10 rounded-xl p-3 hover:bg-white/20 cursor-pointer"> |
|
|
<div class="h-32 bg-green-500/20 rounded-lg mb-2 flex items-center justify-center"> |
|
|
<i class="fas fa-music text-green-400 text-4xl"></i> |
|
|
</div> |
|
|
<p class="font-medium">Spotify</p> |
|
|
<p class="text-xs text-white/60">Musique en streaming</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
break; |
|
|
|
|
|
case 'mail': |
|
|
appTitle.textContent = 'Courrier'; |
|
|
appContent.innerHTML = ` |
|
|
<div class="flex h-full"> |
|
|
<div class="w-48 bg-white/5 rounded-lg p-3"> |
|
|
<button class="w-full bg-blue-500/20 text-blue-400 rounded-full py-2 px-4 mb-4 text-sm"> |
|
|
Nouveau message |
|
|
</button> |
|
|
<div class="space-y-1"> |
|
|
<div class="p-2 rounded hover:bg-white/10 flex items-center"> |
|
|
<i class="fas fa-inbox text-blue-400 mr-2"></i> |
|
|
<span>Boîte de réception</span> |
|
|
</div> |
|
|
<div class="p-2 rounded hover:bg-white/10 flex items-center"> |
|
|
<i class="fas fa-paper-plane text-green-400 mr-2"></i> |
|
|
<span>Envoyés</span> |
|
|
</div> |
|
|
<div class="p-2 rounded hover:bg-white/10 flex items-center"> |
|
|
<i class="fas fa-star text-yellow-400 mr-2"></i> |
|
|
<span>Importants</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-1 ml-4"> |
|
|
<div class="bg-white/5 rounded-lg p-4 h-full"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h3 class="font-medium">Boîte de réception</h3> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-chevron-left text-white/50"></i> |
|
|
<i class="fas fa-chevron-right text-white/50"></i> |
|
|
</div> |
|
|
</div |
|
|
<div class="space-y-2"> |
|
|
<div class="p-3 bg-white/10 rounded-lg hover:bg-white/20 cursor-pointer"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<p class="font-medium">Microsoft</p> |
|
|
<span class="text-xs text-white/50">14:20</span> |
|
|
</div> |
|
|
<p class="text-sm">Mise à jour de votre compte</p> |
|
|
<p class="text-xs text-white/60 line-clamp-1">Nous avons détecté une nouvelle connexion à votre compte Microsoft depuis un appareil inconnu...</p> |
|
|
</div> |
|
|
<div class="p-3 bg-white/10 rounded-lg hover:bg-white/20 cursor-pointer"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<p class="font-medium">GitHub</p> |
|
|
<span class="text-xs text-white/50">12:45</span> |
|
|
</div> |
|
|
<p class="text-sm">Pull request: Nouvelle fonctionnalité</p> |
|
|
<p class="text-xs text-white/60 line-clamp-1">Une nouvelle pull request a été ouverte dans le dépôt windows-ai-interface...</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
break; |
|
|
|
|
|
case 'youtube': |
|
|
appTitle.textContent = 'YouTube'; |
|
|
appContent.innerHTML = ` |
|
|
<div class="flex flex-col h-full"> |
|
|
|
|
|
<div class="flex items-center bg-black/50 p-2 rounded-lg mb-4"> |
|
|
<div class="flex items-center bg-white/10 rounded-full px-4 py-1 flex-1 max-w-xl"> |
|
|
<input type="text" placeholder="Rechercher" class="bg-transparent border-none w-full focus:outline-none text-sm"> |
|
|
<i class="fas fa-search text-white/50 ml-2"></i> |
|
|
</div> |
|
|
<div class="flex space-x-2 ml-4"> |
|
|
<button class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-white/10"> |
|
|
<i class="fas fa-video text-white/80"></i> |
|
|
</button> |
|
|
<button class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-white/10"> |
|
|
<i class="fas fa-bell text-white/80"></i> |
|
|
</button> |
|
|
<div class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center text-white"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex space-x-2 mb-4 overflow-x-auto pb-2"> |
|
|
<button class="px-3 py-1 bg-white/10 rounded-full text-sm whitespace-nowrap">Tout</button> |
|
|
<button class="px-3 py-1 bg-white/5 rounded-full text-sm whitespace-nowrap">Musique</button> |
|
|
<button class="px-3 py-1 bg-white/5 rounded-full text-sm whitespace-nowrap">Jeux vidéo</button> |
|
|
<button class="px-3 py-1 bg-white/5 rounded-full text-sm whitespace-nowrap">Actualités</button> |
|
|
<button class="px-3 py-1 bg-white/5 rounded-full text-sm whitespace-nowrap">Films</button> |
|
|
<button class="px-3 py-1 bg-white/5 rounded-full text-sm whitespace-nowrap">Vidéos récentes</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 flex-1 overflow-auto"> |
|
|
|
|
|
<div class="bg-white/5 rounded-lg overflow-hidden hover:bg-white/10 cursor-pointer" onclick="window.open('https://www.youtube.com/@asrielchrist9334', '_blank')"> |
|
|
<div class="video-thumbnail bg-[url('https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg')]"></div> |
|
|
<div class="p-3"> |
|
|
<div class="flex"> |
|
|
<div class="w-9 h-9 rounded-full bg-red-500 mr-2 flex-shrink-0"></div> |
|
|
<div> |
|
|
<h3 class="font-medium text-sm line-clamp-2">Ma chaîne YouTube - AsrielChrist</h3> |
|
|
<p class="text-xs text-white/60 mt-1">AsrielChrist • 10K abonnés</p> |
|
|
<p class="text-xs text-white/60">Visitez ma chaîne pour du contenu incroyable!</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white/5 rounded-lg overflow-hidden hover:bg-white/10 cursor-pointer"> |
|
|
<div class="video-thumbnail bg-[url('https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg')]"></div> |
|
|
<div class="p-3"> |
|
|
<h3 class="font-medium text-sm line-clamp-2">Tutoriel Windows 11 - Personnalisation avancée</h3> |
|
|
<p class="text-xs text-white/60 mt-1">TechTutor • 120K vues • Il y a 2 semaines</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white/5 rounded-lg overflow-hidden hover:bg-white/10 cursor-pointer"> |
|
|
<div class="video-thumbnail bg-[url('https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg')]"></div> |
|
|
<div class="p-3"> |
|
|
<h3 class="font-medium text-sm line-clamp-2">Les dernières fonctionnalités IA de Windows 12</h3> |
|
|
<p class="text-xs text-white/60 mt-1">TechNews • 450K vues • Il y a 1 mois</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white/5 rounded-lg overflow-hidden hover:bg-white/10 cursor-pointer"> |
|
|
<div class="video-thumbnail bg-[url('https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg')]"></div> |
|
|
<div class="p-3"> |
|
|
<h3 class="font-medium text-sm line-clamp-2">Comment créer une interface utilisateur moderne</h3> |
|
|
<p class="text-xs text-white/60 mt-1">DevTips • 85K vues • Il y a 3 jours</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white/5 rounded-lg overflow-hidden hover:bg-white/10 cursor-pointer"> |
|
|
<div class="video-thumbnail bg-[url('https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg')]"></div> |
|
|
<div class="p-3"> |
|
|
<h3 class="font-medium text-sm line-clamp-2">Les meilleurs outils pour développeurs en 2023</h3> |
|
|
<p class="text-xs text-white/60 mt-1">CodeMaster • 210K vues • Il y a 2 semaines</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white/5 rounded-lg overflow-hidden hover:bg-white/10 cursor-pointer"> |
|
|
<div class="video-thumbnail bg-[url('https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg')]"></div> |
|
|
<div class="p-3"> |
|
|
<h3 class="font-medium text-sm line-clamp-2">Introduction à l'intelligence artificielle</h3> |
|
|
<p class="text-xs text-white/60 mt-1">AIExplained • 320K vues • Il y a 1 mois</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
break; |
|
|
|
|
|
default: |
|
|
appTitle.textContent = 'Application'; |
|
|
appContent.innerHTML = ` |
|
|
<div class="flex items-center justify-center h-full"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-info-circle text-blue-400 text-4xl mb-4"></i> |
|
|
<p>Contenu de l'application non disponible</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
|
|
|
appWindow.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
// Fonction pour fermer l'application |
|
|
function closeApp() { |
|
|
document.getElementById('app-window').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
// Fermer le menu Démarrer quand on clique ailleurs |
|
|
document.addEventListener('click', function(event) { |
|
|
const startButton = document.getElementById('start-button'); |
|
|
const startMenu = document.getElementById('start-menu'); |
|
|
|
|
|
if (!startButton.contains(event.target) && !startMenu.contains(event.target)) { |
|
|
startMenu.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
</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=asriel1/evane" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
