call444/index.html

## index.html
<!DOCTYPE html>

<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horloge Mondiale</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

```
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
        padding: 20px;
        color: white;
    }

    .container {
        max-width: 1400px;
        margin: 0 auto;
    }

    h1 {
        text-align: center;
        margin-bottom: 40px;
        font-size: 2.5rem;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }

    .clocks-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 25px;
        margin-bottom: 30px;
    }

    .clock-card {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        padding: 25px;
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0.2);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .clock-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
        transition: left 0.5s;
    }

    .clock-card:hover::before {
        left: 100%;
    }

    .clock-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    }

    .city-name {
        font-size: 1.4rem;
        font-weight: bold;
        margin-bottom: 10px;
        color: #fff;
    }

    .country {
        font-size: 0.9rem;
        opacity: 0.8;
        margin-bottom: 15px;
    }

    .time {
        font-size: 2.2rem;
        font-weight: bold;
        margin-bottom: 8px;
        font-family: 'Courier New', monospace;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    }

    .date {
        font-size: 1rem;
        opacity: 0.9;
        margin-bottom: 10px;
    }

    .timezone {
        font-size: 0.8rem;
        opacity: 0.7;
        background: rgba(255,255,255,0.1);
        padding: 5px 10px;
        border-radius: 10px;
        display: inline-block;
    }

    .analog-clock {
        width: 120px;
        height: 120px;
        border: 3px solid rgba(255,255,255,0.3);
        border-radius: 50%;
        margin: 15px auto;
        position: relative;
        background: rgba(255,255,255,0.05);
    }

    .clock-center {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 8px;
        background: #fff;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
    }

    .hand {
        position: absolute;
        left: 50%;
        transform-origin: bottom center;
        background: #fff;
        border-radius: 2px;
    }

    .hour-hand {
        width: 4px;
        height: 35px;
        top: 25px;
        margin-left: -2px;
    }

    .minute-hand {
        width: 2px;
        height: 45px;
        top: 15px;
        margin-left: -1px;
    }

    .second-hand {
        width: 1px;
        height: 50px;
        top: 10px;
        background: #ff6b6b;
        margin-left: -0.5px;
    }

    .clock-numbers {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .number {
        position: absolute;
        font-size: 12px;
        font-weight: bold;
    }

    .search-container {
        text-align: center;
        margin-bottom: 30px;
    }

    .search-input {
        padding: 12px 20px;
        border: none;
        border-radius: 25px;
        font-size: 1rem;
        width: 300px;
        background: rgba(255,255,255,0.2);
        color: white;
        placeholder-color: rgba(255,255,255,0.7);
    }

    .search-input::placeholder {
        color: rgba(255,255,255,0.7);
    }

    .search-input:focus {
        outline: none;
        background: rgba(255,255,255,0.3);
    }

    @media (max-width: 768px) {
        .clocks-grid {
            grid-template-columns: 1fr;
        }

        h1 {
            font-size: 2rem;
        }

        .search-input {
            width: 100%;
            max-width: 300px;
        }
    }
</style>
```

</head>
<body>
    <div class="container">
        <h1>🌍 Horloge Mondiale</h1>

```
    <div class="search-container">
        <input type="text" class="search-input" placeholder="Rechercher une ville..." id="searchInput">
    </div>

    <div class="clocks-grid" id="clocksGrid">
    </div>
</div>

<script>
    const worldClocks = [
        { city: 'Paris', country: 'France', timezone: 'Europe/Paris', flag: '🇫🇷' },
        { city: 'Londres', country: 'Royaume-Uni', timezone: 'Europe/London', flag: '🇬🇧' },
        { city: 'New York', country: 'États-Unis', timezone: 'America/New_York', flag: '🇺🇸' },
        { city: 'Los Angeles', country: 'États-Unis', timezone: 'America/Los_Angeles', flag: '🇺🇸' },
        { city: 'Tokyo', country: 'Japon', timezone: 'Asia/Tokyo', flag: '🇯🇵' },
        { city: 'Sydney', country: 'Australie', timezone: 'Australia/Sydney', flag: '🇦🇺' },
        { city: 'Dubai', country: 'Émirats Arabes Unis', timezone: 'Asia/Dubai', flag: '🇦🇪' },
        { city: 'Singapour', country: 'Singapour', timezone: 'Asia/Singapore', flag: '🇸🇬' },
        { city: 'Hong Kong', country: 'Chine', timezone: 'Asia/Hong_Kong', flag: '🇭🇰' },
        { city: 'Mumbai', country: 'Inde', timezone: 'Asia/Kolkata', flag: '🇮🇳' },
        { city: 'Le Caire', country: 'Égypte', timezone: 'Africa/Cairo', flag: '🇪🇬' },
        { city: 'Moscou', country: 'Russie', timezone: 'Europe/Moscow', flag: '🇷🇺' },
        { city: 'São Paulo', country: 'Brésil', timezone: 'America/Sao_Paulo', flag: '🇧🇷' },
        { city: 'Mexico', country: 'Mexique', timezone: 'America/Mexico_City', flag: '🇲🇽' },
        { city: 'Buenos Aires', country: 'Argentine', timezone: 'America/Argentina/Buenos_Aires', flag: '🇦🇷' },
        { city: 'Le Cap', country: 'Afrique du Sud', timezone: 'Africa/Johannesburg', flag: '🇿🇦' },
        { city: 'Istanbul', country: 'Turquie', timezone: 'Europe/Istanbul', flag: '🇹🇷' },
        { city: 'Bangkok', country: 'Thaïlande', timezone: 'Asia/Bangkok', flag: '🇹🇭' },
        { city: 'Pékin', country: 'Chine', timezone: 'Asia/Shanghai', flag: '🇨🇳' },
        { city: 'Seoul', country: 'Corée du Sud', timezone: 'Asia/Seoul', flag: '🇰🇷' },
        { city: 'Jakarta', country: 'Indonésie', timezone: 'Asia/Jakarta', flag: '🇮🇩' },
        { city: 'Lagos', country: 'Nigeria', timezone: 'Africa/Lagos', flag: '🇳🇬' },
        { city: 'Abidjan', country: 'Côte d\'Ivoire', timezone: 'Africa/Abidjan', flag: '🇨🇮' },
        { city: 'Casablanca', country: 'Maroc', timezone: 'Africa/Casablanca', flag: '🇲🇦' }
    ];

    let filteredClocks = [...worldClocks];

    function createClockNumbers() {
        let numbersHTML = '';
        for (let i = 1; i <= 12; i++) {
            const angle = (i * 30 - 90) * (Math.PI / 180);
            const x = 50 + 40 * Math.cos(angle);
            const y = 50 + 40 * Math.sin(angle);
            numbersHTML += `<div class="number" style="left: ${x}%; top: ${y}%; transform: translate(-50%, -50%)">${i}</div>`;
        }
        return numbersHTML;
    }

    function updateAnalogClock(clockElement, date) {
        const hours = date.getHours() % 12;
        const minutes = date.getMinutes();
        const seconds = date.getSeconds();

        const hourAngle = (hours * 30) + (minutes * 0.5);
        const minuteAngle = minutes * 6;
        const secondAngle = seconds * 6;

        const hourHand = clockElement.querySelector('.hour-hand');
        const minuteHand = clockElement.querySelector('.minute-hand');
        const secondHand = clockElement.querySelector('.second-hand');

        hourHand.style.transform = `rotate(${hourAngle}deg)`;
        minuteHand.style.transform = `rotate(${minuteAngle}deg)`;
        secondHand.style.transform = `rotate(${secondAngle}deg)`;
    }

    function formatTime(date) {
        return date.toLocaleTimeString('fr-FR', {
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        });
    }

    function formatDate(date) {
        return date.toLocaleDateString('fr-FR', {
            weekday: 'long',
            year: 'numeric',
            month: 'long',
            day: 'numeric'
        });
    }

    function createClockHTML(clockData) {
        return `
            <div class="clock-card" data-city="${clockData.city.toLowerCase()}">
                <div class="city-name">${clockData.flag} ${clockData.city}</div>
                <div class="country">${clockData.country}</div>
                <div class="time" id="time-${clockData.city.replace(/\s+/g, '')}">--:--:--</div>
                <div class="date" id="date-${clockData.city.replace(/\s+/g, '')}">--</div>
                <div class="analog-clock" id="analog-${clockData.city.replace(/\s+/g, '')}">
                    <div class="clock-numbers">${createClockNumbers()}</div>
                    <div class="hand hour-hand"></div>
                    <div class="hand minute-hand"></div>
                    <div class="hand second-hand"></div>
                    <div class="clock-center"></div>
                </div>
                <div class="timezone">${clockData.timezone}</div>
            </div>
        `;
    }

    function renderClocks() {
        const clocksGrid = document.getElementById('clocksGrid');
        clocksGrid.innerHTML = filteredClocks.map(createClockHTML).join('');
    }

    function updateAllClocks() {
        filteredClocks.forEach(clockData => {
            try {
                const now = new Date();
                const localTime = new Date(now.toLocaleString("en-US", {timeZone: clockData.timezone}));

                const cityId = clockData.city.replace(/\s+/g, '');
                const timeElement = document.getElementById(`time-${cityId}`);
                const dateElement = document.getElementById(`date-${cityId}`);
                const analogClock = document.getElementById(`analog-${cityId}`);

                if (timeElement && dateElement && analogClock) {
                    timeElement.textContent = formatTime(localTime);
                    dateElement.textContent = formatDate(localTime);
                    updateAnalogClock(analogClock, localTime);
                }
            } catch (error) {
                console.error(`Erreur pour ${clockData.city}:`, error);
            }
        });
    }

    function filterClocks(searchTerm) {
        const term = searchTerm.toLowerCase().trim();
        if (term === '') {
            filteredClocks = [...worldClocks];
        } else {
            filteredClocks = worldClocks.filter(clock =>
                clock.city.toLowerCase().includes(term) ||
                clock.country.toLowerCase().includes(term)
            );
        }
        renderClocks();
        updateAllClocks();
    }

    // Initialisation
    renderClocks();
    updateAllClocks();

    // Mise à jour toutes les secondes
    setInterval(updateAllClocks, 1000);

    // Recherche
    document.getElementById('searchInput').addEventListener('input', (e) => {
        filterClocks(e.target.value);
    });

    // Animation d'entrée
    setTimeout(() => {
        document.querySelectorAll('.clock-card').forEach((card, index) => {
            card.style.opacity = '0';
            card.style.transform = 'translateY(20px)';
            card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';

            setTimeout(() => {
                card.style.opacity = '1';
                card.style.transform = 'translateY(0)';
            }, index * 100);
        });
    }, 100);
</script>
```

</body>
</html>

## untitled.markdown

      
    Raw
  

              untitled.markdown
            
          
    Untitled

A Pen by call444 on CodePen.
License.
	<!DOCTYPE html>

	<html lang="fr">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Horloge Mondiale</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	```
	body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	min-height: 100vh;
	padding: 20px;
	color: white;
	}

	.container {
	max-width: 1400px;
	margin: 0 auto;
	}

	h1 {
	text-align: center;
	margin-bottom: 40px;
	font-size: 2.5rem;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
	}

	.clocks-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 25px;
	margin-bottom: 30px;
	}

	.clock-card {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	border-radius: 20px;
	padding: 25px;
	text-align: center;
	border: 1px solid rgba(255, 255, 255, 0.2);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	}

	.clock-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
	transition: left 0.5s;
	}

	.clock-card:hover::before {
	left: 100%;
	}

	.clock-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 35px rgba(0,0,0,0.2);
	}

	.city-name {
	font-size: 1.4rem;
	font-weight: bold;
	margin-bottom: 10px;
	color: #fff;
	}

	.country {
	font-size: 0.9rem;
	opacity: 0.8;
	margin-bottom: 15px;
	}

	.time {
	font-size: 2.2rem;
	font-weight: bold;
	margin-bottom: 8px;
	font-family: 'Courier New', monospace;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
	}

	.date {
	font-size: 1rem;
	opacity: 0.9;
	margin-bottom: 10px;
	}

	.timezone {
	font-size: 0.8rem;
	opacity: 0.7;
	background: rgba(255,255,255,0.1);
	padding: 5px 10px;
	border-radius: 10px;
	display: inline-block;
	}

	.analog-clock {
	width: 120px;
	height: 120px;
	border: 3px solid rgba(255,255,255,0.3);
	border-radius: 50%;
	margin: 15px auto;
	position: relative;
	background: rgba(255,255,255,0.05);
	}

	.clock-center {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	background: #fff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	}

	.hand {
	position: absolute;
	left: 50%;
	transform-origin: bottom center;
	background: #fff;
	border-radius: 2px;
	}

	.hour-hand {
	width: 4px;
	height: 35px;
	top: 25px;
	margin-left: -2px;
	}

	.minute-hand {
	width: 2px;
	height: 45px;
	top: 15px;
	margin-left: -1px;
	}

	.second-hand {
	width: 1px;
	height: 50px;
	top: 10px;
	background: #ff6b6b;
	margin-left: -0.5px;
	}

	.clock-numbers {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	}

	.number {
	position: absolute;
	font-size: 12px;
	font-weight: bold;
	}

	.search-container {
	text-align: center;
	margin-bottom: 30px;
	}

	.search-input {
	padding: 12px 20px;
	border: none;
	border-radius: 25px;
	font-size: 1rem;
	width: 300px;
	background: rgba(255,255,255,0.2);
	color: white;
	placeholder-color: rgba(255,255,255,0.7);
	}

	.search-input::placeholder {
	color: rgba(255,255,255,0.7);
	}

	.search-input:focus {
	outline: none;
	background: rgba(255,255,255,0.3);
	}

	@media (max-width: 768px) {
	.clocks-grid {
	grid-template-columns: 1fr;
	}

	h1 {
	font-size: 2rem;
	}

	.search-input {
	width: 100%;
	max-width: 300px;
	}
	}
	</style>
	```

	</head>
	<body>
	<div class="container">
	<h1>🌍 Horloge Mondiale</h1>

	```
	<div class="search-container">
	<input type="text" class="search-input" placeholder="Rechercher une ville..." id="searchInput">
	</div>

	<div class="clocks-grid" id="clocksGrid">
	</div>
	</div>

	<script>
	const worldClocks = [
	{ city: 'Paris', country: 'France', timezone: 'Europe/Paris', flag: '🇫🇷' },
	{ city: 'Londres', country: 'Royaume-Uni', timezone: 'Europe/London', flag: '🇬🇧' },
	{ city: 'New York', country: 'États-Unis', timezone: 'America/New_York', flag: '🇺🇸' },
	{ city: 'Los Angeles', country: 'États-Unis', timezone: 'America/Los_Angeles', flag: '🇺🇸' },
	{ city: 'Tokyo', country: 'Japon', timezone: 'Asia/Tokyo', flag: '🇯🇵' },
	{ city: 'Sydney', country: 'Australie', timezone: 'Australia/Sydney', flag: '🇦🇺' },
	{ city: 'Dubai', country: 'Émirats Arabes Unis', timezone: 'Asia/Dubai', flag: '🇦🇪' },
	{ city: 'Singapour', country: 'Singapour', timezone: 'Asia/Singapore', flag: '🇸🇬' },
	{ city: 'Hong Kong', country: 'Chine', timezone: 'Asia/Hong_Kong', flag: '🇭🇰' },
	{ city: 'Mumbai', country: 'Inde', timezone: 'Asia/Kolkata', flag: '🇮🇳' },
	{ city: 'Le Caire', country: 'Égypte', timezone: 'Africa/Cairo', flag: '🇪🇬' },
	{ city: 'Moscou', country: 'Russie', timezone: 'Europe/Moscow', flag: '🇷🇺' },
	{ city: 'São Paulo', country: 'Brésil', timezone: 'America/Sao_Paulo', flag: '🇧🇷' },
	{ city: 'Mexico', country: 'Mexique', timezone: 'America/Mexico_City', flag: '🇲🇽' },
	{ city: 'Buenos Aires', country: 'Argentine', timezone: 'America/Argentina/Buenos_Aires', flag: '🇦🇷' },
	{ city: 'Le Cap', country: 'Afrique du Sud', timezone: 'Africa/Johannesburg', flag: '🇿🇦' },
	{ city: 'Istanbul', country: 'Turquie', timezone: 'Europe/Istanbul', flag: '🇹🇷' },
	{ city: 'Bangkok', country: 'Thaïlande', timezone: 'Asia/Bangkok', flag: '🇹🇭' },
	{ city: 'Pékin', country: 'Chine', timezone: 'Asia/Shanghai', flag: '🇨🇳' },
	{ city: 'Seoul', country: 'Corée du Sud', timezone: 'Asia/Seoul', flag: '🇰🇷' },
	{ city: 'Jakarta', country: 'Indonésie', timezone: 'Asia/Jakarta', flag: '🇮🇩' },
	{ city: 'Lagos', country: 'Nigeria', timezone: 'Africa/Lagos', flag: '🇳🇬' },
	{ city: 'Abidjan', country: 'Côte d\'Ivoire', timezone: 'Africa/Abidjan', flag: '🇨🇮' },
	{ city: 'Casablanca', country: 'Maroc', timezone: 'Africa/Casablanca', flag: '🇲🇦' }
	];

	let filteredClocks = [...worldClocks];

	function createClockNumbers() {
	let numbersHTML = '';
	for (let i = 1; i <= 12; i++) {
	const angle = (i * 30 - 90) * (Math.PI / 180);
	const x = 50 + 40 * Math.cos(angle);
	const y = 50 + 40 * Math.sin(angle);
	numbersHTML += `<div class="number" style="left: ${x}%; top: ${y}%; transform: translate(-50%, -50%)">${i}</div>`;
	}
	return numbersHTML;
	}

	function updateAnalogClock(clockElement, date) {
	const hours = date.getHours() % 12;
	const minutes = date.getMinutes();
	const seconds = date.getSeconds();

	const hourAngle = (hours * 30) + (minutes * 0.5);
	const minuteAngle = minutes * 6;
	const secondAngle = seconds * 6;

	const hourHand = clockElement.querySelector('.hour-hand');
	const minuteHand = clockElement.querySelector('.minute-hand');
	const secondHand = clockElement.querySelector('.second-hand');

	hourHand.style.transform = `rotate(${hourAngle}deg)`;
	minuteHand.style.transform = `rotate(${minuteAngle}deg)`;
	secondHand.style.transform = `rotate(${secondAngle}deg)`;
	}

	function formatTime(date) {
	return date.toLocaleTimeString('fr-FR', {
	hour: '2-digit',
	minute: '2-digit',
	second: '2-digit'
	});
	}

	function formatDate(date) {
	return date.toLocaleDateString('fr-FR', {
	weekday: 'long',
	year: 'numeric',
	month: 'long',
	day: 'numeric'
	});
	}

	function createClockHTML(clockData) {
	return `
	<div class="clock-card" data-city="${clockData.city.toLowerCase()}">
	<div class="city-name">${clockData.flag} ${clockData.city}</div>
	<div class="country">${clockData.country}</div>
	<div class="time" id="time-${clockData.city.replace(/\s+/g, '')}">--:--:--</div>
	<div class="date" id="date-${clockData.city.replace(/\s+/g, '')}">--</div>
	<div class="analog-clock" id="analog-${clockData.city.replace(/\s+/g, '')}">
	<div class="clock-numbers">${createClockNumbers()}</div>
	<div class="hand hour-hand"></div>
	<div class="hand minute-hand"></div>
	<div class="hand second-hand"></div>
	<div class="clock-center"></div>
	</div>
	<div class="timezone">${clockData.timezone}</div>
	</div>
	`;
	}

	function renderClocks() {
	const clocksGrid = document.getElementById('clocksGrid');
	clocksGrid.innerHTML = filteredClocks.map(createClockHTML).join('');
	}

	function updateAllClocks() {
	filteredClocks.forEach(clockData => {
	try {
	const now = new Date();
	const localTime = new Date(now.toLocaleString("en-US", {timeZone: clockData.timezone}));

	const cityId = clockData.city.replace(/\s+/g, '');
	const timeElement = document.getElementById(`time-${cityId}`);
	const dateElement = document.getElementById(`date-${cityId}`);
	const analogClock = document.getElementById(`analog-${cityId}`);

	if (timeElement && dateElement && analogClock) {
	timeElement.textContent = formatTime(localTime);
	dateElement.textContent = formatDate(localTime);
	updateAnalogClock(analogClock, localTime);
	}
	} catch (error) {
	console.error(`Erreur pour ${clockData.city}:`, error);
	}
	});
	}

	function filterClocks(searchTerm) {
	const term = searchTerm.toLowerCase().trim();
	if (term === '') {
	filteredClocks = [...worldClocks];
	} else {
	filteredClocks = worldClocks.filter(clock =>
	clock.city.toLowerCase().includes(term) \|\|
	clock.country.toLowerCase().includes(term)
	);
	}
	renderClocks();
	updateAllClocks();
	}

	// Initialisation
	renderClocks();
	updateAllClocks();

	// Mise à jour toutes les secondes
	setInterval(updateAllClocks, 1000);

	// Recherche
	document.getElementById('searchInput').addEventListener('input', (e) => {
	filterClocks(e.target.value);
	});

	// Animation d'entrée
	setTimeout(() => {
	document.querySelectorAll('.clock-card').forEach((card, index) => {
	card.style.opacity = '0';
	card.style.transform = 'translateY(20px)';
	card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';

	setTimeout(() => {
	card.style.opacity = '1';
	card.style.transform = 'translateY(0)';
	}, index * 100);
	});
	}, 100);
	</script>
	```

	</body>
	</html>