revision history WIP
This commit is contained in:
90
public/history.html
Normal file
90
public/history.html
Normal file
@@ -0,0 +1,90 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
||||
<title>Cuberoo History</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<style>
|
||||
html, body { height: 100%; margin: 0; padding: 0; background: #181818; color: white; overflow: auto !important; }
|
||||
body { min-height: 100vh; }
|
||||
.history-list { max-width: 600px; margin: 40px auto; background: #181818; border-radius: 10px; box-shadow: 0 4px 32px #000b; padding: 24px; }
|
||||
.history-item { padding: 14px 0; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; }
|
||||
.history-item:last-child { border-bottom: none; }
|
||||
.history-action { color: #d103f9; font-weight: bold; }
|
||||
.history-timestamp { color: #aaa; font-size: 0.95em; margin-right: 18px; }
|
||||
.revert-btn { background: #d103f9; color: white; border: none; border-radius: 6px; padding: 6px 18px; font-size: 1em; cursor: pointer; transition: background 0.15s; }
|
||||
.revert-btn:hover { background: #a002b6; }
|
||||
.history-header { text-align: center; color: #d103f9; font-size: 2em; margin-bottom: 24px; }
|
||||
.back-link { color: #d103f9; text-decoration: none; font-size: 1.1em; display: block; margin-bottom: 18px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="history-list">
|
||||
<a href="index.html" class="back-link">← Back to Cuberoo</a>
|
||||
<div class="history-header">Revision History</div>
|
||||
<div id="historyContainer">Loading...</div>
|
||||
</div>
|
||||
<script>
|
||||
async function loadHistory() {
|
||||
const res = await fetch('/api/history');
|
||||
const history = await res.json();
|
||||
const container = document.getElementById('historyContainer');
|
||||
if (!Array.isArray(history) || history.length === 0) {
|
||||
container.innerHTML = '<div style="color:#aaa;">No history yet.</div>';
|
||||
return;
|
||||
}
|
||||
container.innerHTML = '';
|
||||
history.forEach((item, idx) => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'history-item';
|
||||
div.innerHTML = `
|
||||
<span class="history-timestamp">${new Date(item.timestamp).toLocaleString()}</span>
|
||||
<span class="history-action">${item.action}</span>
|
||||
<button class="revert-btn" data-idx="${idx}">Revert</button>
|
||||
`;
|
||||
container.appendChild(div);
|
||||
});
|
||||
// Add click handlers for revert
|
||||
document.querySelectorAll('.revert-btn').forEach(btn => {
|
||||
btn.addEventListener('click', async (e) => {
|
||||
const idx = parseInt(btn.getAttribute('data-idx'));
|
||||
// Revert to the next revision (state before this one)
|
||||
let revertId = null;
|
||||
if (idx + 1 < history.length) {
|
||||
revertId = history[idx + 1].id;
|
||||
}
|
||||
if (!confirm('Revert to the state BEFORE this change? This will overwrite the current board.')) return;
|
||||
if (revertId) {
|
||||
const res = await fetch('/api/revert', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ id: revertId })
|
||||
});
|
||||
if (res.ok) {
|
||||
alert('Reverted!');
|
||||
window.location.href = 'index.html';
|
||||
} else {
|
||||
alert('Failed to revert.');
|
||||
}
|
||||
} else {
|
||||
// No earlier revision, clear board
|
||||
const res = await fetch('/api/revert', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ id: null })
|
||||
});
|
||||
if (res.ok) {
|
||||
alert('Reverted to empty board!');
|
||||
window.location.href = 'index.html';
|
||||
} else {
|
||||
alert('Failed to revert.');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
loadHistory();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,189 +1,190 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
||||
<title>Cuberoo</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<!-- Add manifest and icons for PWA support -->
|
||||
<link rel="manifest" href="manifest.json">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-title" content="Cuberoo">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<link rel="apple-touch-icon" href="icon-192.png">
|
||||
<meta name="theme-color" content="#181818">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="logo">
|
||||
<img src="logo.png" alt="Logo" />
|
||||
<span>Cuberoo</span>
|
||||
</div>
|
||||
<!-- Sidebar toggle for mobile -->
|
||||
<button id="sidebarToggle" style="display:none;margin-left:16px;font-size:1.6em;background:none;border:none;color:#d103f9;z-index:1100;">☰</button>
|
||||
</header>
|
||||
<div class="container">
|
||||
<!-- wrapper for the draggable map class -->
|
||||
<div id="mapWrapper" class="map-wrapper">
|
||||
<!-- Settings button in top right -->
|
||||
<button id="settingsBtn" class="settings-btn" title="Settings">
|
||||
<span></span>
|
||||
</button>
|
||||
<!-- Settings menu (hidden by default) -->
|
||||
<div id="settingsMenu" class="settings-menu" style="display:none;">
|
||||
<div class="settings-menu-content">
|
||||
<!-- Square Style toggle -->
|
||||
<div style="margin-bottom:18px;">
|
||||
<label for="squareStyleToggle" style="color:white;vertical-align:middle;">Highlight by</label>
|
||||
<button id="squareStyleToggle" type="button" style="margin-left:10px;vertical-align:middle;"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- class for the squares -->
|
||||
<div id="map" class="map"></div>
|
||||
<!-- zoom controls -->
|
||||
<div id="zoomControls">
|
||||
<button id="zoomIn">+</button>
|
||||
<button id="zoomOut">-</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- sidebar with the categories -->
|
||||
<div class="sidebar" id="sidebar">
|
||||
<!-- Categories will be dynamically loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// map layout. put numbers for the square IDs. null will be empty i guess.
|
||||
const mapData = [
|
||||
['1', '2', null, '13', '14'],
|
||||
['3', '4', null, '15', '16'],
|
||||
['5', '6', null, '17', '18'],
|
||||
['7', '8', null, '19', '20'],
|
||||
['9', '10', null, '21', '22'],
|
||||
['11', '12', null, '23', '24']
|
||||
];
|
||||
const mapEl = document.getElementById('map');
|
||||
mapData.forEach(row => {
|
||||
const rowEl = document.createElement('div');
|
||||
rowEl.classList.add('map-row');
|
||||
row.forEach(cell => {
|
||||
if (cell) {
|
||||
const squareEl = document.createElement('div');
|
||||
squareEl.classList.add('square');
|
||||
squareEl.dataset.squareId = cell;
|
||||
rowEl.appendChild(squareEl);
|
||||
} else {
|
||||
const emptyEl = document.createElement('div');
|
||||
emptyEl.classList.add('empty');
|
||||
rowEl.appendChild(emptyEl);
|
||||
}
|
||||
});
|
||||
mapEl.appendChild(rowEl);
|
||||
});
|
||||
|
||||
// Dynamically load categories and fruits
|
||||
async function loadCategories() {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const res = await fetch('/api/categories');
|
||||
const categories = await res.json();
|
||||
sidebar.innerHTML = '';
|
||||
categories.forEach(cat => {
|
||||
const catDiv = document.createElement('div');
|
||||
catDiv.className = 'categories';
|
||||
catDiv.innerHTML = `
|
||||
<div class="category-header">
|
||||
<h4>${cat.name}</h4>
|
||||
<button class="category-toggle" type="button">▼</button>
|
||||
</div>
|
||||
<div class="category-content">
|
||||
${cat.fruits.map(fruit =>
|
||||
`<div class="fruit" draggable="true" data-fruit="${fruit}">${fruit}</div>`
|
||||
).join('')}
|
||||
</div>
|
||||
`;
|
||||
sidebar.appendChild(catDiv);
|
||||
});
|
||||
}
|
||||
loadCategories();
|
||||
|
||||
// Settings button/menu logic
|
||||
const settingsBtn = document.getElementById('settingsBtn');
|
||||
const settingsMenu = document.getElementById('settingsMenu');
|
||||
|
||||
settingsBtn.addEventListener('click', () => {
|
||||
settingsMenu.style.display = 'block';
|
||||
});
|
||||
// Optional: click outside menu closes it
|
||||
document.addEventListener('mousedown', (e) => {
|
||||
if (settingsMenu.style.display === 'block' &&
|
||||
!settingsMenu.contains(e.target) &&
|
||||
e.target !== settingsBtn) {
|
||||
settingsMenu.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Filled/Outline setting logic (toggle)
|
||||
function applySquareStyle(style) {
|
||||
document.body.setAttribute('data-square-style', style);
|
||||
const btn = document.getElementById('squareStyleToggle');
|
||||
if (btn) {
|
||||
btn.textContent = style === 'filled' ? 'filling' : 'outlining';
|
||||
btn.className = style === 'filled' ? 'toggle-filled' : 'toggle-outline';
|
||||
}
|
||||
}
|
||||
function saveSquareStyle(style) {
|
||||
localStorage.setItem('squareStyle', style);
|
||||
}
|
||||
function loadSquareStyle() {
|
||||
return localStorage.getItem('squareStyle') || 'filled';
|
||||
}
|
||||
|
||||
function setupSquareStyleSetting() {
|
||||
const toggleBtn = document.getElementById('squareStyleToggle');
|
||||
if (!toggleBtn) return;
|
||||
let style = loadSquareStyle();
|
||||
applySquareStyle(style);
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
style = (style === 'filled') ? 'outline' : 'filled';
|
||||
applySquareStyle(style);
|
||||
saveSquareStyle(style);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', setupSquareStyleSetting);
|
||||
if (document.getElementById('squareStyleToggle')) setupSquareStyleSetting();
|
||||
|
||||
// Sidebar toggle for mobile
|
||||
function setupSidebarToggle() {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const toggleBtn = document.getElementById('sidebarToggle');
|
||||
function updateSidebarDisplay() {
|
||||
if (window.innerWidth <= 900) {
|
||||
toggleBtn.style.display = '';
|
||||
sidebar.classList.remove('open');
|
||||
} else {
|
||||
toggleBtn.style.display = 'none';
|
||||
sidebar.classList.remove('open');
|
||||
}
|
||||
}
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
sidebar.classList.toggle('open');
|
||||
});
|
||||
// Close sidebar when clicking outside on mobile
|
||||
document.addEventListener('mousedown', (e) => {
|
||||
if (window.innerWidth > 900) return;
|
||||
if (sidebar.classList.contains('open') && !sidebar.contains(e.target) && e.target !== toggleBtn) {
|
||||
sidebar.classList.remove('open');
|
||||
}
|
||||
});
|
||||
window.addEventListener('resize', updateSidebarDisplay);
|
||||
updateSidebarDisplay();
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', setupSidebarToggle);
|
||||
</script>
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
||||
<title>Cuberoo</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<!-- Add manifest and icons for PWA support -->
|
||||
<link rel="manifest" href="manifest.json">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-title" content="Cuberoo">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<link rel="apple-touch-icon" href="icon-192.png">
|
||||
<meta name="theme-color" content="#181818">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="logo">
|
||||
<img src="logo.png" alt="Logo" />
|
||||
<span>Cuberoo</span>
|
||||
</div>
|
||||
<!-- Sidebar toggle for mobile -->
|
||||
<button id="sidebarToggle" style="display:none;margin-left:16px;font-size:1.6em;background:none;border:none;color:#d103f9;z-index:1100;">☰</button>
|
||||
<a href="history.html" style="margin-left:24px;color:#d103f9;font-weight:bold;text-decoration:none;font-size:1.1em;">History</a>
|
||||
</header>
|
||||
<div class="container">
|
||||
<!-- wrapper for the draggable map class -->
|
||||
<div id="mapWrapper" class="map-wrapper">
|
||||
<!-- Settings button in top right -->
|
||||
<button id="settingsBtn" class="settings-btn" title="Settings">
|
||||
<span></span>
|
||||
</button>
|
||||
<!-- Settings menu (hidden by default) -->
|
||||
<div id="settingsMenu" class="settings-menu" style="display:none;">
|
||||
<div class="settings-menu-content">
|
||||
<!-- Square Style toggle -->
|
||||
<div style="margin-bottom:18px;">
|
||||
<label for="squareStyleToggle" style="color:white;vertical-align:middle;">Highlight by</label>
|
||||
<button id="squareStyleToggle" type="button" style="margin-left:10px;vertical-align:middle;"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- class for the squares -->
|
||||
<div id="map" class="map"></div>
|
||||
<!-- zoom controls -->
|
||||
<div id="zoomControls">
|
||||
<button id="zoomIn">+</button>
|
||||
<button id="zoomOut">-</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- sidebar with the categories -->
|
||||
<div class="sidebar" id="sidebar">
|
||||
<!-- Categories will be dynamically loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// map layout. put numbers for the square IDs. null will be empty i guess.
|
||||
const mapData = [
|
||||
['1', '2', null, '13', '14'],
|
||||
['3', '4', null, '15', '16'],
|
||||
['5', '6', null, '17', '18'],
|
||||
['7', '8', null, '19', '20'],
|
||||
['9', '10', null, '21', '22'],
|
||||
['11', '12', null, '23', '24']
|
||||
];
|
||||
const mapEl = document.getElementById('map');
|
||||
mapData.forEach(row => {
|
||||
const rowEl = document.createElement('div');
|
||||
rowEl.classList.add('map-row');
|
||||
row.forEach(cell => {
|
||||
if (cell) {
|
||||
const squareEl = document.createElement('div');
|
||||
squareEl.classList.add('square');
|
||||
squareEl.dataset.squareId = cell;
|
||||
rowEl.appendChild(squareEl);
|
||||
} else {
|
||||
const emptyEl = document.createElement('div');
|
||||
emptyEl.classList.add('empty');
|
||||
rowEl.appendChild(emptyEl);
|
||||
}
|
||||
});
|
||||
mapEl.appendChild(rowEl);
|
||||
});
|
||||
|
||||
// Dynamically load categories and fruits
|
||||
async function loadCategories() {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const res = await fetch('/api/categories');
|
||||
const categories = await res.json();
|
||||
sidebar.innerHTML = '';
|
||||
categories.forEach(cat => {
|
||||
const catDiv = document.createElement('div');
|
||||
catDiv.className = 'categories';
|
||||
catDiv.innerHTML = `
|
||||
<div class="category-header">
|
||||
<h4>${cat.name}</h4>
|
||||
<button class="category-toggle" type="button">▼</button>
|
||||
</div>
|
||||
<div class="category-content">
|
||||
${cat.fruits.map(fruit =>
|
||||
`<div class="fruit" draggable="true" data-fruit="${fruit}">${fruit}</div>`
|
||||
).join('')}
|
||||
</div>
|
||||
`;
|
||||
sidebar.appendChild(catDiv);
|
||||
});
|
||||
}
|
||||
loadCategories();
|
||||
|
||||
// Settings button/menu logic
|
||||
const settingsBtn = document.getElementById('settingsBtn');
|
||||
const settingsMenu = document.getElementById('settingsMenu');
|
||||
|
||||
settingsBtn.addEventListener('click', () => {
|
||||
settingsMenu.style.display = 'block';
|
||||
});
|
||||
// Optional: click outside menu closes it
|
||||
document.addEventListener('mousedown', (e) => {
|
||||
if (settingsMenu.style.display === 'block' &&
|
||||
!settingsMenu.contains(e.target) &&
|
||||
e.target !== settingsBtn) {
|
||||
settingsMenu.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Filled/Outline setting logic (toggle)
|
||||
function applySquareStyle(style) {
|
||||
document.body.setAttribute('data-square-style', style);
|
||||
const btn = document.getElementById('squareStyleToggle');
|
||||
if (btn) {
|
||||
btn.textContent = style === 'filled' ? 'filling' : 'outlining';
|
||||
btn.className = style === 'filled' ? 'toggle-filled' : 'toggle-outline';
|
||||
}
|
||||
}
|
||||
function saveSquareStyle(style) {
|
||||
localStorage.setItem('squareStyle', style);
|
||||
}
|
||||
function loadSquareStyle() {
|
||||
return localStorage.getItem('squareStyle') || 'filled';
|
||||
}
|
||||
|
||||
function setupSquareStyleSetting() {
|
||||
const toggleBtn = document.getElementById('squareStyleToggle');
|
||||
if (!toggleBtn) return;
|
||||
let style = loadSquareStyle();
|
||||
applySquareStyle(style);
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
style = (style === 'filled') ? 'outline' : 'filled';
|
||||
applySquareStyle(style);
|
||||
saveSquareStyle(style);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', setupSquareStyleSetting);
|
||||
if (document.getElementById('squareStyleToggle')) setupSquareStyleSetting();
|
||||
|
||||
// Sidebar toggle for mobile
|
||||
function setupSidebarToggle() {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const toggleBtn = document.getElementById('sidebarToggle');
|
||||
function updateSidebarDisplay() {
|
||||
if (window.innerWidth <= 900) {
|
||||
toggleBtn.style.display = '';
|
||||
sidebar.classList.remove('open');
|
||||
} else {
|
||||
toggleBtn.style.display = 'none';
|
||||
sidebar.classList.remove('open');
|
||||
}
|
||||
}
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
sidebar.classList.toggle('open');
|
||||
});
|
||||
// Close sidebar when clicking outside on mobile
|
||||
document.addEventListener('mousedown', (e) => {
|
||||
if (window.innerWidth > 900) return;
|
||||
if (sidebar.classList.contains('open') && !sidebar.contains(e.target) && e.target !== toggleBtn) {
|
||||
sidebar.classList.remove('open');
|
||||
}
|
||||
});
|
||||
window.addEventListener('resize', updateSidebarDisplay);
|
||||
updateSidebarDisplay();
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', setupSidebarToggle);
|
||||
</script>
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
{
|
||||
"name": "Cuberoo",
|
||||
"short_name": "Cuberoo",
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"background_color": "#800080",
|
||||
"theme_color": "#800080",
|
||||
"description": "Cubes, but fun.",
|
||||
"icons": [
|
||||
{
|
||||
"src": "icon-192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "icon-512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
]
|
||||
}
|
||||
{
|
||||
"name": "Cuberoo",
|
||||
"short_name": "Cuberoo",
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"background_color": "#800080",
|
||||
"theme_color": "#800080",
|
||||
"description": "Cubes, but fun.",
|
||||
"icons": [
|
||||
{
|
||||
"src": "icon-192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "icon-512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
1709
public/script.js
1709
public/script.js
File diff suppressed because it is too large
Load Diff
926
public/style.css
926
public/style.css
@@ -1,464 +1,464 @@
|
||||
/* fullscreen flex container */
|
||||
body, html {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow: hidden; /* disable scrollbar */
|
||||
background: black;
|
||||
color: rgb(166, 166, 166); /* text color */
|
||||
}
|
||||
.container {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
font-family: sans-serif;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* sidebar with categories */
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
margin-left: 15px;
|
||||
height: 100vh; /* take up entire vertical height */
|
||||
background: rgb(19, 19, 19);
|
||||
overflow-y: auto; /* make it scrollable */
|
||||
width: 12%; /* fixed width */
|
||||
box-sizing: border-box; /* include padding/border in width */
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Map layout */
|
||||
.map-wrapper {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
border: 0px solid white; /* disbale map border */
|
||||
position: relative;
|
||||
margin: 0; /* margins for map (disbaled) */
|
||||
}
|
||||
|
||||
#map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: grab;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.map {
|
||||
display: table;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.map-row {
|
||||
display: table-row;
|
||||
}
|
||||
.map-row > .square,
|
||||
.map-row > .empty {
|
||||
display: table-cell;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* what the squares look like */
|
||||
.square {
|
||||
position: relative;
|
||||
border: 1px dashed white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.2rem;
|
||||
transition: border-color 0.5s ease, box-shadow 0.5s ease
|
||||
}
|
||||
|
||||
.square.highlight {
|
||||
border: 1px solid purple; /* highlight color when hovered over in sidebar */
|
||||
background-color: purple;
|
||||
}
|
||||
|
||||
.square.highlight-update {
|
||||
border: 1px solid purple;
|
||||
box-shadow: 0 0 10px 2px purple;
|
||||
}
|
||||
|
||||
/* the x button to clear that square (temp, make it look better later) */
|
||||
.clear-btn {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border: none;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.square:hover .clear-btn {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* empty for when it's null */
|
||||
.empty {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* for the categories */
|
||||
.categories {
|
||||
/* make sidebar wider */
|
||||
padding: 10px;
|
||||
padding-bottom: 0px;
|
||||
border: 1px solid white; /* sidebar border color */
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.fruit {
|
||||
cursor: grab;
|
||||
margin-bottom: 10px;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.5); /* cells inside sidebar border color */
|
||||
border-radius: 4px;
|
||||
user-select: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fruit:active {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* what the titles of the categories */
|
||||
.categories h4 {
|
||||
text-align: center;
|
||||
margin-top: 5px; /* change this to make the titles closer to the top of the cell */
|
||||
margin-bottom: 10px;
|
||||
padding: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* "cuberoo" logo and text at top */
|
||||
.header {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.logo span {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: rgb(191, 93, 245); /* color of logo text */
|
||||
}
|
||||
|
||||
#zoomControls {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0px;
|
||||
z-index: 100; /* this makes it appear on top of the map*/
|
||||
}
|
||||
|
||||
#zoomControls button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 1.5rem;
|
||||
background: rgb(0, 0, 0);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#zoomControls button:hover {
|
||||
background: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.dropped-fruit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.category-header h4 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.category-toggle {
|
||||
margin-left: 10px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 1.1em;
|
||||
cursor: pointer;
|
||||
padding: 0 6px;
|
||||
height: 28px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.square-number {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
right: 6px;
|
||||
font-size: 0.9em;
|
||||
color: #bdbdbd;
|
||||
opacity: 0.7;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.custom-fruit-input {
|
||||
border: 1px solid #d103f9;
|
||||
border-radius: 5px;
|
||||
padding: 6px 10px;
|
||||
outline: none;
|
||||
background: #181818;
|
||||
color: white;
|
||||
width: 90%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.category-selectable {
|
||||
box-shadow: 0 0 0 3px #d103f9, 0 0 10px 2px #d103f9;
|
||||
border-color: #d103f9 !important;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.category-select-msg {
|
||||
/* see JS for inline styles */
|
||||
}
|
||||
|
||||
#delete-fruit-popup {
|
||||
/* see JS for inline styles, but you can add more here if needed */
|
||||
box-shadow: 0 4px 32px #000b;
|
||||
}
|
||||
|
||||
/* Settings button in top right of map */
|
||||
.settings-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 101;
|
||||
background: rgba(30,30,30,0.95);
|
||||
border: 1px solid #d103f9;
|
||||
border-radius: 50%;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #d103f9;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px #0007;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
.settings-btn:hover {
|
||||
background: #2a003a;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
/* Settings menu styles */
|
||||
.settings-menu {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
right: 16px;
|
||||
z-index: 102;
|
||||
background: #181818;
|
||||
border: 1px solid #d103f9;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 32px #000b;
|
||||
padding: 0;
|
||||
color: white;
|
||||
animation: fadeInSettings 0.2s;
|
||||
}
|
||||
@keyframes fadeInSettings {
|
||||
from { opacity: 0; transform: translateY(-10px);}
|
||||
to { opacity: 1; transform: translateY(0);}
|
||||
}
|
||||
.settings-menu-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 18px 10px 18px;
|
||||
border-bottom: 1px solid #333;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
color: #d103f9;
|
||||
}
|
||||
.close-settings-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #d103f9;
|
||||
font-size: 1.2em;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.close-settings-btn:hover {
|
||||
background: #2a003a;
|
||||
}
|
||||
.settings-menu-content {
|
||||
padding: 20px;
|
||||
padding-bottom: 0px;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Square Style toggle button */
|
||||
#squareStyleToggle {
|
||||
padding: 6px 18px;
|
||||
border-radius: 6px;
|
||||
border: 1.5px solid #d103f9;
|
||||
background: #191919;
|
||||
color: #d103f9;
|
||||
font-weight: bold;
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
outline: none;
|
||||
}
|
||||
#squareStyleToggle.toggle-filled {
|
||||
background: #d103f9;
|
||||
color: white;
|
||||
border-color: #d103f9;
|
||||
}
|
||||
#squareStyleToggle.toggle-outline {
|
||||
background: #191919;
|
||||
color: #d103f9;
|
||||
border-color: #d103f9;
|
||||
}
|
||||
#squareStyleToggle:hover {
|
||||
background: #2a003a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Filled/Outline toggle logic */
|
||||
body[data-square-style="filled"] .square.highlight {
|
||||
border: 1px solid purple;
|
||||
background-color: purple;
|
||||
}
|
||||
body[data-square-style="filled"] .square.highlight-update {
|
||||
border: 1px solid purple;
|
||||
box-shadow: 0 0 10px 2px purple;
|
||||
}
|
||||
body[data-square-style="outline"] .square.highlight {
|
||||
border: 1px solid #d103f9;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
body[data-square-style="outline"] .square.highlight-update {
|
||||
border: 1px solid #d103f9;
|
||||
background-color: transparent !important;
|
||||
box-shadow: 0 0 10px 2px #d103f9;
|
||||
}
|
||||
|
||||
/* Responsive adjustments for mobile */
|
||||
@media (max-width: 900px) {
|
||||
.container {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 0;
|
||||
}
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 35vw; /* was 80vw, now 60vw for less width */
|
||||
max-width: 240px; /* was 350px, now 240px for less width */
|
||||
height: 100vh;
|
||||
z-index: 1001;
|
||||
background: #181818;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s;
|
||||
box-shadow: 2px 0 16px #000a;
|
||||
margin: 0;
|
||||
}
|
||||
.sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
.map-wrapper {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
#zoomControls {
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Make squares and map responsive */
|
||||
@media (max-width: 900px) {
|
||||
.map-row > .square,
|
||||
.map-row > .empty {
|
||||
width: 13vw;
|
||||
height: 13vw;
|
||||
min-width: 48px;
|
||||
min-height: 48px;
|
||||
max-width: 80px;
|
||||
max-height: 80px;
|
||||
}
|
||||
.square {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch-friendly buttons and inputs */
|
||||
button, input, .fruit, .clear-btn {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Make popup and overlays scrollable on mobile */
|
||||
#delete-fruit-popup, .settings-menu {
|
||||
max-width: 95vw;
|
||||
box-sizing: border-box;
|
||||
word-break: break-word;
|
||||
/* fullscreen flex container */
|
||||
body, html {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow: hidden; /* disable scrollbar */
|
||||
background: black;
|
||||
color: rgb(166, 166, 166); /* text color */
|
||||
}
|
||||
.container {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
font-family: sans-serif;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* sidebar with categories */
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
margin-left: 15px;
|
||||
height: 100vh; /* take up entire vertical height */
|
||||
background: rgb(19, 19, 19);
|
||||
overflow-y: auto; /* make it scrollable */
|
||||
width: 12%; /* fixed width */
|
||||
box-sizing: border-box; /* include padding/border in width */
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Map layout */
|
||||
.map-wrapper {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
border: 0px solid white; /* disbale map border */
|
||||
position: relative;
|
||||
margin: 0; /* margins for map (disbaled) */
|
||||
}
|
||||
|
||||
#map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: grab;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.map {
|
||||
display: table;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.map-row {
|
||||
display: table-row;
|
||||
}
|
||||
.map-row > .square,
|
||||
.map-row > .empty {
|
||||
display: table-cell;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* what the squares look like */
|
||||
.square {
|
||||
position: relative;
|
||||
border: 1px dashed white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.2rem;
|
||||
transition: border-color 0.5s ease, box-shadow 0.5s ease
|
||||
}
|
||||
|
||||
.square.highlight {
|
||||
border: 1px solid purple; /* highlight color when hovered over in sidebar */
|
||||
background-color: purple;
|
||||
}
|
||||
|
||||
.square.highlight-update {
|
||||
border: 1px solid purple;
|
||||
box-shadow: 0 0 10px 2px purple;
|
||||
}
|
||||
|
||||
/* the x button to clear that square (temp, make it look better later) */
|
||||
.clear-btn {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border: none;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.square:hover .clear-btn {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* empty for when it's null */
|
||||
.empty {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* for the categories */
|
||||
.categories {
|
||||
/* make sidebar wider */
|
||||
padding: 10px;
|
||||
padding-bottom: 0px;
|
||||
border: 1px solid white; /* sidebar border color */
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.fruit {
|
||||
cursor: grab;
|
||||
margin-bottom: 10px;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.5); /* cells inside sidebar border color */
|
||||
border-radius: 4px;
|
||||
user-select: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fruit:active {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* what the titles of the categories */
|
||||
.categories h4 {
|
||||
text-align: center;
|
||||
margin-top: 5px; /* change this to make the titles closer to the top of the cell */
|
||||
margin-bottom: 10px;
|
||||
padding: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* "cuberoo" logo and text at top */
|
||||
.header {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.logo span {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: rgb(191, 93, 245); /* color of logo text */
|
||||
}
|
||||
|
||||
#zoomControls {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0px;
|
||||
z-index: 100; /* this makes it appear on top of the map*/
|
||||
}
|
||||
|
||||
#zoomControls button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 1.5rem;
|
||||
background: rgb(0, 0, 0);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#zoomControls button:hover {
|
||||
background: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.dropped-fruit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.category-header h4 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.category-toggle {
|
||||
margin-left: 10px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 1.1em;
|
||||
cursor: pointer;
|
||||
padding: 0 6px;
|
||||
height: 28px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.square-number {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
right: 6px;
|
||||
font-size: 0.9em;
|
||||
color: #bdbdbd;
|
||||
opacity: 0.7;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.custom-fruit-input {
|
||||
border: 1px solid #d103f9;
|
||||
border-radius: 5px;
|
||||
padding: 6px 10px;
|
||||
outline: none;
|
||||
background: #181818;
|
||||
color: white;
|
||||
width: 90%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.category-selectable {
|
||||
box-shadow: 0 0 0 3px #d103f9, 0 0 10px 2px #d103f9;
|
||||
border-color: #d103f9 !important;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.category-select-msg {
|
||||
/* see JS for inline styles */
|
||||
}
|
||||
|
||||
#delete-fruit-popup {
|
||||
/* see JS for inline styles, but you can add more here if needed */
|
||||
box-shadow: 0 4px 32px #000b;
|
||||
}
|
||||
|
||||
/* Settings button in top right of map */
|
||||
.settings-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 101;
|
||||
background: rgba(30,30,30,0.95);
|
||||
border: 1px solid #d103f9;
|
||||
border-radius: 50%;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #d103f9;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px #0007;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
.settings-btn:hover {
|
||||
background: #2a003a;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
/* Settings menu styles */
|
||||
.settings-menu {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
right: 16px;
|
||||
z-index: 102;
|
||||
background: #181818;
|
||||
border: 1px solid #d103f9;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 32px #000b;
|
||||
padding: 0;
|
||||
color: white;
|
||||
animation: fadeInSettings 0.2s;
|
||||
}
|
||||
@keyframes fadeInSettings {
|
||||
from { opacity: 0; transform: translateY(-10px);}
|
||||
to { opacity: 1; transform: translateY(0);}
|
||||
}
|
||||
.settings-menu-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 18px 10px 18px;
|
||||
border-bottom: 1px solid #333;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
color: #d103f9;
|
||||
}
|
||||
.close-settings-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #d103f9;
|
||||
font-size: 1.2em;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.close-settings-btn:hover {
|
||||
background: #2a003a;
|
||||
}
|
||||
.settings-menu-content {
|
||||
padding: 20px;
|
||||
padding-bottom: 0px;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Square Style toggle button */
|
||||
#squareStyleToggle {
|
||||
padding: 6px 18px;
|
||||
border-radius: 6px;
|
||||
border: 1.5px solid #d103f9;
|
||||
background: #191919;
|
||||
color: #d103f9;
|
||||
font-weight: bold;
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
outline: none;
|
||||
}
|
||||
#squareStyleToggle.toggle-filled {
|
||||
background: #d103f9;
|
||||
color: white;
|
||||
border-color: #d103f9;
|
||||
}
|
||||
#squareStyleToggle.toggle-outline {
|
||||
background: #191919;
|
||||
color: #d103f9;
|
||||
border-color: #d103f9;
|
||||
}
|
||||
#squareStyleToggle:hover {
|
||||
background: #2a003a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Filled/Outline toggle logic */
|
||||
body[data-square-style="filled"] .square.highlight {
|
||||
border: 1px solid purple;
|
||||
background-color: purple;
|
||||
}
|
||||
body[data-square-style="filled"] .square.highlight-update {
|
||||
border: 1px solid purple;
|
||||
box-shadow: 0 0 10px 2px purple;
|
||||
}
|
||||
body[data-square-style="outline"] .square.highlight {
|
||||
border: 1px solid #d103f9;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
body[data-square-style="outline"] .square.highlight-update {
|
||||
border: 1px solid #d103f9;
|
||||
background-color: transparent !important;
|
||||
box-shadow: 0 0 10px 2px #d103f9;
|
||||
}
|
||||
|
||||
/* Responsive adjustments for mobile */
|
||||
@media (max-width: 900px) {
|
||||
.container {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 0;
|
||||
}
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 35vw; /* was 80vw, now 60vw for less width */
|
||||
max-width: 240px; /* was 350px, now 240px for less width */
|
||||
height: 100vh;
|
||||
z-index: 1001;
|
||||
background: #181818;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s;
|
||||
box-shadow: 2px 0 16px #000a;
|
||||
margin: 0;
|
||||
}
|
||||
.sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
.map-wrapper {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
#zoomControls {
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Make squares and map responsive */
|
||||
@media (max-width: 900px) {
|
||||
.map-row > .square,
|
||||
.map-row > .empty {
|
||||
width: 13vw;
|
||||
height: 13vw;
|
||||
min-width: 48px;
|
||||
min-height: 48px;
|
||||
max-width: 80px;
|
||||
max-height: 80px;
|
||||
}
|
||||
.square {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch-friendly buttons and inputs */
|
||||
button, input, .fruit, .clear-btn {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Make popup and overlays scrollable on mobile */
|
||||
#delete-fruit-popup, .settings-menu {
|
||||
max-width: 95vw;
|
||||
box-sizing: border-box;
|
||||
word-break: break-word;
|
||||
}
|
||||
Reference in New Issue
Block a user