<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="AI-Powered Event Management Solution for Perfect Event Planning">
<meta name="keywords" content="Event Management, Party Planner, Event Organizer, AI Planning">
<title>EventMaster Pro - AI-Powered Event Management</title>
<!-- Open Graph Tags for SEO -->
<meta property="og:title" content="EventMaster Pro">
<meta property="og:description" content="AI-Driven Event Management Solution">
<meta property="og:type" content="website">
<style>
/* Responsive CSS */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
}
body {
background: #f0f2f5;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.auth-forms, .event-form, .timeline {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-bottom: 2rem;
}
.form-group {
margin-bottom: 1.5rem;
}
label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
}
input, select, textarea {
width: 100%;
padding: 0.8rem;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
}
.timeline-item {
padding: 1rem;
background: #f8f9fa;
border-left: 4px solid #4CAF50;
margin-bottom: 1rem;
border-radius: 5px;
}
.button {
background: #4CAF50;
color: white;
padding: 1rem 2rem;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
}
@media (max-width: 768px) {
.container {
padding: 10px;
}
.grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<!-- Authentication Section -->
<div class="auth-forms">
<div id="signin-form">
<h2>Sign In</h2>
<form onsubmit="return handleSignIn(event)">
<div class="form-group">
<label>Email:</label>
<input type="email" required>
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" required>
</div>
<button type="submit" class="button">Sign In</button>
<p>Don't have an account? <a href="#" onclick="toggleAuthForms()">Sign Up</a></p>
</form>
</div>
<div id="signup-form" style="display: none;">
<h2>Sign Up</h2>
<form onsubmit="return handleSignUp(event)">
<div class="form-group">
<label>Name:</label>
<input type="text" required>
</div>
<div class="form-group">
<label>Email:</label>
<input type="email" required>
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" required>
</div>
<button type="submit" class="button">Create Account</button>
<p>Already have an account? <a href="#" onclick="toggleAuthForms()">Sign In</a></p>
</form>
</div>
</div>
<!-- Event Planning Form -->
<div class="event-form" style="display: none;">
<h2>Create Your Event</h2>
<form onsubmit="return generateEventPlan(event)">
<div class="grid">
<div class="form-group">
<label>Event Name:</label>
<input type="text" required>
</div>
<div class="form-group">
<label>Event Dates:</label>
<input type="datetime-local" id="start-time" required>
<input type="datetime-local" id="end-time" required>
</div>
</div>
<div class="grid">
<div class="form-group">
<label>Number of Guests:</label>
<input type="number" min="1" required>
</div>
<div class="form-group">
<label>Preferred Dishes:</label>
<select multiple>
<option>Vegetarian</option>
<option>Non-Vegetarian</option>
<option>Vegan</option>
<option>Gluten-Free</option>
</select>
</div>
</div>
<div class="form-group">
<label>Gathering Type:</label>
<label><input type="radio" name="gathering" value="indoor" required> Indoor</label>
<label><input type="radio" name="gathering" value="outdoor"> Outdoor</label>
</div>
<div class="form-group">
<label>Preferred Songs (comma separated):</label>
<textarea rows="4"></textarea>
</div>
<button type="submit" class="button">Generate AI Event Plan</button>
</form>
</div>
<!-- AI Generated Timeline -->
<div class="timeline" id="timeline" style="display: none;"></div>
</div>
<script>
// Authentication Logic
function toggleAuthForms() {
document.getElementById('signin-form').style.display =
document.getElementById('signin-form').style.display === 'none' ? 'block' : 'none';
document.getElementById('signup-form').style.display =
document.getElementById('signup-form').style.display === 'none' ? 'block' : 'none';
}
function handleSignIn(e) {
e.preventDefault();
document.querySelector('.event-form').style.display = 'block';
e.target.reset();
return false;
}
function handleSignUp(e) {
e.preventDefault();
toggleAuthForms();
return false;
}
// Event Planning Logic
function generateEventPlan(e) {
e.preventDefault();
const formData = {
eventName: e.target[0].value,
startTime: new Date(e.target[1].value),
endTime: new Date(e.target[2].value),
guests: e.target[3].value,
dishes: Array.from(e.target[4].selectedOptions).map(o => o.value),
gatheringType: document.querySelector('input[name="gathering"]:checked').value,
songs: e.target[7].value.split(',')
};
// AI Simulation
const duration = (formData.endTime - formData.startTime) / 3600000;
const timelineHTML = `
<h2>Your AI-Generated Event Plan</h2>
<div class="timeline-item">
<h3>Setup Phase (${formData.startTime.toLocaleTimeString()})</h3>
<p>Venue preparation with ${formData.gatheringType} setup</p>
</div>
<div class="timeline-item">
<h3>Guest Arrival (${new Date(formData.startTime.getTime() + 0.2*duration*3600000).toLocaleTimeString()})</h3>
<p>Welcome ${formData.guests} guests with appetizers: ${formData.dishes.join(', ')}</p>
</div>
<div class="timeline-item">
<h3>Main Event (${new Date(formData.startTime.getTime() + 0.3*duration*3600000).toLocaleTimeString()})</h3>
<p>Featured activities with custom playlist: ${formData.songs.slice(0,3).join(', ')}</p>
</div>
<div class="timeline-item">
<h3>Closing (${new Date(formData.endTime.getTime() - 0.2*duration*3600000).toLocaleTimeString()})</h3>
<p>Final remarks and guest departure coordination</p>
</div>
`;
document.getElementById('timeline').innerHTML = timelineHTML;
document.getElementById('timeline').style.display = 'block';
return false;
}
</script>
</body>
</html>
No comments:
Post a Comment