Skip to content

Commit 9fb190b

Browse files
TobiasMue91TobiasMue91
committed
- implement logo.js similar to sidebar.js to make replacing it with the sidebar as simple as possible
- add logo to index.html for improved recognition value
1 parent a6b19cd commit 9fb190b

File tree

3 files changed

+53
-3
lines changed

3 files changed

+53
-3
lines changed

‎img/logo.svg‎

Lines changed: 7 additions & 0 deletions
Loading

‎index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<title>GPTGames: Collection of AI-Generated HTML Games and Utilities</title>
1717
<style>
1818
:root {
19-
--primary:#3c6382; --primary-hover:#254b69; --secondary:#f0932b; --secondary-hover:#d97e0c;
19+
--primary:#029CDF; --primary-hover: #0276a8; --secondary:#f0932b; --secondary-hover:#d97e0c;
2020
--bg:#f8f9fa; --card:#fff; --dark:#2f3640; --gray:#e2e6ea; --text:#1e272e; --border:#dee2e6;
2121
--shadow:0 2px 6px rgba(0,0,0,0.08); --radius:8px; --transition:all 0.2s ease;
2222
}
@@ -124,7 +124,7 @@
124124
}
125125

126126
@media (prefers-color-scheme: dark) {
127-
:root { --primary: #4d84a3; --primary-hover: #7cbed1; --secondary: #f5a849; --secondary-hover: #ffbe59; --bg: #121212; --card: #1e1e1e; --dark: #d4d5d6; --gray: #2d2d2d; --text: #e4e6eb; --border: #333333; --shadow: 0 2px 6px rgba(0,0,0,0.2); }
127+
:root { --primary:#029CDF; --primary-hover: #0276a8; --secondary: #f5a849; --secondary-hover: #ffbe59; --bg: #121212; --card: #1e1e1e; --dark: #d4d5d6; --gray: #2d2d2d; --text: #e4e6eb; --border: #333333; --shadow: 0 2px 6px rgba(0,0,0,0.2); }
128128
body { background-color: var(--bg); color: var(--text); background-image: url('img/crossword_pattern.png'); background-blend-mode: soft-light; opacity: 1; }
129129
header, .filter-bar, footer { background-color: var(--card); border-color: var(--border); }
130130
.card, .stat-card, .filter-dropdown { background-color: var(--card); box-shadow: var(--shadow); }
@@ -153,7 +153,7 @@
153153
<body>
154154
<header>
155155
<div class="container header-content">
156-
<a href="/" class="logo" title='...with emphasis on "Games".'><i class="fas fa-gamepad"></i> GPTGames</a>
156+
<a href="/" class="logo" title='...with emphasis on "Games".'><img src="img/logo.svg" width="20" height="20">&nbsp;GPTGames</a>
157157
<div class="search-bar">
158158
<input type="search" id="searchInput" placeholder="Search games & tools" aria-label="Search">
159159
<span class="clear-search" id="clearSearch" title="Clear search">✕</span>

‎logo.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
window.addEventListener('load', function() {
2+
const currentScript = Array.from(document.scripts).find(s => s.src.includes('logo.js'));
3+
const position = currentScript ? currentScript.getAttribute('data-position') || 'bottom-right' : 'bottom-right';
4+
5+
const logo = document.createElement('a');
6+
logo.href = 'https://gptgames.dev';
7+
logo.target = '_blank';
8+
logo.style.position = 'fixed';
9+
logo.style.width = '40px';
10+
logo.style.height = '40px';
11+
logo.style.zIndex = '9999';
12+
logo.style.transition = 'transform 0.2s ease';
13+
14+
// Position the logo based on data-position attribute
15+
if (position === 'top-left') {
16+
logo.style.top = '10px';
17+
logo.style.left = '10px';
18+
} else if (position === 'top-right') {
19+
logo.style.top = '10px';
20+
logo.style.right = '10px';
21+
} else {
22+
// Default to bottom-right
23+
logo.style.bottom = '10px';
24+
logo.style.right = '10px';
25+
}
26+
27+
const img = document.createElement('img');
28+
img.src = '../img/logo.svg';
29+
img.style.width = '100%';
30+
img.style.height = '100%';
31+
32+
logo.appendChild(img);
33+
34+
logo.addEventListener('mouseover', function() {
35+
this.style.transform = 'scale(1.2)';
36+
});
37+
38+
logo.addEventListener('mouseout', function() {
39+
this.style.transform = 'scale(1)';
40+
});
41+
42+
document.body.appendChild(logo);
43+
});

0 commit comments

Comments
 (0)