@arcade-v/arcade_v 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/navigation/customization.js +96 -172
- package/navigation/games/games.json +3 -1
- package/navigation/home.html +0 -11
- package/navigation/style.css +460 -175
- package/package.json +1 -1
|
@@ -1,184 +1,106 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}
|
|
1
|
+
function changeFavicon(src) {
|
|
2
|
+
const oldLink = document.getElementById('dynamic-favicon');
|
|
3
|
+
if (oldLink && oldLink.parentNode === document.head) {
|
|
4
|
+
try {
|
|
5
|
+
document.head.removeChild(oldLink);
|
|
6
|
+
} catch (error) {
|
|
7
|
+
console.warn('Failed to remove old favicon:', error);
|
|
9
8
|
}
|
|
10
|
-
|
|
11
|
-
const link = document.createElement('link');
|
|
12
|
-
link.id = 'dynamic-favicon';
|
|
13
|
-
link.rel = 'icon';
|
|
14
|
-
link.href = src + '?v=' + new Date().getTime(); // prevent caching
|
|
15
|
-
document.head.appendChild(link);
|
|
16
|
-
|
|
17
|
-
localStorage.setItem('faviconSrc', src);
|
|
18
9
|
}
|
|
19
10
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
11
|
+
const link = document.createElement('link');
|
|
12
|
+
link.id = 'dynamic-favicon';
|
|
13
|
+
link.rel = 'icon';
|
|
14
|
+
link.href = src + '?v=' + new Date().getTime(); // prevent caching
|
|
15
|
+
document.head.appendChild(link);
|
|
24
16
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
changeFavicon(src);
|
|
28
|
-
}
|
|
17
|
+
localStorage.setItem('faviconSrc', src);
|
|
18
|
+
}
|
|
29
19
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
navbar.style.backgroundImage = `url('${src}')`;
|
|
35
|
-
}
|
|
36
|
-
const dropdownContent = document.querySelector('.dropdown-content');
|
|
37
|
-
if (dropdownContent) {
|
|
38
|
-
dropdownContent.style.backgroundImage = `url('${src}')`;
|
|
39
|
-
}
|
|
40
|
-
localStorage.setItem('themeBg', src);
|
|
41
|
-
}
|
|
20
|
+
function changeTitle(title) {
|
|
21
|
+
document.title = title;
|
|
22
|
+
localStorage.setItem('pageTitle', title);
|
|
23
|
+
}
|
|
42
24
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
}
|
|
25
|
+
function cloakpage(title, src) {
|
|
26
|
+
changeTitle(title);
|
|
27
|
+
changeFavicon(src);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
function changetheme(src) {
|
|
31
|
+
document.body.style.backgroundImage = `url('${src}')`;
|
|
32
|
+
const navbar = document.querySelector('.navbar');
|
|
33
|
+
if (navbar) {
|
|
34
|
+
navbar.style.backgroundImage = `url('${src}')`;
|
|
35
|
+
}
|
|
36
|
+
const dropdownContent = document.querySelector('.dropdown-content');
|
|
37
|
+
if (dropdownContent) {
|
|
38
|
+
dropdownContent.style.backgroundImage = `url('${src}')`;
|
|
39
|
+
}
|
|
40
|
+
localStorage.setItem('themeBg', src);
|
|
53
41
|
}
|
|
54
42
|
|
|
55
|
-
function
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
// Create new style for normal text + pagination + paragraphs
|
|
61
|
-
const style = document.createElement('style');
|
|
62
|
-
style.id = 'normal-text-style';
|
|
63
|
-
style.innerHTML = `
|
|
64
|
-
body,
|
|
65
|
-
select,
|
|
66
|
-
li a:not(.active),
|
|
67
|
-
#searchBar:not(:focus),
|
|
68
|
-
.game-title,
|
|
69
|
-
p,
|
|
70
|
-
.pagination button {
|
|
71
|
-
color: ${color} !important;
|
|
72
|
-
}
|
|
73
|
-
`;
|
|
74
|
-
document.head.appendChild(style);
|
|
75
|
-
|
|
76
|
-
// Dynamically update outlines ONLY if they are not transparent or none
|
|
77
|
-
document.querySelectorAll('*').forEach(el => {
|
|
78
|
-
const computedStyle = window.getComputedStyle(el);
|
|
79
|
-
const outlineColor = computedStyle.outlineColor;
|
|
80
|
-
const outlineStyle = computedStyle.outlineStyle;
|
|
81
|
-
|
|
82
|
-
// Check if outline exists and is not transparent or "none"
|
|
83
|
-
if (
|
|
84
|
-
outlineStyle !== 'none' &&
|
|
85
|
-
outlineColor !== 'rgba(0, 0, 0, 0)' && // transparent
|
|
86
|
-
outlineColor !== 'transparent'
|
|
87
|
-
) {
|
|
88
|
-
el.style.outlineColor = color;
|
|
89
|
-
}
|
|
43
|
+
function changeFont(font) {
|
|
44
|
+
document.body.style.fontFamily = font;
|
|
45
|
+
localStorage.setItem('userFont', font);
|
|
46
|
+
document.querySelectorAll('select').forEach(select => {
|
|
47
|
+
select.style.fontFamily = font;
|
|
90
48
|
});
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
49
|
+
const searchBar = document.getElementById('searchBar');
|
|
50
|
+
if (searchBar) {
|
|
51
|
+
searchBar.style.fontFamily = font;
|
|
52
|
+
}
|
|
94
53
|
}
|
|
95
54
|
|
|
96
55
|
|
|
56
|
+
function changeTextColor(color) {
|
|
57
|
+
document.documentElement.style.setProperty('--text-color', color);
|
|
58
|
+
localStorage.setItem('textColor', color);
|
|
59
|
+
}
|
|
97
60
|
|
|
98
61
|
function changeSelectedTextColor(color) {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
if (oldStyle) oldStyle.remove();
|
|
102
|
-
|
|
103
|
-
const style = document.createElement('style');
|
|
104
|
-
style.id = 'selected-text-style';
|
|
105
|
-
style.innerHTML = `
|
|
106
|
-
::selection {
|
|
107
|
-
background: #333;
|
|
108
|
-
color: ${color};
|
|
109
|
-
}
|
|
110
|
-
`;
|
|
111
|
-
document.head.appendChild(style);
|
|
112
|
-
localStorage.setItem('selectedTextColor', color);
|
|
113
|
-
}
|
|
114
|
-
function changeFocusTextColor(color) {
|
|
115
|
-
const oldStyle = document.getElementById('focus-text-style');
|
|
116
|
-
if (oldStyle) oldStyle.remove();
|
|
117
|
-
|
|
118
|
-
const style = document.createElement('style');
|
|
119
|
-
style.id = 'focus-text-style';
|
|
120
|
-
style.innerHTML = `
|
|
121
|
-
input:focus,
|
|
122
|
-
select:focus,
|
|
123
|
-
textarea:focus {
|
|
124
|
-
color: ${color};
|
|
125
|
-
border-color: ${color};
|
|
126
|
-
}
|
|
127
|
-
`;
|
|
128
|
-
document.head.appendChild(style);
|
|
129
|
-
}
|
|
130
|
-
function changeActiveTextColor(color) {
|
|
131
|
-
// Remove old active text color style if any
|
|
132
|
-
const oldStyle = document.getElementById('active-text-style');
|
|
133
|
-
if (oldStyle) oldStyle.remove();
|
|
134
|
-
|
|
135
|
-
const style = document.createElement('style');
|
|
136
|
-
style.id = 'active-text-style';
|
|
137
|
-
style.innerHTML = `
|
|
138
|
-
li a.active {
|
|
139
|
-
color: ${color} !important;
|
|
140
|
-
}
|
|
141
|
-
`;
|
|
142
|
-
document.head.appendChild(style);
|
|
143
|
-
localStorage.setItem('activeTextColor', color);
|
|
62
|
+
document.documentElement.style.setProperty('--selected-text-color', color);
|
|
63
|
+
localStorage.setItem('selectedTextColor', color);
|
|
144
64
|
}
|
|
145
65
|
|
|
66
|
+
|
|
67
|
+
|
|
146
68
|
function resetToDefault() {
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
69
|
+
// Clear localStorage
|
|
70
|
+
localStorage.removeItem('faviconSrc');
|
|
71
|
+
localStorage.removeItem('pageTitle');
|
|
72
|
+
localStorage.removeItem('themeBg');
|
|
73
|
+
localStorage.removeItem('userFont');
|
|
74
|
+
localStorage.removeItem('textColor');
|
|
75
|
+
localStorage.removeItem('selectedTextColor');
|
|
76
|
+
localStorage.removeItem('activeTextColor');
|
|
77
|
+
|
|
78
|
+
// Reset Favicon & Title
|
|
79
|
+
changeFavicon('https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/favicon/logo.png');
|
|
80
|
+
changeTitle('Arcade 4');
|
|
81
|
+
|
|
82
|
+
// Reset Theme
|
|
83
|
+
changetheme('https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/backgrounds/void_theme.png');
|
|
84
|
+
|
|
85
|
+
// Reset Font
|
|
86
|
+
changeFont('Pixelify Sans, sans-serif');
|
|
87
|
+
|
|
88
|
+
// Reset Normal Text Color
|
|
89
|
+
changeTextColor('#ffffff');
|
|
90
|
+
const picker1 = document.getElementById('textColorPicker1');
|
|
91
|
+
if (picker1) picker1.value = '#ffffff';
|
|
92
|
+
|
|
93
|
+
// Reset Selected/Focus/Active Text Color
|
|
94
|
+
changeSelectedTextColor('#7F00FF');
|
|
95
|
+
changeFocusTextColor('#7F00FF');
|
|
96
|
+
changeActiveTextColor('#7F00FF');
|
|
97
|
+
const picker2 = document.getElementById('textColorPicker2');
|
|
98
|
+
if (picker2) picker2.value = '#7F00FF';
|
|
99
|
+
|
|
100
|
+
// Reset dropdown selections
|
|
101
|
+
document.getElementById('cloakDropdown').selectedIndex = 0;
|
|
102
|
+
document.getElementById('backgroundDropdown').selectedIndex = 0;
|
|
103
|
+
document.getElementById('fontDropdown').selectedIndex = 0;
|
|
182
104
|
}
|
|
183
105
|
|
|
184
106
|
|
|
@@ -203,16 +125,18 @@ if (savedFont) changeFont(savedFont);
|
|
|
203
125
|
|
|
204
126
|
const savedColor = localStorage.getItem('textColor');
|
|
205
127
|
if (savedColor) {
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
128
|
+
changeTextColor(savedColor);
|
|
129
|
+
const picker1 = document.getElementById('textColorPicker1');
|
|
130
|
+
if (picker1) picker1.value = savedColor;
|
|
209
131
|
}
|
|
210
132
|
|
|
211
133
|
const selectedTextColor = localStorage.getItem('selectedTextColor');
|
|
212
134
|
if (selectedTextColor) {
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
135
|
+
changeSelectedTextColor(selectedTextColor);
|
|
136
|
+
changeFocusTextColor(selectedTextColor);
|
|
137
|
+
changeActiveTextColor(selectedTextColor);
|
|
138
|
+
const picker2 = document.getElementById('textColorPicker2');
|
|
139
|
+
if (picker2) picker2.value = selectedTextColor;
|
|
218
140
|
}
|
|
141
|
+
|
|
142
|
+
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
{
|
|
23
23
|
"title": "2048",
|
|
24
24
|
"image": "https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/games/2048.png",
|
|
25
|
-
"url": "https://gitlab.com/arcade_v/arcade_v_games_turbowarp/-/raw/main/2048.html",
|
|
25
|
+
"url": "https://gitlab.com/arcade_v/arcade_v_games_turbowarp/-/raw/main/2048.html?ref_type=heads&inline=false",
|
|
26
26
|
"category": [
|
|
27
27
|
"Popular",
|
|
28
28
|
"2D",
|
|
@@ -3460,3 +3460,5 @@
|
|
|
3460
3460
|
]
|
|
3461
3461
|
|
|
3462
3462
|
|
|
3463
|
+
|
|
3464
|
+
|
package/navigation/home.html
CHANGED
|
@@ -147,17 +147,6 @@
|
|
|
147
147
|
<div id="shadowBox">
|
|
148
148
|
<h3 class="rainbow rainbow_text_animated">Arcade V</h3>
|
|
149
149
|
<p id="test" title="Click for another quote" onclick="displayRandomQuote()"></p>
|
|
150
|
-
|
|
151
|
-
<div class="button-container">
|
|
152
|
-
<a class="vote-button"
|
|
153
|
-
href="https://ubghub.org/?site=Arcade%204&utm_source=https%3A%2F%2Fsites.google.com%2Fview%2Ffractions-are-cool"
|
|
154
|
-
target="_blank" rel="noopener">
|
|
155
|
-
<svg viewBox="0 0 20 20">
|
|
156
|
-
<path d="M3 10l4-4v3h4V2l4 4v14H3V10z"/>
|
|
157
|
-
</svg>
|
|
158
|
-
<span>Vote on UBGHub</span>
|
|
159
|
-
</a>
|
|
160
|
-
</div>
|
|
161
150
|
</div>
|
|
162
151
|
</body>
|
|
163
152
|
</html>
|
package/navigation/style.css
CHANGED
|
@@ -1,23 +1,46 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
:root {
|
|
2
|
+
--void-theme-bg: url('https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/backgrounds/void_theme.png');
|
|
3
|
+
--text-color: #ffffff;
|
|
4
|
+
--selected-text-color: #7F00FF;
|
|
5
|
+
--border-color: #ffffff;
|
|
6
|
+
--primary-color: #7F00FF;
|
|
7
|
+
--primary-color-rgb: 127, 0, 255;
|
|
8
|
+
--background-overlay: rgba(0, 0, 0, 0.7);
|
|
9
|
+
--dropdown-bg: rgba(0, 0, 0, 0.85);
|
|
10
|
+
--hover-scale: 1.05;
|
|
11
|
+
--transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
|
|
12
|
+
--navbar-height: 60px;
|
|
13
|
+
--game-button-width: 200px;
|
|
14
|
+
--game-button-height: 250px;
|
|
15
|
+
}
|
|
12
16
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
/* Reset and base styles */
|
|
18
|
+
*, *::before, *::after {
|
|
19
|
+
box-sizing: border-box;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
body, html {
|
|
23
|
+
margin: 0;
|
|
24
|
+
padding: 0;
|
|
25
|
+
height: 100%;
|
|
26
|
+
scroll-behavior: smooth;
|
|
27
|
+
-webkit-font-smoothing: antialiased;
|
|
28
|
+
-moz-osx-font-smoothing: grayscale;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* Body styles */
|
|
32
|
+
body {
|
|
33
|
+
background-image: var(--void-theme-bg);
|
|
34
|
+
background-attachment: fixed;
|
|
35
|
+
background-repeat: no-repeat;
|
|
36
|
+
background-size: cover;
|
|
37
|
+
background-position: center;
|
|
38
|
+
font-family: "Pixelify Sans", sans-serif;
|
|
39
|
+
text-align: center;
|
|
40
|
+
color: var(--text-color);
|
|
41
|
+
min-height: 100vh;
|
|
42
|
+
padding-top: var(--navbar-height);
|
|
43
|
+
}
|
|
21
44
|
|
|
22
45
|
/* Pixelated Spinner Container */
|
|
23
46
|
#spinner {
|
|
@@ -84,8 +107,9 @@
|
|
|
84
107
|
32px 32px #ffffff;
|
|
85
108
|
}
|
|
86
109
|
}
|
|
87
|
-
|
|
88
|
-
|
|
110
|
+
|
|
111
|
+
/* Navbar styles */
|
|
112
|
+
.navbar {
|
|
89
113
|
display: flex;
|
|
90
114
|
justify-content: space-around;
|
|
91
115
|
width: 100%;
|
|
@@ -103,62 +127,127 @@
|
|
|
103
127
|
|
|
104
128
|
}
|
|
105
129
|
|
|
106
|
-
li a {
|
|
107
|
-
display: block;
|
|
108
|
-
text-align: center;
|
|
109
|
-
padding: 14px 16px;
|
|
110
|
-
text-decoration: none;
|
|
111
|
-
color: white;
|
|
112
|
-
margin: 0;
|
|
113
|
-
}
|
|
114
130
|
|
|
115
|
-
li a:hover {
|
|
116
|
-
font-weight: bold;
|
|
117
|
-
}
|
|
118
131
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
132
|
+
.navbar ul,
|
|
133
|
+
.dropdown-content ul {
|
|
134
|
+
list-style: none;
|
|
135
|
+
margin: 0;
|
|
136
|
+
padding: 0;
|
|
137
|
+
}
|
|
122
138
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
139
|
+
.navbar ul {
|
|
140
|
+
display: flex;
|
|
141
|
+
width: 100%;
|
|
142
|
+
justify-content: space-around;
|
|
143
|
+
}
|
|
127
144
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
background-repeat: no-repeat;
|
|
132
|
-
background-size: cover;
|
|
133
|
-
display: none;
|
|
134
|
-
position: absolute;
|
|
135
|
-
min-width: 160px;
|
|
136
|
-
z-index: 1;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
.dropdown-content a {
|
|
141
|
-
color: white;
|
|
142
|
-
padding: 12px 16px;
|
|
143
|
-
text-decoration: none;
|
|
144
|
-
display: block;
|
|
145
|
-
text-align: left;
|
|
146
|
-
}
|
|
145
|
+
.navbar li {
|
|
146
|
+
position: relative;
|
|
147
|
+
}
|
|
147
148
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
149
|
+
.navbar a {
|
|
150
|
+
display: block;
|
|
151
|
+
text-align: center;
|
|
152
|
+
padding: 18px 16px;
|
|
153
|
+
text-decoration: none;
|
|
154
|
+
color: var(--text-color);
|
|
155
|
+
font-size: 1.1rem;
|
|
156
|
+
transition: all 0.3s var(--transition-timing);
|
|
157
|
+
position: relative;
|
|
158
|
+
}
|
|
151
159
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
+
.navbar a::after {
|
|
161
|
+
content: '';
|
|
162
|
+
position: absolute;
|
|
163
|
+
bottom: 0;
|
|
164
|
+
left: 50%;
|
|
165
|
+
width: 0;
|
|
166
|
+
height: 2px;
|
|
167
|
+
background: var(--primary-color);
|
|
168
|
+
transition: all 0.3s var(--transition-timing);
|
|
169
|
+
transform: translateX(-50%);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.navbar a:hover::after,
|
|
173
|
+
.navbar a.active::after {
|
|
174
|
+
width: 80%;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.navbar a:hover {
|
|
178
|
+
color: var(--primary-color);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.navbar a.active {
|
|
182
|
+
color: var(--primary-color);
|
|
183
|
+
font-weight: bold;
|
|
184
|
+
}
|
|
160
185
|
|
|
161
|
-
|
|
186
|
+
/* Dropdown */
|
|
187
|
+
.dropdown-content {
|
|
188
|
+
background-color: var(--dropdown-bg);
|
|
189
|
+
backdrop-filter: blur(10px);
|
|
190
|
+
-webkit-backdrop-filter: blur(10px);
|
|
191
|
+
display: none;
|
|
192
|
+
position: absolute;
|
|
193
|
+
min-width: 180px;
|
|
194
|
+
z-index: 1001;
|
|
195
|
+
border: 2px solid rgba(255, 255, 255, 0.15);
|
|
196
|
+
border-radius: 8px;
|
|
197
|
+
overflow: hidden;
|
|
198
|
+
animation: dropdownFade 0.3s var(--transition-timing);
|
|
199
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
@keyframes dropdownFade {
|
|
203
|
+
from {
|
|
204
|
+
opacity: 0;
|
|
205
|
+
transform: translateY(-10px);
|
|
206
|
+
}
|
|
207
|
+
to {
|
|
208
|
+
opacity: 1;
|
|
209
|
+
transform: translateY(0);
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.dropdown-content a {
|
|
214
|
+
color: var(--text-color);
|
|
215
|
+
padding: 12px 16px;
|
|
216
|
+
text-decoration: none;
|
|
217
|
+
display: block;
|
|
218
|
+
text-align: left;
|
|
219
|
+
transition: all 0.3s ease;
|
|
220
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.dropdown-content a:last-child {
|
|
224
|
+
border-bottom: none;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.dropdown-content a:hover {
|
|
228
|
+
background-color: rgba(var(--primary-color-rgb, 127, 0, 255), 0.25);
|
|
229
|
+
color: var(--primary-color);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.dropdown:hover .dropdown-content {
|
|
233
|
+
display: block;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
/* Game buttons container */
|
|
237
|
+
.game-buttons-container {
|
|
238
|
+
display: grid;
|
|
239
|
+
grid-template-columns: repeat(auto-fill, minmax(var(--game-button-width), 1fr));
|
|
240
|
+
gap: 25px;
|
|
241
|
+
padding: 30px 20px;
|
|
242
|
+
max-width: 1400px;
|
|
243
|
+
margin: 0 auto;
|
|
244
|
+
margin-top: 40px;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
|
|
248
|
+
|
|
249
|
+
|
|
250
|
+
/* Game button styling */
|
|
162
251
|
.game-button, .game-button-no-rounding {
|
|
163
252
|
width: 200px;
|
|
164
253
|
height: 250px; /* image + title */
|
|
@@ -179,139 +268,335 @@
|
|
|
179
268
|
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
|
|
180
269
|
}
|
|
181
270
|
|
|
182
|
-
|
|
271
|
+
|
|
272
|
+
|
|
273
|
+
.game-button img,
|
|
274
|
+
.game-button-no-rounding img {
|
|
275
|
+
background-color: transparent;
|
|
276
|
+
border: none;
|
|
277
|
+
outline: none;
|
|
278
|
+
cursor: pointer;
|
|
183
279
|
width: 200px;
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
280
|
+
height: 200px;
|
|
281
|
+
object-fit: cover;
|
|
282
|
+
border-radius: 25px;
|
|
283
|
+
transition: transform 0.4s var(--transition-timing);
|
|
284
|
+
box-shadow 0.6s ease-in-out;
|
|
187
285
|
}
|
|
188
286
|
|
|
287
|
+
.game-button:hover img,
|
|
288
|
+
.game-button-no-rounding:hover img {
|
|
289
|
+
box-shadow:
|
|
290
|
+
0 0 20px rgba(var(--primary-color-rgb), 0.5),
|
|
291
|
+
0 0 40px rgba(var(--primary-color-rgb), 0.25);
|
|
292
|
+
}
|
|
189
293
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
294
|
+
.game-title {
|
|
295
|
+
color: var(--text-color);
|
|
296
|
+
font-size: 1.1rem;
|
|
297
|
+
margin-top: 12px;
|
|
298
|
+
font-weight: 600;
|
|
299
|
+
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
|
300
|
+
transition: color 0.3s ease, transform 0.3s ease;
|
|
301
|
+
}
|
|
195
302
|
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
top: 60px;
|
|
202
|
-
left: 0;
|
|
203
|
-
right: 0;
|
|
204
|
-
border: none;
|
|
205
|
-
}
|
|
303
|
+
.game-button:hover .game-title,
|
|
304
|
+
.game-button-no-rounding:hover .game-title {
|
|
305
|
+
color: var(--primary-color);
|
|
306
|
+
transform: translateY(-2px);
|
|
307
|
+
}
|
|
206
308
|
|
|
207
|
-
/* Search bar styles */
|
|
208
|
-
#searchBar {
|
|
209
|
-
font-family: "Pixelify Sans", sans-serif;
|
|
210
|
-
padding: 10px;
|
|
211
|
-
font-size: 16px;
|
|
212
|
-
background-color: transparent;
|
|
213
|
-
width: 80%;
|
|
214
|
-
max-width: 400px;
|
|
215
|
-
border-radius: 5px;
|
|
216
|
-
border: 2px solid white;
|
|
217
|
-
outline: none;
|
|
218
|
-
}
|
|
219
309
|
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
310
|
+
/* Iframe Styling */
|
|
311
|
+
iframe {
|
|
312
|
+
width: 100%;
|
|
313
|
+
height: calc(100vh - var(--navbar-height));
|
|
314
|
+
position: absolute;
|
|
315
|
+
top: var(--navbar-height);
|
|
316
|
+
left: 0;
|
|
317
|
+
border: none;
|
|
318
|
+
background: #000;
|
|
319
|
+
}
|
|
223
320
|
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
background-position: right 10px center;
|
|
239
|
-
background-size: 16px;
|
|
240
|
-
}
|
|
321
|
+
/* Form controls */
|
|
322
|
+
#searchBar,
|
|
323
|
+
select,
|
|
324
|
+
#resetButton {
|
|
325
|
+
font-family: "Pixelify Sans", sans-serif;
|
|
326
|
+
font-size: 1rem;
|
|
327
|
+
background-color: rgba(0, 0, 0, 0.3);
|
|
328
|
+
border: 2px solid var(--border-color);
|
|
329
|
+
color: var(--text-color);
|
|
330
|
+
outline: none;
|
|
331
|
+
transition: all 0.3s var(--transition-timing);
|
|
332
|
+
backdrop-filter: blur(5px);
|
|
333
|
+
-webkit-backdrop-filter: blur(5px);
|
|
334
|
+
}
|
|
241
335
|
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
336
|
+
#searchBar {
|
|
337
|
+
padding: 12px 20px;
|
|
338
|
+
width: 100%;
|
|
339
|
+
max-width: 400px;
|
|
340
|
+
border-radius: 8px;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
#searchBar:focus {
|
|
344
|
+
border-color: var(--primary-color);
|
|
345
|
+
box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 127, 0, 255), 0.2);
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
select {
|
|
349
|
+
padding: 12px 40px 12px 20px;
|
|
350
|
+
width: 100%;
|
|
351
|
+
max-width: 400px;
|
|
352
|
+
border-radius: 8px;
|
|
353
|
+
appearance: none;
|
|
354
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
|
|
355
|
+
background-repeat: no-repeat;
|
|
356
|
+
background-position: right 15px center;
|
|
357
|
+
background-size: 16px;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
select:focus {
|
|
361
|
+
border-color: var(--primary-color);
|
|
362
|
+
box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 127, 0, 255), 0.2);
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
option {
|
|
366
|
+
background-color: #000;
|
|
367
|
+
color: var(--text-color);
|
|
368
|
+
padding: 12px;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
option:disabled {
|
|
372
|
+
color: #666;
|
|
373
|
+
}
|
|
245
374
|
|
|
246
|
-
option {
|
|
247
|
-
background-color: black;
|
|
248
|
-
color: white;
|
|
249
|
-
padding: 10px;
|
|
250
|
-
font-size: 16px;
|
|
251
|
-
}
|
|
252
375
|
#resetButton {
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
border: 2px solid white;
|
|
256
|
-
border-radius: 5px;
|
|
376
|
+
padding: 12px 24px;
|
|
377
|
+
border-radius: 8px;
|
|
257
378
|
cursor: pointer;
|
|
258
|
-
font-
|
|
259
|
-
|
|
379
|
+
font-weight: 600;
|
|
380
|
+
text-transform: uppercase;
|
|
381
|
+
letter-spacing: 0.5px;
|
|
260
382
|
}
|
|
261
|
-
option:disabled {
|
|
262
|
-
color: gray;
|
|
263
|
-
}
|
|
264
383
|
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
384
|
+
#resetButton:hover {
|
|
385
|
+
background-color: rgba(var(--primary-color-rgb, 127, 0, 255), 0.2);
|
|
386
|
+
border-color: var(--primary-color);
|
|
387
|
+
color: var(--primary-color);
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
#resetButton:active {
|
|
391
|
+
transform: scale(0.95);
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
/* Content container */
|
|
395
|
+
.content-container {
|
|
396
|
+
width: 100%;
|
|
397
|
+
height: calc(100vh - var(--navbar-height));
|
|
398
|
+
position: absolute;
|
|
399
|
+
top: var(--navbar-height);
|
|
400
|
+
left: 0;
|
|
401
|
+
border: none;
|
|
402
|
+
color: var(--text-color);
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
/* Favorite icon */
|
|
406
|
+
.favorite-icon {
|
|
407
|
+
cursor: pointer;
|
|
408
|
+
font-size: 1.2rem;
|
|
409
|
+
margin-left: 8px;
|
|
410
|
+
transition: all 0.3s var(--transition-timing);
|
|
411
|
+
color: var(--secondary-color, #ffd700);
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
.favorite-icon:hover {
|
|
415
|
+
transform: scale(1.2);
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
/* Pagination */
|
|
281
419
|
.pagination {
|
|
282
|
-
margin: 40px 0 60px
|
|
420
|
+
margin: 40px 0 60px;
|
|
283
421
|
display: flex;
|
|
284
|
-
background-color: transparent;
|
|
285
422
|
justify-content: center;
|
|
423
|
+
align-items: center;
|
|
286
424
|
flex-wrap: wrap;
|
|
287
|
-
gap:
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
label {
|
|
291
|
-
color: white;
|
|
425
|
+
gap: 8px;
|
|
426
|
+
padding: 0 20px;
|
|
292
427
|
}
|
|
293
428
|
|
|
294
429
|
.pagination button {
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
color:
|
|
299
|
-
|
|
300
|
-
border
|
|
430
|
+
min-width: 40px;
|
|
431
|
+
height: 40px;
|
|
432
|
+
padding: 0 12px;
|
|
433
|
+
background-color: rgba(0, 0, 0, 0.3);
|
|
434
|
+
color: var(--text-color);
|
|
435
|
+
border: 2px solid transparent;
|
|
436
|
+
border-radius: 8px;
|
|
301
437
|
cursor: pointer;
|
|
302
438
|
font-family: "Pixelify Sans", sans-serif;
|
|
303
|
-
|
|
439
|
+
font-size: 1rem;
|
|
440
|
+
font-weight: 600;
|
|
441
|
+
transition: all 0.3s var(--transition-timing);
|
|
442
|
+
backdrop-filter: blur(5px);
|
|
443
|
+
-webkit-backdrop-filter: blur(5px);
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
.pagination button:hover:not(.active-page) {
|
|
447
|
+
background-color: rgba(var(--primary-color-rgb, 127, 0, 255), 0.2);
|
|
448
|
+
border-color: rgba(var(--primary-color-rgb, 127, 0, 255), 0.5);
|
|
304
449
|
}
|
|
305
450
|
|
|
306
451
|
.pagination button.active-page {
|
|
307
|
-
|
|
452
|
+
background-color: rgba(var(--primary-color-rgb, 127, 0, 255), 0.3);
|
|
453
|
+
border-color: var(--primary-color);
|
|
454
|
+
color: var(--primary-color);
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
.pagination button:disabled {
|
|
458
|
+
opacity: 0.5;
|
|
459
|
+
cursor: not-allowed;
|
|
460
|
+
}
|
|
461
|
+
|
|
462
|
+
/* Labels and text */
|
|
463
|
+
label {
|
|
464
|
+
color: var(--text-color);
|
|
465
|
+
font-size: 1rem;
|
|
466
|
+
font-weight: 600;
|
|
467
|
+
margin-bottom: 8px;
|
|
468
|
+
display: block;
|
|
308
469
|
}
|
|
309
470
|
|
|
310
471
|
p {
|
|
311
|
-
color:
|
|
472
|
+
color: var(--text-color);
|
|
473
|
+
line-height: 1.6;
|
|
474
|
+
margin: 1em 0;
|
|
312
475
|
}
|
|
313
476
|
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
477
|
+
/* Focus styles for accessibility */
|
|
478
|
+
button:focus-visible,
|
|
479
|
+
a:focus-visible,
|
|
480
|
+
input:focus-visible,
|
|
481
|
+
select:focus-visible {
|
|
482
|
+
outline: 2px solid var(--primary-color);
|
|
483
|
+
outline-offset: 2px;
|
|
484
|
+
}
|
|
485
|
+
|
|
486
|
+
/* Responsive design */
|
|
487
|
+
@media (max-width: 768px) {
|
|
488
|
+
:root {
|
|
489
|
+
--game-button-width: 160px;
|
|
490
|
+
--game-button-height: 220px;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
.navbar {
|
|
494
|
+
justify-content: space-between;
|
|
495
|
+
padding: 0 20px;
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
.navbar ul {
|
|
499
|
+
justify-content: flex-start;
|
|
500
|
+
overflow-x: auto;
|
|
501
|
+
-webkit-overflow-scrolling: touch;
|
|
502
|
+
}
|
|
503
|
+
|
|
504
|
+
.navbar a {
|
|
505
|
+
padding: 18px 12px;
|
|
506
|
+
font-size: 1rem;
|
|
507
|
+
white-space: nowrap;
|
|
508
|
+
}
|
|
509
|
+
|
|
510
|
+
.game-buttons-container {
|
|
511
|
+
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
512
|
+
gap: 20px;
|
|
513
|
+
padding: 20px 15px;
|
|
514
|
+
}
|
|
515
|
+
|
|
516
|
+
.game-button img,
|
|
517
|
+
.game-button-no-rounding img {
|
|
518
|
+
height: 160px;
|
|
519
|
+
}
|
|
520
|
+
|
|
521
|
+
.game-title {
|
|
522
|
+
font-size: 0.95rem;
|
|
523
|
+
}
|
|
524
|
+
|
|
525
|
+
#searchBar,
|
|
526
|
+
select {
|
|
527
|
+
max-width: 100%;
|
|
528
|
+
margin: 0 15px;
|
|
529
|
+
}
|
|
530
|
+
|
|
531
|
+
.dropdown-content {
|
|
532
|
+
position: fixed;
|
|
533
|
+
left: 50%;
|
|
534
|
+
transform: translateX(-50%);
|
|
535
|
+
min-width: 200px;
|
|
536
|
+
}
|
|
537
|
+
}
|
|
538
|
+
|
|
539
|
+
@media (max-width: 480px) {
|
|
540
|
+
:root {
|
|
541
|
+
--game-button-width: 140px;
|
|
542
|
+
--game-button-height: 200px;
|
|
543
|
+
}
|
|
544
|
+
|
|
545
|
+
.game-buttons-container {
|
|
546
|
+
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
|
|
547
|
+
gap: 15px;
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
.pagination button {
|
|
551
|
+
min-width: 35px;
|
|
552
|
+
height: 35px;
|
|
553
|
+
padding: 0 8px;
|
|
554
|
+
font-size: 0.9rem;
|
|
555
|
+
}
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
/* Print styles */
|
|
559
|
+
@media print {
|
|
560
|
+
.navbar,
|
|
561
|
+
.game-button:hover,
|
|
562
|
+
iframe {
|
|
563
|
+
display: none !important;
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
body {
|
|
567
|
+
background: white;
|
|
568
|
+
color: black;
|
|
569
|
+
}
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
/* High contrast mode */
|
|
573
|
+
@media (prefers-contrast: high) {
|
|
574
|
+
:root {
|
|
575
|
+
--primary-color: #9d00ff;
|
|
576
|
+
--text-color: #ffffff;
|
|
577
|
+
--border-color: #ffffff;
|
|
578
|
+
}
|
|
579
|
+
|
|
580
|
+
.navbar {
|
|
581
|
+
background-color: #000;
|
|
582
|
+
}
|
|
583
|
+
}
|
|
584
|
+
|
|
585
|
+
/* Reduced motion */
|
|
586
|
+
@media (prefers-reduced-motion: reduce) {
|
|
587
|
+
*,
|
|
588
|
+
*::before,
|
|
589
|
+
*::after {
|
|
590
|
+
animation-duration: 0.01ms !important;
|
|
591
|
+
animation-iteration-count: 1 !important;
|
|
592
|
+
transition-duration: 0.01ms !important;
|
|
593
|
+
}
|
|
594
|
+
|
|
595
|
+
.game-button:hover,
|
|
596
|
+
.game-button-no-rounding:hover {
|
|
597
|
+
transform: none;
|
|
598
|
+
}
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
|
|
602
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arcade-v/arcade_v",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "a web-based collection of classic and modern browser games, designed to be easily hosted and customizable.",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"test": "echo \"Error: no test specified\" && exit 1"
|