|
<!DOCTYPE html> |
|
<html> |
|
|
|
<head> |
|
<title>Get Me Out! - Development Grid View</title> |
|
<style> |
|
body { |
|
margin: 0; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
min-height: 100vh; |
|
background: #1a1a1a; |
|
} |
|
|
|
.dev-grid { |
|
position: relative; |
|
margin: 40px; |
|
} |
|
|
|
.numbers { |
|
position: absolute; |
|
display: flex; |
|
font-family: monospace; |
|
color: white; |
|
background: rgba(0,0,0,0.5); |
|
} |
|
|
|
.top-numbers, .bottom-numbers { |
|
left: 0; |
|
right: 0; |
|
height: 30px; |
|
flex-direction: row; |
|
} |
|
|
|
.left-numbers, .right-numbers { |
|
top: 0; |
|
bottom: 0; |
|
width: 30px; |
|
flex-direction: column; |
|
} |
|
|
|
.top-numbers { top: -30px; } |
|
.bottom-numbers { bottom: -30px; } |
|
.left-numbers { left: -30px; } |
|
.right-numbers { right: -30px; } |
|
|
|
.number { |
|
width: 30px; |
|
height: 30px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-size: 12px; |
|
} |
|
|
|
.grid-cell { |
|
position: absolute; |
|
width: 30px; |
|
height: 30px; |
|
border: 1px solid rgba(255,255,255,0.2); |
|
pointer-events: none; |
|
} |
|
|
|
#mapWrapper { |
|
border: 1px solid rgba(255,255,255,0.3); |
|
position: relative; |
|
width: 960px; |
|
height: 600px; |
|
} |
|
|
|
#mapBackground { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
background: url('/assets/img/appartment/FinalMap.PNG') no-repeat center center; |
|
background-size: 100% 100%; |
|
pointer-events: none; |
|
z-index: -1; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<div id="mapWrapper" class="dev-grid"> |
|
<div id="mapBackground"></div> |
|
|
|
<div id="topNumbers" class="numbers top-numbers"></div> |
|
<div id="bottomNumbers" class="numbers bottom-numbers"></div> |
|
<div id="leftNumbers" class="numbers left-numbers"></div> |
|
<div id="rightNumbers" class="numbers right-numbers"></div> |
|
<div id="gridOverlay"></div> |
|
</div> |
|
|
|
<script> |
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
const addNumbers = (elementId, count) => { |
|
const container = document.getElementById(elementId); |
|
for (let i = 0; i < count; i++) { |
|
const number = document.createElement('div'); |
|
number.className = 'number'; |
|
number.textContent = i; |
|
container.appendChild(number); |
|
} |
|
}; |
|
|
|
|
|
addNumbers('topNumbers', 32); |
|
addNumbers('bottomNumbers', 32); |
|
addNumbers('leftNumbers', 20); |
|
addNumbers('rightNumbers', 20); |
|
|
|
|
|
const gridOverlay = document.getElementById('gridOverlay'); |
|
for (let y = 0; y < 20; y++) { |
|
for (let x = 0; x < 32; x++) { |
|
const cell = document.createElement('div'); |
|
cell.className = 'grid-cell'; |
|
cell.style.left = (x * 30) + 'px'; |
|
cell.style.top = (y * 30) + 'px'; |
|
gridOverlay.appendChild(cell); |
|
} |
|
} |
|
}); |
|
</script> |
|
</body> |
|
|
|
</html> |
