Upload 6 files

templates/about.html

@@ -0,0 +1,150 @@
+{% extends "base.html" %}
+
+{% block title %}About SkinAI - Our Mission and Technology{% endblock %}
+
+{% block content %}
+<section class="page-header">
+    <div class="container">
+        <h1>About SkinAI</h1>
+        <p>Using artificial intelligence to improve skin health education</p>
+    </div>
+</section>
+
+<section class="about-mission">
+    <div class="container">
+        <div class="about-grid">
+            <div class="about-content">
+                <h2>Our Mission</h2>
+                <p>At SkinAI, we believe that early detection saves lives. Our mission is to leverage the power of artificial intelligence to provide accessible skin health education and empower individuals to be proactive about their skin health.</p>
+                <p>Skin cancer is one of the most common types of cancer, with over 5 million cases diagnosed worldwide each year. When detected early, the 5-year survival rate for melanoma is over 99%. However, if it spreads to distant parts of the body, the survival rate drops to about 27%.</p>
+                <p>By creating an educational tool that helps people understand potential skin concerns, we hope to encourage earlier medical consultations and improve outcomes through early detection.</p>
+            </div>
+            <div class="about-image">
+                <img src="{{ url_for('static', filename='images/mission.jpg') }}" alt="Medical professionals examining skin">
+            </div>
+        </div>
+    </div>
+</section>
+
+<section class="about-technology">
+    <div class="container">
+        <h2>Our Technology</h2>
+        <p class="section-intro">SkinAI uses state-of-the-art deep learning models trained on large datasets of dermatological images.</p>
+
+        <div class="tech-grid">
+            <div class="tech-card">
+                <div class="tech-icon">
+                    <i class="fas fa-database"></i>
+                </div>
+                <h3>Training Data</h3>
+                <p>Our models are trained on the HAM10000 dataset, which contains over 10,000 dermatoscopic images of skin lesions across seven different categories.</p>
+            </div>
+
+            <div class="tech-card">
+                <div class="tech-icon">
+                    <i class="fas fa-brain"></i>
+                </div>
+                <h3>AI Models</h3>
+                <p>We utilize two powerful convolutional neural network architectures:</p>
+                <ul>
+                    <li><strong>MobileNetV2:</strong> A lightweight model optimized for mobile devices with 74% accuracy</li>
+                    <li><strong>EfficientNetB0:</strong> A more complex model with 69% accuracy on skin cancer classification</li>
+                </ul>
+            </div>
+
+            <div class="tech-card">
+                <div class="tech-icon">
+                    <i class="fas fa-chart-line"></i>
+                </div>
+                <h3>Continuous Improvement</h3>
+                <p>We regularly update our models with new training data and improved architectures to enhance accuracy and performance. Our team monitors the latest advancements in AI and dermatology to ensure SkinAI remains at the cutting edge.</p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section class="about-team">
+    <div class="container">
+        <h2>Our Team</h2>
+        <p class="section-intro">SkinAI was created by a multidisciplinary team of AI researchers, software engineers, and healthcare professionals.</p>
+
+        <div class="team-grid">
+            <div class="team-member">
+                <div class="member-image">
+                    <img src="{{ url_for('static', filename='images/team/member1.jpg') }}" alt="Dr. Sarah Johnson">
+                </div>
+                <h3>Dr. Sarah Johnson</h3>
+                <p class="member-title">Medical Director</p>
+                <p class="member-bio">Board-certified dermatologist with over 15 years of experience in skin cancer detection and treatment.</p>
+            </div>
+
+            <div class="team-member">
+                <div class="member-image">
+                    <img src="{{ url_for('static', filename='images/team/member2.jpg') }}" alt="Dr. Michael Chen">
+                </div>
+                <h3>Dr. Michael Chen</h3>
+                <p class="member-title">AI Research Lead</p>
+                <p class="member-bio">PhD in Computer Science with expertise in deep learning and computer vision for medical applications.</p>
+            </div>
+
+            <div class="team-member">
+                <div class="member-image">
+                    <img src="{{ url_for('static', filename='images/team/member3.jpg') }}" alt="Emma Rodriguez">
+                </div>
+                <h3>Emma Rodriguez</h3>
+                <p class="member-title">Lead Developer</p>
+                <p class="member-bio">Full-stack developer specializing in AI-powered web applications and user experience design.</p>
+            </div>
+
+            <div class="team-member">
+                <div class="member-image">
+                    <img src="{{ url_for('static', filename='images/team/member4.jpg') }}" alt="Dr. James Wilson">
+                </div>
+                <h3>Dr. James Wilson</h3>
+                <p class="member-title">Medical Advisor</p>
+                <p class="member-bio">Oncologist with a focus on melanoma research and early detection methodologies.</p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section class="about-research">
+    <div class="container">
+        <div class="research-grid">
+            <div class="research-content">
+                <h2>Our Research</h2>
+                <p>The technology behind SkinAI is based on peer-reviewed research in dermatology and artificial intelligence. Our team has published several papers on the application of deep learning for skin lesion classification.</p>
+                <p>We collaborate with leading medical institutions to validate our models and ensure they meet high standards of accuracy and reliability. While our tool is for educational purposes only, we strive to maintain the highest level of scientific rigor in our approach.</p>
+                <div class="research-links">
+                    <a href="#" class="btn btn-outline">View Publications</a>
+                    <a href="#" class="btn btn-outline">Research Methodology</a>
+                </div>
+            </div>
+            <div class="research-image">
+                <img src="{{ url_for('static', filename='images/research.jpg') }}" alt="AI research visualization">
+            </div>
+        </div>
+    </div>
+</section>
+
+<section class="about-disclaimer">
+    <div class="container">
+        <div class="disclaimer-box">
+            <h3><i class="fas fa-exclamation-triangle"></i> Medical Disclaimer</h3>
+            <p>SkinAI is designed to be an educational tool only and is not a substitute for professional medical advice, diagnosis, or treatment. Always seek the advice of your physician or other qualified health provider with any questions you may have regarding a medical condition.</p>
+            <p>The information provided by SkinAI is not intended to diagnose, treat, cure, or prevent any disease. Never disregard professional medical advice or delay seeking it because of something you have read or seen on SkinAI.</p>
+        </div>
+    </div>
+</section>
+
+<section class="cta">
+    <div class="container">
+        <h2>Ready to try SkinAI?</h2>
+        <p>Upload an image of your skin lesion and get an AI-powered analysis in seconds.</p>
+        <div class="cta-buttons">
+            <a href="{{ url_for('detect') }}" class="btn btn-primary">Try SkinAI Now</a>
+            <a href="{{ url_for('faq') }}" class="btn btn-secondary">Learn More in FAQs</a>
+        </div>
+    </div>
+</section>
+{% endblock %}

templates/base.html

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="SkinAI - Advanced AI-powered skin lesion analysis for early detection of skin cancer">
+    <meta name="keywords" content="skin cancer, melanoma, AI detection, dermatology, machine learning">
+    <meta name="author" content="SkinAI Team">
+
+    <title>{% block title %}SkinAI - AI-Powered Skin Cancer Detection{% endblock %}</title>
+
+    <!-- Favicon -->
+    <link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}" type="image/x-icon">
+
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
+    <!-- CSS -->
+
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    {% if request.endpoint == 'about' %}
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/about.css') }}">
+    {% elif request.endpoint == 'faq' %}
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/faq.css') }}">
+    {% elif request.endpoint == 'contact' %}
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/contact.css') }}">
+    {% elif request.endpoint in ['terms', 'privacy'] %}
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/legal.css') }}">
+    {% endif %}
+
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
+    {% block extra_css %}{% endblock %}
+</head>
+<body>
+    <header>
+        <nav class="navbar">
+            <div class="container">
+                <a href="{{ url_for('index') }}" class="logo">
+                    <img src="{{ url_for('static', filename='images/logo.svg') }}" alt="SkinAI Logo">
+                    <span>SkinAI</span>
+                </a>
+
+                <button class="mobile-menu-toggle" aria-label="Toggle menu">
+                    <span class="bar"></span>
+                    <span class="bar"></span>
+                    <span class="bar"></span>
+                </button>
+
+                <div class="nav-links">
+                    <a href="{{ url_for('index') }}" class="{% if request.path == url_for('index') %}active{% endif %}">Home</a>
+                    <a href="{{ url_for('detect') }}" class="{% if request.path == url_for('detect') %}active{% endif %}">Detect</a>
+                    <a href="{{ url_for('about') }}" class="{% if request.path == url_for('about') %}active{% endif %}">About</a>
+                    <a href="{{ url_for('faq') }}" class="{% if request.path == url_for('faq') %}active{% endif %}">FAQ</a>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <main>
+        {% block content %}{% endblock %}
+    </main>
+
+    <footer>
+        <div class="container">
+            <div class="footer-grid">
+                <div class="footer-col">
+                    <h3>SkinAI</h3>
+                    <p>Advanced AI-powered skin lesion analysis for early detection of skin cancer.</p>
+                    <div class="social-links">
+                        <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
+                        <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
+                        <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
+                        <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
+                    </div>
+                </div>
+
+                <div class="footer-col">
+                    <h3>Quick Links</h3>
+                    <ul>
+                        <li><a href="{{ url_for('index') }}">Home</a></li>
+                        <li><a href="{{ url_for('detect') }}">Detect</a></li>
+                        <li><a href="{{ url_for('about') }}">About</a></li>
+                        <li><a href="{{ url_for('faq') }}">FAQ</a></li>
+                    </ul>
+                </div>
+
+                <div class="footer-col">
+                    <h3>Legal</h3>
+                    <ul>
+                        <li><a href="{{ url_for('privacy') }}">Privacy Policy</a></li>
+                        <li><a href="{{ url_for('terms') }}">Terms of Service</a></li>
+                        <li><a href="#">Cookie Policy</a></li>
+                    </ul>
+                </div>
+
+                <div class="footer-col">
+                    <h3>Important Notice</h3>
+                    <p>This tool is for educational purposes only and is not a substitute for professional medical advice. Always consult with a healthcare professional for medical concerns.</p>
+                </div>
+            </div>
+
+            <div class="footer-bottom">
+                <p>&copy; 2025 SkinAI. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Core JavaScript -->
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+
+    {% block extra_js %}{% endblock %}
+
+    <!-- Analytics (replace with your own) -->
+    <script async defer>
+        // Google Analytics or other analytics code
+    </script>
+</body>
+</html>

templates/contact.html

@@ -0,0 +1,101 @@
+{% extends "base.html" %}
+
+{% block title %}Contact Us - SkinAI{% endblock %}
+
+{% block content %}
+<section class="page-header">
+    <div class="container">
+        <h1>Contact Us</h1>
+        <p>Have questions or feedback? We'd love to hear from you.</p>
+    </div>
+</section>
+
+<section class="contact-content">
+    <div class="container">
+        <div class="contact-grid">
+            <div class="contact-info">
+                <div class="info-card">
+                    <div class="info-icon">
+                        <i class="fas fa-envelope"></i>
+                    </div>
+                    <h3>Email Us</h3>
+                    <p>support@skinai.example.com</p>
+                </div>
+
+                <div class="info-card">
+                    <div class="info-icon">
+                        <i class="fas fa-map-marker-alt"></i>
+                    </div>
+                    <h3>Location</h3>
+                    <p>123 AI Avenue<br>Tech City, TC 10101</p>
+                </div>
+
+                <div class="info-card">
+                    <div class="info-icon">
+                        <i class="fas fa-clock"></i>
+                    </div>
+                    <h3>Support Hours</h3>
+                    <p>Monday - Friday<br>9:00 AM - 5:00 PM EST</p>
+                </div>
+
+                <div class="social-links">
+                    <h3>Connect With Us</h3>
+                    <div class="social-icons">
+                        <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
+                        <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
+                        <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
+                        <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
+                    </div>
+                </div>
+            </div>
+
+            <div class="contact-form-container">
+                <h2>Send Us a Message</h2>
+                <form class="contact-form" action="/submit-contact" method="POST">
+                    <div class="form-group">
+                        <label for="name">Your Name</label>
+                        <input type="text" id="name" name="name" required>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="email">Email Address</label>
+                        <input type="email" id="email" name="email" required>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="subject">Subject</label>
+                        <select id="subject" name="subject">
+                            <option value="general">General Inquiry</option>
+                            <option value="support">Technical Support</option>
+                            <option value="feedback">Feedback</option>
+                            <option value="other">Other</option>
+                        </select>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="message">Message</label>
+                        <textarea id="message" name="message" rows="5" required></textarea>
+                    </div>
+
+                    <div class="form-group checkbox-group">
+                        <input type="checkbox" id="privacy" name="privacy" required>
+                        <label for="privacy">I agree to the <a href="{{ url_for('privacy') }}">Privacy Policy</a></label>
+                    </div>
+
+                    <button type="submit" class="btn btn-primary">Send Message</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section class="faq-preview">
+    <div class="container">
+        <h2>Frequently Asked Questions</h2>
+        <p>Find quick answers to common questions about SkinAI.</p>
+        <div class="faq-buttons">
+            <a href="{{ url_for('faq') }}" class="btn btn-secondary">View All FAQs</a>
+        </div>
+    </div>
+</section>
+{% endblock %}

templates/faq.html

@@ -0,0 +1,261 @@
+{% extends "base.html" %}
+
+{% block title %}Frequently Asked Questions - SkinAI{% endblock %}
+
+{% block content %}
+<section class="page-header">
+    <div class="container">
+        <h1>Frequently Asked Questions</h1>
+        <p>Find answers to common questions about SkinAI</p>
+    </div>
+</section>
+
+<section class="faq-content">
+    <div class="container">
+        <div class="faq-search">
+            <div class="search-container">
+                <i class="fas fa-search search-icon"></i>
+                <input type="text" id="faq-search" placeholder="Search questions...">
+            </div>
+        </div>
+
+        <div class="faq-categories">
+            <button class="category-btn active" data-category="all">All</button>
+            <button class="category-btn" data-category="general">General</button>
+            <button class="category-btn" data-category="technical">Technical</button>
+            <button class="category-btn" data-category="medical">Medical</button>
+            <button class="category-btn" data-category="privacy">Privacy & Security</button>
+        </div>
+
+        <div class="faq-list">
+            <!-- General Questions -->
+            <div class="faq-item" data-category="general">
+                <div class="faq-question">
+                    <h3>What is SkinAI?</h3>
+                    <span class="faq-toggle"><i class="fas fa-chevron-down"></i></span>
+                </div>
+                <div class="faq-answer">
+                    <p>SkinAI is an educational tool that uses artificial intelligence to analyze images of skin lesions. Our AI models can help identify potential skin conditions, but the service is not intended to replace professional medical advice or diagnosis.</p>
+                </div>
+            </div>
+
+            <div class="faq-item" data-category="general">
+                <div class="faq-question">
+                    <h3>Is SkinAI free to use?</h3>
+                    <span class="faq-toggle"><i class="fas fa-chevron-down"></i></span>
+                </div>
+                <div class="faq-answer">
+                    <p>Yes, SkinAI is currently free to use. We believe in making skin health education accessible to everyone.</p>
+                </div>
+            </div>
+
+            <!-- Technical Questions -->
+            <div class="faq-item" data-category="technical">
+                <div class="faq-question">
+                    <h3>How accurate is the AI analysis?</h3>
+                    <span class="faq-toggle"><i class="fas fa-chevron-down"></i></span>
+                </div>
+                <div class="faq-answer">
+                    <p>Our models have been trained on large datasets of dermatological images. MobileNetV2 has approximately 74% accuracy on the HAM10000 dataset, while EfficientNetB0 has about 69% accuracy on skin cancer classification. However, AI analysis should never replace professional medical diagnosis.</p>
+                </div>
+            </div>
+
+            <div class="faq-item" data-category="technical">
+                <div class="faq-question">
+                    <h3>What types of skin conditions can SkinAI detect?</h3>
+                    <span class="faq-toggle"><i class="fas fa-chevron-down"></i></span>
+                </div>
+                <div class="faq-answer">
+                    <p>Our AI models can analyze seven types of skin lesions:</p>
+                    <ul>
+                        <li>Actinic keratoses (akiec)</li>
+                        <li>Basal cell carcinoma (bcc)</li>
+                        <li>Benign keratosis-like lesions (bkl)</li>
+                        <li>Dermatofibroma (df)</li>
+                        <li>Melanoma (mel)</li>
+                        <li>Melanocytic nevi (nv)</li>
+                        <li>Vascular lesions (vasc)</li>
+                    </ul>
+                </div>
+            </div>
+
+            <div class="faq-item" data-category="technical">
+                <div class="faq-question">
+                    <h3>What image formats are supported?</h3>
+                    <span class="faq-toggle"><i class="fas fa-chevron-down"></i></span>
+                </div>
+                <div class="faq-answer">
+                    <p>SkinAI supports JPG, JPEG, and PNG image formats. For best results, upload clear, well-lit images with the skin lesion centered in the frame.</p>
+                </div>
+            </div>
+
+            <!-- Medical Questions -->
+            <div class="faq-item" data-category="medical">
+                <div class="faq-question">
+                    <h3>Can SkinAI diagnose skin cancer?</h3>
+                    <span class="faq-toggle"><i class="fas fa-chevron-down"></i></span>
+                </div>
+                <div class="faq-answer">
+                    <p>No, SkinAI cannot provide medical diagnoses. Our AI models can analyze skin lesions and provide information about potential conditions, but this should be used for educational purposes only. Always consult a healthcare professional for proper diagnosis and treatment.</p>
+                </div>
+            </div>
+
+            <div class="faq-item" data-category="medical">
+                <div class="faq-question">
+                    <h3>What should I do if SkinAI indicates a high probability of melanoma?</h3>
+                    <span class="faq-toggle"><i class="fas fa-chevron-down"></i></span>
+                </div>
+                <div class="faq-answer">
+                    <p>If SkinAI indicates a high probability of melanoma or any concerning skin condition, you should consult with a dermatologist or healthcare provider as soon as possible. Remember that SkinAI is an educational tool and not a diagnostic device.</p>
+                </div>
+            </div>
+
+            <div class="faq-item" data-category="medical">
+                <div class="faq-question">
+                    <h3>How often should I check my skin for changes?</h3>
+                    <span class="faq-toggle"><i class="fas fa-chevron-down"></i></span>
+                </div>
+                <div class="faq-answer">
+                    <p>Most dermatologists recommend performing a self-examination of your skin once a month. Look for changes in existing moles or the appearance of new spots. The ABCDE rule can help identify concerning features: Asymmetry, Border irregularity, Color variation, Diameter larger than 6mm, and Evolving size, shape, or color.</p>
+                </div>
+            </div>
+
+            <!-- Privacy & Security Questions -->
+            <div class="faq-item" data-category="privacy">
+                <div class="faq-question">
+                    <h3>Is my data private and secure?</h3>
+                    <span class="faq-toggle"><i class="fas fa-chevron-down"></i></span>
+                </div>
+                <div class="faq-answer">
+                    <p>Yes. We do not store your uploaded images on our servers. All processing is done in real-time, and images are not saved after analysis. Your privacy is our priority. For more details, please review our <a href="{{ url_for('privacy') }}">Privacy Policy</a>.</p>
+                </div>
+            </div>
+
+            <div class="faq-item" data-category="privacy">
+                <div class="faq-question">
+                    <h3>Do you share my data with third parties?</h3>
+                    <span class="faq-toggle"><i class="fas fa-chevron-down"></i></span>
+                </div>
+                <div class="faq-answer">
+                    <p>No, we do not sell, trade, or otherwise transfer your information to third parties. We may share anonymized, aggregated data for research or educational purposes, but this will never include personally identifiable information or your uploaded images.</p>
+                </div>
+            </div>
+
+            <div class="faq-item" data-category="privacy">
+                <div class="faq-question">
+                    <h3>Can I delete my data from your system?</h3>
+                    <span class="faq-toggle"><i class="fas fa-chevron-down"></i></span>
+                </div>
+                <div class="faq-answer">
+                    <p>Since we do not store your uploaded images after analysis, there is no need to request deletion. If you have any concerns about your data, please <a href="{{ url_for('contact') }}">contact us</a>.</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="faq-not-found" style="display: none;">
+            <div class="not-found-icon">
+                <i class="fas fa-search"></i>
+            </div>
+            <h3>No matching questions found</h3>
+            <p>Try different keywords or <a href="{{ url_for('contact') }}">contact us</a> with your specific question.</p>
+        </div>
+    </div>
+</section>
+
+<section class="contact-cta">
+    <div class="container">
+        <h2>Still have questions?</h2>
+        <p>We're here to help. Reach out to our team for personalized assistance.</p>
+        <a href="{{ url_for('contact') }}" class="btn btn-primary">Contact Us</a>
+    </div>
+</section>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        // FAQ toggle functionality
+        const questions = document.querySelectorAll('.faq-question');
+        questions.forEach(question => {
+            question.addEventListener('click', function() {
+                const answer = this.nextElementSibling;
+                const isOpen = answer.style.maxHeight;
+
+                // Close all other answers
+                document.querySelectorAll('.faq-answer').forEach(item => {
+                    item.style.maxHeight = null;
+                });
+
+                document.querySelectorAll('.faq-toggle i').forEach(icon => {
+                    icon.className = 'fas fa-chevron-down';
+                });
+
+                // Toggle current answer
+                if (!isOpen) {
+                    answer.style.maxHeight = answer.scrollHeight + 'px';
+                    this.querySelector('.faq-toggle i').className = 'fas fa-chevron-up';
+                }
+            });
+        });
+
+        // Category filter functionality
+        const categoryButtons = document.querySelectorAll('.category-btn');
+        const faqItems = document.querySelectorAll('.faq-item');
+
+        categoryButtons.forEach(button => {
+            button.addEventListener('click', function() {
+                const category = this.getAttribute('data-category');
+
+                // Update active button
+                categoryButtons.forEach(btn => btn.classList.remove('active'));
+                this.classList.add('active');
+
+                // Filter FAQ items
+                faqItems.forEach(item => {
+                    if (category === 'all' || item.getAttribute('data-category') === category) {
+                        item.style.display = 'block';
+                    } else {
+                        item.style.display = 'none';
+                    }
+                });
+
+                // Check if any items are visible
+                checkVisibleItems();
+            });
+        });
+
+        // Search functionality
+        const searchInput = document.getElementById('faq-search');
+        searchInput.addEventListener('input', function() {
+            const searchTerm = this.value.toLowerCase();
+
+            faqItems.forEach(item => {
+                const question = item.querySelector('h3').textContent.toLowerCase();
+                const answer = item.querySelector('.faq-answer').textContent.toLowerCase();
+
+                if (question.includes(searchTerm) || answer.includes(searchTerm)) {
+                    item.style.display = 'block';
+                } else {
+                    item.style.display = 'none';
+                }
+            });
+
+            // Check if any items are visible
+            checkVisibleItems();
+        });
+
+        function checkVisibleItems() {
+            const visibleItems = Array.from(faqItems).filter(item =>
+                item.style.display !== 'none'
+            );
+
+            const notFoundMessage = document.querySelector('.faq-not-found');
+            if (visibleItems.length === 0) {
+                notFoundMessage.style.display = 'block';
+            } else {
+                notFoundMessage.style.display = 'none';
+            }
+        }
+    });
+</script>
+{% endblock %}

templates/privacy.html

@@ -0,0 +1,64 @@
+{% extends "base.html" %}
+
+{% block title %}Privacy Policy - SkinAI{% endblock %}
+
+{% block content %}
+<section class="page-header">
+    <div class="container">
+        <h1>Privacy Policy</h1>
+        <p>Last updated: January 1, 2023</p>
+    </div>
+</section>
+
+<section class="privacy-content">
+    <div class="container">
+        <div class="content-card">
+            <h2>1. Introduction</h2>
+            <p>At SkinAI, we take your privacy seriously. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you use our service.</p>
+
+            <h2>2. Information We Collect</h2>
+            <p>We collect the following types of information:</p>
+            <ul>
+                <li><strong>Images:</strong> Skin lesion images that you upload for analysis</li>
+                <li><strong>Usage Data:</strong> Information about how you interact with our service</li>
+                <li><strong>Device Information:</strong> Browser type, IP address, and device type</li>
+            </ul>
+
+            <h2>3. How We Use Your Information</h2>
+            <p>We use the collected information for the following purposes:</p>
+            <ul>
+                <li>To provide and maintain our service</li>
+                <li>To process and analyze uploaded images</li>
+                <li>To improve our AI models and service</li>
+                <li>To respond to your inquiries and provide support</li>
+            </ul>
+
+            <h2>4. Data Storage and Security</h2>
+            <p>We do not permanently store the images you upload for analysis. All processing is done in real-time, and images are not saved after analysis is complete. We implement appropriate security measures to protect your information.</p>
+
+            <h2>5. Data Sharing</h2>
+            <p>We do not sell, trade, or otherwise transfer your information to third parties. We may share anonymized, aggregated data for research or educational purposes.</p>
+
+            <h2>6. Cookies and Tracking</h2>
+            <p>We use cookies and similar tracking technologies to enhance your experience on our website. You can set your browser to refuse cookies, but this may limit some functionality.</p>
+
+            <h2>7. Your Rights</h2>
+            <p>Depending on your location, you may have rights regarding your personal information, including:</p>
+            <ul>
+                <li>The right to access information we have about you</li>
+                <li>The right to request deletion of your data</li>
+                <li>The right to object to processing of your data</li>
+            </ul>
+
+            <h2>8. Children's Privacy</h2>
+            <p>Our service is not intended for individuals under the age of 18. We do not knowingly collect personal information from children.</p>
+
+            <h2>9. Changes to This Policy</h2>
+            <p>We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new policy on this page and updating the "Last Updated" date.</p>
+
+            <h2>10. Contact Us</h2>
+            <p>If you have questions about this Privacy Policy, please <a href="{{ url_for('contact') }}">contact us</a>.</p>
+        </div>
+    </div>
+</section>
+{% endblock %}

templates/terms.html

@@ -0,0 +1,51 @@
+{% extends "base.html" %}
+
+{% block title %}Terms of Service - SkinAI{% endblock %}
+
+{% block content %}
+<section class="page-header">
+    <div class="container">
+        <h1>Terms of Service</h1>
+        <p>Last updated: January 1, 2023</p>
+    </div>
+</section>
+
+<section class="terms-content">
+    <div class="container">
+        <div class="content-card">
+            <h2>1. Acceptance of Terms</h2>
+            <p>By accessing or using SkinAI, you agree to be bound by these Terms of Service. If you do not agree to these terms, please do not use our service.</p>
+
+            <h2>2. Description of Service</h2>
+            <p>SkinAI provides AI-powered analysis of skin lesions for educational purposes only. Our service is not intended to replace professional medical advice, diagnosis, or treatment.</p>
+
+            <h2>3. Medical Disclaimer</h2>
+            <p>SkinAI is an educational tool only and is not a substitute for professional medical advice. The analysis provided by our AI models should not be used for self-diagnosis or treatment decisions. Always consult with a qualified healthcare provider for medical concerns.</p>
+
+            <h2>4. User Responsibilities</h2>
+            <p>Users are responsible for:</p>
+            <ul>
+                <li>Providing clear, high-quality images for analysis</li>
+                <li>Not relying solely on SkinAI for medical decisions</li>
+                <li>Seeking professional medical advice for skin concerns</li>
+                <li>Using the service in compliance with applicable laws</li>
+            </ul>
+
+            <h2>5. Privacy</h2>
+            <p>Your privacy is important to us. Please review our <a href="{{ url_for('privacy') }}">Privacy Policy</a> to understand how we collect, use, and protect your information.</p>
+
+            <h2>6. Intellectual Property</h2>
+            <p>All content, features, and functionality of SkinAI, including but not limited to text, graphics, logos, and code, are the exclusive property of SkinAI and are protected by copyright, trademark, and other intellectual property laws.</p>
+
+            <h2>7. Limitation of Liability</h2>
+            <p>SkinAI and its creators shall not be liable for any direct, indirect, incidental, special, consequential, or punitive damages resulting from your use or inability to use the service.</p>
+
+            <h2>8. Changes to Terms</h2>
+            <p>We reserve the right to modify these Terms of Service at any time. We will provide notice of significant changes by updating the "Last Updated" date at the top of this page.</p>
+
+            <h2>9. Contact Information</h2>
+            <p>If you have any questions about these Terms, please <a href="{{ url_for('contact') }}">contact us</a>.</p>
+        </div>
+    </div>
+</section>
+{% endblock %}