Skip to content

Commit 5ff257e

Browse files
PartnerProgramPartnerProgram
authored
Update index.html
1 parent ab6fadf commit 5ff257e

1 file changed

Lines changed: 79 additions & 68 deletions

File tree

‎index.html‎

Lines changed: 79 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -237,19 +237,19 @@ <h1 class="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
237237
html += renderDropdown();
238238
html += renderOverview(data.overview);
239239
html += '</div>';
240-
html += '<div class="grid gap-4" aria-live="polite">';
241-
html += renderRequirements(data.requirements, data.isPremier);
242-
html += renderBenefits(data.benefits);
240+
html += '<div class="space-y-4">';
241+
html += renderRequirementsCard(data.requirements, data.isPremier);
242+
html += renderBenefitsCard(data.benefits);
243243
if (data.isStandard) {
244-
html += renderMargins();
244+
html += renderMarginsCard();
245245
} else {
246-
html += renderDetails(data.specific);
246+
html += renderDetailsCard(data.specific);
247247
}
248-
html += '</div>';
249-
html += renderROE();
248+
html += renderROECard();
250249
if (STATE.partnerType !== "Registered") {
251-
html += renderOnboarding();
250+
html += renderOnboardingCard();
252251
}
252+
html += '</div>';
253253
html += '<footer class="pt-2 text-xs text-[#4A5568]">Preview purposes only. Program terms subject to agreement.</footer>';
254254
html += "</div>";
255255
document.getElementById("app").innerHTML = html;
@@ -323,7 +323,7 @@ <h3 class="text-lg font-semibold">Overview</h3>
323323
</div>
324324
`;
325325
}
326-
function renderRequirements(reqs, isPremier) {
326+
function renderRequirementsCard(reqs, isPremier) {
327327
let listHtml = "";
328328
reqs.forEach((r) => {
329329
listHtml += `
@@ -351,14 +351,16 @@ <h3 class="text-lg font-semibold">Overview</h3>
351351
}
352352
}
353353
return `
354-
<div class="rounded-2xl border border-[#E2E8F0] bg-white p-5 shadow-md">
355-
<h3 class="text-lg font-semibold">Requirements</h3>
356-
<ul class="mt-3 grid gap-2 sm:grid-cols-2">${listHtml}</ul>
357-
${businessPlanHtml}
358-
</div>
354+
<details class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
355+
<summary class="cursor-pointer p-5 font-semibold text-lg hover:bg-[#F7F9FB] transition-colors">Requirements</summary>
356+
<div class="p-5 pt-0">
357+
<ul class="mt-3 grid gap-2 sm:grid-cols-2">${listHtml}</ul>
358+
${businessPlanHtml}
359+
</div>
360+
</details>
359361
`;
360362
}
361-
function renderBenefits(bens) {
363+
function renderBenefitsCard(bens) {
362364
let listHtml = "";
363365
bens.forEach((b) => {
364366
listHtml += `
@@ -369,13 +371,15 @@ <h3 class="text-lg font-semibold">Requirements</h3>
369371
`;
370372
});
371373
return `
372-
<div class="rounded-2xl border border-[#E2E8F0] bg-white p-5 shadow-md">
373-
<h3 class="text-lg font-semibold">Benefits</h3>
374-
<ul class="mt-3 grid gap-2 sm:grid-cols-2">${listHtml}</ul>
375-
</div>
374+
<details class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
375+
<summary class="cursor-pointer p-5 font-semibold text-lg hover:bg-[#F7F9FB] transition-colors">Benefits</summary>
376+
<div class="p-5 pt-0">
377+
<ul class="mt-3 grid gap-2 sm:grid-cols-2">${listHtml}</ul>
378+
</div>
379+
</details>
376380
`;
377381
}
378-
function renderMargins() {
382+
function renderMarginsCard() {
379383
const disabled = STATE.partnerType === "Registered";
380384
const universe = STATE.model.margins[STATE.commitment][STATE.dealType];
381385
const key = STATE.partnerType === "Registered" ? "Registered" : "Preferred|Premier";
@@ -411,40 +415,42 @@ <h3 class="text-lg font-semibold">Benefits</h3>
411415
`;
412416
}
413417
return `
414-
<div class="rounded-2xl border border-[#E2E8F0] bg-white p-5 shadow-md">
415-
<div class="flex items-start justify-between flex-col sm:flex-row gap-4">
416-
<h3 class="text-lg font-semibold">Margins</h3>
417-
<div class="flex flex-wrap items-center gap-3">
418-
<label class="flex items-center gap-2 text-sm ${disabled ? "opacity-60" : ""}" title="For your first 3 net-new deals, we co-sell end-to-end and you keep full margin.">
419-
<input type="checkbox" id="newPartner" class="h-4 w-4 accent-[#0070F3]" ${disabled ? "disabled" : ""} ${STATE.newPartner ? "checked" : ""} />
420-
<span>New partner boost (first 3 net-new deals)</span>
421-
</label>
422-
<select id="commitment" class="rounded-xl border border-[#E2E8F0] bg-white px-3 py-1 text-sm focus:ring-2 focus:ring-[#0070F3]">
423-
<option ${STATE.commitment === "Annual" ? "selected" : ""}>Annual</option>
424-
<option ${STATE.commitment === "Monthly" ? "selected" : ""}>Monthly</option>
425-
</select>
426-
<select id="dealType" class="rounded-xl border border-[#E2E8F0] bg-white px-3 py-1 text-sm focus:ring-2 focus:ring-[#0070F3]">
427-
<option ${STATE.dealType === "Net New" ? "selected" : ""}>Net New</option>
428-
<option ${STATE.dealType === "Renewal" ? "selected" : ""}>Renewal</option>
429-
</select>
418+
<details class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
419+
<summary class="cursor-pointer p-5 font-semibold text-lg hover:bg-[#F7F9FB] transition-colors">Margins</summary>
420+
<div class="p-5 pt-0">
421+
<div class="flex items-start justify-between flex-col sm:flex-row gap-4">
422+
<div class="flex flex-wrap items-center gap-3">
423+
<label class="flex items-center gap-2 text-sm ${disabled ? "opacity-60" : ""}" title="For your first 3 net-new deals, we co-sell end-to-end and you keep full margin.">
424+
<input type="checkbox" id="newPartner" class="h-4 w-4 accent-[#0070F3]" ${disabled ? "disabled" : ""} ${STATE.newPartner ? "checked" : ""} />
425+
<span>New partner boost (first 3 net-new deals)</span>
426+
</label>
427+
<select id="commitment" class="rounded-xl border border-[#E2E8F0] bg-white px-3 py-1 text-sm focus:ring-2 focus:ring-[#0070F3]">
428+
<option ${STATE.commitment === "Annual" ? "selected" : ""}>Annual</option>
429+
<option ${STATE.commitment === "Monthly" ? "selected" : ""}>Monthly</option>
430+
</select>
431+
<select id="dealType" class="rounded-xl border border-[#E2E8F0] bg-white px-3 py-1 text-sm focus:ring-2 focus:ring-[#0070F3]">
432+
<option ${STATE.dealType === "Net New" ? "selected" : ""}>Net New</option>
433+
<option ${STATE.dealType === "Renewal" ? "selected" : ""}>Renewal</option>
434+
</select>
435+
</div>
430436
</div>
437+
<div class="mt-3">${contentHtml}</div>
431438
</div>
432-
<div class="mt-3">${contentHtml}</div>
433-
</div>
439+
</details>
434440
`;
435441
}
436-
function renderDetails(specific) {
442+
function renderDetailsCard(specific) {
437443
let tableHtml = '<table class="min-w-full divide-y divide-[#E2E8F0]"><thead><tr><th class="px-6 py-3 text-left text-sm font-semibold">Partner Type</th><th class="px-6 py-3 text-left text-sm font-semibold">Tier Eligibility</th><th class="px-6 py-3 text-left text-sm font-semibold">Margin</th><th class="px-6 py-3 text-left text-sm font-semibold">Deal Registration</th><th class="px-6 py-3 text-left text-sm font-semibold">MDF Access</th><th class="px-6 py-3 text-left text-sm font-semibold">Enablement</th></tr></thead><tbody class="divide-y divide-[#E2E8F0]">';
438444
tableHtml += `<tr><td class="px-6 py-4 text-sm font-medium">${specific.partnerType}</td><td class="px-6 py-4 text-sm text-[#4A5568]">${specific.tierEligibility}</td><td class="px-6 py-4 text-sm text-[#4A5568]">${specific.margin}</td><td class="px-6 py-4 text-sm text-[#4A5568]">${specific.dealRegistration}</td><td class="px-6 py-4 text-sm text-[#4A5568]">${specific.mdfAccess}</td><td class="px-6 py-4 text-sm text-[#4A5568]">${specific.enablement}</td></tr>`;
439445
tableHtml += '</tbody></table>';
440446
return `
441-
<div class="rounded-2xl border border-[#E2E8F0] bg-white p-5 shadow-md overflow-hidden">
442-
<h3 class="text-lg font-semibold mb-4">Details</h3>
443-
<div class="overflow-x-auto">${tableHtml}</div>
444-
</div>
447+
<details class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
448+
<summary class="cursor-pointer p-5 font-semibold text-lg hover:bg-[#F7F9FB] transition-colors">Details</summary>
449+
<div class="p-5 pt-0 overflow-x-auto">${tableHtml}</div>
450+
</details>
445451
`;
446452
}
447-
function renderROE() {
453+
function renderROECard() {
448454
let principlesTable = '<table class="min-w-full divide-y divide-[#E2E8F0]"><thead><tr><th class="px-6 py-3 text-left text-sm font-semibold">Principle</th><th class="px-6 py-3 text-left text-sm font-semibold">Description</th><th class="px-6 py-3 text-left text-sm font-semibold">Intent</th></tr></thead><tbody class="divide-y divide-[#E2E8F0]">';
449455
STATE.model.roe.principles.forEach((p) => {
450456
principlesTable += `<tr><td class="px-6 py-4 text-sm font-medium">${p.principle}</td><td class="px-6 py-4 text-sm text-[#4A5568]">${p.description}</td><td class="px-6 py-4 text-sm text-[#4A5568]">${p.intent}</td></tr>`;
@@ -469,27 +475,30 @@ <h3 class="text-lg font-semibold mb-4">Details</h3>
469475
});
470476
summaryTable += '</tbody></table>';
471477
return `
472-
<div class="mt-8 space-y-8">
473-
<div class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
474-
<h3 class="text-lg font-semibold p-5 border-b border-[#E2E8F0]">Rules of Engagement (ROE)</h3>
475-
<div class="overflow-x-auto">${principlesTable}</div>
476-
</div>
477-
<div class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
478-
<h3 class="text-lg font-semibold p-5 border-b border-[#E2E8F0]">Margin Bands & Definitions</h3>
479-
<div class="overflow-x-auto">${bandsTable}</div>
480-
</div>
481-
<div class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
482-
<h3 class="text-lg font-semibold p-5 border-b border-[#E2E8F0]">Partner Margin Governance</h3>
483-
<div class="overflow-x-auto">${governanceTable}</div>
484-
</div>
485-
<div class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
486-
<h3 class="text-lg font-semibold p-5 border-b border-[#E2E8F0]">Example Summary Table</h3>
487-
<div class="overflow-x-auto">${summaryTable}</div>
478+
<details class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
479+
<summary class="cursor-pointer p-5 font-semibold text-lg hover:bg-[#F7F9FB] transition-colors">Rules of Engagement</summary>
480+
<div class="p-5 pt-0 space-y-8">
481+
<div class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
482+
<h3 class="text-lg font-semibold p-5 border-b border-[#E2E8F0]">Rules of Engagement (ROE)</h3>
483+
<div class="overflow-x-auto">${principlesTable}</div>
484+
</div>
485+
<div class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
486+
<h3 class="text-lg font-semibold p-5 border-b border-[#E2E8F0]">Margin Bands & Definitions</h3>
487+
<div class="overflow-x-auto">${bandsTable}</div>
488+
</div>
489+
<div class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
490+
<h3 class="text-lg font-semibold p-5 border-b border-[#E2E8F0]">Partner Margin Governance</h3>
491+
<div class="overflow-x-auto">${governanceTable}</div>
492+
</div>
493+
<div class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
494+
<h3 class="text-lg font-semibold p-5 border-b border-[#E2E8F0]">Example Summary Table</h3>
495+
<div class="overflow-x-auto">${summaryTable}</div>
496+
</div>
488497
</div>
489-
</div>
498+
</details>
490499
`;
491500
}
492-
function renderOnboarding() {
501+
function renderOnboardingCard() {
493502
const steps = STATE.model.onboarding.steps;
494503
let buttonsHtml = "";
495504
steps.forEach((s, i) => {
@@ -516,13 +525,15 @@ <h3 class="text-lg font-semibold p-5 border-b border-[#E2E8F0]">Example Summary
516525
`;
517526
});
518527
return `
519-
<div class="mt-8 rounded-2xl border border-[#E2E8F0] bg-white p-5 shadow-md">
520-
<div class="flex items-start justify-between flex-col sm:flex-row gap-4">
521-
<h3 class="text-lg font-semibold">Onboarding Requirements</h3>
522-
<div class="flex gap-2">${buttonsHtml}</div>
528+
<details class="rounded-2xl border border-[#E2E8F0] bg-white shadow-md overflow-hidden">
529+
<summary class="cursor-pointer p-5 font-semibold text-lg hover:bg-[#F7F9FB] transition-colors">Onboarding Requirements</summary>
530+
<div class="p-5 pt-0">
531+
<div class="flex items-start justify-between flex-col sm:flex-row gap-4">
532+
<div class="flex gap-2">${buttonsHtml}</div>
533+
</div>
534+
<ul class="mt-3 grid gap-2 sm:grid-cols-2">${listHtml}</ul>
523535
</div>
524-
<ul class="mt-3 grid gap-2 sm:grid-cols-2">${listHtml}</ul>
525-
</div>
536+
</details>
526537
`;
527538
}
528539
function renderBusinessPlan() {

0 commit comments

Comments
 (0)