<style>
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f8fb;
    color: #333;
  }
  .container {
    max-width: 900px;
    margin: 40px auto;
    padding: 30px;
    background: linear-gradient(145deg, #ffffff, #e6e9ed);
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  }
  .header {
    text-align: center;
    margin-bottom: 25px;
  }
  .header h1 {
    font-size: 28px;
    color: #2c3e50;
    margin-bottom: 10px;
  }
  .header p {
    font-size: 16px;
    color: #7f8c8d;
  }
  .form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
  }
  .form-group label {
    font-weight: bold;
    margin-bottom: 8px;
    color: #34495e;
  }
  .form-group input, .form-group select {
    padding: 12px;
    font-size: 14px;
    border: 1px solid #bdc3c7;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.3s ease;
  }
  .form-group input:focus, .form-group select:focus {
    border-color: #3498db;
  }
  .form-group button {
    padding: 12px;
    background: linear-gradient(145deg, #3498db, #2980b9);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
  }
  .form-group button:hover {
    background: linear-gradient(145deg, #2980b9, #1c598a);
  }
  .form-group button:active {
    transform: scale(0.98);
  }
  .results {
    margin-top: 30px;
  }
  .results h2 {
    font-size: 22px;
    margin-bottom: 15px;
    color: #2c3e50;
    text-align: center;
  }
  .results ul {
    list-style: none;
    padding: 0;
  }
  .results li {
    background: linear-gradient(145deg, #ecf0f1, #bdc3c7);
    margin-bottom: 10px;
    padding: 12px;
    border-radius: 8px;
    color: #2c3e50;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
</style>

<div class="container">
  <div class="header">
    <h1>Email Subject Line Generator</h1>
    <p>Create high-converting subject lines in seconds!</p>
  </div>

  <div class="form-group">
    <label for="keywords">Enter Keywords:</label>
    <input type="text" id="keywords" placeholder="e.g., Sale, Free, Exclusive">
  </div>

  <div class="form-group">
    <label for="tone">Select Tone:</label>
    <select id="tone">
      <option value="Exciting">Exciting</option>
      <option value="Urgent">Urgent</option>
      <option value="Friendly">Friendly</option>
      <option value="Professional">Professional</option>
    </select>
  </div>

  <div class="form-group">
    <label for="goal">Select Goal:</label>
    <select id="goal">
      <option value="Increase Opens">Increase Opens</option>
      <option value="Drive Clicks">Drive Clicks</option>
      <option value="Boost Sales">Boost Sales</option>
    </select>
  </div>

  <div class="form-group">
    <button onclick="generateSubjectLines()">Generate Subject Lines</button>
  </div>

  <div class="results" id="results">
    <h2>Generated Subject Lines:</h2>
    <ul id="subjectLinesList"></ul>
  </div>
</div>

<script>
  async function generateSubjectLines() {
    const apiKey = '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'; // Replace with your actual API key
    const keywords = document.getElementById('keywords').value.split(',').map(k => k.trim());
    const tone = document.getElementById('tone').value;
    const goal = document.getElementById('goal').value;

    const aiSuggestions = await fetch('https://api.openai.com/v1/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer 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`
      },
      body: JSON.stringify({
        model: 'gpt-3.5-turbo',
        prompt: `Generate email subject lines using the following:
        Keywords: ${keywords.join(', ')}
        Tone: ${tone}
        Goal: ${goal}
        Provide 5 subject lines.`,
        max_tokens: 100
      })
    });

    const response = await aiSuggestions.json();
    const subjectLines = response.choices[0].text.trim().split('\n');

    const list = document.getElementById('subjectLinesList');
    list.innerHTML = '';
    subjectLines.forEach(line => {
      const li = document.createElement('li');
      li.textContent = line;
      list.appendChild(li);
    });
  }
</script>