barribar/anycoder-f32a082f
0
1<!DOCTYPE html>2<html lang="fr">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Bonjour - Welcome</title>7 <style>8 * {9 margin: 0;10 padding: 0;11 box-sizing: border-box;12 }13 14 :root {15 --primary-color: #2c3e50;16 --accent-color: #e74c3c;17 --bg-gradient-1: #667eea;18 --bg-gradient-2: #764ba2;19 --text-light: #ffffff;20 --text-dark: #2c3e50;21 }22 23 body {24 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;25 min-height: 100vh;26 display: flex;27 flex-direction: column;28 background: linear-gradient(135deg, var(--bg-gradient-1) 0%, var(--bg-gradient-2) 100%);29 overflow-x: hidden;30 }31 32 /* Header Section */33 header {34 padding: 20px 40px;35 display: flex;36 justify-content: space-between;37 align-items: center;38 background: rgba(255, 255, 255, 0.1);39 backdrop-filter: blur(10px);40 position: fixed;41 width: 100%;42 top: 0;43 z-index: 100;44 }45 46 .logo {47 font-size: 1.2rem;48 font-weight: 600;49 color: var(--text-light);50 text-decoration: none;51 padding: 10px 20px;52 border: 2px solid rgba(255, 255, 255, 0.3);53 border-radius: 30px;54 transition: all 0.3s ease;55 }56 57 .logo:hover {58 background: rgba(255, 255, 255, 0.2);59 border-color: var(--text-light);60 transform: scale(1.05);61 }62 63 nav ul {64 display: flex;65 list-style: none;66 gap: 30px;67 }68 69 nav a {70 color: var(--text-light);71 text-decoration: none;72 font-weight: 500;73 position: relative;74 padding: 5px 0;75 transition: all 0.3s ease;76 }77 78 nav a::after {79 content: '';80 position: absolute;81 bottom: 0;82 left: 0;83 width: 0;84 height: 2px;85 background: var(--text-light);86 transition: width 0.3s ease;87 }88 89 nav a:hover::after {90 width: 100%;91 }92 93 /* Main Content */94 main {95 flex: 1;96 display: flex;97 justify-content: center;98 align-items: center;99 padding: 100px 20px 40px;100 }101 102 .hero {103 text-align: center;104 color: var(--text-light);105 animation: fadeInUp 1s ease-out;106 }107 108 @keyframes fadeInUp {109 from {110 opacity: 0;111 transform: translateY(30px);112 }113 to {114 opacity: 1;115 transform: translateY(0);116 }117 }118 119 .bonjour-text {120 font-size: clamp(4rem, 15vw, 12rem);121 font-weight: 800;122 letter-spacing: 5px;123 text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);124 animation: pulse 2s ease-in-out infinite;125 }126 127 @keyframes pulse {128 0%, 100% {129 transform: scale(1);130 }131 50% {132 transform: scale(1.02);133 }134 }135 136 .subtitle {137 font-size: clamp(1.2rem, 3vw, 2rem);138 margin-top: 20px;139 opacity: 0.9;140 font-weight: 300;141 }142 143 .greeting-options {144 display: flex;145 gap: 15px;146 justify-content: center;147 flex-wrap: wrap;148 margin-top: 50px;149 }150 151 .greeting-btn {152 padding: 15px 35px;153 border: none;154 border-radius: 50px;155 font-size: 1rem;156 cursor: pointer;157 transition: all 0.3s ease;158 font-weight: 500;159 }160 161 .btn-primary {162 background: var(--text-light);163 color: var(--bg-gradient-2);164 }165 166 .btn-secondary {167 background: transparent;168 border: 2px solid var(--text-light);169 color: var(--text-light);170 }171 172 .greeting-btn:hover {173 transform: translateY(-5px);174 box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);175 }176 177 .greeting-btn:active {178 transform: translateY(-2px);179 }180 181 /* Floating Elements */182 .floating-shapes {183 position: fixed;184 width: 100%;185 height: 100%;186 top: 0;187 left: 0;188 pointer-events: none;189 overflow: hidden;190 z-index: -1;191 }192 193 .shape {194 position: absolute;195 border-radius: 50%;196 background: rgba(255, 255, 255, 0.1);197 animation: float 20s infinite;198 }199 200 .shape:nth-child(1) {201 width: 100px;202 height: 100px;203 top: 10%;204 left: 10%;205 animation-delay: 0s;206 }207 208 .shape:nth-child(2) {209 width: 150px;210 height: 150px;211 top: 60%;212 left: 80%;213 animation-delay: -5s;214 }215 216 .shape:nth-child(3) {217 width: 80px;218 height: 80px;219 top: 80%;220 left: 20%;221 animation-delay: -10s;222 }223 224 .shape:nth-child(4) {225 width: 120px;226 height: 120px;227 top: 20%;228 left: 70%;229 animation-delay: -15s;230 }231 232 @keyframes float {233 0%, 100% {234 transform: translate(0, 0) rotate(0deg);235 }236 25% {237 transform: translate(50px, -50px) rotate(90deg);238 }239 50% {240 transform: translate(0, -100px) rotate(180deg);241 }242 75% {243 transform: translate(-50px, -50px) rotate(270deg);244 }245 }246 247 /* Footer */248 footer {249 padding: 20px;250 text-align: center;251 color: rgba(255, 255, 255, 0.7);252 font-size: 0.9rem;253 }254 255 /* Responsive Design */256 @media (max-width: 768px) {257 header {258 padding: 15px 20px;259 flex-direction: column;260 gap: 15px;261 }262 263 nav ul {264 gap: 20px;265 }266 267 .greeting-options {268 flex-direction: column;269 align-items: center;270 }271 272 .greeting-btn {273 width: 100%;274 max-width: 300px;275 }276 }277 278 /* Interactive Card */279 .info-card {280 margin-top: 60px;281 padding: 40px;282 background: rgba(255, 255, 255, 0.15);283 backdrop-filter: blur(10px);284 border-radius: 20px;285 border: 1px solid rgba(255, 255, 255, 0.2);286 max-width: 500px;287 margin-left: auto;288 margin-right: auto;289 }290 291 .info-card h3 {292 margin-bottom: 15px;293 font-size: 1.5rem;294 }295 296 .info-card p {297 line-height: 1.8;298 opacity: 0.9;299 }300 301 /* Hover effect for main text */302 .bonjour-text {303 background: linear-gradient(120deg, #ffffff 0%, #ffeaa7 100%);304 -webkit-background-clip: text;305 -webkit-text-fill-color: transparent;306 background-clip: text;307 }308 309 .greeting-btn {310 position: relative;311 overflow: hidden;312 }313 314 .greeting-btn::before {315 content: '';316 position: absolute;317 top: 0;318 left: -100%;319 width: 100%;320 height: 100%;321 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);322 transition: left 0.5s ease;323 }324 325 .greeting-btn:hover::before {326 left: 100%;327 }328 </style>329</head>330<body>331 <!-- Floating Background Shapes -->332 <div class="floating-shapes">333 <div class="shape"></div>334 <div class="shape"></div>335 <div class="shape"></div>336 <div class="shape"></div>337 </div>338 339 <!-- Header with Navigation -->340 <header>341 <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="logo" target="_blank">342 Built with anycoder343 </a>344 <nav>345 <ul>346 <li><a href="#home">Accueil</a></li>347 <li><a href="#about">À propos</a></li>348 <li><a href="#contact">Contact</a></li>349 </ul>350 </nav>351 </header>352 353 <!-- Main Content -->354 <main>355 <div class="hero">356 <h1 class="bonjour-text">Bonjour!</h1>357 <p class="subtitle">Welcome to this beautiful moment</p>358 359 <div class="greeting-options">360 <button class="greeting-btn btn-primary" onclick="sayHello()">Say Hello 👋</button>361 <button class="greeting-btn btn-secondary" onclick="changeLanguage()">Explore Languages 🌍</button>362 </div>363 364 <div class="info-card">365 <h3>🎯 Today's Inspiration</h3>366 <p>367 "Bonjour" is more than just a greeting—it's a French tradition that marks 368 the beginning of a new interaction. Every "bonjour" is an opportunity 369 to start something wonderful.370 </p>371 </div>372 </div>373 </main>374 375 <!-- Footer -->376 <footer>377 <p>Made with ❤️ | © 2024 Bonjour Application</p>378 </footer>379 380 <script>381 // Greetings in different languages382 const greetings = [383 { text: "Bonjour!", lang: "French" },384 { text: "Hello!", lang: "English" },385 { text: "Hola!", lang: "Spanish" },386 { text: "Ciao!", lang: "Italian" },387 { text: "Guten Tag!", lang: "German" },388 { text: "Konnichiwa!", lang: "Japanese" },389 { text: "Ni Hao!", lang: "Chinese" },390 { text: "Namaste!", lang: "Hindi" },391 { text: "Marhaban!", lang: "Arabic" },392 { text: "Privet!", lang: "Russian" }393 ];394 395 let currentGreeting = 0;396 397 function sayHello() {398 const bonjourText = document.querySelector('.bonjour-text');399 bonjourText.style.animation = 'none';400 bonjourText.offsetHeight; // Trigger reflow401 bonjourText.style.animation = 'pulse 0.5s ease-in-out 3';402 403 // Create confetti effect404 createConfetti();405 }406 407 function changeLanguage() {408 currentGreeting = (currentGreeting + 1) % greetings.length;409 const bonjourText = document.querySelector('.bonjour-text');410 const subtitle = document.querySelector('.subtitle');411 412 // Animate transition413 bonjourText.style.opacity = '0';414 bonjourText.style.transform = 'scale(0.8)';415 416 setTimeout(() => {417 bonjourText.textContent = greetings[currentGreeting].text;418 subtitle.textContent = `Greeting in ${greetings[currentGreeting].lang}`;419 420 bonjourText.style.transition = 'all 0.5s ease';421 bonjourText.style.opacity = '1';422 bonjourText.style.transform = 'scale(1)';423 }, 200);424 }425 426 function createConfetti() {427 const colors = ['#ff6b6b', '#feca57', '#48dbfb', '#ff9ff3', '#54a0ff', '#5f27cd'];428 429 for (let i = 0; i < 50; i++) {430 const confetti = document.createElement('div');431 confetti.style.cssText = `432 position: fixed;433 width: 10px;434 height: 10px;435 background: ${colors[Math.floor(Math.random() * colors.length)]};436 left: ${Math.random() * 100}vw;437 top: -10px;438 border-radius: ${Math.random() > 0.5 ? '50%' : '0'};439 pointer-events: none;440 z-index: 1000;441 animation: confettiFall ${2 + Math.random() * 3}s linear forwards;442 `;443 444 document.body.appendChild(confetti);445 446 setTimeout(() => confetti.remove(), 5000);447 }448 }449 450 // Add confetti animation dynamically451 const confettiStyle = document.createElement('style');452 confettiStyle.textContent = `453 @keyframes confettiFall {454 to {455 transform: translateY(100vh) rotate(720deg);456 opacity: 0;457 }458 }459 `;460 document.head.appendChild(confettiStyle);461 462 // Smooth scroll for navigation463 document.querySelectorAll('nav a').forEach(anchor => {464 anchor.addEventListener('click', function(e) {465 e.preventDefault();466 const target = document.querySelector(this.getAttribute('href'));467 if (target) {468 target.scrollIntoView({469 behavior: 'smooth',470 block: 'start'471 });472 }473 });474 });475 476 // Add mouse movement parallax effect477 document.addEventListener('mousemove', (e) => {478 const shapes = document.querySelectorAll('.shape');479 const x = e.clientX / window.innerWidth;480 const y = e.clientY / window.innerHeight;481 482 shapes.forEach((shape, index) => {483 const speed = (index + 1) * 20;484 const xMove = (x - 0.5) * speed;485 const yMove = (y - 0.5) * speed;486 shape.style.transform = `translate(${xMove}px, ${yMove}px)`;487 });488 });489 </script>490</body>491</html>