Hugging Face's logo

Spaces:
andreakone
/
cosafacciamo
Running

App Files Community
cosafacciamo / index.html
andreakone's picture
andreakone
rinomina in cosa facciamo - Initial Deployment
6abc1c7 verified
Raw
History Blame Contribute Delete
26.1 kB
<!DOCTYPE html>
<html lang="it">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Cosa Facciamo - Demo Interattiva</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>
 /* Custom CSS for elements that need more specific styling */
 .gradient-bg {
 background: linear-gradient(135deg, #6B46C1 0%, #4299E1 100%);
 }
 .card-hover:hover {
 transform: translateY(-5px);
 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
 .skill-bar {
 height: 8px;
 border-radius: 4px;
 }
 #typing-effect::after {
 content: '|';
 animation: blink 1s step-end infinite;
 }
 @keyframes blink {
 from, to { opacity: 1; }
 50% { opacity: 0; }
 }
 .project-card {
 transition: all 0.3s ease;
 perspective: 1000px;
 }
 .project-card-inner {
 transition: transform 0.6s;
 transform-style: preserve-3d;
 }
 .project-card:hover .project-card-inner {
 transform: rotateY(180deg);
 }
 .project-card-front, .project-card-back {
 backface-visibility: hidden;
 position: absolute;
 width: 100%;
 height: 100%;
 }
 .project-card-back {
 transform: rotateY(180deg);
 }
 </style>
</head>
<body class="bg-gray-50 font-sans antialiased">
 <!-- Header/Navigation -->
 <header class="gradient-bg text-white shadow-lg">
 <div class="container mx-auto px-4 py-6">
 <div class="flex justify-between items-center">
 <div class="flex items-center space-x-2">
 <i class="fas fa-code text-2xl"></i>
 <h1 class="text-2xl font-bold">Cosa Facciamo</h1>
 </div>
 <nav class="hidden md:block">
 <ul class="flex space-x-8">
 <li><a href="#skills" class="hover:text-purple-200 transition">Competenze</a></li>
 <li><a href="#projects" class="hover:text-purple-200 transition">Demo</a></li>
 <li><a href="#features" class="hover:text-purple-200 transition">Funzionalità</a></li>
 <li><a href="#contact" class="hover:text-purple-200 transition">Contatti</a></li>
 </ul>
 </nav>
 <button class="md:hidden text-2xl" id="mobile-menu-button">
 <i class="fas fa-bars"></i>
 </button>
 </div>
 </div>
 <!-- Mobile Menu -->
 <div class="md:hidden hidden px-4 pb-4" id="mobile-menu">
 <ul class="space-y-2">
 <li><a href="#skills" class="block py-2 hover:bg-purple-700 px-2 rounded">Competenze</a></li>
 <li><a href="#projects" class="block py-2 hover:bg-purple-700 px-2 rounded">Demo</a></li>
 <li><a href="#features" class="block py-2 hover:bg-purple-700 px-2 rounded">Funzionalità</a></li>
 <li><a href="#contact" class="block py-2 hover:bg-purple-700 px-2 rounded">Contatti</a></li>
 </ul>
 </div>
 </header>
<!-- Hero Section -->
 <section class="gradient-bg text-white py-20">
 <div class="container mx-auto px-4 text-center">
 <h2 class="text-4xl md:text-6xl font-bold mb-6">Ecco cosa possiamo creare</h2>
 <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto" id="typing-effect"></p>
 <div class="flex flex-wrap justify-center gap-4">
 <a href="#projects" class="bg-white text-purple-700 hover:bg-purple-100 px-8 py-3 rounded-full font-semibold transition duration-300 transform hover:scale-105">Vedi Demo</a>
 <a href="#contact" class="border-2 border-white hover:bg-white hover:text-purple-700 px-8 py-3 rounded-full font-semibold transition duration-300 transform hover:scale-105">Contattami</a>
 </div>
 </div>
 </section>
<!-- Skills Section -->
 <section id="skills" class="py-16 bg-white">
 <div class="container mx-auto px-4">
 <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Le Mie Competenze</h2>
 <div class="grid md:grid-cols-3 gap-8">
 <!-- HTML Skill -->
 <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-xl transition card-hover">
 <div class="text-center mb-4">
 <i class="fab fa-html5 text-5xl text-orange-500"></i>
 </div>
 <h3 class="text-xl font-semibold text-center mb-4">HTML5</h3>
 <div class="mb-4">
 <div class="flex justify-between mb-1">
 <span>Competenza</span>
 <span>95%</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-orange-500 h-2.5 rounded-full" style="width: 95%"></div>
 </div>
 </div>
 <p class="text-gray-600">Struttura semantica, accessibilità, integrazione di contenuti multimediali, form avanzati.</p>
 </div>
<!-- CSS Skill -->
 <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-xl transition card-hover">
 <div class="text-center mb-4">
 <i class="fab fa-css3-alt text-5xl text-blue-500"></i>
 </div>
 <h3 class="text-xl font-semibold text-center mb-4">CSS3 & Tailwind</h3>
 <div class="mb-4">
 <div class="flex justify-between mb-1">
 <span>Competenza</span>
 <span>90%</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-blue-500 h-2.5 rounded-full" style="width: 90%"></div>
 </div>
 </div>
 <p class="text-gray-600">Animazioni, layout responsive, design system, utility-first CSS con Tailwind, variabili CSS.</p>
 </div>
<!-- JavaScript Skill -->
 <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-xl transition card-hover">
 <div class="text-center mb-4">
 <i class="fab fa-js-square text-5xl text-yellow-400"></i>
 </div>
 <h3 class="text-xl font-semibold text-center mb-4">JavaScript</h3>
 <div class="mb-4">
 <div class="flex justify-between mb-1">
 <span>Competenza</span>
 <span>85%</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-yellow-400 h-2.5 rounded-full" style="width: 85%"></div>
 </div>
 </div>
 <p class="text-gray-600">Manipolazione DOM, eventi, AJAX, ES6+, moduli, web storage, API integration.</p>
 </div>
 </div>
 </div>
 </section>
<!-- Interactive Projects Demo -->
 <section id="projects" class="py-16 bg-gray-50">
 <div class="container mx-auto px-4">
 <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Demo Interattive</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
 <!-- Project 1 - 3D Flip Card -->
 <div class="project-card h-64">
 <div class="project-card-inner relative w-full h-full rounded-xl shadow-lg">
 <div class="project-card-front bg-white p-6 rounded-xl flex flex-col justify-center items-center">
 <i class="fas fa-layer-group text-5xl text-purple-600 mb-4"></i>
 <h3 class="text-xl font-semibold mb-2">Carte 3D</h3>
 <p class="text-gray-600 text-center">Passa il mouse sopra la carta</p>
 </div>
 <div class="project-card-back gradient-bg text-white p-6 rounded-xl flex flex-col justify-center items-center">
 <h3 class="text-xl font-semibold mb-2">Effetto 3D</h3>
 <p class="text-center mb-4">Realizzato con CSS transforms e perspective</p>
 <button class="bg-white text-purple-700 px-4 py-2 rounded-full text-sm font-medium">Vedi Codice</button>
 </div>
 </div>
 </div>
<!-- Project 2 - Todo List -->
 <div class="bg-white rounded-xl shadow-lg overflow-hidden">
 <div class="p-6">
 <div class="flex items-center mb-4">
 <i class="fas fa-tasks text-2xl text-green-500 mr-3"></i>
 <h3 class="text-xl font-semibold">Todo List</h3>
 </div>
 <div class="mb-4">
 <div class="flex mb-2">
 <input type="text" id="todo-input" placeholder="Aggiungi un'attività..." class="flex-grow px-4 py-2 border rounded-l-lg focus:outline-none focus:ring-2 focus:ring-green-500">
 <button id="add-todo" class="bg-green-500 text-white px-4 py-2 rounded-r-lg hover:bg-green-600 transition">Aggiungi</button>
 </div>
 </div>
 <ul id="todo-list" class="divide-y">
 <!-- Todos will be added here by JavaScript -->
 </ul>
 </div>
 </div>
<!-- Project 3 - Image Gallery -->
 <div class="bg-white rounded-xl shadow-lg overflow-hidden">
 <div class="p-6">
 <div class="flex items-center mb-4">
 <i class="fas fa-images text-2xl text-blue-500 mr-3"></i>
 <h3 class="text-xl font-semibold">Galleria Immagini</h3>
 </div>
 <div class="grid grid-cols-3 gap-2 mb-4">
 <img src="https://source.unsplash.com/random/300x300?nature=1" alt="Nature" class="cursor-pointer rounded hover:opacity-80 transition" onclick="openModal(this.src)">
 <img src="https://source.unsplash.com/random/300x300?nature=2" alt="Nature" class="cursor-pointer rounded hover:opacity-80 transition" onclick="openModal(this.src)">
 <img src="https://source.unsplash.com/random/300x300?nature=3" alt="Nature" class="cursor-pointer rounded hover:opacity-80 transition" onclick="openModal(this.src)">
 <img src="https://source.unsplash.com/random/300x300?nature=4" alt="Nature" class="cursor-pointer rounded hover:opacity-80 transition" onclick="openModal(this.src)">
 <img src="https://source.unsplash.com/random/300x300?nature=5" alt="Nature" class="cursor-pointer rounded hover:opacity-80 transition" onclick="openModal(this.src)">
 <img src="https://source.unsplash.com/random/300x300?nature=6" alt="Nature" class="cursor-pointer rounded hover:opacity-80 transition" onclick="openModal(this.src)">
 </div>
 <button class="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 transition">Carica Altre</button>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Features Section -->
 <section id="features" class="py-16 bg-white">
 <div class="container mx-auto px-4">
 <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Altre Funzionalità</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
 <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 hover:border-purple-300 transition">
 <div class="text-purple-600 mb-4">
 <i class="fas fa-mobile-alt text-3xl"></i>
 </div>
 <h3 class="text-xl font-semibold mb-2">Design Responsivo</h3>
 <p class="text-gray-600">Layout che si adattano perfettamente a qualsiasi dispositivo, da mobile a desktop.</p>
 </div>
<div class="bg-gray-50 p-6 rounded-xl border border-gray-200 hover:border-purple-300 transition">
 <div class="text-purple-600 mb-4">
 <i class="fas fa-bolt text-3xl"></i>
 </div>
 <h3 class="text-xl font-semibold mb-2">Performance Ottimizzate</h3>
 <p class="text-gray-600">Codice leggero e ottimizzato per tempi di caricamento rapidi.</p>
 </div>
<div class="bg-gray-50 p-6 rounded-xl border border-gray-200 hover:border-purple-300 transition">
 <div class="text-purple-600 mb-4">
 <i class="fas fa-paint-brush text-3xl"></i>
 </div>
 <h3 class="text-xl font-semibold mb-2">UI Moderna</h3>
 <p class="text-gray-600">Design accattivanti con animazioni fluide e interazioni intuitive.</p>
 </div>
<div class="bg-gray-50 p-6 rounded-xl border border-gray-200 hover:border-purple-300 transition">
 <div class="text-purple-600 mb-4">
 <i class="fas fa-cogs text-3xl"></i>
 </div>
 <h3 class="text-xl font-semibold mb-2">Funzionalità Complesse</h3>
 <p class="text-gray-600">Implementazione di logiche avanzate con JavaScript puro.</p>
 </div>
 </div>
 </div>
 </section>
<!-- Contact Form -->
 <section id="contact" class="py-16 bg-gray-50">
 <div class="container mx-auto px-4 max-w-4xl">
 <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Contattami</h2>
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
 <div class="md:flex">
 <div class="md:w-1/2 gradient-bg text-white p-8 flex flex-col justify-center">
 <h3 class="text-2xl font-semibold mb-4">Vuoi lavorare insieme?</h3>
 <p class="mb-6">Compila il form o contattami direttamente via email o telefono.</p>
 <div class="space-y-4">
 <div class="flex items-center">
 <i class="fas fa-envelope mr-3"></i>
 <span>info@esempio.com</span>
 </div>
 <div class="flex items-center">
 <i class="fas fa-phone mr-3"></i>
 <span>+39 123 456 7890</span>
 </div>
 <div class="flex items-center">
 <i class="fas fa-map-marker-alt mr-3"></i>
 <span>Milano, Italia</span>
 </div>
 </div>
 </div>
 <div class="md:w-1/2 p-8">
 <form id="contact-form">
 <div class="mb-4">
 <label for="name" class="block text-gray-700 mb-2">Nome</label>
 <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
 </div>
 <div class="mb-4">
 <label for="email" class="block text-gray-700 mb-2">Email</label>
 <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
 </div>
 <div class="mb-4">
 <label for="message" class="block text-gray-700 mb-2">Messaggio</label>
 <textarea id="message" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"></textarea>
 </div>
 <button type="submit" class="w-full gradient-bg text-white py-3 rounded-lg font-semibold hover:opacity-90 transition">Invia Messaggio</button>
 </form>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Image Modal -->
 <div id="image-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
 <div class="relative max-w-4xl w-full">
 <img id="modal-image" src="" alt="" class="w-full rounded-lg">
 <button id="close-modal" class="absolute -top-10 right-0 text-white text-3xl">&times;</button>
 </div>
 </div>
<!-- Footer -->
 <footer class="bg-gray-800 text-white py-8">
 <div class="container mx-auto px-4">
 <div class="flex flex-col md:flex-row justify-between items-center">
 <div class="mb-4 md:mb-0">
 <div class="flex items-center space-x-2">
 <i class="fas fa-code text-2xl"></i>
 <span class="text-xl font-bold">Cosa Posso Fare</span>
 </div>
 <p class="text-gray-400 mt-2">Demo interattiva delle nostre capacità</p>
 </div>
 <div class="flex space-x-6">
 <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f text-xl"></i></a>
 <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a>
 <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github text-xl"></i></a>
 <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in text-xl"></i></a>
 </div>
 </div>
 <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
 <p>&copy; 2025 Tutti i diritti riservati</p>
 </div>
 </div>
 </footer>
<script>
 // Mobile Menu Toggle
 const mobileMenuButton = document.getElementById('mobile-menu-button');
 const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
 mobileMenu.classList.toggle('hidden');
 });
 // Typing Effect
 const typingElement = document.getElementById('typing-effect');
 const texts = [
 "Interfacce utente moderne e responsive...",
 "Animazioni fluide e interattive...",
"Applicazioni web complete con JavaScript...",
 "Design accattivanti con HTML e CSS..."
 ];
 let textIndex = 0;
 let charIndex = 0;
 let isDeleting = false;
 let typingSpeed = 100;
 function type() {
 const currentText = texts[textIndex];
if (isDeleting) {
 typingElement.textContent = currentText.substring(0, charIndex - 1);
 charIndex--;
 typingSpeed = 50;
 } else {
 typingElement.textContent = currentText.substring(0, charIndex + 1);
 charIndex++;
 typingSpeed = 100;
 }
 if (!isDeleting && charIndex === currentText.length) {
 isDeleting = true;
 typingSpeed = 1500; // Pause at end of sentence
 } else if (isDeleting && charIndex === 0) {
 isDeleting = false;
 textIndex = (textIndex + 1) % texts.length;
 typingSpeed = 500; // Pause before typing next sentence
 }
 setTimeout(type, typingSpeed);
 }
 // Start typing effect
 setTimeout(type, 1000);
 // Todo List Functionality
 const todoInput = document.getElementById('todo-input');
 const addTodoButton = document.getElementById('add-todo');
 const todoList = document.getElementById('todo-list');
 function addTodo() {
 const todoText = todoInput.value.trim();
 if (todoText) {
 const todoItem = document.createElement('li');
 todoItem.className = 'py-3 flex items-center justify-between';
const todoContent = document.createElement('div');
 todoContent.className = 'flex items-center';
const checkbox = document.createElement('input');
 checkbox.type = 'checkbox';
 checkbox.className = 'mr-3 h-5 w-5 text-purple-600 rounded focus:ring-purple-500';
 checkbox.addEventListener('change', function() {
 if (this.checked) {
 todoTextSpan.classList.add('line-through', 'text-gray-400');
 } else {
 todoTextSpan.classList.remove('line-through', 'text-gray-400');
 }
 });
const todoTextSpan = document.createElement('span');
 todoTextSpan.textContent = todoText;
const deleteButton = document.createElement('button');
 deleteButton.innerHTML = '<i class="fas fa-trash text-red-500 hover:text-red-700"></i>';
 deleteButton.className = 'ml-4';
 deleteButton.addEventListener('click', function() {
 todoItem.remove();
 });
todoContent.appendChild(checkbox);
 todoContent.appendChild(todoTextSpan);
todoItem.appendChild(todoContent);
 todoItem.appendChild(deleteButton);
todoList.appendChild(todoItem);
 todoInput.value = '';
 }
 }
 addTodoButton.addEventListener('click', addTodo);
 todoInput.addEventListener('keypress', function(e) {
 if (e.key === 'Enter') {
 addTodo();
 }
 });
 // Image Modal
 function openModal(src) {
 const modal = document.getElementById('image-modal');
 const modalImage = document.getElementById('modal-image');
modalImage.src = src;
 modal.classList.remove('hidden');
 document.body.style.overflow = 'hidden';
 }
 document.getElementById('close-modal').addEventListener('click', function() {
 const modal = document.getElementById('image-modal');
 modal.classList.add('hidden');
 document.body.style.overflow = 'auto';
 });
 // Contact Form Submission
 document.getElementById('contact-form').addEventListener('submit', function(e) {
 e.preventDefault();
const name = document.getElementById('name').value;
 const email = document.getElementById('email').value;
 const message = document.getElementById('message').value;
// Here you would typically send the data to a server
 console.log('Form submitted:', { name, email, message });
alert('Grazie per il tuo messaggio! Ti risponderemo al più presto.');
 this.reset();
 });
 // Smooth scrolling for anchor links
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 anchor.addEventListener('click', function(e) {
 e.preventDefault();
const targetId = this.getAttribute('href');
 if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
 if (targetElement) {
 targetElement.scrollIntoView({
 behavior: 'smooth'
 });
// Close mobile menu if open
 if (!mobileMenu.classList.contains('hidden')) {
 mobileMenu.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=andreakone/cosafacciamo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>