admin/34198-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

checkboxes

Browse Source
This commit is contained in:
Flatlogic Bot 2025-09-18 11:06:21 +00:00
parent 38881c7a8f
commit 416c5781de
3 changed files with 230 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
assets/js/main.js
View File

@ -1,13 +1,49 @@
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const beautifulForm = document.getElementById('beautiful-form'); const beautyVotes = [];
const funnyForm = document.getElementById('funny-form'); const funnyVotes = [];
const beautyInput = document.getElementById('website_number_beauty');
const funnyInput = document.getElementById('website_number_funny');
const toastLiveExample = document.getElementById('liveToast'); const toastLiveExample = document.getElementById('liveToast');
const toast = new bootstrap.Toast(toastLiveExample); const toast = new bootstrap.Toast(toastLiveExample);
document.querySelectorAll('.form-check-input[data-category]').forEach(checkbox => {
checkbox.addEventListener('change', function() {
const category = this.dataset.category;
const websiteNumber = this.dataset.websiteNumber;
const votes = (category === 'beauty') ? beautyVotes : funnyVotes;
const input = (category === 'beauty') ? beautyInput : funnyInput;
if (this.checked) {
if (votes.length >= 3) {
this.checked = false;
alert('You can only select up to 3 websites per category.');
return;
}
votes.push(websiteNumber);
} else {
const index = votes.indexOf(websiteNumber);
if (index > -1) {
votes.splice(index, 1);
}
}
votes.sort((a, b) => a - b);
input.value = votes.join(', ');
});
});
const handleFormSubmit = (form, event) => { const handleFormSubmit = (form, event) => {
event.preventDefault(); event.preventDefault();
const formData = new FormData(form); const formData = new FormData(form);
const data = Object.fromEntries(formData.entries()); const data = Object.fromEntries(formData.entries());
const votes = (data.category === 'beauty') ? beautyVotes : funnyVotes;
// Add the individual vote numbers to the data object for the backend
data.website_number_1 = votes[0] || '';
data.website_number_2 = votes[1] || '';
data.website_number_3 = votes[2] || '';
delete data.website_numbers; // remove the comma-separated string
fetch('submit_vote.php', { fetch('submit_vote.php', {
method: 'POST', method: 'POST',
@ -17,12 +53,23 @@ document.addEventListener('DOMContentLoaded', function () {
body: JSON.stringify(data), body: JSON.stringify(data),
}) })
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(result => {
if (data.success) { if (result.success) {
toast.show(); toast.show();
form.reset(); form.reset();
// Clear the votes and checkboxes for the submitted category
if (data.category === 'beauty') {
beautyVotes.length = 0;
document.querySelectorAll('input[data-category="beauty"]').forEach(cb => cb.checked = false);
beautyInput.value = '';
} else {
funnyVotes.length = 0;
document.querySelectorAll('input[data-category="funny"]').forEach(cb => cb.checked = false);
funnyInput.value = '';
}
} else { } else {
alert('Error: ' + data.error); alert('Error: ' + result.error);
} }
}) })
.catch((error) => { .catch((error) => {
@ -31,6 +78,6 @@ document.addEventListener('DOMContentLoaded', function () {
}); });
}; };
beautifulForm.addEventListener('submit', (event) => handleFormSubmit(beautifulForm, event)); document.getElementById('beautiful-form').addEventListener('submit', (event) => handleFormSubmit(event.target, event));
funnyForm.addEventListener('submit', (event) => handleFormSubmit(funnyForm, event)); document.getElementById('funny-form').addEventListener('submit', (event) => handleFormSubmit(event.target, event));
}); });

206
index.php
View File

@ -23,30 +23,174 @@
<div class="card-body"> <div class="card-body">
<h2 class="card-title text-center">Websites for Voting</h2> <h2 class="card-title text-center">Websites for Voting</h2>
<ol class="list-group list-group-numbered"> <ol class="list-group list-group-numbered">
<li class="list-group-item"><a href="https://counterwars.dev.flatlogic.app" target="_blank">https://counterwars.dev.flatlogic.app</a></li> <li class="list-group-item d-flex justify-content-between align-items-center">
<li class="list-group-item"><a href="https://justvibing.dev.flatlogic.app" target="_blank">https://justvibing.dev.flatlogic.app</a></li> <a href="https://counterwars.dev.flatlogic.app" target="_blank">https://counterwars.dev.flatlogic.app</a>
<li class="list-group-item"><a href="https://flower-shop.dev.flatlogic.app" target="_blank">https://flower-shop.dev.flatlogic.app</a></li> <div class="form-check-inline">
<li class="list-group-item"><a href="https://pizzaslicer.dev.flatlogic.app" target="_blank">https://pizzaslicer.dev.flatlogic.app</a></li> <input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="1"><label class="form-check-label">Beauty</label>
<li class="list-group-item"><a href="https://vm-34156.dev.flatlogic.app" target="_blank">https://vm-34156.dev.flatlogic.app</a></li> <input class="form-check-input" type="checkbox" data-category="funny" data-website-number="1"><label class="form-check-label">Funny</label>
<li class="list-group-item"><a href="https://digital-museum.dev.flatlogic.app" target="_blank">https://digital-museum.dev.flatlogic.app</a></li> </div>
<li class="list-group-item"><a href="https://sell-product.dev.flatlogic.app" target="_blank">https://sell-product.dev.flatlogic.app</a></li> </li>
<li class="list-group-item"><a href="https://my-portfolio.dev.flatlogic.app" target="_blank">https://my-portfolio.dev.flatlogic.app</a></li> <li class="list-group-item d-flex justify-content-between align-items-center">
<li class="list-group-item"><a href="https://project-manager.dev.flatlogic.app" target="_blank">https://project-manager.dev.flatlogic.app</a></li> <a href="https://justvibing.dev.flatlogic.app" target="_blank">https://justvibing.dev.flatlogic.app</a>
<li class="list-group-item"><a href="https://codeninja.dev.flatlogic.app" target="_blank">https://codeninja.dev.flatlogic.app</a></li> <div class="form-check-inline">
<li class="list-group-item"><a href="https://vibecoder-lab.dev.flatlogic.app" target="_blank">https://vibecoder-lab.dev.flatlogic.app</a></li> <input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="2"><label class="form-check-label">Beauty</label>
<li class="list-group-item"><a href="https://check-grammar.dev.flatlogic.app" target="_blank">https://check-grammar.dev.flatlogic.app</a></li> <input class="form-check-input" type="checkbox" data-category="funny" data-website-number="2"><label class="form-check-label">Funny</label>
<li class="list-group-item"><a href="https://magicv.dev.flatlogic.app" target="_blank">https://magicv.dev.flatlogic.app</a></li> </div>
<li class="list-group-item"><a href="https://personal-landing-page.dev.flatlogic.app" target="_blank">https://personal-landing-page.dev.flatlogic.app</a></li> </li>
<li class="list-group-item"><a href="https://fern.dev.flatlogic.app" target="_blank">https://fern.dev.flatlogic.app</a></li> <li class="list-group-item d-flex justify-content-between align-items-center">
<li class="list-group-item"><a href="https://todo.dev.flatlogic.app" target="_blank">https://todo.dev.flatlogic.app</a></li> <a href="https://flower-shop.dev.flatlogic.app" target="_blank">https://flower-shop.dev.flatlogic.app</a>
<li class="list-group-item"><a href="https://hirebridge.dev.flatlogic.app" target="_blank">https://hirebridge.dev.flatlogic.app</a></li> <div class="form-check-inline">
<li class="list-group-item"><a href="https://ice-cream-shop.dev.flatlogic.app" target="_blank">https://ice-cream-shop.dev.flatlogic.app</a></li> <input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="3"><label class="form-check-label">Beauty</label>
<li class="list-group-item"><a href="https://snake.dev.flatlogic.app" target="_blank">https://snake.dev.flatlogic.app</a></li> <input class="form-check-input" type="checkbox" data-category="funny" data-website-number="3"><label class="form-check-label">Funny</label>
<li class="list-group-item"><a href="https://mindful-garden.dev.flatlogic.app" target="_blank">https://mindful-garden.dev.flatlogic.app</a></li> </div>
<li class="list-group-item"><a href="https://vm-34034.dev.flatlogic.app" target="_blank">https://vm-34034.dev.flatlogic.app</a></li> </li>
<li class="list-group-item"><a href="https://memory-flip.dev.flatlogic.app" target="_blank">https://memory-flip.dev.flatlogic.app</a></li> <li class="list-group-item d-flex justify-content-between align-items-center">
<li class="list-group-item"><a href="https://nestboard.dev.flatlogic.app" target="_blank">https://nestboard.dev.flatlogic.app</a></li> <a href="https://pizzaslicer.dev.flatlogic.app" target="_blank">https://pizzaslicer.dev.flatlogic.app</a>
<li class="list-group-item"><a href="https://test-web.dev.flatlogic.app" target="_blank">https://test-web.dev.flatlogic.app</a></li> <div class="form-check-inline">
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="4"><label class="form-check-label">Beauty</label>
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="4"><label class="form-check-label">Funny</label>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<a href="https://vm-34156.dev.flatlogic.app" target="_blank">https://vm-34156.dev.flatlogic.app</a>
<div class="form-check-inline">
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="5"><label class="form-check-label">Beauty</label>
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="5"><label class="form-check-label">Funny</label>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<a href="https://digital-museum.dev.flatlogic.app" target="_blank">https://digital-museum.dev.flatlogic.app</a>
<div class="form-check-inline">
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="6"><label class="form-check-label">Beauty</label>
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="6"><label class="form-check-label">Funny</label>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<a href="https://sell-product.dev.flatlogic.app" target="_blank">https://sell-product.dev.flatlogic.app</a>
<div class="form-check-inline">
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="7"><label class="form-check-label">Beauty</label>
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="7"><label class="form-check-label">Funny</label>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<a href="https://my-portfolio.dev.flatlogic.app" target="_blank">https://my-portfolio.dev.flatlogic.app</a>
<div class="form-check-inline">
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="8"><label class="form-check-label">Beauty</label>
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="8"><label class="form-check-label">Funny</label>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<a href="https://project-manager.dev.flatlogic.app" target="_blank">https://project-manager.dev.flatlogic.app</a>
<div class="form-check-inline">
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="9"><label class="form-check-label">Beauty</label>
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="9"><label class="form-check-label">Funny</label>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<a href="https://codeninja.dev.flatlogic.app" target="_blank">https://codeninja.dev.flatlogic.app</a>
<div class="form-check-inline">
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="10"><label class="form-check-label">Beauty</label>
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="10"><label class="form-check-label">Funny</label>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<a href="https://vibecoder-lab.dev.flatlogic.app" target="_blank">https://vibecoder-lab.dev.flatlogic.app</a>
<div class="form-check-inline">
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="11"><label class="form-check-label">Beauty</label>
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="11"><label class="form-check-label">Funny</label>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<a href="https://check-grammar.dev.flatlogic.app" target="_blank">https://check-grammar.dev.flatlogic.app</a>
<div class="form-check-inline">
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="12"><label class="form-check-label">Beauty</label>
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="12"><label class="form-check-label">Funny</label>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<a href="https://magicv.dev.flatlogic.app" target="_blank">https://magicv.dev.flatlogic.app</a>
<div class="form-check-inline">
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="13"><label class="form-check-label">Beauty</label>
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="13"><label class="form-check-label">Funny</label>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<a href="https://personal-landing-page.dev.flatlogic.app" target="_blank">https://personal-landing-page.dev.flatlogic.app</a>
<div class="form-check-inline">
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="14"><label class="form-check-label">Beauty</label>
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="14"><label class="form-check-label">Funny</label>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<a href="https://fern.dev.flatlogic.app" target="_blank">https://fern.dev.flatlogic.app</a>
<div class="form-check-inline">
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="15"><label class="form-check-label">Beauty</label>
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="15"><label class="form-check-label">Funny</label>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<a href="https://todo.dev.flatlogic.app" target="_blank">https://todo.dev.flatlogic.app</a>
<div class="form-check-inline">
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="16"><label class="form-check-label">Beauty</label>
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="16"><label class="form-check-label">Funny</label>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<a href="https://hirebridge.dev.flatlogic.app" target="_blank">https://hirebridge.dev.flatlogic.app</a>
<div class="form-check-inline">
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="17"><label class="form-check-label">Beauty</label>
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="17"><label class="form-check-label">Funny</label>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<a href="https://ice-cream-shop.dev.flatlogic.app" target="_blank">https://ice-cream-shop.dev.flatlogic.app</a>
<div class="form-check-inline">
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="18"><label class="form-check-label">Beauty</label>
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="18"><label class="form-check-label">Funny</label>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<a href="https://snake.dev.flatlogic.app" target="_blank">https://snake.dev.flatlogic.app</a>
<div class="form-check-inline">
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="19"><label class="form-check-label">Beauty</label>
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="19"><label class="form-check-label">Funny</label>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<a href="https://mindful-garden.dev.flatlogic.app" target="_blank">https://mindful-garden.dev.flatlogic.app</a>
<div class="form-check-inline">
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="20"><label class="form-check-label">Beauty</label>
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="20"><label class="form-check-label">Funny</label>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<a href="https://vm-34034.dev.flatlogic.app" target="_blank">https://vm-34034.dev.flatlogic.app</a>
<div class="form-check-inline">
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="21"><label class="form-check-label">Beauty</label>
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="21"><label class="form-check-label">Funny</label>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<a href="https://memory-flip.dev.flatlogic.app" target="_blank">https://memory-flip.dev.flatlogic.app</a>
<div class="form-check-inline">
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="22"><label class="form-check-label">Beauty</label>
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="22"><label class="form-check-label">Funny</label>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<a href="https://nestboard.dev.flatlogic.app" target="_blank">https://nestboard.dev.flatlogic.app</a>
<div class="form-check-inline">
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="23"><label class="form-check-label">Beauty</label>
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="23"><label class="form-check-label">Funny</label>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<a href="https://test-web.dev.flatlogic.app" target="_blank">https://test-web.dev.flatlogic.app</a>
<div class="form-check-inline">
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="24"><label class="form-check-label">Beauty</label>
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="24"><label class="form-check-label">Funny</label>
</div>
</li>
</ol> </ol>
</div> </div>
</div> </div>
@ -64,10 +208,8 @@
<input type="text" class="form-control" id="beautiful-name" name="voter_name" required> <input type="text" class="form-control" id="beautiful-name" name="voter_name" required>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Website Numbers (1-30)</label> <label for="website_number_beauty" class="form-label">Selected Websites (up to 3)</label>
<input type="number" class="form-control mb-2" name="website_number_1" min="1" max="30" required> <input type="text" class="form-control" id="website_number_beauty" name="website_numbers" readonly required>
<input type="number" class="form-control mb-2" name="website_number_2" min="1" max="30" required>
<input type="number" class="form-control" name="website_number_3" min="1" max="30" required>
</div> </div>
<input type="hidden" name="category" value="beauty"> <input type="hidden" name="category" value="beauty">
<button type="submit" class="btn btn-primary">Submit Votes</button> <button type="submit" class="btn btn-primary">Submit Votes</button>
@ -86,10 +228,8 @@
<input type="text" class="form-control" id="funny-name" name="voter_name" required> <input type="text" class="form-control" id="funny-name" name="voter_name" required>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Website Numbers (1-30)</label> <label for="website_number_funny" class="form-label">Selected Websites (up to 3)</label>
<input type="number" class="form-control mb-2" name="website_number_1" min="1" max="30" required> <input type="text" class="form-control" id="website_number_funny" name="website_numbers" readonly required>
<input type="number" class="form-control mb-2" name="website_number_2" min="1" max="30" required>
<input type="number" class="form-control" name="website_number_3" min="1" max="30" required>
</div> </div>
<input type="hidden" name="category" value="funny"> <input type="hidden" name="category" value="funny">
<button type="submit" class="btn btn-secondary">Submit Votes</button> <button type="submit" class="btn btn-secondary">Submit Votes</button>
@ -118,6 +258,6 @@
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/main.js"></script> <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
</body> </body>
</html> </html>

7
submit_vote.php
View File

@ -29,11 +29,8 @@ if (!$data) {
$voterName = $data['voter_name'] ?? ''; $voterName = $data['voter_name'] ?? '';
$category = $data['category'] ?? ''; $category = $data['category'] ?? '';
$website_numbers = [ $website_numbers_str = $data['website_numbers'] ?? '';
$data['website_number_1'] ?? 0, $website_numbers = !empty($website_numbers_str) ? explode(',', $website_numbers_str) : [];
$data['website_number_2'] ?? 0,
$data['website_number_3'] ?? 0,
];
if (empty($voterName) || empty($category) || !in_array($category, ['beauty', 'funny'])) { if (empty($voterName) || empty($category) || !in_array($category, ['beauty', 'funny'])) {
echo json_encode(['success' => false, 'error' => 'Invalid data provided.']); echo json_encode(['success' => false, 'error' => 'Invalid data provided.']);