grapes-andrewdingus
Version:
GRAPES OS static site — CDN-ready via unpkg
372 lines (324 loc) • 10.9 kB
HTML
<html lang="en">
<head>
<script>
(function () {
if (!location.pathname.endsWith("/") && !location.pathname.endsWith("index.html")) {
location.replace(location.pathname + "/index.html" + location.search + location.hash);
return;
}
var baseUrl = new URL(location.href);
baseUrl.hash = "";
baseUrl.search = "";
baseUrl.pathname = baseUrl.pathname.replace(/index\.html$/, "");
if (!baseUrl.pathname.endsWith("/")) baseUrl.pathname += "/";
var baseEl = document.createElement("base");
baseEl.href = baseUrl.href;
document.head.insertBefore(baseEl, document.head.firstChild);
})();
</script>
<meta charset="UTF-8" />
<meta
property="og:image"
content="https://grapes-os.org/assets/img/grapes_mascot.png"
/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="GRAPES OS" />
<meta
name="description"
content="Play unblocked games at school on GRAPES OS."
/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="English" />
<title>Games — GRAPES OS</title>
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
<link
rel="preload"
href="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"
as="script"
crossorigin
/>
<meta charset="UTF-8" />
<meta property="og:image" content="https://grapes-os.org/assets/img/grapes_mascot.png" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<link rel="stylesheet" href="../assets/css/topnav.css" />
<link rel="stylesheet" href="../assets/css/main.css" />
<script src="../assets/js/main.js"></script>
<style>
* {
box-sizing: border-box;
}
body {
background-color: #07070e;
background-image: radial-gradient(
ellipse 80% 50% at 50% -10%,
rgba(139, 92, 246, 0.18) 0%,
transparent 60%
);
background-attachment: fixed;
}
.main-container {
max-width: 860px;
margin: 0 auto;
padding: 0 20px;
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
}
.card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 22px;
box-shadow: 0 8px 36px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.05) inset;
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
transition: all 0.25s ease;
}
.card:hover {
border-color: rgba(139, 92, 246, 0.25);
}
.game-card {
text-align: center;
width: 100%;
max-width: 820px;
overflow-x: auto;
}
.game-title {
font-size: 2rem ;
font-weight: 700 ;
margin: 0 0 20px 0 ;
background: linear-gradient(135deg, #f0f0f8 30%, #c4b5fd 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: none ;
line-height: 1.2 ;
}
.game-iframe-container {
z-index: 1000;
position: relative;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
margin-bottom: 16px;
min-width: 600px;
max-width: 800px;
aspect-ratio: 4 / 3;
margin-left: auto;
margin-right: auto;
}
.game-iframe-container iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
}
.fullscreen-button {
background: rgba(139, 92, 246, 0.2);
backdrop-filter: blur(12px);
border: 1px solid rgba(139, 92, 246, 0.4);
padding: 12px 24px;
border-radius: 999px;
color: rgba(240, 240, 248, 0.95);
font-size: 0.95rem;
font-weight: 600;
font-family: "Inter", "Montserrat", sans-serif;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 4px 16px rgba(139, 92, 246, 0.2);
letter-spacing: 0.3px;
}
.fullscreen-button:hover {
background: rgba(139, 92, 246, 0.4);
border-color: rgba(139, 92, 246, 0.7);
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(139, 92, 246, 0.35);
}
.fullscreen-button:active {
transform: translateY(0);
}
.game-iframe-container .fullscreen-button {
position: absolute;
top: 10px;
right: 10px;
padding: 8px 14px;
font-size: 0.85rem;
z-index: 2;
}
.description-section {
padding: 22px 28px;
width: 100%;
max-width: 820px;
}
.description-title {
font-size: 1.3rem ;
font-weight: 700 ;
margin: 0 0 14px 0 ;
color: #c4b5fd ;
line-height: 1.3 ;
}
#game-description-box {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 14px;
padding: 18px;
margin: 0;
color: rgba(240, 240, 248, 0.8);
font-size: 0.9rem;
line-height: 1.65;
}
#game-description-box h1,
#game-description-box h2,
#game-description-box h3,
#game-description-box h4,
#game-description-box h5,
#game-description-box h6 {
margin: 0 0 10px 0 ;
line-height: 1.4 ;
color: #a78bfa ;
}
#game-description-box h1 { font-size: 1.3rem ; }
#game-description-box h2 { font-size: 1.1rem ; }
#game-description-box p { margin: 0 0 10px 0; }
#game-description-box ul,
#game-description-box ol {
margin: 0 0 10px 20px;
padding: 0;
}
#game-description-box a {
color: #a78bfa;
text-decoration: none;
border-bottom: 1px solid rgba(167, 139, 250, 0.3);
transition: all 0.2s ease;
}
#game-description-box a:hover {
border-bottom-color: #a78bfa;
color: #c4b5fd;
}
#game-description-box code {
background: rgba(139, 92, 246, 0.15);
padding: 2px 7px;
border-radius: 6px;
font-size: 0.85rem;
font-family: "Monaco", "Menlo", monospace;
}
#game-description-box pre {
background: rgba(255, 255, 255, 0.04);
padding: 14px;
border-radius: 10px;
overflow: auto;
font-size: 0.85rem;
border-left: 3px solid #8b5cf6;
}
.related-section {
padding: 22px 28px;
width: 100%;
max-width: 820px;
}
.related-title {
font-size: 1.5rem ;
font-weight: 700 ;
margin: 0 0 18px 0 ;
color: #c4b5fd ;
line-height: 1.3 ;
}
#related-games {
gap: 14px;
}
.related-game-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
padding: 18px;
text-align: center;
transition: all 0.25s ease;
cursor: pointer;
}
.related-game-card:hover {
background: rgba(139, 92, 246, 0.12);
transform: translateY(-2px);
border-color: rgba(139, 92, 246, 0.35);
box-shadow: 0 8px 24px rgba(139, 92, 246, 0.2);
}
@media (max-width: 840px) {
.main-container {
padding: 0 10px;
gap: 14px;
}
.game-card {
min-width: 0;
width: 100%;
overflow-x: auto;
}
.game-iframe-container {
min-width: 600px;
}
}
@media (max-width: 640px) {
.description-section,
.related-section {
padding: 16px;
}
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.card { animation: fadeInUp 0.5s ease forwards; }
.card:nth-child(2) { animation-delay: 0.08s; }
.card:nth-child(3) { animation-delay: 0.16s; }
</style>
<link rel="icon" type="image/x-icon" href="../assets/img/grapes_mascot.png" />
<link rel="mask-icon" type="" href="../assets/img/grapes_mascot.png" color="#111" />
<noscript>Your browser doesn't have JavaScript enabled. Please enable JavaScript or switch to a browser that supports it.</noscript>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.8/dist/purify.min.js" defer></script>
<script src="../assets/js/index.js" type="text/javascript" defer></script>
<script src="../assets/js/app_functions.js" type="text/javascript"></script>
</head>
<body>
<div class="main-container" style="margin-top: 6rem" id="main_div">
<!-- Main Game Card -->
<div class="card game-card">
<h1 id="game-title" class="game-title"></h1>
<div class="game-iframe-container">
<iframe
class="gameloc"
id="gameFrame"
allowfullscreen=""
allow="autoplay; fullscreen; camera; focus-without-user-activation *; monetization; gamepad;
keyboard-map *; xr-spatial-tracking; clipboard-write"
name="gameFrame"
scrolling="no"
sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock
allow-popups allow-popups-to-escape-sandbox allow-presentation allow-scripts allow-same-origin
allow-downloads"
src="loading.html"
title="Game"
></iframe>
</div>
<button class="fullscreen-button" onclick="openFullscreen();">
🎮 Enter Fullscreen
</button>
</div>
<!-- Game Description -->
<div class="card description-section">
<h3 class="description-title">About This Game</h3>
<div id="game-description-box">
<div id="game-description"></div>
</div>
</div>
<!-- Related Games -->
<div class="card related-section">
<h2 class="related-title">Related Games</h2>
<div id="related-games"></div>
</div>
</div>
</body>
</html>