🔍
Categories / / /Source

Sample Source-Showcase-E2 (TEMPLATE): source-code page on the index magazine system: slim cover banner, About, Project Structure, code walkthrough with copyable navy-barred code blocks, CTA. Reuse by editing only the PROJECT block at the top of the script.
\n\n\n" } ] }, { "heading": "Bilingual Course Data: CATALOG Structure", "body": "Six set menus, each with a bilingual description, 8 to 10 courses (each with bilingual name + bilingual description), auspicious highlights, and dietary options. privateRoomAllowed + exclusiveVipRoom drive the booking-form seating selector.", "files": [ { "label": "index.html: CATALOG sample (10-pax Set B, the signature)", "code": "{\n id: '10b',\n name: 'ๅ‰ๆ˜Ÿ Lucky Star Signature Set B',\n nameEn: 'Lucky Star Signature Set B',\n pax: 10, price: 1288, perPax: 129, courses: 10, tier: 'signature',\n image: 'images/menus/10-pax-set-b.jpeg',\n description: 'Signature flagship โ€” Lobster yee sang ยท cheese-baked lobster ยท suckling pig ยท bird\\'s nest finale. VIP Room INCLUDED.',\n courseList: [\n {\n name: '้พ™่™พ้ฒ้ฑผๆž็”Ÿ',\n nameEn: 'Lobster & Abalone Yee Sang',\n desc: 'Sliced fresh Boston lobster and South African abalone with gold-leaf crackers. โญ Signature.',\n descZh: 'ๆณขๅฃซ้กฟ้พ™่™พๅˆบ่บซ้…ๅ—้ž้ฒ้ฑผ่–„็‰‡๏ผŒ้‡‘็ฎ”่„†็‰‡๏ผŒโญ ๆ‹›็‰Œๆž็”Ÿใ€‚',\n auspicious: 'ๆญฅๆญฅ้ซ˜ๅ‡ โ€” rising fortune'\n }\n // ... 9 more courses with bilingual desc/descZh\n ],\n auspiciousHighlights: [\n { symbol: '้พ™่™พ', meaning: 'strength' },\n { symbol: '็‡•็ช', meaning: 'longevity' },\n { symbol: 'ไนณ็Œช', meaning: 'peace & unity' }\n ],\n dietaryOptions: ['none','noPork','noBeef','pescatarian','vegetarian','noShellfish'],\n privateRoomAllowed: false, // 10b is exclusively in VIP Room\n privateRoomSurcharge: 0,\n exclusiveVipRoom: true // reserveTable rejects vipRoom for any other set\n}" } ] } ], "cta": "Want an agent-ready, zero-cost booking page like this built for your own festival or venue? Let's scope it." }; /* ===================== END EDIT BLOCK ===================== */ const pref = (u) => /^https?:|^mailto:|^tel:/.test(u || '') ? u : (SITE + (u || '')); const esc = (s) => String(s).replace(/&/g,'&').replace(//g,'>'); const rich = (s) => esc(s).replace(/<(\/?(?:b|code))>/g, '<$1>'); // raw code store for copy buttons const RAW = []; function codeBlock(label, codeStr, extraClass){ const idx = RAW.push(codeStr) - 1; const rendered = esc(codeStr).split('\n') .map(line => /^\s*#/.test(line) ? `${line}` : line).join('\n'); return `
`+ `
${esc(label)}`+ `
`+ `
${rendered}
`; } // Breadcrumb + header document.title = PROJECT.title + ": Source | AI Project Portfolio"; document.getElementById('crumbCat').textContent = PROJECT.category; document.getElementById('crumbCat').href = pref(PROJECT.categoryUrl); document.getElementById('crumbProj').textContent = PROJECT.title; document.getElementById('crumbProj').href = pref(PROJECT.overviewUrl); if (PROJECT.cover){ document.getElementById('coverStrip').style.display = ''; const c = document.getElementById('cover'); c.src = PROJECT.cover; c.alt = PROJECT.title + " cover"; } document.getElementById('kicker').textContent = "Source Walkthrough ยท " + PROJECT.category; document.getElementById('title').textContent = PROJECT.title; document.getElementById('subtitle').textContent = PROJECT.subtitle; document.getElementById('headTech').innerHTML = (PROJECT.tech||[]).map(t => `${esc(t)}`).join(''); document.getElementById('headBtns').innerHTML = (PROJECT.demoUrl ? `${esc(PROJECT.demoLabel||'Live Demo')}` : '') + (PROJECT.overviewUrl ? `Project Overview` : '') + (PROJECT.repoUrl ? `GitHub Repo` : ''); const section = (tab, inner) => `
${esc(tab)}${inner}
`; let html = ""; const P = PROJECT; if (P.about){ html += section("About This Code", `

About This Code Showcase

${rich(P.about)}

`); } if (P.structure && P.structure.code){ html += section("Project Structure", `

Project Structure

`+ codeBlock(P.structure.label || 'project/', P.structure.code, 'tree')); } (P.walkthrough||[]).forEach(w => { let inner = `

${esc(w.heading)}

`; if (w.body) inner += `

${rich(w.body)}

`; (w.files||[]).forEach(f => { inner += codeBlock(f.label, f.code); }); html += section("Code", inner); }); // CTA html += `
`+ `

Interested in the build?

${esc(P.cta || "Let's talk.")}

`+ `
`+ (P.demoUrl ? `${esc(P.demoLabel||'Live Demo')}` : '')+ `Get in Touch`+ `
`; document.getElementById('body').innerHTML = html; // Copy buttons function copyText(text, btn){ const done = ()=>{ const o=btn.textContent; btn.textContent='Copied โœ“'; setTimeout(()=>btn.textContent=o.includes('Copied')?'Copy':o,1400); }; if(navigator.clipboard && navigator.clipboard.writeText){ navigator.clipboard.writeText(text).then(done).catch(()=>fb(text,done)); } else fb(text,done); } function fb(text,done){ const ta=document.createElement('textarea'); ta.value=text; ta.style.position='fixed'; ta.style.opacity='0'; document.body.appendChild(ta); ta.select(); try{document.execCommand('copy');}catch(e){} document.body.removeChild(ta); done(); } document.querySelectorAll('.code-copy').forEach(btn => btn.addEventListener('click', ()=> copyText(RAW[+btn.dataset.idx], btn))); // Masthead search const ITEMS = [ {t:PROJECT.title, c:PROJECT.category, s:PROJECT.slug}, {t:"Courier CS Quality Console", c:"Conversational Data Analytics", s:"courier-cs-quality-console"}, {t:"Voucher Analyzer", c:"Conversational Data Analytics", s:"voucher-analyzer"}, {t:"Wiseman", c:"Knowledge & Reference Chatbots", s:"wiseman"}, {t:"Sunny Car Accessories", c:"Agentic Commerce", s:"sunny-car-accessories"}, {t:"Bookshelf", c:"Multi-Agent Decision Systems", s:"bookshelf"} ]; const searchInput = document.getElementById('searchInput'); const searchResults = document.getElementById('searchResults'); function runSearch(q){ if(q.trim().length < 2){ searchResults.style.display='none'; return; } const ql = q.toLowerCase(); const hits = ITEMS.filter(it => (it.t+' '+it.c).toLowerCase().includes(ql)); searchResults.innerHTML = hits.length ? hits.map(it => `
${esc(it.c)}
`+ `
${esc(it.t)}
`+ `
View Details
`).join('') : `
No projects found. Try a different keyword.
`; searchResults.style.display='block'; } searchInput.addEventListener('input', e => runSearch(e.target.value)); document.addEventListener('click', e => { if(!e.target.closest('.search-box')) searchResults.style.display='none'; }); // Drawer const drawer=document.getElementById('drawer'), overlay=document.getElementById('overlay'); const openMenu=()=>{ drawer.classList.add('open'); overlay.classList.add('open'); }; const closeMenu=()=>{ drawer.classList.remove('open'); overlay.classList.remove('open'); }; document.getElementById('hamburger').addEventListener('click', openMenu); document.getElementById('drawerClose').addEventListener('click', closeMenu); overlay.addEventListener('click', closeMenu); drawer.querySelectorAll('a').forEach(a=>a.addEventListener('click', closeMenu)); document.addEventListener('keydown', e=>{ if(e.key==='Escape'){ closeMenu(); searchResults.style.display='none'; }});