270 lines
9.5 KiB
HTML
270 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
|
<meta name="description" content="Servant Hearts, Working for the Lord. The Biblically based job search board.">
|
|
<meta name="keywords" content="heartily, Christian jobs, Biblically based, christian job opportunities, Job openings in Christian organizations ">
|
|
<meta name="author" content="heartily">
|
|
<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">
|
|
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
|
|
<link rel="apple-touch-icon" href="{{ url_for('static', filename='heartily1.gif') }}">
|
|
</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 daily. Last update: {{ run_time }}</p>
|
|
<div class="sort-buttons">
|
|
<button id="sort-newest-button" class="sort-button" onclick="sortItems('newest')">Sort Newest</button>
|
|
<button id="sort-oldest-button" class="sort-button" onclick="sortItems('oldest')">Sort Oldest</button>
|
|
</div>
|
|
<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 class="post-date">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">1.0</a>.
|
|
Powered by <a href="https://shilohcode.com" target="_blank">Shiloh</a>.</p>
|
|
<div>
|
|
<p>
|
|
Support this project by donating XMR:
|
|
</p>
|
|
<p class="xmr-address">Address: 8AeYmDw246kVgKYsRPgGzGEK48dMUmrooXbpfCQqEqGZJJQe6J4xFZcW4ctyQy3Q6xQ6NziEHBDJxKy5gxv9D6JiQsqesfj</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Notification overlay -->
|
|
<div id="notification-overlay" class="notification-overlay">
|
|
<span id="notification-message"></span>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
// Function to sort the items based on post date
|
|
function sortItems(order) {
|
|
var items = Array.from(document.querySelectorAll(".listed-items"));
|
|
items.sort(function (a, b) {
|
|
var dateA = new Date(a.querySelector(".post-date").textContent);
|
|
var dateB = new Date(b.querySelector(".post-date").textContent);
|
|
|
|
if (order === "newest") {
|
|
return dateB - dateA;
|
|
} else if (order === "oldest") {
|
|
return dateA - dateB;
|
|
}
|
|
});
|
|
|
|
var itemList = document.getElementById("item-list");
|
|
itemList.innerHTML = ""; // Clear the current list
|
|
|
|
// Reappend the sorted items
|
|
items.forEach(function (item) {
|
|
itemList.appendChild(item);
|
|
});
|
|
}
|
|
|
|
|
|
// Define an array of placeholder texts
|
|
var placeholderTexts = [
|
|
"Search for jobs",
|
|
"Seize every task",
|
|
"Glorify the Lord with your work",
|
|
"Explore job listings",
|
|
"Search by job title or keywords",
|
|
"Labor diligently for the Lord",
|
|
"Make an eternal impact",
|
|
"Work as unto the Lord",
|
|
"Boldy share your testimony",
|
|
"Take a step of Faith",
|
|
"Discover joy in your work",
|
|
"Give Jesus your every hour",
|
|
// Add more placeholder texts as needed
|
|
];
|
|
|
|
// Get the search input element
|
|
var searchInput = document.querySelector(".search-input");
|
|
|
|
// Function to simulate typing effect for the placeholder text
|
|
function typePlaceholderText(text, index) {
|
|
if (index < text.length) {
|
|
searchInput.placeholder = text.substring(0, index + 1);
|
|
setTimeout(function() {
|
|
typePlaceholderText(text, index + 1);
|
|
}, 100); // Adjust the typing speed (milliseconds per character)
|
|
}
|
|
}
|
|
|
|
// Function to set a random placeholder text with typewriter effect
|
|
function setRandomPlaceholderText() {
|
|
var randomIndex = Math.floor(Math.random() * placeholderTexts.length);
|
|
var randomText = placeholderTexts[randomIndex];
|
|
typePlaceholderText(randomText, 0);
|
|
}
|
|
|
|
// Call the function initially to set a random placeholder text
|
|
setRandomPlaceholderText();
|
|
|
|
// Call the function periodically to change the placeholder text
|
|
setInterval(setRandomPlaceholderText, 5000); // Change the text every 5 seconds (adjust as desired)
|
|
|
|
// 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);
|
|
|
|
sortItems("newest");
|
|
</script>
|
|
</body>
|
|
</html>
|