Offline Notepad
View raw
// ============================================== // ✅ TOGGLE LOGIC: ONLY CLOSE OTHERS WHEN OPENING A DIFFERENT TOGGLE // ============================================== const checkboxes = document.querySelectorAll('input[type="checkbox"]'); checkboxes.forEach(checkbox => { checkbox.addEventListener('change', function(e) { if (this.checked) { const currentWrapper = this.closest('.paper-bubble'); checkboxes.forEach(other => { if (other === this) return; const otherWrapper = other.closest('.paper-bubble'); if (otherWrapper !== currentWrapper) { other.checked = false; } }); } }); });
// ============================================== // ✅ FIX: PREVENT LABEL TOGGLE WHEN CLICKING INSIDE ANY CONTENT // ============================================== document.querySelectorAll('.bill-explain-content, .movers-content, .retent-content, .sales-content, .hotline-content, .other-content, .ack-content, .reassure-content, .prog-content, .empathy-content, .gentle-content, .verify-content, .hold-content, .disc-movers-content, .disc-retent-content, .pres-movers-content, .pres-retent-content, .ack-check-content').forEach(content => { content.addEventListener('click', e => { e.stopPropagation(); e.preventDefault(); }); content.addEventListener('mousedown', e => { e.stopPropagation(); e.preventDefault(); }); content.addEventListener('mouseup', e => { e.stopPropagation(); e.preventDefault(); }); content.addEventListener('input', e => e.stopPropagation()); content.addEventListener('focusin', e => e.stopPropagation()); });
// ============================================== // ✅ BACK TO TOC: CLOSES EVERY TOGGLE // ============================================== document.querySelectorAll('.toc-main-link, .back-toc-right a').forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); document.querySelectorAll('input[type="checkbox"]').forEach(cb => { cb.checked = false; }); const targetId = this.getAttribute('href').substring(1); const targetSection = document.getElementById(targetId); if (targetSection) { targetSection.scrollIntoView({ behavior: 'auto', block: 'start' }); } }); });
// ============================================== // ✅ MOVERS BILL EDIT + RESET — WORKS FOR BOTH TABLES // ============================================== const editSpans = document.querySelectorAll('span[contenteditable="true"]'); let originalData = []; let revertTimers = [];
editSpans.forEach((span, index) => { originalData[index] = { text: span.textContent.trim(), color: getComputedStyle(span).color }; revertTimers[index] = null; });
function resetAllEditable() { editSpans.forEach((span, index) => { span.textContent = originalData[index].text; span.style.color = originalData[index].color; if (revertTimers[index]) clearTimeout(revertTimers[index]); }); }
editSpans.forEach((span, index) => { span.addEventListener('click', function(e) { e.stopPropagation(); e.preventDefault(); if(this.textContent.trim() === originalData[index].text){ this.textContent = ''; this.focus(); } });
span.addEventListener('input', function(e) {
e.stopPropagation();
this.style.color = '#000000';
if (revertTimers[index]) clearTimeout(revertTimers[index]);
revertTimers[index] = setTimeout(resetAllEditable, 30000);
});
span.addEventListener('mousedown', e => e.stopPropagation());
span.addEventListener('mouseup', e => e.stopPropagation());
span.addEventListener('focus', e => e.stopPropagation());
span.addEventListener('keydown', e => e.stopPropagation());
span.addEventListener('keyup', e => e.stopPropagation());
});
// Attach to BOTH reset buttons (Disconnection + Move) document.querySelectorAll('#manualResetBtn, #manualResetBtn2').forEach(btn => { if(btn){ btn.addEventListener('click', function(e){ e.stopPropagation(); e.preventDefault(); resetAllEditable(); }); btn.addEventListener('mousedown', e => { e.stopPropagation(); e.preventDefault(); }); } });
}); // END DOMContentLoaded
<!-- 📝 MOVERS BILL EXPLANATION -->
<div class="paper-bubble">
<label>
<input type="checkbox" id="bill-explain-check">
<div class="bill-explain-toggle">📝 Movers Bill Explanation</div>
<div class="bill-explain-content">
<!-- ===== TABLE 1: DISCONNECTION ===== -->
<p class="revert-note">💡 Editable text reverts ALL together after 30 seconds of inactivity
<button type="button" id="manualResetBtn" class="reset-btn">🔄 Reset Now</button>
</p>
<div class="table-label">📤 DISCONNECTION</div>
<table class="flow-table">
<thead>
<tr>
<th style="width:32%;">Scenario</th>
<th style="width:68%;">Script</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>NO BILL SHOWING ON THE BE SCREEN</strong></td>
<td>
<p>Thank you for waiting. Your request has now been completed. To summarise, your actual early disconnection fee will be £<span contenteditable="true">Amount</span> (this amount is included in your final bill), and your services will be disconnected on <span contenteditable="true">Disconnection Date</span>.</p>
<p>Please be guided that your final bill hasn't generated yet but this bill covers your usage of services until the actual disconnection date. No worries, as you'll receive an email with your bill once it is available.</p>
<p>If there's a refund, it will be processed within 45 days of the disconnection date and will be credited directly to your bank account.</p>
</td>
</tr>
<tr>
<td><strong>PENDING PAYMENT + CREDIT</strong></td>
<td>
<p>Thank you for waiting. Your request has been completed. To summarise, your actual early disconnection fee will be £<span contenteditable="true">Amount</span> (this amount is included in your final bill), and your services will be disconnected on <span contenteditable="true">Disconnection Date</span>.</p>
<p>A bill will be generated on <span contenteditable="true">Billing Date</span> for the amount of £<span contenteditable="true">Amount</span>, which will be due on <span contenteditable="true">Due Date</span>.</p>
<p>Once your services are disconnected, a final bill will be produced which will be a credit of £<span contenteditable="true">Amount</span>. It will be refunded to you within 45 days after the disconnection and will be back to your bank account.</p>
</td>
</tr>
<tr>
<td><strong>PENDING PAYMENT + ONE BE</strong></td>
<td>
<p>Thank you for waiting. Your request has been completed. To summarise, your actual early disconnection fee will be £<span contenteditable="true">Amount</span> (this amount is included in your final bill), and your services will be disconnected on <span contenteditable="true">Disconnection Date</span>.</p>
<p>A bill will be generated on <span contenteditable="true">Billing Date</span> for the amount of £<span contenteditable="true">Amount</span>, which will be due on <span contenteditable="true">Due Date</span>.</p>
<p>Once your services are disconnected, a final bill will be produced which will be a credit of £<span contenteditable="true">Amount</span>. It will be refunded to you within 45 days after disconnection and will be back to your bank account.</p>
</td>
</tr>
<tr>
<td><strong>PENDING PAYMENT + TWO BE</strong></td>
<td>
<p>Thank you for waiting. Your request has been completed. To summarise, your actual early disconnection fee will be £<span contenteditable="true">Amount</span> (this amount is included in your final bill), and your services will be disconnected on <span contenteditable="true">Disconnection Date</span>.</p>
<p>A bill will be generated on <span contenteditable="true">Billing Date</span> for the amount of £<span contenteditable="true">Amount</span>, which will be due on <span contenteditable="true">Due Date</span>.</p>
<p>Your next bill will be £<span contenteditable="true">Amount</span> which will be due on <span contenteditable="true">Due Date</span>. Once your services are disconnected, a final bill will be produced with the amount of £<span contenteditable="true">Amount</span> which will be due on <span contenteditable="true">Due Date</span>.</p>
</td>
</tr>
<tr>
<td><strong>BE (1 PAYMENT)</strong></td>
<td>
<p>Thank you for waiting. Your request has been completed. To summarise, your actual early disconnection fee will be £<span contenteditable="true">Amount</span> (this amount is included in your final bill), and your services will be disconnected on <span contenteditable="true">Disconnection Date</span>.</p>
<p>Once your account is disconnected, your final bill will be £<span contenteditable="true">Amount</span>. This amount will be collected via Direct Debit on <span contenteditable="true">Due Date</span>.</p>
</td>
</tr>
<tr>
<td><strong>BE (2 PAYMENT)</strong></td>
<td>
<p>Thank you for waiting. Your request has been completed. To summarise, your actual early disconnection fee will be £<span contenteditable="true">Amount</span> (this amount is included in your final bill), and your services will be disconnected on <span contenteditable="true">Disconnection Date</span>.</p>
<p>Your next bill will be £<span contenteditable="true">Amount</span> which will be due on <span contenteditable="true">Due Date</span>. Once your services are disconnected, a final bill will be produced with the amount of £<span contenteditable="true">Amount</span> which will be due on <span contenteditable="true">Due Date</span>.</p>
</td>
</tr>
<tr>
<td><strong>BE (1 PAYMENT) + CREDIT</strong></td>
<td>
<p>Thank you for waiting. Your request has been completed. To summarise, your actual early disconnection fee will be £<span contenteditable="true">Amount</span>, and your services will be disconnected on <span contenteditable="true">Disconnection Date</span>.</p>
<p>Once your account is disconnected, your final bill will be £<span contenteditable="true">Amount</span>. This amount will be collected via Direct Debit on <span contenteditable="true">Due Date</span>.</p>
<p>I can see on your account that you have a refund of £<span contenteditable="true">Amount</span>, and this will be processed within 45 days of the disconnection date and will be credited directly into your bank account.</p>
</td>
</tr>
<tr>
<td><strong>CREDIT ONLY</strong></td>
<td>
<p>Thank you for waiting. Your request has been completed. To summarise, your actual early disconnection fee will be £<span contenteditable="true">Amount</span>, and your services will be disconnected on <span contenteditable="true">Disconnection Date</span>.</p>
<p>Once your services are disconnected, a final bill will be produced which will be a credit of £<span contenteditable="true">Amount</span>. It will be refunded to you within 45 days after the disconnection and will be back to your bank account.</p>
</td>
</tr>
</tbody>
</table>
<!-- ===== TABLE 2: MOVE (NOW WITH ITS OWN RESET BAR) ===== -->
<p class="revert-note">💡 Editable text reverts ALL together after 30 seconds of inactivity
<button type="button" id="manualResetBtn2" class="reset-btn">🔄 Reset Now</button>
</p>
<div class="table-label">🏠 MOVE</div>
<table class="flow-table">
<thead>
<tr>
<th style="width:32%;">Scenario</th>
<th style="width:68%;">Script</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>📌 CREDIT (CURRENT) + FIRST BILL (NEW)</strong></td>
<td>
<p>I appreciate your patience! Your installation is all set. Now, let's talk about your bill and some key points in this chat.</p>
<p>Because you are bringing your services to your new address you won't receive a final bill at the current property.</p>
<p>I can see on your account that you have a credit of £<span contenteditable="true">Amount</span> which we'll use towards your first bill at the new address.</p>
<p>This will be £<span contenteditable="true">Amount</span> due on the <span contenteditable="true">Due Date</span>, but we'll deduct your credit, so you'll only pay £<span contenteditable="true">Amount</span>. This price includes your £<span contenteditable="true">Amount</span> mover's fee.</p>
</td>
</tr>
<tr>
<td><strong>📌 FINAL BILL (CURRENT) + FIRST BILL (NEW)</strong></td>
<td>
<p>I appreciate your patience! Your installation is all set. Now, let's talk about your bill and some key points in this chat.</p>
<p>Because you are bringing your services to your new address your final bill at the current address will be £<span contenteditable="true">Amount</span> that will be taken on your Direct Debit on the <span contenteditable="true">Due Date</span>.</p>
<p>This will be £<span contenteditable="true">Amount</span> due on the <span contenteditable="true">Due Date</span>, but we'll deduct your credit, so you'll only pay £<span contenteditable="true">Amount</span>. This price includes your £<span contenteditable="true">Amount</span> mover's fee.</p>
</td>
</tr>
<tr>
<td><strong>📌 PENDING PAYMENT & FINAL + FIRST BILL</strong></td>
<td>
<p>I appreciate your patience! Your installation is all set. Now, let's talk about your bill and some key points in this chat.</p>
<p>Because you are bringing your services to your new address you still have a pending payment amounting to £<span contenteditable="true">Amount</span> due on <span contenteditable="true">Due Date</span>, and your final bill at the current address will be £<span contenteditable="true">Amount</span> that will be taken on your Direct Debit on the <span contenteditable="true">Due Date</span>.</p>
<p>The first bill in the new address will be £<span contenteditable="true">Amount</span>, which will be taken on your direct debit on the <span contenteditable="true">Due Date</span>. This price includes your £<span contenteditable="true">Amount</span> mover's fee.</p>
</td>
</tr>
<tr>
<td><strong>📌 PENDING PAYMENT & CREDIT + FIRST BILL</strong></td>
<td>
<p>I appreciate your patience! Your installation is all set. Now, let's talk about your bill and some key points in this chat.</p>
<p>Because you are bringing your services to your new address you still have a pending payment amounting to £<span contenteditable="true">Amount</span> due on <span contenteditable="true">Due Date</span>, and once we collect that I can see on your account that you have a credit of £<span contenteditable="true">Amount</span> which we'll use towards your first bill at the new address.</p>
<p>The first bill in the new address will be £<span contenteditable="true">Amount</span>, which will be taken on your direct debit on the <span contenteditable="true">Due Date</span>. This price includes your £<span contenteditable="true">Amount</span> mover's fee.</p>
</td>
</tr>
<tr>
<td><strong>📌 PENDING, BE + CREDIT + FIRST BILL</strong></td>
<td>
<p>I appreciate your patience! Your installation is all set. Now, let's talk about your bill and some key points in this chat.</p>
<p>Because you are bringing your services to your new address you still have a pending payment amounting to £<span contenteditable="true">Amount</span> due on <span contenteditable="true">Due Date</span>.</p>
<p>Your final bill at the current address will be £<span contenteditable="true">Amount</span> that will be taken on your Direct Debit on the <span contenteditable="true">Due Date</span>.</p>
<p>I can see on your account that you have a credit of £<span contenteditable="true">Amount</span> which we'll use towards your first bill at the new address.</p>
<p>This will be £<span contenteditable="true">Amount</span> due on the <span contenteditable="true">Due Date</span> but we'll deduct your credit, so you'll only pay £<span contenteditable="true">Amount</span>. This price includes your £<span contenteditable="true">20</span> mover's fee.</p>
</td>
</tr>
<tr>
<td><strong>📌 FINAL BILL & CREDIT + FIRST BILL</strong></td>
<td>
<p>I appreciate your patience! Your installation is all set. Now, let's talk about your bill and some key points in this chat.</p>
<p>Because you are bringing your services to your new address your final bill at the current address will be £<span contenteditable="true">Amount</span> that will be taken on your Direct Debit on the <span contenteditable="true">Due Date</span>.</p>
<p>I can see on your account that you have a credit of £<span contenteditable="true">Amount</span> which we'll use towards your first bill at the new address.</p>
<p>This will be £<span contenteditable="true">Amount</span> due on the <span contenteditable="true">Due Date</span> but we'll deduct your credit, so you'll only pay £<span contenteditable="true">Amount</span>. This price includes your £<span contenteditable="true">20</span> mover's fee.</p>
</td>
</tr>
<tr>
<td><strong>📌 PENDING, FINAL & CREDIT + FIRST BILL</strong></td>
<td>
<p>I appreciate your patience! Your installation is all set. Now, let's talk about your bill and some key points in this chat.</p>
<p>Because you are bringing your services to your new address you still have a pending payment amounting to £<span contenteditable="true">Amount</span> due on <span contenteditable="true">Due Date</span>.</p>
<p>Your final bill at the current address will be £<span contenteditable="true">Amount</span> that will be taken on your Direct Debit on the <span contenteditable="true">Due Date</span>.</p>
<p>I can see on your account that you have a credit of £<span contenteditable="true">Amount</span> which we'll use towards your first bill at the new address.</p>
<p>This will be £<span contenteditable="true">Amount</span> due on the <span contenteditable="true">Due Date</span> but we'll deduct your credit, so you'll only pay £<span contenteditable="true">Amount</span>. This price includes your £<span contenteditable="true">20</span> mover's fee.</p>
</td>
</tr>
</tbody>
</table>
<div class="back-toc-right"><a href="#main-options">Back to Table of Contents</a></div>
</div>
</label>
</div>
<!-- 📞 Virgin Media Hotline Directory -->
<div class="paper-bubble">
<label>
<input type="checkbox" id="hotline-check">
<div class="hotline-toggle">📞 Virgin Media Hotline Directory</div>
<div class="hotline-content hotline-list">
<div class="hl-row"><span class="hl-letter">A</span>ACTIVATION TEAM - 0800 064 3287</div>
<div class="hl-row"><span class="hl-letter">B</span>BEREAVEMENT TEAM - 0800 952 2302</div>
<div class="hl-row"><span class="hl-letter">C</span>CHF - 0203 706 0570</div>
<div class="hl-row"><span class="hl-indent"></span>COLLECTIONS / BILLING - 0345 142 4444</div>
<div class="hl-row"><span class="hl-indent"></span>CUSTOMER CARE - 0800 064 3840 / 0800 052 0391</div>
<div class="hl-row"><span class="hl-indent"></span>CUSTOMER RECOVERY TEAM - 0345 454 5926</div>
<div class="hl-divider"></div>
<div class="hl-row"><span class="hl-letter">F</span>FAULTS DEPARTMENT - 0333 000 5925</div>
<div class="hl-row"><span class="hl-indent"></span>FIELD SUPPORT TEAM - 0800 052 5738 / 03330 005 925</div>
<div class="hl-divider"></div>
<div class="hl-row"><span class="hl-letter">G</span>GENERAL HOTLINE - 0800 454 1111</div>
<div class="hl-divider"></div>
<div class="hl-row"><span class="hl-letter">M</span>MATES RATES - 0800 052 0705</div>
<div class="hl-row"><span class="hl-indent"></span>MOBILE CARE - 0800 062 4192 / 0345 600 0789</div>
<div class="hl-row"><span class="hl-indent"></span>MOVERS DEPARTMENT - 0800 052 0640</div>
<div class="hl-divider"></div>
<div class="hl-row"><span class="hl-letter">N</span>NHB - 0800 073 7100</div>
<div class="hl-divider"></div>
<div class="hl-row"><span class="hl-letter">O</span>O2 DEPARTMENT - 0344 809 0202</div>
<div class="hl-divider"></div>
<div class="hl-row"><span class="hl-letter">P</span>PRE-INSTALLATION TEAM - 0800 052 1734</div>
<div class="hl-divider"></div>
<div class="hl-row"><span class="hl-letter">Q</span>QUICKSTART - 0800 953 9500</div>
<div class="hl-row"><span class="hl-indent"></span>QUITA ESC - 0800 073 1132</div>
<div class="hl-divider"></div>
<div class="hl-row"><span class="hl-letter">R</span>RAF/CALL BACK - 0800 052 2101</div>
<div class="hl-row"><span class="hl-indent"></span>RETENTIONS - 0800 952 2277</div>
<div class="hl-divider"></div>
<div class="hl-row"><span class="hl-letter">S</span>SALES - 0800 064 3815</div>
<div class="hl-row"><span class="hl-indent"></span>SIMPLIFY DIGITAL - 0800 052 4704</div>
<div class="hl-divider"></div>
<div class="hl-row"><span class="hl-letter">T</span>TELESALES - 0800 052 2525</div>
<div class="hl-divider"></div>
<div class="hl-row"><span class="hl-letter">V</span>VM BUSINESS - 0800 052 0800 / 0800 953 0180</div>
<div class="hl-row"><span class="hl-indent"></span>VM CABLE DIGGING & CONSTRUCTION - 0333 000 5925</div>
<div class="hl-divider"></div>
<div class="hl-row"><span class="hl-letter">W</span>WAYLEAVE - 0800 052 0640</div>
<div class="hl-row"><span class="hl-indent"></span>WEB EXCEPTIONAL TEAM - 0800 052 7588</div>
<div class="back-toc-right"><a href="#main-options">Back to Table of Contents</a></div>
</div>
</label>
</div>
<!-- 🔗 Useful Links -->
<div class="paper-bubble">
<label>
<input type="checkbox" id="other-check">
<div class="other-toggle">🔗 Useful Links</div>
<div class="other-content">
<ul class="bullet-list">
<li>General Tips for Smooth Chat Interactions ❤️</li>
<li>Useful Quick Links & References ❤️</li>
<li>Additional Support Notes ❤️</li>
<li>Helpful Reminders & Best Practices ❤️</li>
</ul>
<div class="back-toc-right"><a href="#main-options">Back to Table of Contents</a></div>
</div>
</label>
</div>