@arcade-v/arcade_v 0.1.0
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/.gitlab-ci.yml +14 -0
- package/README.md +105 -0
- package/navigation/customization.js +218 -0
- package/navigation/games/apps.html +63 -0
- package/navigation/games/apps.json +125 -0
- package/navigation/games/games.html +57 -0
- package/navigation/games/games.js +177 -0
- package/navigation/games/games.json +3462 -0
- package/navigation/home.html +163 -0
- package/navigation/home.js +90 -0
- package/navigation/search.js +13 -0
- package/navigation/settings.html +91 -0
- package/navigation/style.css +317 -0
- package/package.json +10 -0
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
|
|
7
|
+
<!-- Google Fonts -->
|
|
8
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
9
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
10
|
+
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
|
|
11
|
+
<link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap" rel="stylesheet">
|
|
12
|
+
<link href="https://cdn.jsdelivr.net/gh/FutureElliotto/Arcade-4/navigation/style.css" rel="stylesheet">
|
|
13
|
+
<link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans&family=Comic+Neue&family=Courier+Prime&family=Press+Start+2P&family=VT323&family=Orbitron:wght@400;700&family=Roboto:wght@400;700&family=Open+Sans:wght@400;700&family=Patrick+Hand&family=Russo+One&display=swap" rel="stylesheet"/>
|
|
14
|
+
|
|
15
|
+
<style>
|
|
16
|
+
body {
|
|
17
|
+
font-family: 'Press Start 2P', 'Pixelify Sans', sans-serif;
|
|
18
|
+
height: auto;
|
|
19
|
+
min-height: 100vh;
|
|
20
|
+
margin: 0;
|
|
21
|
+
display: flex;
|
|
22
|
+
justify-content: center;
|
|
23
|
+
align-items: center;
|
|
24
|
+
flex-direction: column;
|
|
25
|
+
background-color: transparent;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
#shadowBox {
|
|
29
|
+
background-color: transparent;
|
|
30
|
+
border: none;
|
|
31
|
+
min-height: 200px;
|
|
32
|
+
display: flex;
|
|
33
|
+
flex-direction: column;
|
|
34
|
+
justify-content: center;
|
|
35
|
+
align-items: center;
|
|
36
|
+
text-align: center;
|
|
37
|
+
gap: 20px;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.rainbow {
|
|
41
|
+
text-align: center;
|
|
42
|
+
text-decoration: underline;
|
|
43
|
+
font-size: clamp(40px, 8vw, 120px);
|
|
44
|
+
font-family: 'Press Start 2P', cursive;
|
|
45
|
+
letter-spacing: 5px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.rainbow_text_animated {
|
|
49
|
+
background: linear-gradient(to right, #6666ff, #0099ff, #00ff00, #ff3399, #6666ff);
|
|
50
|
+
-webkit-background-clip: text;
|
|
51
|
+
background-clip: text;
|
|
52
|
+
color: transparent;
|
|
53
|
+
animation: rainbow_animation 6s ease-in-out infinite;
|
|
54
|
+
background-size: 400% 100%;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
@keyframes rainbow_animation {
|
|
58
|
+
0%, 100% { background-position: 0 0; }
|
|
59
|
+
50% { background-position: 100% 0; }
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
#test {
|
|
63
|
+
font-family: 'Pixelify Sans', sans-serif;
|
|
64
|
+
color: white;
|
|
65
|
+
font-size: clamp(14px, 2vw, 20px);
|
|
66
|
+
text-align: center;
|
|
67
|
+
max-width: 90%;
|
|
68
|
+
opacity: 0;
|
|
69
|
+
animation: fadeIn 1.2s ease forwards;
|
|
70
|
+
cursor: pointer;
|
|
71
|
+
user-select: none;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
@keyframes fadeIn {
|
|
75
|
+
to { opacity: 1; }
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.button-container {
|
|
79
|
+
display: flex;
|
|
80
|
+
flex-direction: column;
|
|
81
|
+
align-items: center;
|
|
82
|
+
gap: 10px;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.vote-button {
|
|
86
|
+
display: inline-flex;
|
|
87
|
+
align-items: center;
|
|
88
|
+
gap: 8px;
|
|
89
|
+
padding: 8px 12px;
|
|
90
|
+
background: linear-gradient(135deg, #00ff9d 0%, #00cc7a 100%);
|
|
91
|
+
color: #1a1a1a;
|
|
92
|
+
border: none;
|
|
93
|
+
border-radius: 8px;
|
|
94
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
95
|
+
font-size: 14px;
|
|
96
|
+
font-weight: 600;
|
|
97
|
+
cursor: pointer;
|
|
98
|
+
text-decoration: none;
|
|
99
|
+
box-shadow: 0 2px 4px rgba(0, 255, 157, 0.2);
|
|
100
|
+
transition: all 0.3s ease;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.vote-button:hover {
|
|
104
|
+
transform: translateY(-2px);
|
|
105
|
+
box-shadow: 0 4px 8px rgba(0, 255, 157, 0.3);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
svg {
|
|
109
|
+
width: 16px;
|
|
110
|
+
height: 16px;
|
|
111
|
+
fill: currentColor;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.github-button {
|
|
115
|
+
display: inline-flex;
|
|
116
|
+
align-items: center;
|
|
117
|
+
gap: 8px;
|
|
118
|
+
padding: 8px 12px;
|
|
119
|
+
background: linear-gradient(135deg, #24292e 0%, #3f4448 100%);
|
|
120
|
+
color: #f5f5f5;
|
|
121
|
+
border: none;
|
|
122
|
+
border-radius: 8px;
|
|
123
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
124
|
+
font-size: 14px;
|
|
125
|
+
font-weight: 600;
|
|
126
|
+
cursor: pointer;
|
|
127
|
+
text-decoration: none;
|
|
128
|
+
box-shadow: 0 2px 4px rgba(36, 41, 46, 0.4);
|
|
129
|
+
transition: all 0.3s ease;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.github-button:hover {
|
|
133
|
+
transform: translateY(-2px);
|
|
134
|
+
box-shadow: 0 4px 10px rgba(36, 41, 46, 0.6);
|
|
135
|
+
background: linear-gradient(135deg, #3f4448 0%, #24292e 100%);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.github-button svg {
|
|
139
|
+
width: 18px;
|
|
140
|
+
height: 18px;
|
|
141
|
+
fill: currentColor;
|
|
142
|
+
}
|
|
143
|
+
</style>
|
|
144
|
+
</head>
|
|
145
|
+
<body onload="displayRandomQuote()">
|
|
146
|
+
|
|
147
|
+
<div id="shadowBox">
|
|
148
|
+
<h3 class="rainbow rainbow_text_animated">Arcade V</h3>
|
|
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
|
+
</div>
|
|
162
|
+
</body>
|
|
163
|
+
</html>
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
const quotes = [
|
|
2
|
+
"The quick brown fox jumps over the lazy dog.",
|
|
3
|
+
"Look out! There are llamas!",
|
|
4
|
+
"No, really, don't get up.",
|
|
5
|
+
"Whatever",
|
|
6
|
+
"Etc.",
|
|
7
|
+
"egassem sdrawkcab.",
|
|
8
|
+
"retsis ym tib ecno esøøm A .esøøm kitsejam eht gnidulcni ,slamina yrruf gnitseretni inäm dna ,metsys enøhpelet lufrëdnøw eht ,sekal ilevøl eht ees ,?rëy siht nedewS ni yadiløh a iert tøn iW",
|
|
9
|
+
"LOL",
|
|
10
|
+
"You got games on your phone?",
|
|
11
|
+
"Teeth are just tiny hardened bats sleeping upside down.",
|
|
12
|
+
"All Work and no play makes jack a dull boy.",
|
|
13
|
+
"Do not trust anyone you see wearing this costume.",
|
|
14
|
+
"You are receiving this email because Santa Claus has chosen you.",
|
|
15
|
+
"WE MUST SURVIVE.",
|
|
16
|
+
"Build a better mousetrap and get smarter mice.",
|
|
17
|
+
"Block one site and two more shall take its place.",
|
|
18
|
+
"Lorem ipsum dolor sit amet, adipiscing consequat adipiscing sit amet",
|
|
19
|
+
"check steam",
|
|
20
|
+
"We are all E G G",
|
|
21
|
+
"Cephalopod Conundrums",
|
|
22
|
+
"SOMETHING WONDERFUL HAS HAPPNED",
|
|
23
|
+
"Me when get",
|
|
24
|
+
"As seen on TV!",
|
|
25
|
+
"Kind of dragon free!",
|
|
26
|
+
"One of a kind!",
|
|
27
|
+
"Yaaay!",
|
|
28
|
+
"The bee's knees!",
|
|
29
|
+
"Baby Yoda Is Our Leader",
|
|
30
|
+
"Random splash!",
|
|
31
|
+
"Uninflammable!",
|
|
32
|
+
"Happiness has to be fought for.",
|
|
33
|
+
"Cogito ergo sum!",
|
|
34
|
+
"and then a skeleton popped out!",
|
|
35
|
+
"I miss the cheese chain",
|
|
36
|
+
"Deltarune Tomorrow",
|
|
37
|
+
"Cow tools",
|
|
38
|
+
"Your sister knows",
|
|
39
|
+
"Grammy warned you not to talk to the wind, but you went ahead and talked to the wind, didn't you? Grammy warned you!",
|
|
40
|
+
"SEE HOW THE SERFS WORK THE GROUND",
|
|
41
|
+
"B E H I N D Y O U",
|
|
42
|
+
"THIS IS THE GREATEST PLAAAAAN!",
|
|
43
|
+
"I Can Has Cheezburger?",
|
|
44
|
+
"DARK DARKER YET DARKER THE DARKNESS KEEPS GROWING THE SHADOWS CUTTING DEEPER PHOTON READINGS NEGATIVE THIS NEXT EXPERIMENT SEEMS VERY VERY INTERESTING",
|
|
45
|
+
"G R E A T E R T H A N L I F E",
|
|
46
|
+
"Why you drive on a parkway and park in a driveway",
|
|
47
|
+
"Emergency Frog Situation",
|
|
48
|
+
"EUGENE! not again",
|
|
49
|
+
"Me when games are unblocked",
|
|
50
|
+
"But wait, here comes the parasympathetic nervous system with the chair!",
|
|
51
|
+
"For the music of its crying, never dead, ever dying,",
|
|
52
|
+
"This is not your grave but you are welcome in it",
|
|
53
|
+
"Remember! Reality is an illusion, the universe is a hologram, buy gold! bye",
|
|
54
|
+
"Mr. skinny legs wants to find you",
|
|
55
|
+
"If we don't have a game, request it",
|
|
56
|
+
"Don't turn left at the crossroads",
|
|
57
|
+
"DO NOT GET WITHIN 6 FT OF THE ILLUMINATION",
|
|
58
|
+
"This is a splash text!",
|
|
59
|
+
"All copies of Arcade 5 are personalized",
|
|
60
|
+
"penguin",
|
|
61
|
+
"i forgor",
|
|
62
|
+
"i rember",
|
|
63
|
+
"We put the 'pro' in procrastination",
|
|
64
|
+
"me when i the me the when the the me the when i the when the me the the the when the",
|
|
65
|
+
"We're the website that's taking over the world.",
|
|
66
|
+
"ǝɯoɔlǝM",
|
|
67
|
+
"All your base are belong to us",
|
|
68
|
+
"If u self-hosted this then ur cool.",
|
|
69
|
+
"Do you think God stays in heaven because he too fears what he has created",
|
|
70
|
+
"For every many that dreames up th electric lightbulb, there is the man who dreams up the atom bomb.",
|
|
71
|
+
"The river does not flow with water.",
|
|
72
|
+
"Remember When The Platform Was Sliding Into The Fire Pit, And I Said 'Goodbye,' And You Were Like 'No Way!' And Then I Was All, 'We Pretended We Were Going To Murder You.' That Was Great",
|
|
73
|
+
"How Are You Holding Up? Because Im A Potato"
|
|
74
|
+
];
|
|
75
|
+
|
|
76
|
+
function displayRandomQuote() {
|
|
77
|
+
const quoteElement = document.getElementById("test");
|
|
78
|
+
const q = quotes[Math.floor(Math.random() * quotes.length)];
|
|
79
|
+
|
|
80
|
+
// Instantly hide the current text
|
|
81
|
+
quoteElement.style.opacity = "0";
|
|
82
|
+
quoteElement.style.animation = "none";
|
|
83
|
+
|
|
84
|
+
// Force browser to recognize the reset
|
|
85
|
+
void quoteElement.offsetWidth;
|
|
86
|
+
|
|
87
|
+
// Update text and restart fade animation
|
|
88
|
+
quoteElement.innerHTML = q;
|
|
89
|
+
quoteElement.style.animation = "fadeIn 1.2s ease forwards";
|
|
90
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
function searchGames() {
|
|
2
|
+
let input = document.getElementById('searchBar').value.toLowerCase();
|
|
3
|
+
let gameItems = document.querySelectorAll('.game-item');
|
|
4
|
+
|
|
5
|
+
gameItems.forEach(function(item) {
|
|
6
|
+
let title = item.querySelector('.game-title').textContent.toLowerCase();
|
|
7
|
+
if (title.indexOf(input) > -1) {
|
|
8
|
+
item.style.display = 'block'; // Show the game if it matches the search
|
|
9
|
+
} else {
|
|
10
|
+
item.style.display = 'none'; // Hide the game if it doesn't match
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
6
|
+
|
|
7
|
+
<!-- Google Fonts -->
|
|
8
|
+
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
|
9
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
|
|
10
|
+
<link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans&family=Comic+Neue&family=Courier+Prime&family=Press+Start+2P&family=VT323&family=Orbitron:wght@400;700&family=Roboto:wght@400;700&family=Open+Sans:wght@400;700&family=Patrick+Hand&family=Russo+One&display=swap" rel="stylesheet"/>
|
|
11
|
+
|
|
12
|
+
<script src="https://cdn.jsdelivr.net/gh/FutureElliotto/Arcade-4/navigation/customization.js"></script>
|
|
13
|
+
</head>
|
|
14
|
+
<body>
|
|
15
|
+
|
|
16
|
+
<!-- Cloak Dropdown -->
|
|
17
|
+
<select id="cloakDropdown" name="cloakDropdown"
|
|
18
|
+
onchange="cloakpage(this.options[this.selectedIndex].getAttribute('title'), this.options[this.selectedIndex].getAttribute('data-src'));">
|
|
19
|
+
<option disabled selected value> -- Cloak -- </option>
|
|
20
|
+
<option title="Arcade 4" data-src="https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/favicon/logo.png">None</option>
|
|
21
|
+
<option title="Play Blooket | Blooket" data-src="https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/favicon/blooket.ico">Blooket</option>
|
|
22
|
+
<option title="My Apps" data-src="https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/favicon/classlink.ico">Classlink</option>
|
|
23
|
+
<option title="Edpuzzle" data-src="https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/favicon/edpuzzle.png">Edpuzzle</option>
|
|
24
|
+
<option title="Get More Math!" data-src="https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/favicon/get_more_math.png">Get More Math</option>
|
|
25
|
+
<option title="Inbox" data-src="https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/favicon/gmail.ico">Gmail</option>
|
|
26
|
+
<option title="Home" data-src="https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/favicon/classroom.png">Google Classroom</option>
|
|
27
|
+
<option title="Google Docs" data-src="https://cdn.jsdelivr.net/gh/FutureElliotto/arcade-4-images/favicon/docs.ico">Google Docs</option>
|
|
28
|
+
<option title="Google Slides" data-src="https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/favicon/slides.ico">Google Slides</option>
|
|
29
|
+
<option title="IXL | Dashboard" data-src="https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/favicon/ixl.png">IXL</option>
|
|
30
|
+
<option title="Dashboard | Khan Academy" data-src="https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/favicon/khan.ico">Khan Academy</option>
|
|
31
|
+
<option title="[Online Testing] - Online Testing" data-src="https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/favicon/linkit.png">Linkit</option>
|
|
32
|
+
<option title="For Students - Enter Your Code | Wayground (Formerly Quizizz)" data-src="https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/favicon/wayground.ico">Wayground</option>
|
|
33
|
+
</select>
|
|
34
|
+
|
|
35
|
+
<!-- Background Theme Dropdown -->
|
|
36
|
+
<select id="backgroundDropdown" name="backgroundDropdown"
|
|
37
|
+
onchange="changetheme(this.options[this.selectedIndex].getAttribute('data-src'));">
|
|
38
|
+
<option disabled selected value> -- Background -- </option>
|
|
39
|
+
<option data-src="https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/backgrounds/void_theme.png">Arcade Dark (default)</option>
|
|
40
|
+
<option data-src="https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/backgrounds/void_light_theme.jpg">Arcade Light</option>
|
|
41
|
+
<option data-src="https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/backgrounds/apollo_theme.gif">Apollo</option>
|
|
42
|
+
<option data-src="https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/backgrounds/duck_math_theme.png">Duck Math</option>
|
|
43
|
+
<option data-src="https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/backgrounds/bliss_theme.jpg">Bliss (Windows XP)</option>
|
|
44
|
+
<option data-src="https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/backgrounds/frutiger_aero_1_theme.png">Frutiger Aero</option>
|
|
45
|
+
<option data-src="https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/backgrounds/interstellar_theme.png">Interstellar</option>
|
|
46
|
+
<option data-src="https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/backgrounds/seraph_theme.png">Seraph</option>
|
|
47
|
+
<option data-src="https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/backgrounds/poki_theme.png">Poki</option>
|
|
48
|
+
</select>
|
|
49
|
+
|
|
50
|
+
<!-- Font Dropdown -->
|
|
51
|
+
<select id="fontDropdown" name="fontDropdown" onchange="changeFont(this.value);">
|
|
52
|
+
<option disabled selected value> -- Font -- </option>
|
|
53
|
+
<option value="'Pixelify Sans', sans-serif">Pixelify Sans (default)</option>
|
|
54
|
+
<option value="'Comic Sans', cursive">Comic Sans</option>
|
|
55
|
+
<option value="'Courier New', monospace">Courier New</option>
|
|
56
|
+
<option value="'VT323', monospace">VT323</option>
|
|
57
|
+
<option value="'Orbitron', sans-serif">Orbitron</option>
|
|
58
|
+
<option value="'Patrick Hand', cursive">Patrick Hand</option>
|
|
59
|
+
<option value="'Russo One', sans-serif">Russo One</option>
|
|
60
|
+
<option value="'Roboto', sans-serif">Roboto</option>
|
|
61
|
+
<option value="'Open Sans', sans-serif">Open Sans</option>
|
|
62
|
+
<option value="Arial, sans-serif">Arial</option>
|
|
63
|
+
</select>
|
|
64
|
+
|
|
65
|
+
<!-- Text Color Picker -->
|
|
66
|
+
<div>
|
|
67
|
+
<h3>Change Normal Text Color</h3>
|
|
68
|
+
<input
|
|
69
|
+
type="color"
|
|
70
|
+
id="textColorPicker1"
|
|
71
|
+
style="width: 25%;"
|
|
72
|
+
oninput="changeTextColor(this.value)"
|
|
73
|
+
/>
|
|
74
|
+
</div>
|
|
75
|
+
|
|
76
|
+
<div>
|
|
77
|
+
<h3>Change Selected Text Color</h3>
|
|
78
|
+
<input
|
|
79
|
+
type="color"
|
|
80
|
+
id="textColorPicker2"
|
|
81
|
+
style="width: 25%;"
|
|
82
|
+
oninput="changeSelectedTextColor(this.value); changeFocusTextColor(this.value); changeActiveTextColor(this.value);"
|
|
83
|
+
/>
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
<button id="resetButton" onclick="resetToDefault()" style="margin-top: 20px; padding: 10px 20px; font-size: 16px;">
|
|
87
|
+
Reset to Default
|
|
88
|
+
</button>
|
|
89
|
+
|
|
90
|
+
</body>
|
|
91
|
+
</html>
|
|
@@ -0,0 +1,317 @@
|
|
|
1
|
+
/* General body styles */
|
|
2
|
+
body {
|
|
3
|
+
background-image: url('https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/backgrounds/void_theme.png');
|
|
4
|
+
background-attachment: fixed;
|
|
5
|
+
background-repeat: no-repeat;
|
|
6
|
+
background-size: cover;
|
|
7
|
+
font-family: "Pixelify Sans", sans-serif;
|
|
8
|
+
text-align: center;
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding-top: 60px;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
body, html {
|
|
14
|
+
margin: 0;
|
|
15
|
+
padding: 0;
|
|
16
|
+
height: 100%;
|
|
17
|
+
}
|
|
18
|
+
body, .navbar {
|
|
19
|
+
transition: background-image 0.5s ease-in-out;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/* Pixelated Spinner Container */
|
|
23
|
+
#spinner {
|
|
24
|
+
position: fixed;
|
|
25
|
+
top: 0;
|
|
26
|
+
left: 0;
|
|
27
|
+
width: 100%;
|
|
28
|
+
height: 100%;
|
|
29
|
+
background-color: rgba(0, 0, 0, 0.85);
|
|
30
|
+
display: flex;
|
|
31
|
+
align-items: center;
|
|
32
|
+
justify-content: center;
|
|
33
|
+
z-index: 9999;
|
|
34
|
+
display: none;
|
|
35
|
+
}
|
|
36
|
+
.game-button button, .game-button-no-rounding button {
|
|
37
|
+
border: none;
|
|
38
|
+
background: none;
|
|
39
|
+
padding: 0;
|
|
40
|
+
outline: none;
|
|
41
|
+
}
|
|
42
|
+
/* Pixel block spinner */
|
|
43
|
+
.spinner-icon {
|
|
44
|
+
width: 16px;
|
|
45
|
+
height: 16px;
|
|
46
|
+
background: #ffffff;
|
|
47
|
+
image-rendering: pixelated;
|
|
48
|
+
box-shadow:
|
|
49
|
+
32px 0 #ffffff,
|
|
50
|
+
0 32px #ffffff,
|
|
51
|
+
32px 32px #ffffff;
|
|
52
|
+
animation: pixel-spin 1s steps(1) infinite;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
@keyframes pixel-spin {
|
|
56
|
+
0% {
|
|
57
|
+
box-shadow:
|
|
58
|
+
32px 0 #ffffff,
|
|
59
|
+
0 32px #ffffff,
|
|
60
|
+
32px 32px #ffffff;
|
|
61
|
+
}
|
|
62
|
+
25% {
|
|
63
|
+
box-shadow:
|
|
64
|
+
0 0 #ffffff,
|
|
65
|
+
32px 0 #ffffff,
|
|
66
|
+
0 32px #ffffff;
|
|
67
|
+
}
|
|
68
|
+
50% {
|
|
69
|
+
box-shadow:
|
|
70
|
+
0 0 #ffffff,
|
|
71
|
+
32px 32px #ffffff,
|
|
72
|
+
0 32px #ffffff;
|
|
73
|
+
}
|
|
74
|
+
75% {
|
|
75
|
+
box-shadow:
|
|
76
|
+
0 0 #ffffff,
|
|
77
|
+
0 32px #ffffff,
|
|
78
|
+
32px 0 #ffffff;
|
|
79
|
+
}
|
|
80
|
+
100% {
|
|
81
|
+
box-shadow:
|
|
82
|
+
32px 0 #ffffff,
|
|
83
|
+
0 32px #ffffff,
|
|
84
|
+
32px 32px #ffffff;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
/* Navbar styles */
|
|
88
|
+
.navbar {
|
|
89
|
+
display: flex;
|
|
90
|
+
justify-content: space-around;
|
|
91
|
+
width: 100%;
|
|
92
|
+
text-align: left;
|
|
93
|
+
list-style-type: none;
|
|
94
|
+
margin: 0;
|
|
95
|
+
padding: 0;
|
|
96
|
+
position: fixed;
|
|
97
|
+
top: 0;
|
|
98
|
+
left: 0;
|
|
99
|
+
background-size: cover;
|
|
100
|
+
z-index: 1000;
|
|
101
|
+
border-bottom: none;
|
|
102
|
+
background-image: url('https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/backgrounds/void_theme.png');
|
|
103
|
+
|
|
104
|
+
}
|
|
105
|
+
|
|
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
|
+
|
|
115
|
+
li a:hover {
|
|
116
|
+
font-weight: bold;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
li a.active {
|
|
120
|
+
color: #7F00FF;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.dropdown {
|
|
124
|
+
position: relative;
|
|
125
|
+
display: inline-block;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.dropdown-content {
|
|
129
|
+
background-image: url('https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/backgrounds/void_theme.png');
|
|
130
|
+
background-attachment: fixed;
|
|
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
|
+
}
|
|
147
|
+
|
|
148
|
+
.dropdown:hover .dropdown-content {
|
|
149
|
+
display: block;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/* Game buttons container styles */
|
|
153
|
+
.game-buttons-container {
|
|
154
|
+
display: flex;
|
|
155
|
+
flex-wrap: wrap;
|
|
156
|
+
justify-content: center;
|
|
157
|
+
gap: 20px;
|
|
158
|
+
margin-top: 100px; /* Ensures space below navbar */
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
/* Game button styling */
|
|
162
|
+
.game-button, .game-button-no-rounding {
|
|
163
|
+
width: 200px;
|
|
164
|
+
height: 250px; /* image + title */
|
|
165
|
+
padding: 15px;
|
|
166
|
+
box-sizing: border-box;
|
|
167
|
+
cursor: pointer;
|
|
168
|
+
display: flex;
|
|
169
|
+
flex-direction: column;
|
|
170
|
+
align-items: center;
|
|
171
|
+
justify-content: flex-start;
|
|
172
|
+
transition: transform 0.5s ease;
|
|
173
|
+
transform-origin: center center; /* Important */
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.game-button:hover, .game-button-no-rounding:hover {
|
|
177
|
+
transform: scale(1.1); /* smaller scale to reduce overlap */
|
|
178
|
+
z-index: 10; /* bring hovered button above others */
|
|
179
|
+
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.game-button img, .game-button-no-rounding img {
|
|
183
|
+
width: 200px;
|
|
184
|
+
height: 200px;
|
|
185
|
+
object-fit: cover;
|
|
186
|
+
border-radius: 25px;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
.game-title {
|
|
191
|
+
color: white;
|
|
192
|
+
font-size: 18px;
|
|
193
|
+
margin-top: 10px;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
/* Iframe Styling */
|
|
197
|
+
iframe {
|
|
198
|
+
width: 100%;
|
|
199
|
+
height: calc(100vh - 60px);
|
|
200
|
+
position: absolute;
|
|
201
|
+
top: 60px;
|
|
202
|
+
left: 0;
|
|
203
|
+
right: 0;
|
|
204
|
+
border: none;
|
|
205
|
+
}
|
|
206
|
+
|
|
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
|
+
|
|
220
|
+
#searchBar:focus {
|
|
221
|
+
color: #7F00FF;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
select {
|
|
225
|
+
font-family: "Pixelify Sans", sans-serif;
|
|
226
|
+
padding: 10px 20px;
|
|
227
|
+
font-size: 16px;
|
|
228
|
+
background-color: transparent;
|
|
229
|
+
width: 40%;
|
|
230
|
+
max-width: 400px;
|
|
231
|
+
border-radius: 5px;
|
|
232
|
+
border: 2px solid white;
|
|
233
|
+
outline: none;
|
|
234
|
+
color: white;
|
|
235
|
+
appearance: none;
|
|
236
|
+
background-image: url('../images/arrow-down.svg');
|
|
237
|
+
background-repeat: no-repeat;
|
|
238
|
+
background-position: right 10px center;
|
|
239
|
+
background-size: 16px;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
select:focus {
|
|
243
|
+
border-color: #7F00FF;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
option {
|
|
247
|
+
background-color: black;
|
|
248
|
+
color: white;
|
|
249
|
+
padding: 10px;
|
|
250
|
+
font-size: 16px;
|
|
251
|
+
}
|
|
252
|
+
#resetButton {
|
|
253
|
+
background-color: transparent;
|
|
254
|
+
color: white;
|
|
255
|
+
border: 2px solid white;
|
|
256
|
+
border-radius: 5px;
|
|
257
|
+
cursor: pointer;
|
|
258
|
+
font-family: "Pixelify Sans", sans-serif;
|
|
259
|
+
transition: all 0.3s ease;
|
|
260
|
+
}
|
|
261
|
+
option:disabled {
|
|
262
|
+
color: gray;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
.content-container {
|
|
266
|
+
width: 100%;
|
|
267
|
+
height: calc(100vh - 60px);
|
|
268
|
+
position: absolute;
|
|
269
|
+
top: 60px;
|
|
270
|
+
left: 0;
|
|
271
|
+
right: 0;
|
|
272
|
+
border: none;
|
|
273
|
+
color: white;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.favorite-icon {
|
|
277
|
+
cursor: pointer;
|
|
278
|
+
font-size: 1rem;
|
|
279
|
+
margin-left: 6px;
|
|
280
|
+
}
|
|
281
|
+
.pagination {
|
|
282
|
+
margin: 40px 0 60px 0; /* add vertical space */
|
|
283
|
+
display: flex;
|
|
284
|
+
background-color: transparent;
|
|
285
|
+
justify-content: center;
|
|
286
|
+
flex-wrap: wrap;
|
|
287
|
+
gap: 10px;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
label {
|
|
291
|
+
color: white;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.pagination button {
|
|
295
|
+
margin: 0 5px;
|
|
296
|
+
padding: 5px 10px;
|
|
297
|
+
background-color: transparent;
|
|
298
|
+
color: white;
|
|
299
|
+
border: none;
|
|
300
|
+
border-radius: 5px;
|
|
301
|
+
cursor: pointer;
|
|
302
|
+
font-family: "Pixelify Sans", sans-serif;
|
|
303
|
+
transition: all 0.3s ease;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.pagination button.active-page {
|
|
307
|
+
border: 2px solid white;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
p {
|
|
311
|
+
color: white;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
select, input[type="text"] {
|
|
315
|
+
padding: 5px;
|
|
316
|
+
font-size: 14px;
|
|
317
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@arcade-v/arcade_v",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "a web-based collection of classic and modern browser games, designed to be easily hosted and customizable.",
|
|
5
|
+
"scripts": {
|
|
6
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
7
|
+
},
|
|
8
|
+
"author": "Arcade V",
|
|
9
|
+
"license": "ISC"
|
|
10
|
+
}
|