-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
203 lines (185 loc) · 9.29 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plan Your Perfect Valentine's Date</title>
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="icon" type="image/png" href="favicon.png">
<!-- Dynamic meta tags for social sharing -->
<meta property="og:title" content="Plan Your Perfect Valentine's Date 💝">
<meta property="og:description"
content="Create and share your perfect Valentine's date plan! Choose your ideal time, attire, cuisine, and dessert.">
<meta property="og:type" content="website">
<meta property="og:image" content="">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<link rel="stylesheet" href="styles.css?v=2">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script src="js/animations.js"></script>
</head>
<body>
<div class="container">
<a href="index.html" class="home-button" title="Home">
<svg class="home-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
<polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
</a>
<main>
<h1 class="title">Plan Your Perfect Valentine's Date ❤️</h1>
<p class="subtitle text-center">Create and share your perfect date plan! 💝</p>
<div id="capture" class="choices-container">
<div id="choicesList">
<!-- Choices will be populated by JavaScript -->
</div>
<div class="notes-container">
<label for="notes" class="notes-label">Add your personal touch ✨</label>
<textarea id="notes" class="notes-input"
placeholder="Add any special notes or messages for your date..."></textarea>
</div>
</div>
<div class="button-container">
<button id="resetButton" class="cta-button reset-button">Start Over</button>
<button id="shareButton" class="cta-button share-button">Download Image</button>
</div>
</main>
</div>
<div class="copy-feedback">
<p>Image downloaded!</p>
</div>
<div class="loading-overlay">
<div class="loading-hearts">
<div class="loading-heart">❤️</div>
<div class="loading-heart">❤️</div>
<div class="loading-heart">❤️</div>
</div>
<div class="loading-text">Creating your perfect date plan...</div>
</div>
<script src="js/constants.js"></script>
<script src="js/app.js"></script>
<script>
document.addEventListener('DOMContentLoaded', async () => {
const choicesList = document.getElementById('choicesList');
const choices = choiceManager.getAllChoices();
const buttonContainer = document.querySelector('.button-container');
const notesInput = document.getElementById('notes');
// Load saved notes
notesInput.value = choiceManager.getNotes();
// Save notes when changed
notesInput.addEventListener('input', () => {
choiceManager.saveNotes(notesInput.value);
});
// Check if there are any choices
if (Object.keys(choices).length === 0) {
choicesList.innerHTML = `
<div class="no-choices">
<svg class="empty-state-icon" width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
<h2>Start Planning Your Perfect Date!</h2>
<p>Create your personalized Valentine's date plan by selecting your preferences for time, attire, cuisine, and dessert.</p>
<a href="topics/time.html" class="cta-button">Begin Your Journey ✨</a>
</div>
`;
buttonContainer.style.display = 'none';
document.querySelector('.notes-container').style.display = 'none';
return;
}
// Generate choice cards
const categoryOrder = ['time', 'attire', 'cuisine', 'dessert'];
const sortedChoices = categoryOrder
.filter(category => choices[category])
.map(category => [category, choices[category]]);
// Simplified image loading
choicesList.innerHTML = sortedChoices
.map(([topic, choice]) => {
if (topic === 'time') {
const timeInfo = TIME_DISPLAYS[choice];
return `
<div class="choice-card">
<div class="time-display-share">
<div class="time">${timeInfo.time}</div>
<div class="subtext">${timeInfo.subtext}</div>
</div>
<div class="choice-info">
<h3>${CATEGORIES[topic]}</h3>
<p>${timeInfo.subtext}</p>
</div>
</div>
`;
} else {
return `
<div class="choice-card">
<img src="${IMAGES[choice]}" alt="${DESCRIPTIONS[topic][choice]}" crossorigin="anonymous">
<div class="choice-info">
<h3>${CATEGORIES[topic]}</h3>
<p>${DESCRIPTIONS[topic][choice]}</p>
</div>
</div>
`;
}
})
.join('');
// Handle share button
document.getElementById('shareButton').addEventListener('click', async () => {
const button = document.getElementById('shareButton');
const feedback = document.querySelector('.copy-feedback');
const loadingOverlay = document.querySelector('.loading-overlay');
button.disabled = true;
loadingOverlay.classList.add('visible');
if (!confirm('Would you like to download your Valentine\'s date plan as an image?')) {
loadingOverlay.classList.remove('visible');
button.disabled = false;
return;
}
try {
// Generate image from choices
const element = document.getElementById('capture');
const canvas = await html2canvas(element, {
useCORS: true,
allowTaint: true,
backgroundColor: '#ffffff',
scale: window.devicePixelRatio * 2,
logging: false,
imageTimeout: 15000,
onclone: function (clonedDoc) {
Array.from(clonedDoc.images).forEach(img => {
img.crossOrigin = 'anonymous';
});
}
});
// Convert canvas to blob and save using FileSaver
canvas.toBlob(function (blob) {
saveAs(blob, 'valentines-date-plan.png');
feedback.querySelector('p').textContent = 'Your date plan has been downloaded! ✨';
showHeartAnimation();
feedback.classList.add('visible');
setTimeout(() => {
feedback.classList.remove('visible');
}, 3000);
});
} catch (error) {
alert('Failed to generate image. Please try again.');
} finally {
loadingOverlay.classList.remove('visible');
button.disabled = false;
}
});
// Handle reset button
document.getElementById('resetButton').addEventListener('click', () => {
if (confirm('Are you sure you want to start over? This will clear all your current choices.')) {
choiceManager.clearChoices();
}
});
});
</script>
</body>
</html>