174 lines
14 KiB
HTML
174 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>application_form</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Visa2Egypt</div><ul class="nav-1-nav-links"><li><a href="home.html">Home</a></li><li><a href="about.html">Visa Types</a></li><li><a href="contact.html">Requirements</a></li><li><a href="services.html">Processing</a></li><li><a href="faq.html">FAQ</a></li><li class="nav-1-dropdown"><a href="#">Resources<i class="fas fa-chevron-down"><i class="fas fa-chevron-down">🔽</i></i></a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Track Visa</button><button class="nav-1-btn nav-1-solid">Apply Now</button></div></nav></div>
|
|
<section id="application-progress" class="section-padding">
|
|
<div class="container">
|
|
<h2 class="section-title text-center">Your Application Progress</h2>
|
|
<div class="progress-bar-wrapper">
|
|
<div class="progress-line">
|
|
<!-- Example: Progress fill for current status. Width dynamically controlled by JS. -->
|
|
<div class="progress-fill" style="width: 50%;"></div>
|
|
</div>
|
|
<ol class="progress-steps">
|
|
<li class="step completed" data-step="1">
|
|
<div class="step-marker"></div>
|
|
<span class="step-text">Complete Form</span>
|
|
</li>
|
|
<li class="step active" data-step="2">
|
|
<div class="step-marker"></div>
|
|
<span class="step-text">Upload Documents</span>
|
|
</li>
|
|
<li class="step" data-step="3">
|
|
<div class="step-marker"></div>
|
|
<span class="step-text">Receive E-Visa</span>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
<div class="current-status text-center mt-4">
|
|
<p class="status-message">Current Status: <span class="status-highlight">Awaiting Document Upload</span></p>
|
|
<a href="#track-application" class="btn btn-primary track-btn">Track Full Application Details</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="app-form"><h1>Your Seamless Egypt Visa Application</h1><h2>Personal Information: Secure Your Passage</h2><div class="form-row"><div class="form-group"><label>Your First Name</label><input id="first-name" type="text" placeholder="Enter Your Given Name"></input></div><div class="form-group"><label>Your Last Name</label><input id="last-name" type="text" placeholder="Enter Your Family Name"></input></div></div><div class="form-group full-width"><label>Your Primary Email Address</label><input id="email" type="email" placeholder="e.g., your.email@example.com"></input></div><h2>Contact Information: Stay Connected</h2><div class="form-group full-width"><label>Your Secure Phone Number</label><input id="phone" type="tel" placeholder="e.g., +1 234 567 8900"></input></div><h2>Tell Us More: Optional Cover Letter</h2><div class="form-group full-width"><textarea id="cover-letter" placeholder="Share your purpose of visit or any additional details here (optional)"></textarea></div><button type="submit">Submit Your Pharaoh-Approved Application</button></div>
|
|
<div class="app-form"><h1>Your Seamless Egypt Visa Application</h1><h2>Personal Information: Secure Your Passage</h2><div class="form-row"><div class="form-group"><label>Your First Name</label><input id="first-name" type="text" placeholder="Enter Your Given Name"></input></div><div class="form-group"><label>Your Last Name</label><input id="last-name" type="text" placeholder="Enter Your Family Name"></input></div></div><div class="form-group full-width"><label>Your Primary Email Address</label><input id="email" type="email" placeholder="e.g., your.email@example.com"></input></div><h2>Contact Information: Stay Connected</h2><div class="form-group full-width"><label>Your Secure Phone Number</label><input id="phone" type="tel" placeholder="e.g., +1 234 567 8900"></input></div><h2>Tell Us More: Optional Cover Letter</h2><div class="form-group full-width"><textarea id="cover-letter" placeholder="Share your purpose of visit or any additional details here (optional)"></textarea></div><button type="submit">Submit Your Pharaoh-Approved Application</button></div>
|
|
<div class="app-form"><h1>Your Seamless Egypt Visa Application</h1><h2>Personal Information: Secure Your Passage</h2><div class="form-row"><div class="form-group"><label>Your First Name</label><input id="first-name" type="text" placeholder="Enter Your Given Name"></input></div><div class="form-group"><label>Your Last Name</label><input id="last-name" type="text" placeholder="Enter Your Family Name"></input></div></div><div class="form-group full-width"><label>Your Primary Email Address</label><input id="email" type="email" placeholder="e.g., your.email@example.com"></input></div><h2>Contact Information: Stay Connected</h2><div class="form-group full-width"><label>Your Secure Phone Number</label><input id="phone" type="tel" placeholder="e.g., +1 234 567 8900"></input></div><h2>Tell Us More: Optional Cover Letter</h2><div class="form-group full-width"><textarea id="cover-letter" placeholder="Share your purpose of visit or any additional details here (optional)"></textarea></div><button type="submit">Submit Your Pharaoh-Approved Application</button></div>
|
|
<section class="review-navigation-controls" aria-labelledby="review-section-title">
|
|
<h2 id="review-section-title" class="section-title">Review Your Application Details</h2>
|
|
<p class="section-description">Please carefully review all the information you have provided before submitting your application. You can go back and edit any section if needed, ensuring a seamless and Pharaoh-approved processing experience.</p>
|
|
|
|
<div class="review-summary-container">
|
|
<div class="review-section" id="review-personal-details" tabindex="0" role="group" aria-labelledby="personal-details-heading">
|
|
<h3 id="personal-details-heading" class="review-section-heading">Personal Details
|
|
<button type="button" class="edit-btn" aria-controls="personal-details-form-section" aria-label="Edit Personal Details">Edit</button>
|
|
</h3>
|
|
<dl class="review-data-list">
|
|
<div class="data-item">
|
|
<dt>Full Name:</dt>
|
|
<dd>[User's Full Name]</dd>
|
|
</div>
|
|
<div class="data-item">
|
|
<dt>Date of Birth:</dt>
|
|
<dd>[User's Date of Birth]</dd>
|
|
</div>
|
|
<div class="data-item">
|
|
<dt>Nationality:</dt>
|
|
<dd>[User's Nationality]</dd>
|
|
</div>
|
|
<div class="data-item">
|
|
<dt>Passport Number:</dt>
|
|
<dd>[User's Passport Number]</dd>
|
|
</div>
|
|
<div class="data-item">
|
|
<dt>Email Address:</dt>
|
|
<dd>[User's Email Address]</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="review-section" id="review-travel-details" tabindex="0" role="group" aria-labelledby="travel-details-heading">
|
|
<h3 id="travel-details-heading" class="review-section-heading">Travel Details
|
|
<button type="button" class="edit-btn" aria-controls="travel-details-form-section" aria-label="Edit Travel Details">Edit</button>
|
|
</h3>
|
|
<dl class="review-data-list">
|
|
<div class="data-item">
|
|
<dt>Visa Type:</dt>
|
|
<dd>[Selected Visa Type, e.g., Tourist Visa]</dd>
|
|
</div>
|
|
<div class="data-item">
|
|
<dt>Purpose of Travel:</dt>
|
|
<dd>[User's Purpose of Travel]</dd>
|
|
</div>
|
|
<div class="data-item">
|
|
<dt>Proposed Entry Date:</dt>
|
|
<dd>[User's Entry Date]</dd>
|
|
</div>
|
|
<div class="data-item">
|
|
<dt>Proposed Exit Date:</dt>
|
|
<dd>[User's Exit Date]</dd>
|
|
</div>
|
|
<div class="data-item">
|
|
<dt>Accommodation in Egypt:</dt>
|
|
<dd>[User's Accommodation Details]</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="review-section" id="review-documents" tabindex="0" role="group" aria-labelledby="documents-heading">
|
|
<h3 id="documents-heading" class="review-section-heading">Uploaded Documents
|
|
<button type="button" class="edit-btn" aria-controls="documents-upload-form-section" aria-label="Edit Uploaded Documents">Edit</button>
|
|
</h3>
|
|
<ul class="document-list">
|
|
<li>Passport Scan: <span class="doc-status">Uploaded</span> <a href="#" class="view-doc" aria-label="View Passport Scan">(View)</a></li>
|
|
<li>Passport Photo: <span class="doc-status">Uploaded</span> <a href="#" class="view-doc" aria-label="View Passport Photo">(View)</a></li>
|
|
<li>Travel Itinerary: <span class="doc-status">Uploaded</span> <a href="#" class="view-doc" aria-label="View Travel Itinerary">(View)</a></li>
|
|
<li class="document-note">AI-powered checks for compliance complete, ensuring your journey to Egypt is smooth.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="review-disclaimer">
|
|
<input type="checkbox" id="review-consent" name="review-consent" required aria-required="true">
|
|
<label for="review-consent">I confirm that all the information provided above is true and accurate to the best of my knowledge, and I understand the <a href="/terms" class="disclaimer-link">Terms & Conditions</a>.</label>
|
|
</div>
|
|
|
|
<div class="navigation-controls">
|
|
<button type="button" class="prev-step-btn" aria-label="Go to previous step">Previous Step</button>
|
|
<button type="submit" class="submit-btn primary-cta-btn" aria-label="Confirm and Submit Application">Confirm & Submit Application</button>
|
|
</div>
|
|
</section>
|
|
<section class="section-chatbot bg-deep-blue text-white py-16 lg:py-24 relative overflow-hidden">
|
|
<div class="hieroglyph-pattern-bg absolute inset-0 opacity-10 pointer-events-none"></div>
|
|
|
|
<div class="container mx-auto px-4 responsive-grid lg:flex lg:items-center lg:gap-12 relative z-10">
|
|
<div class="chatbot-text-content lg:w-1/2 mb-10 lg:mb-0 text-center lg:text-left">
|
|
<h2 class="font-cairo text-gold text-4xl lg:text-5xl font-bold leading-tight mb-6">
|
|
Meet Nefertari, Your AI Egypt Guide
|
|
</h2>
|
|
<p class="font-open-sans text-lg lg:text-xl leading-relaxed mb-8 papyrus-texture-subtle">
|
|
Your personal AI assistant, Nefertari, is here to illuminate your journey. Ask anything about Egypt's ancient wonders, modern travel requirements, or specific visa queries. Explore the land of Pharaohs with confidence, guided by intelligent insights.
|
|
</p>
|
|
<div class="example-questions mb-10">
|
|
<h3 class="font-cairo text-gold text-2xl font-semibold mb-4">Popular Questions:</h3>
|
|
<ul class="list-none p-0 space-y-3">
|
|
<li>
|
|
<a href="#" class="question-link font-open-sans text-white hover:text-gold transition duration-300 block bg-blue-800 bg-opacity-50 px-5 py-3 rounded-lg shadow-md">
|
|
<i class="icon-question mr-2"></i> Do I need a visa for Siwa Oasis?
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="question-link font-open-sans text-white hover:text-gold transition duration-300 block bg-blue-800 bg-opacity-50 px-5 py-3 rounded-lg shadow-md">
|
|
<i class="icon-question mr-2"></i> What's the validity of a business visa?
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="question-link font-open-sans text-white hover:text-gold transition duration-300 block bg-blue-800 bg-opacity-50 px-5 py-3 rounded-lg shadow-md">
|
|
<i class="icon-question mr-2"></i> Can I extend my tourist visa?
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<button class="cta-button bg-gold text-deep-blue font-cairo font-bold py-4 px-10 rounded-full shadow-lg hover:bg-white hover:text-deep-blue transition duration-300 ease-in-out transform hover:scale-105">
|
|
Chat with Nefertari
|
|
</button>
|
|
</div>
|
|
<div class="chatbot-visual-area lg:w-1/2 flex justify-center items-center">
|
|
<div class="chatbot-avatar-container relative w-64 h-64 lg:w-80 lg:h-80 rounded-full bg-gradient-to-br from-gold to-white flex items-center justify-center shadow-2xl animate-spin-slow">
|
|
<img src="placeholder-nefertari-ai-icon.svg" alt="AI Chatbot Nefertari Avatar" class="w-4/5 h-4/5 object-contain" />
|
|
<div class="avatar-label absolute -bottom-8 font-cairo text-white text-xl font-semibold bg-deep-blue px-4 py-2 rounded-lg shadow-md">
|
|
Nefertari AI
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="footer-2-wrapper"><section class="footer-2-section"><div class="footer-2-top"><div class="footer-2-left"><h3 class="logo">Visa2Egypt</h3><p><strong>Address:</strong><br></br><span>Level 1, 12 Sample St, Sydney NSW 2000</span></p><p><strong>Contact:</strong><br></br><span>1800 123 4567</span><br></br><a href="mailto:support@visa2egypt.com">support@visa2egypt.com</a></p><div class="footer-2-social-icons"><i class="fab fa-facebook"></i><i class="fab fa-instagram"></i><i class="fab fa-x-twitter"></i><i class="fab fa-linkedin"></i><i class="fab fa-youtube"></i></div></div><div class="footer-2-links-columns"><ul><li><a href="#">Visa Types</a></li><li><a href="#">Requirements</a></li><li><a href="#">Processing</a></li><li><a href="#">FAQ</a></li><li><a href="#">Track Application</a></li></ul><ul><li><a href="#">About Us</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Blog: Exploring Ancient Egypt</a></li><li><a href="#">Partnerships</a></li><li><a href="#">Careers</a></li></ul></div></div><div class="footer-2-bottom"><p>© 2024 Visa2Egypt. All rights reserved.</p><ul class="footer-2-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookie Policy</a></li></ul></div></section></div>
|
|
</body>
|
|
</html> |