191 lines
6.2 KiB
HTML
191 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Heartily</title>
|
|
<link
|
|
rel="stylesheet"
|
|
href="{{ url_for('static', filename='style.css') }}"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
|
/>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="logo">
|
|
<a href="/" class="logo-link">
|
|
<img
|
|
src="{{ url_for('static', filename='heartily1.gif') }}"
|
|
alt="Heartily Logo"
|
|
class="logo-img"
|
|
/>
|
|
<p class="logo-name">Heartily</p>
|
|
<p>Col. 3:23</p>
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<form action="{{ url_for('search') }}" method="GET" class="search-form">
|
|
<input
|
|
type="text"
|
|
name="query"
|
|
placeholder="Search..."
|
|
class="search-input"
|
|
/>
|
|
<button type="submit" class="search-button">Search</button>
|
|
<a href="/" class="wrapper">
|
|
<span class="button-text">Refresh</span>
|
|
<span class="button-icon"><i class="far fa-heart"></i></span>
|
|
</a>
|
|
</form>
|
|
<h1>Latest Jobs:</h1>
|
|
<p>This list is updated hourly. Last update: {{ run_time }}</p>
|
|
<ul id="item-list">
|
|
{% for item in items %}
|
|
<li class="listed-items" {% if loop.index>
|
|
5 %}style="display: none;"{% endif %}>
|
|
<h2>{{ item.title }}</h2>
|
|
<p>Source: {{ item.source }}</p>
|
|
<p>Post Date: {{ item.pub_date }}</p>
|
|
<div class="list-container">
|
|
<a href="{{ item.link }}" target="_blank" class="wrapper">
|
|
<span class="button-text">Apply Now</span>
|
|
<span class="button-icon"><i class="far fa-heart"></i></span>
|
|
</a>
|
|
<form
|
|
action="{{ url_for('report') }}"
|
|
method="POST"
|
|
class="report-form"
|
|
>
|
|
<input type="hidden" name="title" value="{{ item.title }}" />
|
|
<input type="hidden" name="link" value="{{ item.link }}" />
|
|
<button type="submit" class="report-button">
|
|
<span class="button-text">Report</span>
|
|
<span class="button-icon">
|
|
<i class="fas fa-heart-circle-exclamation"></i>
|
|
</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
<button id="load-more-button" class="load-more-button" {% if items|length|int <= 5 %}style="display: none;"{% endif %}>Load More</button>
|
|
|
|
</div>
|
|
|
|
<button id="scroll-to-top-button" class="scroll-to-top-button">
|
|
<i class="fas fa-arrow-up"></i>
|
|
</button>
|
|
|
|
<footer>
|
|
<p>
|
|
© 2023 Heartily. All rights reserved. Version:
|
|
<a href="https://githaven.org/Shiloh/heartily" target="_blank">Beta</a>.
|
|
Powered by <a href="https://shilohcode.com" target="_blank">Shiloh</a>.
|
|
</p>
|
|
</footer>
|
|
|
|
<!-- Notification overlay -->
|
|
<div id="notification-overlay" class="notification-overlay">
|
|
<span id="notification-message"></span>
|
|
</div>
|
|
|
|
<script>
|
|
// JavaScript code for displaying the notification overlay
|
|
function showNotification(message) {
|
|
var overlay = document.getElementById("notification-overlay");
|
|
var notification = document.getElementById("notification-message");
|
|
notification.textContent = message;
|
|
overlay.style.display = "block";
|
|
setTimeout(function () {
|
|
overlay.style.display = "none";
|
|
}, 10000); // Display the notification for 10 seconds
|
|
}
|
|
|
|
// JavaScript code for handling the AJAX request and displaying the notification
|
|
var reportForms = document.getElementsByClassName("report-form");
|
|
Array.prototype.forEach.call(reportForms, function (form) {
|
|
form.addEventListener("submit", function (event) {
|
|
event.preventDefault(); // Prevent the form from submitting
|
|
|
|
// Create a new FormData object to send the form data
|
|
var formData = new FormData(form);
|
|
|
|
// Send the AJAX request
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "/report");
|
|
xhr.onreadystatechange = function () {
|
|
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
|
|
var response = JSON.parse(xhr.responseText);
|
|
showNotification(response.message); // Display the notification
|
|
}
|
|
};
|
|
xhr.send(formData);
|
|
});
|
|
});
|
|
|
|
// JavaScript code for handling load more button.
|
|
var itemList = document.getElementById("item-list");
|
|
var loadMoreButton = document.getElementById("load-more-button");
|
|
|
|
var itemsToShow = 5;
|
|
var totalItems = {{ items|length|tojson }};
|
|
|
|
function toggleLoadMoreButton() {
|
|
if (itemsToShow >= totalItems) {
|
|
loadMoreButton.style.display = "none";
|
|
} else {
|
|
loadMoreButton.style.display = "block";
|
|
}
|
|
}
|
|
|
|
function showAdditionalItems() {
|
|
var items = itemList.children;
|
|
for (var i = 0; i < totalItems; i++) {
|
|
if (i >= itemsToShow) {
|
|
items[i].style.display = "none";
|
|
} else {
|
|
items[i].style.display = "block";
|
|
}
|
|
}
|
|
}
|
|
|
|
function loadMoreItems() {
|
|
itemsToShow += 5;
|
|
showAdditionalItems();
|
|
toggleLoadMoreButton();
|
|
}
|
|
|
|
loadMoreButton.addEventListener("click", loadMoreItems);
|
|
|
|
// Show the initial set of items
|
|
showAdditionalItems();
|
|
toggleLoadMoreButton();
|
|
|
|
//javascript for handling the scroll to top button
|
|
var scrollToTopButton = document.getElementById("scroll-to-top-button");
|
|
|
|
function scrollToTop() {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: "smooth"
|
|
});
|
|
}
|
|
|
|
function toggleScrollToTopButton() {
|
|
if (window.pageYOffset > 100) {
|
|
scrollToTopButton.classList.add("show");
|
|
} else {
|
|
scrollToTopButton.classList.remove("show");
|
|
}
|
|
}
|
|
|
|
scrollToTopButton.addEventListener("click", scrollToTop);
|
|
window.addEventListener("scroll", toggleScrollToTopButton);
|
|
</script>
|
|
</body>
|
|
</html>
|