refine and improve this app: <html><head><base href="/" />
  <style>
    :root {
      --primary-color: #6B48FF;
      --secondary-color: #FFB648;
      --accent-color: #FF6B6B;
      --background-color: #F0F2F5;
      --card-bg: #FFFFFF;
      --text-primary: #2C3E50;
      --text-secondary: #7F8C8D;
      --success: #2ECC71;
      --shadow: rgba(0, 0, 0, 0.1);
    }

    body {
      font-family: 'Poppins', sans-serif;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      background: var(--background-color);
      color: var(--text-primary);
      line-height: 1.6;
    }

    .input-section {
      background: var(--card-bg);
      padding: 30px;
      border-radius: 16px;
      box-shadow: 0 8px 24px var(--shadow);
      margin-bottom: 30px;
      transition: transform 0.3s ease;
    }

    .input-section:hover {
      transform: translateY(-2px);
    }

    h1 {
      color: var(--primary-color);
      text-align: center;
      font-size: 2.5em;
      margin-bottom: 30px;
      position: relative;
    }

    h1:after {
      content: '';
      display: block;
      width: 60px;
      height: 4px;
      background: var(--secondary-color);
      margin: 10px auto;
      border-radius: 2px;
    }

    .character-inputs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
    }

    h2 {
      color: var(--primary-color);
      margin-bottom: 20px;
      font-size: 1.5em;
    }

    .input-group {
      margin-bottom: 20px;
    }

    label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      color: var(--text-primary);
      font-size: 0.95em;
    }

    input, textarea, select {
      width: 100%;
      padding: 12px;
      border: 2px solid #E0E7FF;
      border-radius: 8px;
      margin-bottom: 10px;
      font-family: 'Poppins', sans-serif;
      transition: all 0.3s ease;
    }

    input:focus, textarea:focus, select:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(107, 72, 255, 0.1);
    }

    button {
      background: var(--primary-color);
      color: white;
      padding: 12px 24px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 600;
      transition: all 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    button:hover {
      background: #5536FF;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(107, 72, 255, 0.2);
    }

    #story-preview {
      background: var(--card-bg);
      padding: 30px;
      border-radius: 16px;
      margin: 30px 0;
      min-height: 200px;
      display: none;
      animation: fadeIn 0.5s ease;
    }

    #combined-image-container {
      background: var(--card-bg);
      padding: 30px;
      border-radius: 16px;
      margin: 30px auto;
      max-width: 1024px;
      text-align: center;
      box-shadow: 0 8px 24px var(--shadow);
    }

    #combined-comic-image {
      width: 100%;
      max-width: 1024px;
      border: 3px solid var(--primary-color);
      border-radius: 12px;
      transition: transform 0.3s ease;
    }

    #combined-comic-image:hover {
      transform: scale(1.02);
    }

    .error-message {
      color: var(--accent-color);
      background: #FFF5F5;
      padding: 12px;
      border-radius: 8px;
      margin: 15px 0;
      display: none;
      border-left: 4px solid var(--accent-color);
    }

    .loading {
      display: none;
      text-align: center;
      padding: 20px;
      color: var(--primary-color);
      font-weight: 600;
      position: relative;
    }

    .loading:before {
      content: '';
      display: block;
      width: 40px;
      height: 40px;
      margin: 0 auto 10px;
      border: 4px solid var(--primary-color);
      border-top: 4px solid transparent;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .loading:after {
      content: attr(data-message);
      display: block;
      font-size: 14px;
      margin-top: 8px;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    #generate-combined-image {
      background: var(--secondary-color);
      margin-top: 15px;
    }

    #generate-combined-image:hover {
      background: #FF9F29;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
      .character-inputs {
        grid-template-columns: 1fr;
      }
      
      .input-section {
        padding: 20px;
      }
      
      h1 {
        font-size: 2em;
      }
    }
  </style>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
  <div class="input-section">
    <h1>Comic Strip Creator</h1>
    
    <div class="character-inputs">
      <div class="character-1">
        <h2>Character 1</h2>
        <div class="input-group">
          <label for="char1-name">Name:</label>
          <input type="text" id="char1-name" required placeholder="Enter character name">
        </div>
        <div class="input-group">
          <label for="char1-description">Description:</label>
          <textarea id="char1-description" rows="4" required placeholder="Describe your character's appearance and personality"></textarea>
        </div>
      </div>
      
      <div class="character-2">
        <h2>Character 2</h2>
        <div class="input-group">
          <label for="char2-name">Name:</label>
          <input type="text" id="char2-name" required placeholder="Enter character name">
        </div>
        <div class="input-group">
          <label for="char2-description">Description:</label>
          <textarea id="char2-description" rows="4" required placeholder="Describe your character's appearance and personality"></textarea>
        </div>
      </div>
    </div>

    <div class="input-group">
      <label for="story-outline">Story Outline:</label>
      <textarea id="story-outline" rows="4" required placeholder="Write your story outline here"></textarea>
    </div>

    <div class="input-group">
      <label for="scene-description">Scene Description:</label>
      <textarea id="scene-description" rows="4" required placeholder="Describe the scene and setting"></textarea>
    </div>

    <div class="input-group">
      <label for="art-style">Art Style:</label>
      <select id="art-style" required>
        <option value="manga">Manga</option>
        <option value="comic">Comic Book</option>
        <option value="realistic">Realistic</option>
        <option value="cartoon">Cartoon</option>
        <option value="watercolor">Watercolor</option>
        <option value="whimsical">Whimsical Storybook</option>
        <option value="pop">Pop Art</option>
        <option value="sketch">Detailed Sketch</option>
      </select>
    </div>

    <div id="error-message" class="error-message"></div>
    <div id="loading" class="loading" data-message="Creating your story..."></div>
    <button id="generate-story">Generate Story</button>
    <button id="generate-combined-image" style="display: none;">Generate Comic Strip</button>
  </div>
  
  <div id="story-preview"></div>
  
  <div id="combined-image-container" style="display: none;">
    <img id="combined-comic-image" src="" alt="Combined Comic Strip">
  </div>

  <div id="image-loading" class="loading" data-message="Crafting your comic panels..."></div>

  <script>
    async function validateInputs() {
      const requiredFields = [
        { id: 'char1-name', label: 'Character 1 Name' },
        { id: 'char1-description', label: 'Character 1 Description' },
        { id: 'char2-name', label: 'Character 2 Name' },
        { id: 'char2-description', label: 'Character 2 Description' },
        { id: 'story-outline', label: 'Story Outline' },
        { id: 'scene-description', label: 'Scene Description' }
      ];

      for (const field of requiredFields) {
        const value = document.getElementById(field.id).value.trim();
        if (!value) {
          throw new Error(`Please fill in the ${field.label} field`);
        }
      }
    }

    async function generateStory() {
      const errorMessage = document.getElementById('error-message');
      const loading = document.getElementById('loading');
      errorMessage.style.display = 'none';
      
      try {
        await validateInputs();
        
        loading.style.display = 'block';
        const char1Name = document.getElementById('char1-name').value;
        const char1Desc = document.getElementById('char1-description').value;
        const char2Name = document.getElementById('char2-name').value;
        const char2Desc = document.getElementById('char2-description').value;
        const storyOutline = document.getElementById('story-outline').value;
        const sceneDesc = document.getElementById('scene-description').value;
        const artStyle = document.getElementById('art-style').value;

        const prompt = `Create a 4-panel comic strip story with characters: ${char1Name} (${char1Desc}) and ${char2Name} (${char2Desc}). Story outline: ${storyOutline}. Scene: ${sceneDesc}. Style: ${artStyle}. Break it into 4 distinct scenes without dialogue.`;

        const response = await fetch('https://text.pollinations.ai/', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            messages: [
              { role: 'system', content: 'You are a comic strip writer. Create visual scene brief descriptions without dialogue.' },
              { role: 'user', content: prompt }
            ],
            model: 'openai',
            jsonMode: false
          }),
        });

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.text();
        const storyPreview = document.getElementById('story-preview');
        storyPreview.style.display = 'block';
        storyPreview.innerHTML = `<h2>Generated Story Panels:</h2><p>${data.replace(/\n/g, '<br>')}</p>`;
        
        // Show the combined image generation button
        document.getElementById('generate-combined-image').style.display = 'block';
        window.storyData = data;
      } catch (error) {
        errorMessage.textContent = error.message || 'Failed to generate story. Please try again.';
        errorMessage.style.display = 'block';
        console.error('Error:', error);
      } finally {
        loading.style.display = 'none';
      }
    }

    async function generateCombinedImage() {
      const artStyle = document.getElementById('art-style').value;
      const char1Name = document.getElementById('char1-name').value;
      const char2Name = document.getElementById('char2-name').value;
      const combinedImageContainer = document.getElementById('combined-image-container');
      const combinedComicImage = document.getElementById('combined-comic-image');
      const imageLoading = document.getElementById('image-loading');

      try {
        // Display the loading indicator
        imageLoading.style.display = 'block';

        const scenes = window.storyData.split('\n').filter(scene => scene.trim()).slice(0, 4);
        if (scenes.length < 4) {
          alert('Insufficient number of scenes to create a 4-panel comic.');
          imageLoading.style.display = 'none';
          return;
        }

        // Create a comprehensive prompt for all four panels
        const prompt = `Create a single image containing a 4-panel strip arranged in a 2x2 grid. Each panel should depict the following scenes featuring ${char1Name} and ${char2Name} in the ${artStyle} style:
        
        Panel 1: ${scenes[0]}
        Panel 2: ${scenes[1]}
        Panel 3: ${scenes[2]}
        Panel 4: ${scenes[3]}
        
        Ensure consistent character designs, no text and dialogues and seamless transitions between panels, maintaining the ${artStyle} aesthetic throughout the comic strip.`;

        // Encode the prompt for the URL
        const encodedPrompt = encodeURIComponent(prompt);

        // Generate the image URL (adjust size as needed)
        const imageUrl = `https://image.pollinations.ai/prompt/${encodedPrompt}?model=flux&width=1024&height=1024&nologo=true&private=true`;

        // Set the image source to display it
        combinedComicImage.src = imageUrl;
        combinedImageContainer.style.display = 'block';

        // Optionally, scroll to the image
        combinedImageContainer.scrollIntoView({ behavior: 'smooth' });
      } catch (error) {
        console.error('Error generating combined image:', error);
        alert('Failed to generate the combined comic image. Please try again.');
      } finally {
        // Hide the loading indicator
        imageLoading.style.display = 'none';
      }
    }

    // Attach the event listeners
    document.getElementById('generate-story').addEventListener('click', generateStory);
    document.getElementById('generate-combined-image').addEventListener('click', generateCombinedImage);
  </script>
</body>
</html>