Test

<style>
.step-container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f8f8f8;
border: 1px solid #ddd;
border-radius: 5px;
text-align: center;
}

.step-header {
margin-bottom: 20px;
font-size: 24px;
font-weight: bold;
}

.step-buttons {
margin-top: 20px;
}

.step-buttons button {
margin: 5px;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
color: #fff;
background-color: #333;
border: none;
border-radius: 5px;
cursor: pointer;
}

.step-buttons button:hover {
background-color: #555;
}

.story-textarea {
width: 100%;
height: 150px;
margin-bottom: 20px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}

.generated-image {
max-width: 500px;
margin-bottom: 20px;
}

.book-order {
margin-top: 20px;
}
</style>

{% comment %}
Step 1: Create your own short story
{% endcomment %}
{% if page.step == 1 %}
<div class="step-container">
<div class="step-header">Step 1: Create Your Own Short Story</div>
<form action="/create-story" method="post">
<textarea class="story-textarea" id="story" name="story" rows="5" required>{{ page.story }}</textarea>
<div class="step-buttons">
<button type="submit">Generate Image and Create Book</button>
</div>
</form>
</div>
{% endif %}

{% comment %}
Step 2: Integrate DALL·E AI image generation
{% endcomment %}
{% if page.step == 2 %}
{% assign story = page.story %}
{% assign image = page.image %}
{% assign imageIndex = page.imageIndex | default: 0 %}

{% if imageIndex < 3 %}
{% if imageIndex == 0 %}
{% assign image = story | dalle_ai_generate_image %}
{% else %}
{% assign image = story | dalle_ai_generate_image %} {# Generate a new image if the user chooses to generate another round #}
{% endif %}

<div class="step-container">
<div class="step-header">Step 2: AI-Generated Image</div>
<img class="generated-image" src="{{ image.url }}" alt="AI-generated image">
<form action="/create-story" method="post">
<input type="hidden" name="story" value="{{ story }}">
<input type="hidden" name="image" value="{{ image.url }}">
<input type="hidden" name="imageIndex" value="{{ imageIndex | plus: 1 }}">
<div class="step-buttons">
<button type="submit">Generate Another Image</button>
</div>
</form>
<div class="step-buttons">
<a href="/create-story?story={{ story }}&image={{ image.url }}&imageIndex={{ imageIndex | plus: 1 }}&step=2