Event Space Planner
Desktop Friendly Tool - Desktop Version (Mobile tool coming soon!)
Click any item below to add it to the center of the grid.
Clear All
Undo
Redo
Hide Labels
padding: 10px;
background: #ececec;
min-height: 100vh;
display: flex;
flex-direction: column;
touch-action: manipulation;
}
#intro {
text-align: center;
margin-bottom: 12px;
padding: 10px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
#menu-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-bottom: 10px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
#item-box {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 10px;
padding: 10px;
background: #444;
border-radius: 8px;
flex: 1;
min-width: 300px;
}
.category {
position: relative;
background: rgba(60,60,60,0.9);
border-radius: 8px;
padding: 28px 10px 10px;
overflow: hidden;
}
.category-header {
position: absolute;
top: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.5);
color: white;
font-size: 12px;
font-weight: bold;
text-align: center;
padding: 4px 0;
pointer-events: none;
}
.items-wrapper {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.item-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.item-label-above {
color: white;
font-size: 10px;
}
.item-icon {
width: 36px;
height: 36px;
background: #666;
border: 2px solid #aaa;
border-radius: 4px;
cursor: pointer;
transition: all 0.15s;
box-sizing: content-box;
}
.item-icon:hover {
transform: scale(1.15);
box-shadow: 0 0 10px rgba(255,255,255,0.5);
}
.item-icon.table { background: #00aaff; }
.item-icon.tent.popup { background: #66ff66; }
.item-icon.tent.marquee { background: #ff6b6b; }
.item-icon.dancefloor { background: #cc33ff; }
.item-icon.round { border-radius: 50%; }
.item-icon.table-8ft { width: 24px; height: 34px; }
.item-icon.table-6ft { width: 24px; height: 28px; }
.item-icon.table-5ft-round,
.item-icon.table-32-cocktail { width: 30px; height: 30px; }
#controls {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: 10px 0;
}
.control-btn {
padding: 8px 16px;
background: #555;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
transition: background 0.2s;
}
.control-btn:hover { background: #777; }
.grid-scroll-wrapper {
flex: 1;
overflow: auto;
-webkit-overflow-scrolling: touch;
touch-action: pan-x pan-y pinch-zoom;
margin: 0 auto;
width: 100%;
max-width: 100%;
border: 2px solid #888;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
#grid-container {
position: relative;
background:
repeating-linear-gradient(0deg, transparent, transparent 9px, #ddd 9px, #ddd 10px),
repeating-linear-gradient(90deg, transparent, transparent 9px, #ddd 9px, #ddd 10px);
background-size: 10px 10px;
min-width: 1000px; /* ensures horizontal scroll */
min-height: 1000px;
touch-action: pan-x pan-y pinch-zoom;
}
.item-wrapper {
position: absolute;
pointer-events: none;
}
.space-buffer {
position: absolute;
border: 2px dotted #8888;
box-sizing: border-box;
pointer-events: none;
}
.placed-item {
position: relative;
z-index: 10;
cursor: move;
transform-origin: center center;
border: 3px solid;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
user-select: none;
transition: box-shadow 0.15s, border 0.15s;
}
.placed-item.table { border-color: #00d4ff; box-shadow: 0 0 18px #00d4ffaa; }
.placed-item.tent.popup { border-color: #88ff88; box-shadow: 0 0 18px #88ff88aa; }
.placed-item.tent.marquee { border-color: #ff8a8a; box-shadow: 0 0 18px #ff8a8aaa; }
.placed-item.dancefloor { border-color: #e066ff; box-shadow: 0 0 18px #e066ffaa; }
.placed-item.round {
border-radius: 50% !important;
}
.placed-item:hover {
box-shadow: 0 0 26px rgba(255,255,255,0.8) !important;
}
.placed-item.selected {
border: 5px solid #ff4444 !important;
box-shadow: 0 0 32px #ff4444dd !important;
}
.item-label {
color: white;
font-size: 13px;
font-weight: bold;
text-shadow: 1px 1px 2px black;
pointer-events: none;
}
.rotate-btn {
position: absolute;
top: -20px;
right: -20px;
width: 20px;
height: 20px;
background: #444;
color: white;
border: none;
border-radius: 50%;
font-size: 12px;
line-height: 20px;
cursor: pointer;
z-index: 20;
box-shadow: 0 3px 8px rgba(0,0,0,0.5);
}
.rotate-btn:hover { background: #666; }
.hide-labels .rotate-btn,
.hide-labels .item-label {
display: none;
}
.tent-pole {
position: absolute;
width: 10px;
height: 10px;
background: black;
border: 1px solid #222;
border-radius: 50%;
pointer-events: none;
z-index: 11;
}
@media (max-width: 768px) {
#menu-container { flex-direction: column; }
.item-icon { width: 30px; height: 30px; }
.control-btn { padding: 6px 12px; font-size: 12px; }
#grid-container {
min-width: 1200px; /* force horizontal scroll on small screens */
}
}
Event Space Planner
Desktop Friendly Tool - Desktop Version (Mobile tool coming soon!)
Click any item below to add it to the center of the grid.
Clear All
Undo
Redo
Hide Labels