-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
155 lines (129 loc) · 5.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teacher's Day Poster</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="poster-container">
<img id="poster" src="poster.jpg" alt="Teacher's Day Poster">
<div id="hearts-container"></div>
<div id="wishes-container"></div>
</div>
<button id="wishButton">Send a Wish</button>
<!-- Popup form container -->
<div id="wishFormContainer" class="wish-form-container">
<div class="wish-form">
<h2>Send Your Wish</h2>
<input type="text" id="nameInput" placeholder="Your Name" required>
<input type="text" id="wishInput" placeholder="Your Wish" required>
<button id="submitWishButton">Submit Wish</button>
<button id="closeFormButton">Close</button>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/9.6.7/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.7/firebase-database-compat.js"></script>
<script>
// Variable to store the offensive words array
// Add your firebaseConfig here:
const firebaseConfig = {
apiKey: "<your apiKey>",
authDomain: "<your authDomain>",
databaseURL: "<your database URL>",
projectId: "<your projectID>",
storageBucket: "<your storageBucket>",
messagingSenderId: "<your messagingSenderId>",
appId: "<your appId>",
measurementId: "your measurementId"
};
firebase.initializeApp(firebaseConfig);
// Firebase initialization (You should already have this part)
const db = firebase.database();
const wishFormContainer = document.querySelector('.wish-form-container');
const wishButton = document.getElementById('wishButton');
const closeFormButton = document.getElementById('closeFormButton');
wishButton.addEventListener('click', () => {
wishFormContainer.classList.remove('hide');
wishFormContainer.classList.add('show');
});
closeFormButton.addEventListener('click', () => {
wishFormContainer.classList.remove('show');
wishFormContainer.classList.add('hide');
// Delay hiding the form after the animation completes
setTimeout(() => {
wishFormContainer.style.display = 'none';
}, 300); // Match with animation duration
});
// Show form when "Send a Wish" button is clicked
document.getElementById("wishButton").addEventListener("click", () => {
document.getElementById("wishFormContainer").style.display = "flex";
});
// Close form when "Close" button is clicked
document.getElementById("closeFormButton").addEventListener("click", () => {
document.getElementById("wishFormContainer").style.display = "none";
});
// Submit wish and close form
document.getElementById("submitWishButton").addEventListener("click", () => {
const name = document.getElementById("nameInput").value;
const wish = document.getElementById("wishInput").value;
if (name && wish) {
const wishData = {
name,
text: wish,
x: Math.random() * window.innerWidth,
y: Math.random() * window.innerHeight
};
db.ref("wishes").push(wishData);
displayWish(wishData); // Display the wish on the screen
document.getElementById("wishFormContainer").style.display = "none"; // Hide form
} else {
alert("Please enter both your name and your wish.");
}
});
// Function to display the wish on the screen
function displayWish(wishData) {
const wishContainer = document.getElementById("wishes-container");
const wishElement = document.createElement("div");
wishElement.className = "wish";
// Get poster dimensions and set an inner boundary
const poster = document.getElementById("poster");
const padding = 20; // Adjust the padding value as needed
const posterWidth = poster.offsetWidth;
const posterHeight = poster.offsetHeight;
const maxX = posterWidth - padding;
const maxY = posterHeight - padding;
const posX = Math.random() * (maxX - padding * 2) + padding;
const posY = Math.random() * (maxY - padding * 2) + padding;
wishElement.style.top = `${posY}px`;
wishElement.style.left = `${posX}px`;
wishElement.innerText = `${wishData.name}: ${wishData.text}`;
wishContainer.appendChild(wishElement);
}
// Listen for new wishes in Firebase and add them to the page
db.ref("wishes").on("child_added", (snapshot) => {
const wishData = snapshot.val();
displayWish(wishData);
});
// Heart animation when clicking anywhere on the document
document.addEventListener('click', function(event) {
const poster = document.querySelector('.poster-container'); // Get the poster container element
const rect = poster.getBoundingClientRect(); // Get the position of the poster on the page
// Calculate the position of the mouse relative to the poster container
const mouseX = event.clientX - rect.left;
const mouseY = event.clientY - rect.top;
const heart = document.createElement('div');
heart.className = 'heart';
heart.innerText = '💖';
heart.style.left = `${mouseX - 15}px`; // Center the heart on the click point
heart.style.top = `${mouseY - 15}px`; // Center the heart on the click point
document.getElementById('hearts-container').appendChild(heart);
// Remove heart after animation duration
setTimeout(() => {
heart.remove();
}, 4000); // Matches heart animation duration
});
</script>
</body>
</html>