<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Information Form</title>
    <link rel="stylesheet" href="style.css"> <!-- Link to your CSS file -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet">
    
    <!-- Add intl-tel-input CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css">
</head>
<body>
    <video autoplay muted loop id="background-video">
        <source src="\media\videos\background.mp4" type="video/mp4">
    </video>
      
    <div class="form-container">
        <div class="form-wrapper">
            <h1>Enter Your Information</h1>
            <form id="userForm">
                <label for="name">Full Name:</label>
                <input type="text" id="name" placeholder="First and Last Name" required>

                <label for="email">Email:</label>
                <input type="email" id="email" placeholder="Enter your email" required>

                <label for="phone">Phone Number:</label>
                <div class="phone-container">
                    <input type="tel" id="phone" placeholder="Choose your country" required>
                </div>
                <span id="phone-error" class="error-message"></span>
                <label for="country">Country:</label>
                <input type="text" id="country" placeholder="Enter your country" required>

                <button type="submit">Save</button>
            </form>
        </div>
    </div>
    
    <!-- Firebase SDK -->
    <script type="module" src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js"></script>
    <script type="module" src="https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore.js"></script>
    
    <!-- Add intl-tel-input JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"></script>
    
    <script type="module" src="app.js"></script>
</body>
</html>
