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
|
{% extends "base.html" %}
{% load static %}
{% block extra_css %}
<style>
.celebration-container {
position: relative;
height: 500px;
overflow: hidden;
background-color: white;
}
.letter {
position: absolute;
font-size: 4rem;
font-weight: bold;
opacity: 1;
bottom: 100px;
z-index: 1;
transform-origin: center bottom;
}
.gift-box {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
bottom: 0px;
transform: translateX(-50%);
border-radius: 5px;
border: 1px solid darkgray;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
z-index: 5;
background-size: 100px;
background-image: url({% static 'images/AL_circle_logo_black_100x100.png' %});
}
.gift-box::before {
content: '';
position: absolute;
width: 120px;
height: 25px;
background: darkgray;
top: -15px;
left: -10px;
border-radius: 5px;
z-index: 6;
}
@keyframes spray {
0% {
transform: translate(0, 0) rotate(0deg);
opacity: 1;
}
40% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
{% endblock %}
{% block content %}
<div class="celebration-container">
<div class="gift-box"></div>
</div>
<div class="row justify-content-center my-5">
<div class="col-lg-12 text-center">
<h2 class="display-4 font-weight-bolder my-3">
Thanks for signing up!
</h2>
<div>
<p class="mb-4 fs-5">
We are very excited to have you {{ email }} join us at Alphabet Learning!
You will be updated before we are due to go live (this is currently estimated to be Spring 2025).
Once we are live we will also send you the <strong>FREE</strong> resource credits AND a <strong>50% discount</strong>.
As you're an early bird, tell your friends so that they too could benefit from these exclusive offers.
</p>
<p class="mb-4 fs-5">
If you have any ideas, suggestions or requests please don’t hesitate to let us know at hello@alphabetlearning.com We would love to hear from you!
</p>
<p class="mb-4 fs-5">
Best wishes,
</p>
<p class="mb-4 fs-5">
The Alphabet Learning Team
</p>
</div>
</div>
</div>
<script>
function initCelebration() {
const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
const colors = ['#ff5258', '#ff9d3e', '#ffd850', '#2dc62b', '#197ceb', '#f19de0', '#9472eb', '#24dabc'];
const container = document.querySelector('.celebration-container');
const totalLetters = 420;
function createSpray() {
for(let i = 0; i < totalLetters; i++) {
setTimeout(() => {
const letter = document.createElement('div');
letter.className = 'letter';
letter.textContent = letters[Math.floor(Math.random() * letters.length)];
letter.style.color = colors[Math.floor(Math.random() * colors.length)];
// Calculate spray angle (-60 to 60 degrees)
const angle = (Math.random() * 120 - 60) * (Math.PI / 180);
const speed = 200 + Math.random() * 200; // Random speed for variety
// Tighter initial spread at the source
const initialSpread = Math.random() * 10 - 5;
letter.style.left = `calc(50% + ${initialSpread}px)`;
// Calculate trajectory
const duration = 2 + Math.random() * 0.5; // 1-1.5s duration
const xVelocity = Math.sin(angle) * speed;
const yVelocity = Math.cos(angle) * speed + 200; // Adjusted to ensure letters fall below their source level
const gravity = 500; // Pixels per second squared
// Create custom animation
const animation = letter.animate([
{ transform: 'translate(0, 0) rotate(0deg)' },
{ transform: `translate(${xVelocity}px, ${-yVelocity}px) rotate(${360 + Math.random() * 360}deg)`,
offset: 0.6 },
{ transform: `translate(${xVelocity * 1.2}px, 0px) rotate(${720 + Math.random() * 360}deg)` }
], {
duration: duration * 2000,
easing: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
fill: 'forwards'
});
container.appendChild(letter);
// Remove letter after animation
animation.onfinish = () => letter.remove();
}, i * 10); // Stagger creation slightly for more natural look
}
}
// Create the spray once
createSpray();
}
document.addEventListener('DOMContentLoaded', initCelebration);
window.onload = initCelebration;
</script>
{% endblock content %}
{% block extra_js %}
{% endblock %}
|
