mirror of
https://github.com/Farama-Foundation/Gymnasium.git
synced 2025-07-31 05:44:31 +00:00
Fixes Atari redirect for different themes (#1354)
This commit is contained in:
Mark Towers
GitHub
@@ -10,104 +10,41 @@ lastpage:
|
||||
<head>
|
||||
<title>Redirecting to Atari's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -145,8 +82,39 @@ lastpage:
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Adventure
|
||||
<head>
|
||||
<title>Redirecting to Adventure's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Adventure
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/adventure";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Air Raid
|
||||
<head>
|
||||
<title>Redirecting to Air Raid's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Air Raid
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/air_raid";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Alien
|
||||
<head>
|
||||
<title>Redirecting to Alien's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Alien
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/alien";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Amidar
|
||||
<head>
|
||||
<title>Redirecting to Amidar's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Amidar
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/amidar";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Assault
|
||||
<head>
|
||||
<title>Redirecting to Assault's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Assault
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/assault";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Asterix
|
||||
<head>
|
||||
<title>Redirecting to Asterix's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Asterix
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/asterix";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Asteroids
|
||||
<head>
|
||||
<title>Redirecting to Asteroids's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Asteroids
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/asteroids";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Atlantis
|
||||
<head>
|
||||
<title>Redirecting to Atlantis's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Atlantis
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/atlantis";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Atlantis2
|
||||
<head>
|
||||
<title>Redirecting to Atlantis2's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Atlantis2
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/atlantis2";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Backgammon
|
||||
<head>
|
||||
<title>Redirecting to Backgammon's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Backgammon
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/backgammon";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Bank Heist
|
||||
<head>
|
||||
<title>Redirecting to Bank Heist's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Bank Heist
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/bank_heist";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Basic Math
|
||||
<head>
|
||||
<title>Redirecting to Basic Math's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Basic Math
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/basic_math";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Battle Zone
|
||||
<head>
|
||||
<title>Redirecting to Battle Zone's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Battle Zone
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/battle_zone";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Beam Rider
|
||||
<head>
|
||||
<title>Redirecting to Beam Rider's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Beam Rider
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/beam_rider";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Berzerk
|
||||
<head>
|
||||
<title>Redirecting to Berzerk's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Berzerk
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/berzerk";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Blackjack
|
||||
<head>
|
||||
<title>Redirecting to Blackjack's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Blackjack
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/blackjack";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Bowling
|
||||
<head>
|
||||
<title>Redirecting to Bowling's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Bowling
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/bowling";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Boxing
|
||||
<head>
|
||||
<title>Redirecting to Boxing's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Boxing
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/boxing";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Breakout
|
||||
<head>
|
||||
<title>Redirecting to Breakout's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Breakout
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/breakout";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Carnival
|
||||
<head>
|
||||
<title>Redirecting to Carnival's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Carnival
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/carnival";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Casino
|
||||
<head>
|
||||
<title>Redirecting to Casino's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Casino
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/casino";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Centipede
|
||||
<head>
|
||||
<title>Redirecting to Centipede's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Centipede
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/centipede";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Chopper Command
|
||||
<head>
|
||||
<title>Redirecting to Chopper Command's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Chopper Command
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/chopper_command";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Crazy Climber
|
||||
<head>
|
||||
<title>Redirecting to Crazy Climber's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Crazy Climber
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/crazy_climber";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Crossbow
|
||||
<head>
|
||||
<title>Redirecting to Crossbow's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Crossbow
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/crossbow";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Darkchambers
|
||||
<head>
|
||||
<title>Redirecting to Darkchambers's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Darkchambers
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/darkchambers";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Defender
|
||||
<head>
|
||||
<title>Redirecting to Defender's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Defender
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/defender";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Demon Attack
|
||||
<head>
|
||||
<title>Redirecting to Demon Attack's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Demon Attack
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/demon_attack";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Donkey Kong
|
||||
<head>
|
||||
<title>Redirecting to Donkey Kong's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Donkey Kong
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/donkey_kong";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Double Dunk
|
||||
<head>
|
||||
<title>Redirecting to Double Dunk's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Double Dunk
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/double_dunk";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Earthworld
|
||||
<head>
|
||||
<title>Redirecting to Earthworld's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Earthworld
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/earthworld";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Elevator Action
|
||||
<head>
|
||||
<title>Redirecting to Elevator Action's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Elevator Action
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/elevator_action";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Enduro
|
||||
<head>
|
||||
<title>Redirecting to Enduro's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Enduro
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/enduro";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Entombed
|
||||
<head>
|
||||
<title>Redirecting to Entombed's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Entombed
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/entombed";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Et
|
||||
<head>
|
||||
<title>Redirecting to Et's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Et
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/et";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Fishing Derby
|
||||
<head>
|
||||
<title>Redirecting to Fishing Derby's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Fishing Derby
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/fishing_derby";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Flag Capture
|
||||
<head>
|
||||
<title>Redirecting to Flag Capture's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Flag Capture
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/flag_capture";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Freeway
|
||||
<head>
|
||||
<title>Redirecting to Freeway's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Freeway
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/freeway";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Frogger
|
||||
<head>
|
||||
<title>Redirecting to Frogger's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Frogger
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/frogger";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Frostbite
|
||||
<head>
|
||||
<title>Redirecting to Frostbite's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Frostbite
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/frostbite";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Galaxian
|
||||
<head>
|
||||
<title>Redirecting to Galaxian's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Galaxian
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/galaxian";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Gopher
|
||||
<head>
|
||||
<title>Redirecting to Gopher's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Gopher
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/gopher";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Gravitar
|
||||
<head>
|
||||
<title>Redirecting to Gravitar's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Gravitar
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/gravitar";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Hangman
|
||||
<head>
|
||||
<title>Redirecting to Hangman's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Hangman
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/hangman";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Haunted House
|
||||
<head>
|
||||
<title>Redirecting to Haunted House's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Haunted House
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/haunted_house";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Hero
|
||||
<head>
|
||||
<title>Redirecting to Hero's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Hero
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/hero";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Human Cannonball
|
||||
<head>
|
||||
<title>Redirecting to Human Cannonball's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Human Cannonball
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/human_cannonball";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Ice Hockey
|
||||
<head>
|
||||
<title>Redirecting to Ice Hockey's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Ice Hockey
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/ice_hockey";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Jamesbond
|
||||
<head>
|
||||
<title>Redirecting to Jamesbond's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Jamesbond
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/jamesbond";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Journey Escape
|
||||
<head>
|
||||
<title>Redirecting to Journey Escape's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Journey Escape
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/journey_escape";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Kaboom
|
||||
<head>
|
||||
<title>Redirecting to Kaboom's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Kaboom
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/kaboom";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Kangaroo
|
||||
<head>
|
||||
<title>Redirecting to Kangaroo's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Kangaroo
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/kangaroo";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Keystone Kapers
|
||||
<head>
|
||||
<title>Redirecting to Keystone Kapers's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Keystone Kapers
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/keystone_kapers";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: King Kong
|
||||
<head>
|
||||
<title>Redirecting to King Kong's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: King Kong
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/king_kong";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Klax
|
||||
<head>
|
||||
<title>Redirecting to Klax's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Klax
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/klax";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Koolaid
|
||||
<head>
|
||||
<title>Redirecting to Koolaid's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Koolaid
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/koolaid";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Krull
|
||||
<head>
|
||||
<title>Redirecting to Krull's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Krull
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/krull";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Kung Fu Master
|
||||
<head>
|
||||
<title>Redirecting to Kung Fu Master's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Kung Fu Master
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/kung_fu_master";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Laser Gates
|
||||
<head>
|
||||
<title>Redirecting to Laser Gates's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Laser Gates
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/laser_gates";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Lost Luggage
|
||||
<head>
|
||||
<title>Redirecting to Lost Luggage's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Lost Luggage
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/lost_luggage";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Mario Bros
|
||||
<head>
|
||||
<title>Redirecting to Mario Bros's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Mario Bros
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/mario_bros";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Miniature Golf
|
||||
<head>
|
||||
<title>Redirecting to Miniature Golf's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Miniature Golf
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/miniature_golf";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Montezuma Revenge
|
||||
<head>
|
||||
<title>Redirecting to Montezuma Revenge's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Montezuma Revenge
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/montezuma_revenge";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Mr Do
|
||||
<head>
|
||||
<title>Redirecting to Mr Do's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Mr Do
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/mr_do";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Ms Pacman
|
||||
<head>
|
||||
<title>Redirecting to Ms Pacman's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Ms Pacman
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/ms_pacman";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Name This Game
|
||||
<head>
|
||||
<title>Redirecting to Name This Game's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Name This Game
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/name_this_game";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Othello
|
||||
<head>
|
||||
<title>Redirecting to Othello's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Othello
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/othello";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Pacman
|
||||
<head>
|
||||
<title>Redirecting to Pacman's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Pacman
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/pacman";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Phoenix
|
||||
<head>
|
||||
<title>Redirecting to Phoenix's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Phoenix
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/phoenix";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Pitfall
|
||||
<head>
|
||||
<title>Redirecting to Pitfall's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Pitfall
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/pitfall";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Pitfall2
|
||||
<head>
|
||||
<title>Redirecting to Pitfall2's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Pitfall2
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/pitfall2";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Pong
|
||||
<head>
|
||||
<title>Redirecting to Pong's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Pong
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/pong";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Pooyan
|
||||
<head>
|
||||
<title>Redirecting to Pooyan's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Pooyan
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/pooyan";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Private Eye
|
||||
<head>
|
||||
<title>Redirecting to Private Eye's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Private Eye
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/private_eye";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Qbert
|
||||
<head>
|
||||
<title>Redirecting to Qbert's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Qbert
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/qbert";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Riverraid
|
||||
<head>
|
||||
<title>Redirecting to Riverraid's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Riverraid
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/riverraid";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Road Runner
|
||||
<head>
|
||||
<title>Redirecting to Road Runner's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Road Runner
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/road_runner";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Robotank
|
||||
<head>
|
||||
<title>Redirecting to Robotank's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Robotank
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/robotank";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Seaquest
|
||||
<head>
|
||||
<title>Redirecting to Seaquest's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Seaquest
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/seaquest";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Sir Lancelot
|
||||
<head>
|
||||
<title>Redirecting to Sir Lancelot's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Sir Lancelot
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/sir_lancelot";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Skiing
|
||||
<head>
|
||||
<title>Redirecting to Skiing's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Skiing
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/skiing";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Solaris
|
||||
<head>
|
||||
<title>Redirecting to Solaris's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Solaris
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/solaris";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Space Invaders
|
||||
<head>
|
||||
<title>Redirecting to Space Invaders's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Space Invaders
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/space_invaders";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Space War
|
||||
<head>
|
||||
<title>Redirecting to Space War's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Space War
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/space_war";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Star Gunner
|
||||
<head>
|
||||
<title>Redirecting to Star Gunner's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Star Gunner
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/star_gunner";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Superman
|
||||
<head>
|
||||
<title>Redirecting to Superman's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Superman
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/superman";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Surround
|
||||
<head>
|
||||
<title>Redirecting to Surround's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Surround
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/surround";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Tennis
|
||||
<head>
|
||||
<title>Redirecting to Tennis's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Tennis
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/tennis";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Tetris
|
||||
<head>
|
||||
<title>Redirecting to Tetris's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Tetris
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/tetris";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Tic Tac Toe 3D
|
||||
<head>
|
||||
<title>Redirecting to Tic Tac Toe 3D's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Tic Tac Toe 3D
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/tic_tac_toe_3d";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Time Pilot
|
||||
<head>
|
||||
<title>Redirecting to Time Pilot's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Time Pilot
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/time_pilot";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Trondead
|
||||
<head>
|
||||
<title>Redirecting to Trondead's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Trondead
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/trondead";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Turmoil
|
||||
<head>
|
||||
<title>Redirecting to Turmoil's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Turmoil
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/turmoil";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Tutankham
|
||||
<head>
|
||||
<title>Redirecting to Tutankham's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Tutankham
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/tutankham";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Up N Down
|
||||
<head>
|
||||
<title>Redirecting to Up N Down's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Up N Down
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/up_n_down";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Venture
|
||||
<head>
|
||||
<title>Redirecting to Venture's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Venture
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/venture";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Video Checkers
|
||||
<head>
|
||||
<title>Redirecting to Video Checkers's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Video Checkers
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/video_checkers";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Video Chess
|
||||
<head>
|
||||
<title>Redirecting to Video Chess's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Video Chess
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/video_chess";
|
||||
|
||||
@@ -8,104 +8,41 @@ title: Video Cube
|
||||
<head>
|
||||
<title>Redirecting to Video Cube's documentation</title>
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--popup-background: #ffffff;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.5);
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #333333;
|
||||
--button-hover: #e0e0e0;
|
||||
--button-border: #cccccc;
|
||||
--link-color: #0066cc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #222222;
|
||||
--text-color: #e0e0e0;
|
||||
--popup-background: #333333;
|
||||
--popup-shadow: rgba(0, 0, 0, 0.7);
|
||||
--button-background: #444444;
|
||||
--button-text: #e0e0e0;
|
||||
--button-hover: #555555;
|
||||
--button-border: #666666;
|
||||
--link-color: #66b0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 20px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Basic styles for the popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--popup-shadow);
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Default background overlay */
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: var(--popup-background);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
background-color: #fff; /* Default light content background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
}
|
||||
.dark-theme .popup {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for dark theme */
|
||||
}
|
||||
.dark-theme .popup-content {
|
||||
background-color: #333; /* Dark content background */
|
||||
color: #fff; /* Light text for dark theme */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-background);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
#atariRedirectBtn {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#atariRedirectBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
user-select: none;
|
||||
/* Add spacing between checkbox and label text */
|
||||
input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -143,8 +80,39 @@ title: Video Cube
|
||||
document.cookie = `${name}=${value}; ${expires}; path=/`; // environments/atari/
|
||||
}
|
||||
|
||||
// Function to apply theme to the popup
|
||||
function applyTheme() {
|
||||
const theme = localStorage.getItem("theme") || "auto";
|
||||
const body = document.body;
|
||||
|
||||
// Remove any existing theme classes
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
|
||||
if (theme === "dark") {
|
||||
body.classList.add("dark-theme");
|
||||
} else if (theme === "light") {
|
||||
body.classList.add("light-theme");
|
||||
} else if (theme === "auto") {
|
||||
// Check system preference for dark mode
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add("dark-theme");
|
||||
} else {
|
||||
body.classList.add("light-theme");
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
body.classList.remove("dark-theme", "light-theme");
|
||||
body.classList.add(e.matches ? "dark-theme" : "light-theme");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show popup if the cookie doesn't exist
|
||||
window.onload = function() {
|
||||
// Apply theme first
|
||||
applyTheme();
|
||||
|
||||
const atariAutoRedirect = getCookie('atariAutoRedirect');
|
||||
if (atariAutoRedirect) {
|
||||
window.location.href = "https://ale.farama.org/environments/video_cube";
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user