<!doctype html>
<html lang="en">

<head>
   
    <!--====== Required meta tags ======-->
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <!--====== Title ======-->
    <title>Angelo Latini - Contattami || Caso di Studio UX Designer</title>
    
    <!--====== Favicon Icon ======-->
    <link rel="shortcut icon" href="assets/images/favicon.png" type="image/png">

    <!--====== Bootstrap css ======-->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    
    <!--====== Fontawesome css ======-->
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    
    <!--====== Magnific Popup css ======-->
    <link rel="stylesheet" href="assets/css/animate.min.css">
    
    <!--====== Magnific Popup css ======-->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    
    <!--====== Slick css ======-->
    <link rel="stylesheet" href="assets/css/slick.css">
    
    <!--====== Default css ======-->
    <link rel="stylesheet" href="assets/css/custom-animation.css">
    <link rel="stylesheet" href="assets/css/default.css">
    
    <!--====== Style css ======-->
    <link rel="stylesheet" href="assets/css/style.css">
  
<style>
        .error-message{
            color: red;
            margin-bottom: 8px;
        }
    </style>
</head>

<body>  

   

    <!--====== OFFCANVAS MENU PART START ======-->

    <div class="off_canvars_overlay">
                
    </div>
    <div class="offcanvas_menu">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="offcanvas_menu_wrapper">
                        <div class="canvas_close">
                            <a href="javascript:void(0)" aria-label="Chiudi Menu"><i class="fa fa-times" aria-hidden="true"></i></a>  
                        </div>
                        <div class="offcanvas-brand text-center mb-40">
                            <img src="assets/images/logo.png" alt="Logo Angelo Design">
                        </div>
                        <div id="menu" class="text-left ">
                           <nav aria-label="Menu mobile" role="navigation">
                                <ul class="offcanvas_main_menu">
                                    <!-- Aggiungi aria-current="page" SOLO alla voce della pagina in cui ti trovi (es. se sei su index.html) -->
                                    <li class="active">
                                        <a href="index.html" aria-current="page">Lavori</a>
                                    </li>
                                    
                                    <li>
                                        <a href="lab.html">Lab</a>
                                    </li>
                                    
                                    <!-- Se questo elemento ha sottomenu, aria-expanded dice allo screen reader se il menu è aperto o chiuso -->
                                    <li class="menu-item-has-children">
                                        <a href="chi-sono.html" aria-haspopup="true" aria-expanded="false">Chi Sono</a>
                                    </li>
                                    
                                    <li>
                                        <a href="contact.php">Contact</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                        <div class="offcanvas-social">
                            <ul class="text-center">
                                <li><a href="$"><i class="fab fa-linkedin-in"></i></a></li>
                            </ul>
                        </div>
                        <div class="footer-widget-info">
                            <ul>
                                <li><a href="mailto:latini.angelo82@gmail.com" aria-label="Invia un'email a latini.angelo82@gmail.com"><i class="fal fa-envelope" aria-hidden="true"></i> latini.angelo82@gmail.com</a></li>
                                <li><i class="fal fa-map-marker-alt" aria-hidden="true"></i> Roma, Italia</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--====== OFFCANVAS MENU PART ENDS ======-->
   
    <!--====== PART START ======-->
    
    <header class="appie-header-area appie-sticky">
        <div class="container">
            <div class="header-nav-box">
                <div class="row align-items-center">
                    <div class="col-lg-2 col-md-4 col-sm-5 col-6 order-1 order-sm-1">
                        <div class="appie-logo-box">
                            <a href="index.html" aria-label="Torna alla Home - Portfolio Angelo">
                                <img src="assets/images/logo.png" alt="Logo Angelo Design">
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-1 col-sm-1 order-3 order-sm-2">
                        <div class="appie-header-main-menu">
                            <nav class="appie-header-main-menu" aria-label="Menu principale" role="navigation">
                                <ul>
                                    <!-- Ricorda: metti aria-current="page" SOLO sulla pagina attiva corrente -->
                                    <li class="active">
                                        <a href="index.html" aria-current="page">Lavori</a>
                                    </li>
                                    <li> 
                                        <a href="lab.html">Lab</a> 
                                    </li>
                                    <li> 
                                        <a href="chi-sono.html">Chi Sono</a>
                                    </li>
                                    <li>
                                        <a href="contact.php">Contattami</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                    <div class="col-lg-4  col-md-7 col-sm-6 col-6 order-2 order-sm-3">
                        <div class="appie-btn-box text-right">
                            <div class="lang-menu">
                                <ul class="lang-menu-wrapper">
                                    <li class="lang-menu-item">
                                        <a href="javascript:void(0)" class="current-lang lang-selected" aria-label="Lingua corrente: Italiano. Cambia lingua">
                                            <i class="fas fa-globe-europe"></i>
                                            <span>Ita</span>
                                        </a>
                                        <ul class="lang-menu-dropdown">
                                            <li class="lang-menu-item">
                                                <a href="eng/contact.php" class="lang-menu-link" aria-label="Cambia la lingua in Inglese">
                                                    <span>Eng</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                            <div class="toggle-btn ml-30 canvas_open d-lg-none d-block">
                                <i class="fa fa-bars"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </header>
    
    <!--====== PART ENDS ======-->

    <!--====== APPIE PAGE TITLE PART START ======-->
    
    <section class="appie-hero-area bg-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <div class="appie-hero-content text-center">

                        <nav aria-label="breadcrumb d-flex justify-content-center">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Contattami</li>
                            </ol>
                        </nav>

                        <h1 class="appie-title">Contattami</h1>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!--====== APPIE PAGE TITLE PART ENDS ======-->

        <!-- Contact Start -->
        <section class="contact-section">
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <div class="contact--info-area">
                            <div class="single-info">
                                <h5>Email</h5>
                                <p>
                                    <i class="fal fa-envelope"></i>
                                    latini.angelo82@gmai.com
                                </p>
                            </div>
                            <div class="ab-social">
                                <h5>Seguimi su</h5>
                                <a class="lin" href="#"><i class="fab fa-linkedin-in"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="contact-form">
                            <h4>Connettiamoci!</h4>
                            <p>Per qualunque informazione puoi contattarmi dal form sottostante.</p>
                            <form action="send_email.php" method="post" class="row" id="info_contact_form">
                                <div class="col-md-6">
                                    <input type="text" id="form_name" name="f-name" placeholder="Nome">
                                </div>
                                <div class="col-md-6">
                                    <input type="text" id="form_lastname" name="l-name" placeholder="Cognome">
                                </div>
                                <div class="col-12">
                                    <input type="email" id="form_email" name="email" placeholder="Email">
                                </div>
                                <div class="col-md-12">
                                    <input type="text" id="form_subject" name="suject" placeholder="Oggetto">
                                </div>
                                <div class="col-md-12">
                                    <textarea name="message" id="form_message" placeholder="Come posso aiutarti?"></textarea>
                                </div>
                                <div class="col-md-6">
                                    <input type="submit" name="submit" value="Invia Messaggio">
                                    <div id="form_status" style="display:none;"></div> 
                                </div>
                            </form>
                            <div id="form_status" class="col-12" style="display:none; margin-top: 15px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Contact End -->

    <!--====== APPIE FOOTER PART START ======-->
    
    <footer class="appie-footer-area">
    <div class="container">
        <div class="row">
            <!-- 1. AREA LOGO E SOCIAL -->
            <div class="col-lg-4 col-md-6">
                <div class="footer-about-widget">
                    <div class="logo">
                        <a href="index.html" aria-label="Torna alla Home - Portfolio Angelo">
                            <img src="assets/images/logo.png" alt="Logo Angelo Design">
                        </a>
                    </div>
                    <div class="social mt-30">
                        <!-- Aggiunto un tag <nav> per definire l'area dei link social -->
                        <nav aria-label="Link social di Angelo">
                            <ul>
                                <!-- Sostituisci il '#' con il tuo vero link di LinkedIn -->
                                <li>
                                    <a href="https://www.linkedin.com/in/tuo-profilo" target="_blank" rel="noopener noreferrer" aria-label="Profilo LinkedIn di Angelo (Apre in una nuova finestra)">
                                        <i class="fab fa-linkedin-in" aria-hidden="true"></i>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>

            <!-- 2. NAVIGAZIONE INTERNA -->
            <div class="col-lg-2 col-md-6">
                <nav class="footer-navigation" aria-label="Navigazione footer - Pagine">
                    <h4 class="title" id="footer-portfolio-title">Portfolio</h4>
                    <ul aria-labelledby="footer-portfolio-title">
                        <li><a href="index.html">Lavori</a></li>
                        <li><a href="chi-sono.html">Chi Sono</a></li>
                        <li><a href="lab.html">Lab</a></li>
                    </ul>
                </nav>
            </div>

            <!-- 3. SEZIONE CONTATTI -->
            <div class="col-lg-3 col-md-6">
                <nav class="footer-navigation" aria-label="Navigazione footer - Contatti">
                    <h4 class="title" id="footer-contact-title">Contatti</h4>
                    <ul aria-labelledby="footer-contact-title">
                        <li><a href="contact.php">Contattami</a></li>
                    </ul>
                </nav>
            </div>

            <!-- 4. CONTATTI DIRETTI (INFO) -->
            <div class="col-lg-3 col-md-6">
                <div class="footer-widget-info">
                    <h4 class="title">Get In Touch</h4>
                    <ul>
                        <!-- Sostituito '#' con il corretto attributo mailto: -->
                        <li>
                            <a href="mailto:latini.angelo82@gmail.com" aria-label="Invia un'email a latini.angelo82@gmail.com">
                                <i class="fal fa-envelope" aria-hidden="true"></i> latini.angelo82@gmail.com
                            </a>
                        </li>
                        <!-- Rimosso il tag <a> perché Roma non è un link cliccabile, l'icona descrive il testo -->
                        <li>
                            <span class="footer-location-info">
                                <i class="fal fa-map-marker-alt" aria-hidden="true"></i>
                                <span class="sr-only">Posizione:</span> Roma, Italy
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 5. COPYRIGHT -->
        <div class="row">
            <div class="col-lg-12">
                <div class="footer-copyright d-flex align-items-center justify-content-between pt-35">
                    <div class="copyright-text">
                        <p>Copyright © 2026 Angelo Latini. All rights reserved.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
    
    <!--====== APPIE FOOTER PART ENDS ======-->


    <!--====== APPIE BACK TO TOP PART ENDS ======-->
    <div class="back-to-top">
        <a href="#"><i class="fal fa-arrow-up"></i></a>
    </div>
    <!--====== APPIE BACK TO TOP PART ENDS ======-->



    
    
    
    
    
    <!--====== jquery js ======-->
    <script src="assets/js/vendor/modernizr-3.6.0.min.js"></script>
    <script src="assets/js/vendor/jquery-1.12.4.min.js"></script>

    <!--====== Bootstrap js ======-->
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/popper.min.js"></script>
    
    <!--====== wow js ======-->
    <script src="assets/js/wow.js"></script>
    
    <!--====== Slick js ======-->
    <script src="assets/js/jquery.counterup.min.js"></script>
    <script src="assets/js/waypoints.min.js"></script>

    <!--====== TweenMax js ======-->
    <script src="assets/js/TweenMax.min.js"></script>
    
    <!--====== Slick js ======-->
    <script src="assets/js/slick.min.js"></script>
    
    <!--====== Magnific Popup js ======-->
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    
    <!--====== Main js ======-->
    <script src="assets/js/main.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('info_contact_form');
    const formStatus = document.getElementById('form_status');

    form.addEventListener('submit', (e) => {
        e.preventDefault(); // Blocca il ricaricamento della pagina
        
        clearErrors();
        let isValid = true;

        // --- VALIDAZIONE CAMPI ---
        const name = document.getElementById('form_name');
        if (name.value.trim() === '') { showError(name, 'Name is required.'); isValid = false; }

        const lastname = document.getElementById('form_lastname');
        if (lastname.value.trim() === '') { showError(lastname, 'Last name is required.'); isValid = false; }

        const email = document.getElementById('form_email');
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (email.value.trim() === '') { 
            showError(email, 'Email address is required.'); isValid = false; 
        } else if (!emailRegex.test(email.value.trim())) { 
            showError(email, 'Please enter a valid email address.'); isValid = false; 
        }

        const subject = document.getElementById('form_subject');
        if (subject.value.trim() === '') { showError(subject, 'Subject is required.'); isValid = false; }

        const message = document.getElementById('form_message');
        if (message.value.trim() === '') { showError(message, 'Please enter your message.'); isValid = false; }

        // --- CONFERMA DI INVIO AVVENUTO ---
        if (isValid) {
            // Invia i dati in background al file PHP
            const formData = new FormData(form);
            fetch(form.action, {
                method: form.method,
                body: formData
            });

            // Mostra subito il messaggio di successo senza far attendere l'utente
            formStatus.innerText = "Thank you! Your message has been sent successfully.";
            formStatus.style.display = "block";
            formStatus.style.color = "#2a9d8f"; // Un verde elegante e minimale
            formStatus.style.fontWeight = "500";
            formStatus.style.fontSize = "0.95rem";
            formStatus.style.marginTop = "10px";

            // Svuota i campi del form
            form.reset();
        }
    });

    function showError(inputElement, message) {
        inputElement.classList.add('is-invalid');
        const errorDiv = document.createElement('div');
        errorDiv.className = 'error-message';
        errorDiv.innerText = message;
        inputElement.parentNode.appendChild(errorDiv);
    }

    function clearErrors() {
        const errorMessages = document.querySelectorAll('.error-message');
        errorMessages.forEach(msg => msg.remove());
        const invalidInputs = document.querySelectorAll('.is-invalid');
        invalidInputs.forEach(input => input.classList.remove('is-invalid'));
        formStatus.style.display = "none";
    }
});
    </script>
    
</body>

</html>
