gamesearch/index.html
IdleEndeavor c8280bebf7 3.5.0
Redesign of Mobile UI

Ported Engine switcher over to mobile
Re-added link to Github page
Made the search bar and search logo more responsive and prominent
Updated ReadMe
2024-07-13 22:02:17 +01:00

162 lines
7.5 KiB
HTML

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rave Game Search</title>
<link rel="stylesheet" href="css/index.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta property="og:type" content="website">
<meta property="twitter:title" content="Rave Game Search">
<meta property="og:title" content="Rave Game Search">
<meta property="twitter:card" content="summary">
<meta property="twitter:description" content="Find the safest free download links to your favorite Video Games">
<meta property="og:description" content="Find the safest free download links to your favorite Video Games">
<meta property="twitter:image" content="https://ravegamesearch.pages.dev/img/ravesearch.png">
<meta property="og:image" content="https://ravegamesearch.pages.dev/img/ravesearch.png">
<meta property="description" content="Find the safest free download links to your favorite Video Games">
<link href="img/favicon.png" rel="shortcut icon">
<meta name="theme-color" content="#F63F4D">
</head>
<body>
<div class="container">
<!-- Engine Switcher -->
<div class="engine-swticher">
<a href="https://ravegamesearch.pages.dev">> Game Search</a>
<a href="https://ravebooksearch.com">Book Search</a>
<a href="https://ravesoftwaresearch.pages.dev">Software Search</a>
</div>
<div class="toggle-container">
<a href="https://ravegamesearch.pages.dev" id="primary" class="toggle-btn">Games</a>
<a href="https://ravebooksearch.com" class="toggle-btn">Books</a>
<a href="https://ravesoftwaresearch.pages.dev" class="toggle-btn">Software</a>
</div>
<!-- Notification Centre -->
<div class="engine-swticher-2">
<!-- First Item: Donation message and button-->
<div class="item">
<div id="donate-button-container">
<a class="tips">If you think this website has helped you, please consider donating...</a>
<div id="donate-button"></div>
<!-- Script for Donation button, provided by PayPal -->
<script src="https://www.paypalobjects.com/donate/sdk/donate-sdk.js" charset="UTF-8"></script>
<script>
PayPal.Donation.Button({
env:'production',
hosted_button_id:'XMFZ3K79YGDFG',
image: {
src:'https://www.paypalobjects.com/en_GB/i/btn/btn_donate_SM.gif',
alt:'Donate with PayPal button',
title:'PayPal - The safer, easier way to pay online!',
}
}).render('#donate-button');
</script>
</div>
<span class="close-btn">X</span>
</div>
<div class="item">
<span>It is recommended to use an AdBlocker such as uBlock Origin when visiting download pages.</span>
<span class="close-btn">X</span>
</div>
<div class="item">
<span>If the search result is a website homepage, it indicates that the website hosts the game, and you may need to search within the site to locate the download page.</span>
<span class="close-btn">X</span>
</div>
</div>
<!-- Notification Centre javascript, controls cross-refresh hiding of items -->
<script>
document.addEventListener("DOMContentLoaded", function() {
// Retrieve hidden items from localStorage
let hiddenItems = JSON.parse(localStorage.getItem("hiddenItems")) || [];
// Get all items
const items = document.querySelectorAll(".engine-swticher-2 .item");
// Loop through items and add 'hidden' class if in hiddenItems array
items.forEach(item => {
if (hiddenItems.includes(item.textContent.trim())) {
item.classList.add("hidden");
}
});
// Add click event listener to close buttons
const closeButtons = document.querySelectorAll(".engine-swticher-2 .close-btn");
closeButtons.forEach(button => {
button.addEventListener("click", function() {
const item = this.parentNode;
item.classList.add("hidden");
// Add item text to hiddenItems array
const itemName = item.textContent.trim();
if (!hiddenItems.includes(itemName)) {
hiddenItems.push(itemName);
}
// Save updated hiddenItems array to localStorage
localStorage.setItem("hiddenItems", JSON.stringify(hiddenItems));
});
});
});
</script>
<!-- Search Box, logo banner and advertisement-->
<div class="maindiv">
<div class="searchlogo">
<img id="searchlogo" class="searchlogo" src="img/search-logo.png" onclick="location.href='index.html';">
<!-- Script to cycle between banner images with a fade effect in between -->
<script>
var images = ['img/search-logo.png', 'img/search-logo-2.png'];
var index = 0;
var logo = document.getElementById("searchlogo");
function changeImage() {
logo.style.opacity = 0; // Start fade out
setTimeout(function() {
index = (index + 1) % images.length; // Loop back to the first image
logo.src = images[index];
logo.style.opacity = 1; // Fade back in
}, 1000); // Match this timeout with the CSS transition duration
}
setInterval(changeImage, 6000); // Changes image every 6 seconds
</script>
</div>
<!-- Search engine code, partially provided by Google -->
<script>
(function() {
var cx = "001315572920893299880:p3yigpygfny";
var gcse = document.createElement("script");
gcse.type = "text/javascript";
gcse.async = true;
gcse.src = "https://cse.google.com/cse.js?cx=" + cx;
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(gcse, s);
})();
window.onload = function()
{
var searchBox = document.getElementById("gsc-i-id1");
searchBox.placeholder="Search for your favourite Games";
searchBox.title="Rave Game Search Engine";
}
</script>
<gcse:search class="searchbox"></gcse:search>
</div>
</div>
<!-- Bottom Left Corner Box, formerly Games Found Counter -->
<div class="games-found">
<a></a>
</div>
<!-- Terms of Use, Privacy Policy and GitHub Link -->
<div class="terms">
<a href="https://github.com/IdleEndeavor/gamesearch">GitHub</a>
</div>
</body>
</html>