Файловый менеджер - Редактировать - /var/www/vhosts/aviointeriors.dev1.mndrn.cloud/app/update/kitty.dev1.mndrn.cloud.tar
Назад
timelaniepresentazione.html 0000644 00000022012 15233660036 0012211 0 ustar 00 <!DOCTYPE html> <html lang="it"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MOL</title> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script> </head> <body class="bg-gray-100 font-sans"> <!-- Header --> <header class="py-6 shadow-md text-center bg-[#2253a2]"> <div class="container mx-auto text-center relative h-[100px]"> <h1 class="text-3xl font-bold text-center text-gray-900 absolute top-10 left-0 right-0"> <div class="w-full text-center"> <img src="/mol_logo_transparent_original_color.png" class="w-36 h-auto mx-auto" alt=""> </div> </h1> </div> </header> <!-- Timeline Orizzontale --> <div class="mx-auto my-10 mt-64 max-w-[2183px]"> <div class="relative flex items-center justify-between flex-wrap"> <!-- Linea Centrale della Timeline --> <div class="absolute top-1/2 w-full h-1 bg-gray-300 -translate-y-1/2 linemastro"></div> <div class="relative flex flex-col items-center w-[20%] section"> <div class="absolute -top-[2px] w-full h-1 bg-cyan-500 left-[1.5rem] linecolor"></div> <div class="w-4 h-4 bg-white border border-cyan-500 rounded-full absolute -top-[8px] left-[19px]"></div> <div class="w-4 h-4 bg-white border border-cyan-500 rounded-full absolute -bottom-[107px] circlebox left-[19px] z-10"></div> <div class="w-[1px] h-[2rem] -z-10 bg-cyan-500 absolute -top-[38px] left-[27px]"></div> <div class="w-[1px] h-[7rem] markerline -z-10 bg-cyan-500 absolute top-0 left-[26px]"></div> <div class="text-black flex items-center justify-center font-bold uppercase text-xs border px-2 py-1 -rotate-90 border-cyan-500 -mt-20 -ml-[87%]">start</div> <div class="bg-white shadow-lg p-4 rounded-lg text-left absolute -bottom-48 left-4 right-0 w-[200px] h-auto border border-cyan-500 text-sm blocchiinfo"> <h2 class="uppercase text-gray-700">Strategia di</h2> <p class="text-black font-bold uppercase">Riposizionamento</p> <h2 class="uppercase text-gray-700">comunicazione</h2> </div> </div> <div class="relative flex flex-col items-center w-[20%] section"> <div class="absolute -top-[2px] w-full h-1 bg-sky-700 left-[1.5rem] linecolor hidden opacity-0"></div> <div class="w-4 h-4 bg-white border border-sky-700 rounded-full absolute -top-[8px] left-[30%]"></div> <div class="w-4 h-4 bg-white border border-sky-700 rounded-full absolute -bottom-[107px] circlebox left-[131px] z-10 hidden opacity-0"></div> <div class="w-[1px] h-[2.5rem] -z-10 bg-sky-700 absolute -top-[38px] left-[27px]"></div> <div class="w-[1px] h-[7rem] markerline -z-10 bg-sky-700 absolute top-0 left-[138px] hidden opacity-0"></div> <div class="text-black flex items-center justify-center font-bold uppercase text-xs border px-2 py-1 -rotate-90 border-sky-700 -mt-20 -ml-[87%] bg-gray-100">2° mese</div> <div class="bg-white shadow-lg p-4 rounded-lg text-left absolute -bottom-[419px] left-4 right-0 w-[200px] h-auto border border-sky-700 text-sm blocchiinfo hidden opacity-0"> <h2 class="uppercase text-gray-700">Brand identity</h2> <p class="text-black font-bold uppercase">Restyling logo</p> <div class="font-bold text-black my-2">+</div> <h2 class="uppercase text-gray-700">Realizzazione</h2> <p class="text-black font-bold uppercase">Sito web</p> <div class="font-bold text-black my-2">+</div> <h2 class="uppercase text-gray-700">Apertura canali</h2> <p class="text-black font-bold uppercase">Social (meta)</p> <div class="font-bold text-black my-2">+</div> <p class="text-black font-bold uppercase">Servizio</p> <p class="text-black font-bold uppercase">fotografico</p> <p class="text-black font-bold uppercase">aziendale</p> </div> </div> <div class="relative flex flex-col items-center w-[20%] section"> <div class="absolute -top-[2px] w-full h-1 bg-pink-600 left-[1.5rem] linecolor hidden opacity-0"></div> <div class="w-4 h-4 bg-white border border-pink-600 rounded-full absolute -top-[8px] left-[19px]"></div> <div class="w-4 h-4 bg-white border border-pink-600 rounded-full absolute hidden opacity-0 -bottom-[107px] circlebox left-[19px] z-10"></div> <div class="w-[1px] h-[2rem] -z-10 bg-pink-600 absolute -top-[38px] left-[27px]"></div> <div class="w-[1px] h-[7rem] hidden opacity-0 markerline -z-10 bg-pink-600 absolute top-0 left-[26px]"></div> <div class="text-black flex items-center justify-center font-bold uppercase text-xs border px-2 py-1 -rotate-90 border-pink-600 -mt-20 -ml-[87%] bg-gray-100">4° mese</div> <div class="bg-white shadow-lg p-4 rounded-lg text-left absolute -bottom-[364px] left-4 right-0 w-[200px] h-auto border border-pink-600 text-sm blocchiinfo hidden opacity-0"> <p class="text-black font-bold uppercase">Lancio</p> <h2 class="uppercase text-gray-700 mb-8">Comunicazione</h2> <div class="text-left"> <h2 class="text-gray-700">Social (meta)</h2> <h2 class="text-gray-700">4/5 maxi affissioni</h2> <h2 class="text-gray-700">Poster</h2> <h2 class="text-gray-700">Guerrilla</h2> <h2 class="text-gray-700">Radio</h2> <h2 class="text-gray-700">Giornali</h2> <h2 class="text-gray-700">Evento</h2> <h2 class="text-gray-700">DEM</h2> </div> </div> </div> <div class="relative flex flex-col items-center w-[20%] section"> <div class="absolute -top-[2px] w-full h-1 bg-purple-700 left-[1.5rem] linecolor hidden opacity-0"></div> <div class="w-4 h-4 bg-white border border-purple-700 rounded-full absolute -top-[8px] left-[50%] hidden opacity-0"></div> <div class="w-4 h-4 bg-white border border-purple-700 rounded-full absolute hidden opacity-0 -bottom-[107px] circlebox left-[50%] z-10"></div> <div class="w-[1px] h-[7rem] hidden opacity-0 markerline -z-10 bg-purple-700 absolute top-0 left-[51.5%]"></div> <div class="w-[1px] h-[2.5rem] -z-10 bg-purple-700 absolute -top-[38px] left-[27px]"></div> <div class="text-black flex items-center justify-center font-bold uppercase text-xs border px-2 py-1 -rotate-90 border-purple-700 -mt-20 -ml-[87%] bg-gray-100">6° mese</div> <div class="bg-white shadow-lg p-4 rounded-lg text-left absolute -bottom-[172px] left-[49.5%] right-0 w-[200px] h-auto border border-purple-700 text-sm blocchiinfo hidden opacity-0"> <p class="text-black font-bold uppercase">Mantenimento</p> <h2 class="uppercase text-gray-700">struttura</h2> </div> </div> <div class="relative flex flex-col items-center w-[20%] section"> <div class="w-4 h-4 bg-purple-700 border border-purple-700 rounded-full absolute -top-[8px] left-[20px]"></div> <div class="w-[1px] h-[2rem] -z-10 bg-purple-700 absolute -top-[38px] left-[27px]"></div> <div class="text-black flex items-center justify-center font-bold uppercase text-xs border px-2 py-1 -rotate-90 border-purple-700 -mt-20 -ml-[87%] bg-gray-100">12° mese</div> </div> </div> </div> <script> document.addEventListener("DOMContentLoaded", function () { let progress = 0; // Progressione da 0 a 100 const elements = gsap.utils.toArray(".hidden"); // Array di elementi nascosti // Funzione per aggiornare la progressione function updateProgress(direction) { progress += direction * 2; // Riduce l'incremento per un'animazione più lunga progress = Math.max(0, Math.min(100, progress)); elements.forEach((el, index) => { if (progress >= (index / elements.length) * 100) { gsap.to(el, { opacity: 1, duration: 2, ease: "power2.out" }); // Mostra con fade-in lento el.classList.remove("hidden"); } else { el.classList.add("hidden"); gsap.to(el, { opacity: 0, duration: 2, ease: "power2.out" }); // Nasconde con fade-out lento } }); // Reset dello stato iniziale if (progress === 0) { elements.forEach(el => { el.classList.add("hidden"); gsap.to(el, { opacity: 0, duration: 2, ease: "power2.out" }); }); } } // Evento di scroll del mouse window.addEventListener("wheel", (event) => { const direction = event.deltaY > 0 ? 1 : -1; updateProgress(direction); }); }); </script> </body> </html> mol_logo_transparent_original_color.png 0000644 00000355207 15233660036 0014604 0 ustar 00 �PNG IHDR 3 1 �EU tEXtSoftware Adobe ImageReadyq�e<