templates/form.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SnapSkin - Skin Lesion Diagnosis</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='form-styles.css') }}">
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='logo.png') }}">
</head>
<body>
    <div class="container">
        <header>
            <h1>SnapSkin</h1>
            <p>AI-Powered Skin Lesion Diagnosis</p>
        </header>

        <form id="diagnosis-form" action="{{ url_for('predict') }}" method="POST" enctype="multipart/form-data">
            <div class="form-group">
                <label for="name">Full Name:</label>
                <input type="text" id="name" name="name" placeholder="Enter your full name" required>
            </div>
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" placeholder="Enter your email address" required>
            </div>
            <div class="form-group">
                <label for="gender">Gender:</label>
                <select id="gender" name="gender" required>
                    <option value="" disabled selected>Select your gender</option>
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                    <option value="Other">Other</option>
                </select>
            </div>
            <div class="form-group">
                <label for="age">Age:</label>
                <input type="number" id="age" name="age" min="0" max="150" placeholder="e.g., 35" required>
            </div>
            <div class="form-group">
                <label for="image">Upload Skin Image:</label>
                <input type="file" id="image" name="image" accept="image/*" required>
                <label for="image" class="file-upload-label" id="file-upload-text">Click to choose an image</label>
            </div>
            <button type="submit" class="submit-button" id="submit-btn">Diagnose</button>
        </form>

        {% if result %}
        <div class="result">
            <h2>Diagnosis Result</h2>
            <div class="alert {% if result.prediction == 'Error' %}alert-error{% elif result.confidence and result.confidence.replace('%','')|float < 70 %}alert-warning{% else %}alert-success{% endif %}">
                <p><strong>Condition:</strong> {{ result.prediction }}</p>
                {% if result.confidence %}
                <p><strong>Confidence:</strong> {{ result.confidence }}</p>
                {% endif %}
                {% if result.message %}
                <p><strong>Message:</strong> {{ result.message }}</p>
                {% endif %}
            </div>
            {% if result.email_status %}
                <p id="email-status">{{ result.email_status }}</p>
            {% endif %}
        </div>
        {% endif %}

        <div id="history-section">
            </div>
            <div id="history-results">
                </div>
        </div>
    </div>

    <script src="{{ url_for('static', filename='preloader.js') }}"></script>
    <script src="{{ url_for('static', filename='cursor-effect.js') }}"></script>
    
    <script>
        const fileInput = document.getElementById('image');
        const fileUploadText = document.getElementById('file-upload-text');
        const diagnosisForm = document.getElementById('diagnosis-form');
        const submitBtn = document.getElementById('submit-btn');

        if (fileInput) {
            fileInput.addEventListener('change', () => {
                if (fileInput.files.length > 0) {
                    fileUploadText.textContent = `File selected: ${fileInput.files[0].name}`;
                    fileUploadText.classList.add('file-selected');
                } else {
                    fileUploadText.textContent = 'Click to choose an image';
                    fileUploadText.classList.remove('file-selected');
                }
            });
        }

        if (diagnosisForm) {
            diagnosisForm.addEventListener('submit', () => {
                if(submitBtn) {
                    submitBtn.disabled = true;
                    submitBtn.textContent = 'Processing...';
                }
            });
        }

        document.getElementById('fetch-history-btn').addEventListener('click', () => {
            const email = document.getElementById('history-email').value;
            if (!email) {
                alert('Please enter an email address.');
                return;
            }

            const historyDiv = document.getElementById('history-results');
            historyDiv.innerHTML = '<p>Loading history...</p>';

            fetch(`/api/history?email=${encodeURIComponent(email)}`)
                .then(response => response.json())
                .then(data => {
                    historyDiv.innerHTML = '';
                    if (data.error || data.length === 0) {
                        historyDiv.innerHTML = '<p>No scan history found for this email.</p>';
                        return;
                    }
                    
                    const ul = document.createElement('ul');
                    data.forEach(scan => {
                        const li = document.createElement('li');
                        li.classList.add('history-item');
                        li.innerHTML = `
                            <img src="${scan.image_url}" alt="Scan Image">
                            <div class="history-details">
                                <p><strong>Prediction:</strong> ${scan.prediction} (${scan.confidence})</p>
                                <p><strong>Patient:</strong> ${scan.patient_name}</p>
                                <p><strong>Date:</strong> ${scan.timestamp}</p>
                            </div>
                        `;
                        ul.appendChild(li);
                    });
                    historyDiv.appendChild(ul);
                })
                .catch(error => {
                    console.error('Error fetching history:', error);
                    historyDiv.innerHTML = '<p>Error loading history. Please try again.</p>';
                });
        });
    </script>
</body>
</html>