<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Create Your Character | Hello You</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: 'Inter', sans-serif;
background: #f9f9f9;
margin: 0;
padding: 2rem;
display: flex;
justify-content: center;
}
#storybook-wrapper {
background: white;
padding: 2rem;
border-radius: 24px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
max-width: 480px;
width: 100%;
text-align: center;
}
input, select, button {
width: 100%;
padding: 1rem;
margin-bottom: 1rem;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 12px;
box-sizing: border-box;
}
#avatar-preview img {
width: 100%;
max-width: 260px;
margin: 1rem auto;
display: block;
border-radius: 16px;
animation: popIn 0.6s ease-out forwards;
}
#step-2 { display: none; }
#loading, #story-loading { font-style: italic; display: none; margin: 1rem 0; }
@keyframes popIn {
0% { transform: scale(0.5); opacity: 0; }
80% { transform: scale(1.05); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes slideUp {
0% { transform: translateY(30px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
.slide-up {
animation: slideUp 0.8s ease-out forwards;
}
.blur-loading {
filter: blur(3px) brightness(0.7);
pointer-events: none;
transition: filter 0.3s ease;
}
.normal-loading {
filter: blur(0px) brightness(1);
pointer-events: auto;
transition: filter 0.3s ease;
}
</style>
</head>
<body>
<div id="storybook-wrapper">
<h2>Create Your Character</h2>
<input type="email" id="email" placeholder="Your Email" required>
<input type="file" id="childPhoto" accept="image/*" required>
<button id="generate-avatar" type="button">Generate Avatar</button>
<div id="loading">Creating your character...</div>
<div id="avatar-preview"></div>
<div id="step-2">
<h3>Your Character is Ready!</h3>
<input type="text" id="childName" placeholder="Child's Name" required>
<input type="number" id="childAge" placeholder="Child's Age" required>
<select id="theme-select" required>
<option value="">Choose a Story Theme</option>
<option value="travel">Travel</option>
<option value="friendship">Friendship</option>
<option value="space">Space</option>
<option value="birthday">Birthday</option>
<option value="adventure">Adventure</option>
</select>
<button id="create-story" type="button">Create My Story</button>
</div>
<div id="story-loading">Creating your story...</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const generateButton = document.getElementById("generate-avatar");
const createStoryButton = document.getElementById("create-story");
const loadingIndicator = document.getElementById("loading");
const storyLoadingIndicator = document.getElementById("story-loading");
const avatarPreview = document.getElementById("avatar-preview");
const step2 = document.getElementById("step-2");
const formWrapper = document.getElementById("storybook-wrapper");
let avatarUrl = "";
let emailCaptured = "";
generateButton.addEventListener("click", async () => {
const emailInput = document.getElementById('email');
const photoInput = document.getElementById('childPhoto');
const email = emailInput.value.trim();
const photo = photoInput.files[0];
if (!email || !photo) {
alert("Please enter your email and upload a photo.");
return;
}
const formData = new FormData();
formData.append("email", email);
formData.append("childPhoto", photo);
loadingIndicator.style.display = "block";
generateButton.disabled = true;
formWrapper.classList.add("blur-loading");
avatarPreview.innerHTML = "";
try {
const response = await fetch("https://helloyou-backend-karab123.replit.app/generate-avatar", {
method: "POST",
body: formData,
});
const result = await response.json();
loadingIndicator.style.display = "none";
generateButton.disabled = false;
formWrapper.classList.remove("blur-loading");
if (result.avatarUrl) {
avatarUrl = result.avatarUrl;
emailCaptured = email;
const img = document.createElement("img");
img.src = result.avatarUrl;
img.alt = "Generated Avatar";
avatarPreview.appendChild(img);
setTimeout(() => {
step2.style.display = "block";
step2.classList.add("slide-up");
}, 600);
} else {
alert("Avatar generation failed. Please try again.");
}
} catch (error) {
console.error("Error generating avatar:", error);
loadingIndicator.style.display = "none";
generateButton.disabled = false;
formWrapper.classList.remove("blur-loading");
alert("An error occurred while generating the avatar. Please try again.");
}
});
createStoryButton.addEventListener("click", async () => {
const childName = document.getElementById('childName').value.trim();
const childAge = document.getElementById('childAge').value.trim();
const theme = document.getElementById('theme-select').value;
if (!childName || !childAge || !theme) {
alert("Please fill out all fields.");
return;
}
storyLoadingIndicator.style.display = "block";
createStoryButton.disabled = true;
const payload = {
email: emailCaptured,
childName: childName,
childAge: childAge,
theme: theme,
avatarUrl: avatarUrl,
};
try {
const response = await fetch("https://helloyou-backend-karab123.replit.app/generate-story", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
});
const result = await response.json();
console.log("Story creation result:", result);
// After a short delay, redirect to Webflow
setTimeout(() => {
window.location.href = "https://yourdomain.webflow.io/create-book";
}, 2000);
} catch (error) {
console.error("Error creating story:", error);
storyLoadingIndicator.style.display = "none";
createStoryButton.disabled = false;
alert("An error occurred while creating your story. Please try again.");
}
});
});
</script>
</body>
</html>