CooperandGoodman/Inlander-Restaurant-Week-Picker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added the course buttons

Browse Source
This commit is contained in:
Derek Cooper
2026-02-23 23:37:33 -08:00
parent ce6b01dacb
commit 8f865c6f39
1 changed files with 48 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
restaurant-picker.html
View File

@@ -74,6 +74,19 @@ header p{font-size:0.85rem;color:#f0cca0;margin-top:3px}
@keyframes pop{from{transform:scale(0.85);opacity:0}to{transform:scale(1);opacity:1}} @keyframes pop{from{transform:scale(0.85);opacity:0}to{transform:scale(1);opacity:1}}
.no-results{padding:30px;text-align:center;color:#5a3a20} .no-results{padding:30px;text-align:center;color:#5a3a20}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#1a0a00}::-webkit-scrollbar-thumb{background:#5a2a00;border-radius:3px} ::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#1a0a00}::-webkit-scrollbar-thumb{background:#5a2a00;border-radius:3px}
.course-browse-bar{background:#241000;padding:8px 24px;display:flex;gap:10px;border-bottom:1px solid #5a2a00}
.btn-course{background:#3a1a00;border:1px solid #7a4a00;color:#f5c842;padding:7px 20px;border-radius:20px;cursor:pointer;font-size:0.85rem;font-weight:600;transition:all 0.2s}
.btn-course:hover{background:#5a2a00;border-color:#f5c842}
.course-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.78);z-index:100;display:flex;align-items:center;justify-content:center}
.course-modal{background:#1f0c00;border:1px solid #7a4a00;border-radius:12px;padding:24px 24px 18px;max-width:480px;width:90%;max-height:80vh;display:flex;flex-direction:column}
.course-modal h2{color:#f5c842;font-size:1.2rem;margin-bottom:14px;flex-shrink:0}
.course-modal-list{overflow-y:auto;flex:1;border:1px solid #3a1a00;border-radius:8px}
.course-dish-item{padding:10px 14px;border-bottom:1px solid #2a1200;cursor:pointer;transition:background 0.15s}
.course-dish-item:last-child{border-bottom:none}
.course-dish-item:hover{background:#2e1500}
.course-dish-name{font-weight:600;color:#f0e6d3;font-size:0.9rem}
.course-dish-restaurant{font-size:0.78rem;color:#a0785a;margin-top:2px}
.course-modal-close{margin-top:14px;flex-shrink:0;text-align:right}
</style> </style>
</head> </head>
<body> <body>
@@ -103,6 +116,11 @@ header p{font-size:0.85rem;color:#f0cca0;margin-top:3px}
<button class="btn btn-outline" onclick="clearAll()">Clear All</button> <button class="btn btn-outline" onclick="clearAll()">Clear All</button>
<button class="btn btn-gold" onclick="openPicker()">🎲 Pick for Us!</button> <button class="btn btn-gold" onclick="openPicker()">🎲 Pick for Us!</button>
</div> </div>
<div class="course-browse-bar">
<button class="btn btn-course" onclick="openCourseBrowse('First Course')">🥗 First Course</button>
<button class="btn btn-course" onclick="openCourseBrowse('Second Course')">🍖 Second Course</button>
<button class="btn btn-course" onclick="openCourseBrowse('Third Course')">🍮 Third Course</button>
</div>
<div class="main"> <div class="main">
<div class="list-panel" id="listPanel"></div> <div class="list-panel" id="listPanel"></div>
<div class="detail-panel" id="detailPanel"> <div class="detail-panel" id="detailPanel">
@@ -276,9 +294,39 @@ function pickAgain(){
function closePicker(){ document.getElementById('pickerModal').style.display='none'; } function closePicker(){ document.getElementById('pickerModal').style.display='none'; }
function viewWinner(){ closePicker(); if(currentWinner) showDetail(currentWinner.slug); } function viewWinner(){ closePicker(); if(currentWinner) showDetail(currentWinner.slug); }
function openCourseBrowse(course){
const dishes = [];
RESTAURANTS.forEach(r => {
const items = r.menu && r.menu.courses && r.menu.courses[course];
if(items && items.length){
items.forEach(item => dishes.push({name: item.name, restaurant: r.name, slug: r.slug}));
}
});
dishes.sort((a,b) => a.name.localeCompare(b.name));
document.getElementById('courseBrowseTitle').textContent = course + ' Dishes';
document.getElementById('courseBrowseList').innerHTML = dishes.length
? dishes.map(d => `<div class="course-dish-item" onclick="selectCourseDish('${d.slug}')">
<div class="course-dish-name">${d.name}</div>
<div class="course-dish-restaurant">${d.restaurant}</div>
</div>`).join('')
: '<div style="color:#5a3a20;padding:20px;text-align:center">No dishes available</div>';
document.getElementById('courseBrowseOverlay').style.display = 'flex';
}
function closeCourseBrowse(){ document.getElementById('courseBrowseOverlay').style.display = 'none'; }
function selectCourseDish(slug){ closeCourseBrowse(); showDetail(slug); }
// Init // Init
applyFilters(); applyFilters();
updateCounts(); updateCounts();
</script> </script>
<div class="course-modal-overlay" id="courseBrowseOverlay" style="display:none" onclick="if(event.target===this)closeCourseBrowse()">
<div class="course-modal">
<h2 id="courseBrowseTitle"></h2>
<div class="course-modal-list" id="courseBrowseList"></div>
<div class="course-modal-close">
<button class="btn btn-outline" onclick="closeCourseBrowse()">Close</button>
</div>
</div>
</div>
</body> </body>
</html> </html>