<!DOCTYPE html>
<html>
<head>
    <style>
        /* ...email styles... */
    </style>
</head>
<body>
    <div class="container">
        <h1>Welcome & Shift Confirmation</h1>
        
        <p>Hi {{USER_NAME}},</p>
        
        <p>Thank you for signing up to volunteer! Your account has been created and you're confirmed for:</p>
        
        <div class="shift-details">
            <h2>{{SHIFT_TITLE}}</h2>
            <p><strong>Date:</strong> {{SHIFT_DATE}}</p>
            <p><strong>Time:</strong> {{SHIFT_TIME}}</p>
            <p><strong>Location:</strong> {{SHIFT_LOCATION}}</p>
        </div>
        
        <div class="credentials">
            <h3>Your Login Details</h3>
            <p><strong>Email:</strong> {{USER_EMAIL}}</p>
            <p><strong>Temporary Password:</strong> <code>{{TEMP_PASSWORD}}</code></p>
            <p class="note">This is a temporary account that expires after your shift.</p>
        </div>
        
        <div class="actions">
            <a href="{{LOGIN_URL}}" class="button">Login to Your Account</a>
            <p>Once logged in, visit <a href="{{SHIFTS_URL}}">My Shifts</a> to view or cancel your signup.</p>
        </div>
    </div>
</body>
</html>