Email a Friend by @username7 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

<blockquote>Inserisce citazioni in un documento HTML
placeholderDefinisce un testo segnaposto per un elemento input o textarea
<abbr>Inserisce abbreviazioni e acronimi
preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML
typeSpecifica la tipologia/funzione di un elemento.
downloadConsente di scaricare file al click di collegamento ipertestuale.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Department Staff Updates

velocità scrittura

Borsino politico

26/01/2024 pagina html

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Email a Friend</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4a6cf7;
            --secondary-color: #6c757d;
            --success-color: #28a745;
            --danger-color: #dc3545;
            --light-color: #f8f9fa;
            --dark-color: #343a40;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Roboto', sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f7ff;
            padding: 20px;
        }
        
        .container {
            max-width: 800px;
            margin: 40px auto;
            padding: 30px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            text-align: center;
            margin-bottom: 30px;
            color: var(--primary-color);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        input, textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        
        input:focus, textarea:focus {
            outline: none;
            border-color: var(--primary-color);
        }
        
        textarea {
            min-height: 150px;
            resize: vertical;
        }
        
        .btn {
            display: inline-block;
            background-color: var(--primary-color);
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            transition: background-color 0.3s;
        }
        
        .btn:hover {
            background-color: #3a5bd9;
        }
        
        .btn-block {
            display: block;
            width: 100%;
        }
        
        .notification {
            padding: 15px;
            margin: 20px 0;
            border-radius: 5px;
            display: none;
        }
        
        .success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .email-history {
            margin-top: 40px;
            border-top: 1px solid #eee;
            padding-top: 20px;
        }
        
        .email-history h2 {
            margin-bottom: 20px;
            color: var(--dark-color);
        }
        
        .email-item {
            padding: 15px;
            border-bottom: 1px solid #eee;
            margin-bottom: 10px;
        }
        
        .email-item:last-child {
            border-bottom: none;
        }
        
        .email-meta {
            font-size: 14px;
            color: var(--secondary-color);
            margin-bottom: 5px;
        }
        
        .email-subject {
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .email-preview {
            color: var(--secondary-color);
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Email a Friend</h1>
        
        <div id="notification" class="notification"></div>
        
        <form id="emailForm">
            <div class="form-group">
                <label for="senderName">Your Name</label>
                <input type="text" id="senderName" required placeholder="Enter your name">
            </div>
            
            <div class="form-group">
                <label for="senderEmail">Your Email</label>
                <input type="email" id="senderEmail" required placeholder="Enter your email">
            </div>
            
            <div class="form-group">
                <label for="recipientEmail">Friend's Email</label>
                <input type="email" id="recipientEmail" required placeholder="Enter your friend's email">
            </div>
            
            <div class="form-group">
                <label for="subject">Subject</label>
                <input type="text" id="subject" required placeholder="Enter email subject">
            </div>
            
            <div class="form-group">
                <label for="message">Message</label>
                <textarea id="message" required placeholder="Type your message here..."></textarea>
            </div>
            
            <button type="submit" class="btn btn-block">Send Email</button>
        </form>
        
        <div class="email-history">
            <h2>Sent Emails</h2>
            <div id="emailHistory">
                <p>No emails sent yet.</p>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const emailForm = document.getElementById('emailForm');
            const notification = document.getElementById('notification');
            const emailHistory = document.getElementById('emailHistory');
            let emails = JSON.parse(localStorage.getItem('sentEmails')) || [];
            
            // Display existing emails
            displayEmailHistory();
            
            emailForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const senderName = document.getElementById('senderName').value;
                const senderEmail = document.getElementById('senderEmail').value;
                const recipientEmail = document.getElementById('recipientEmail').value;
                const subject = document.getElementById('subject').value;
                const message = document.getElementById('message').value;
                
                // Create email object
                const email = {
                    id: Date.now(),
                    senderName,
                    senderEmail,
                    recipientEmail,
                    subject,
                    message,
                    timestamp: new Date().toISOString()
                };
                
                // Add to emails array
                emails.unshift(email);
                
                // Save to localStorage
                localStorage.setItem('sentEmails', JSON.stringify(emails));
                
                // Show success notification
                showNotification('Email sent successfully!', 'success');
                
                // Reset form
                emailForm.reset();
                
                // Update email history display
                displayEmailHistory();
                
                // In a real application, you would send the email to a server here
                // For this demo, we're just storing it locally
                console.log('Email would be sent with the following data:', email);
            });
            
            function showNotification(message, type) {
                notification.textContent = message;
                notification.className = `notification ${type}`;
                notification.style.display = 'block';
                
                setTimeout(() => {
                    notification.style.display = 'none';
                }, 5000);
            }
            
            function displayEmailHistory() {
                if (emails.length === 0) {
                    emailHistory.innerHTML = '<p>No emails sent yet.</p>';
                    return;
                }
                
                emailHistory.innerHTML = '';
                
                emails.forEach(email => {
                    const emailItem = document.createElement('div');
                    emailItem.className = 'email-item';
                    
                    const date = new Date(email.timestamp);
                    const formattedDate = date.toLocaleString();
                    
                    emailItem.innerHTML = `
                        <div class="email-meta">To: ${email.recipientEmail} | ${formattedDate}</div>
                        <div class="email-subject">${email.subject}</div>
                        <div class="email-preview">${email.message}</div>
                    `;
                    
                    emailHistory.appendChild(emailItem);
                });
            }
        });
    </script>
</body>
</html>