Mirrors/gamesearch
1
0
Fork 0
mirror of https://github.com/IdleEndeavor/gamesearch.git synced 2025-04-29 22:24:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

3.6.0

Browse Source 
Updated engine switcher on desktop
Minor tweaks to search bar and results
Updated classes and ids for easier editing and reference in the future
Updated and simplified meta-tags
This commit is contained in:
IdleEndeavor 2024-07-14 13:50:39 +01:00
parent dcbaefe776
commit dea683022f
2 changed files with 117 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
css/index.css
View File

@ -25,7 +25,7 @@ body {
height: 100%;
}
/* Search Bar and Logo Container Div */
/* Search Bar and Logo Container */
.maindiv {
margin: auto;
position: relative;
@ -62,17 +62,64 @@ body {
margin: 10px;
top: 0;
left: 0;
animation: 0.5s ease-out 0s 1 slideInFromTop;
}
.engine-swticher a {
padding: 5px;
font-size: 20px;
font-size: 15px;
color: var(--text-color);
text-decoration: none;
}
#primary {
color: var(--primary-color);
font-size: 20px;
}
.engine-swticher a:hover {
color: var(--secondary-color);
font-size: 20px;
}
/* Mobile engine switcher */
.m-engine-switcher {
display: none; /* Initially hide the toggle container */
position: absolute;
justify-content: center;
top: 15px;
left: 50%;
transform: translateX(-50%);
border-radius: 50px;
z-index: 1000;
width: 80%;
padding: 0 10px;
}
.toggle-btn {
display: inline-block;
padding: 10px 20px;
color: var(--text-color);
text-decoration: none;
border-radius: 20px;
border-width: 5px;
transition: background-color 0.3s ease;
text-align: center;
box-sizing: border-box;
}
#m-primary {
background-color: var(--primary-color);
color: var(--text-color);
box-shadow: 0 0 10px black;
}
.toggle-btn:hover {
background-color: var(--secondary-color);
}
/* Notification Center */
.engine-swticher-2 {
.notification-zone {
position: fixed;
margin-top: 15px;
margin-right: 10px;
@ -83,7 +130,7 @@ body {
z-index: 1000; /* Ensure it is on top of other elements */
}
.engine-swticher-2 .item {
.notification-zone .item {
position: relative;
color: var(--text-color); /* Text color */
padding: 10px;
@ -94,13 +141,14 @@ body {
width: 100%; /* Full width of the container */
box-sizing: border-box; /* Include padding and border in the width */
display: block; /* Ensure items are initially visible */
box-shadow: 0 0 10px black;
}
.engine-swticher-2 .item.hidden {
.notification-zone .item.hidden {
display: none; /* Hide items with the 'hidden' class */
}
.engine-swticher-2 .item .close-btn {
.notification-zone .item .close-btn {
position: absolute;
top: 5px;
right: 5px;
@ -113,8 +161,9 @@ body {
}
/* Corner Box */
.games-found {
.corner-box {
display: flex;
max-width: 20%;
bottom: 0;
left: 0;
flex-direction: column;
@ -124,7 +173,7 @@ body {
position: fixed;
}
.games-found a {
.corner-box a {
padding: 5px;
font-size: 16px;
width: 20%;
@ -149,28 +198,35 @@ body {
text-decoration: none;
}
.terms a:hover {
color: var(--secondary-color);
font-size: 20px;
}
/* Search Box */
/* search button */
.gsc-search-button .gsc-search-button-v2 {
border-radius: 50%;
border-color: var(--primary-color);
background-color: var(--primary-color);
height: 45px;
width: 45px;
height: 50px;
width: 50px;
margin: auto;
padding:10px !important;
box-shadow: 0 0 10px black;
}
/* search input box */
/* search input box, includes input field */
.gsc-input-box input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
border-radius: 20px !important; /* rounded corner */
border-color: var(--primary-color) !important;
border-width: 5px !important;
background-color: var(--bg-color) !important; /* inner background colour */
color: var(--text-color);
font-family: 'Roboto';
font-size: 20px;
}
/* search input box, excludes input field */
.gsc-input-box, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
border-radius: 50px !important; /* rounded corner */
border-color: var(--primary-color) !important;
border-width: 5px !important;
}
/* searchbox outer shadow */
.gsc-input-box {
box-shadow: 0 0 10px black;
@ -180,7 +236,6 @@ body {
background-color: transparent !important;
border-color: transparent !important;
}
/* gets rid of 'x results in x seconds' text */
.gsc-result-info {
display: none;
@ -189,11 +244,6 @@ body {
.gsc-thumbnail {
display: none;
}
/* results pagination design */
.gsc-cursor-page {
font-size: 1.5em;
padding: 5px 10px !important;
}
/* gets rid of description gathered from indexed results */
.gs-snippet {
display: none;
@ -207,15 +257,10 @@ body {
display: none;
}
/* colours result titles white (including visited results) */
.gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b {
.gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b, a.gs-title:visited {
color: var(--text-color) !important;
font-size: 20px;
}
/* styles URL under result titles */
.gs-promotion .gs-visibleUrl, .gs-webResult .gs-visibleUrl {
color: green !important;
font-size: 15px;
}
/* colouring of search result background and border */
.gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
background-color: var(--bg-color) !important;
@ -236,7 +281,11 @@ body {
padding: 5px 10px !important;
margin: 5px;
}
/* results pagination design */
.gsc-cursor-page {
font-size: 1.5em;
padding: 5px 10px !important;
}
/* Styles active page pagination switcher */
.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
border-color: var(--primary-color) !important;
@ -275,32 +324,26 @@ body {
border: none !important;
border-bottom: none !important;
}
/* changes colour of scrollable gradient in mobile view */
.gsc-refinementsGradient {
background: linear-gradient(to left,var(--primary-color),rgba(255,255,255,0)) !important;
}
/* styles inactive filter tabs */
/* styles inactive refinement tabs */
.gsc-tabHeader.gsc-tabhInactive, .gsc-refinementHeader.gsc-refinementhInactive {
color: var(--text-color) !important;
border-color: var(--bg-color) !important;
background-color: var(--bg-color) !important;
}
/* styles active filter tabs */
/* styles active refinement tabs */
.gsc-tabHeader.gsc-tabhActive, .gsc-refinementHeader.gsc-refinementhActive {
color: var(--primary-color) !important;
border-color: var(--primary-color) !important;
background-color: var(--bg-color) !important;
}
/* styles tags on search results */
.gsc-control-cse .gsc-table-result {
font-family: Roboto !important;
background: white !important;
border-radius: 3px !important;
margin: 5px auto !important;
padding: 0 5px !important;
width: fit-content !important;
float: left !important;
margin-left: 3px !important;
.gsc-control-cse .gsc-table-result span {
display: none;
}
a.gs-label {
float: right;
color: var(--text-color) !important;
text-decoration: none !important;
}
/* colours url on search results */
.gs-webResult div.gs-visibleUrl {
@ -315,41 +358,6 @@ body {
display: none !important;
}
/* Mobile engine switcher */
.toggle-container {
display: none; /* Initially hide the toggle container */
position: absolute;
justify-content: center;
top: 15px;
left: 50%;
transform: translateX(-50%);
border-radius: 50px;
z-index: 1000;
width: 80%;
padding: 0 10px;
}
.toggle-btn {
display: inline-block;
padding: 10px 20px;
color: var(--text-color);
text-decoration: none;
border-radius: 20px;
border-width: 5px;
transition: background-color 0.3s ease;
text-align: center;
box-sizing: border-box;
}
#primary {
background-color: var(--primary-color);
color: var(--text-color);
}
.toggle-btn:hover {
background-color: var(--secondary-color);
}
/* Screen-size dependant options */
@media (max-width: 1000px) {
.maindiv {
@ -368,20 +376,16 @@ body {
display: none;
}
.toggle-container {
.m-engine-switcher {
display: flex;
}
.engine-switcher-2 {
.notification-zone {
display: none;
}
.engine-swticher-2 .item {
display: none;
}
/* search input box */
.gsc-input-box input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
/* search input box, excludes input field */
.gsc-input-box, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
border-radius: 50px !important; /* rounded corner */
margin-right: 5px !important;
}
@ -394,7 +398,7 @@ body {
display: none !important;
}
.games-found {
.corner-box {
display: none;
}
}

44
index.html
View File

@ -8,37 +8,45 @@
<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="title" content="Rave Game Search"/>
<meta name="description" content="Find the safest free download links to your favourite Video Games"/>
<meta name="theme-color" content="#F63F4D">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://ravegamesearch.pages.dev/"/>
<meta property="og:title" content="Rave Game Search"/>
<meta property="og:description" content="Find the safest free download links to your favourite Video Games"/>
<meta property="og:image" content="https://ravegamesearch.pages.dev/img/ravesearch.png"/>
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image"/>
<meta property="twitter:url" content="https://ravegamesearch.pages.dev/"/>
<meta property="twitter:title" content="Rave Game Search"/>
<meta property="twitter:description" content="Find the safest free download links to your favourite Video Games"/>
<meta property="twitter:image" content="https://ravegamesearch.pages.dev/img/ravesearch.png"/>
</head>
<body>
<div class="container">
<!-- Engine Switcher -->
<!-- Desktop Engine Switcher -->
<div class="engine-swticher">
<a href="https://ravegamesearch.pages.dev">> Game Search</a>
<a href="https://ravegamesearch.pages.dev" id="primary">Game Search</a>
<a href="https://ravebooksearch.com">Book Search</a>
<a href="https://ravesoftwaresearch.pages.dev">Software Search</a>
</div>
<!-- Mobile engine switcher -->
<div class="toggle-container">
<a href="https://ravegamesearch.pages.dev" id="primary" class="toggle-btn">Games</a>
<div class="m-engine-switcher">
<a href="https://ravegamesearch.pages.dev" id="m-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">
<div class="notification-zone">
<!-- First Item: Donation message and button-->
<div class="item">
<div id="donate-button-container">
@ -76,7 +84,7 @@
let hiddenItems = JSON.parse(localStorage.getItem("hiddenItems")) || [];
// Get all items
const items = document.querySelectorAll(".engine-swticher-2 .item");
const items = document.querySelectorAll(".notification-zone .item");
// Loop through items and add 'hidden' class if in hiddenItems array
items.forEach(item => {
@ -86,7 +94,7 @@
});
// Add click event listener to close buttons
const closeButtons = document.querySelectorAll(".engine-swticher-2 .close-btn");
const closeButtons = document.querySelectorAll(".notification-zone .close-btn");
closeButtons.forEach(button => {
button.addEventListener("click", function() {
const item = this.parentNode;
@ -150,8 +158,8 @@
</div>
<!-- Bottom Left Corner Box, formerly Games Found Counter -->
<div class="games-found">
<a></a>
<div class="corner-box">
<img src="">
</div>
<!-- Terms of Use, Privacy Policy and GitHub Link -->