Todo on Ben's Blog https://jinpeng.cv/en/series/todo/ Recent content in Todo on Ben's Blog Hugo -- 0.154.0 en ©️ 2025 Ben Mon, 09 Mar 2026 22:26:59 -0600 2026-01-01 https://jinpeng.cv/en/diary/2026/january/2026-01-01/ Thu, 01 Jan 2026 23:59:21 -0700 https://jinpeng.cv/en/diary/2026/january/2026-01-01/ <p>Slept in and watched TV (Ted Lasso) all day again!</p> <div class="encrypted-content" data-cipher="29udHVsYXRpb25zISBZb3Uga25vdyB0b2RheSZyc3F1bztzIGtleSE8L3A&#43;CjxwPk5vdGhpbmcgc3BlY2lhbCBvciBpbXBvcnRhbnQgaGVyZS48L3A&#43;CjxwPkkgd2FudCB0byBnaXZlIHRoZSBwZW9wbGUgd2hvIGtub3cgbWUgYSBsaXR0bGUgaGVscCwgZXNwZWNpYWxseSByZWdhcmRpbmcgdGhlIGludGVybmV0LjwvcD4KPHA&#43;VG8gdGVhY2ggcGVvcGxlIGhvdyB0byBpbXByb3ZlIG91ciBsaWZlIGJ5IGludGVybmV0LiBUaHJvdWdoIHRoZSBjb25mbGljdCBiZXR3ZWVuIEh1YW4gYW5kIG1lLCBJIHJlYWxpemVkIHRoYXQgc29tZW9uZSBuZWVkcyB0byBsZWFybiBob3cgdG8gYnJlYWsgdGhlIGluZm9ybWF0aW9uIGJhcnJpZXJzLjwvcD4KPHA&#43;QZ3Jh" data-hint="Content Here is Encrypted" data-error="Password Error"> <div class="locked-state"> <p>🔒 Content Here is Encrypted</p> <div class="password-prompt"> <div class="password-input-wrapper"> <input type="password" class="password-input" placeholder="Please input password" id="pwd-input-0" aria-label="加密内容密码"> <button type="button" class="toggle-visibility-btn" aria-pressed="false" aria-label="显示或隐藏密码" onclick="toggleVisibility(this, 'pwd-input-0')"> <svg class="icon icon-eye-open" viewBox="0 0 24 24" aria-hidden="true"> <path d="M12 5C6 5 2 12 2 12s4 7 10 7 10-7 10-7-4-7-10-7Zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-6a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"/> </svg> <svg class="icon icon-eye-closed" viewBox="0 0 24 24" aria-hidden="true"> <path d="M3.5 4.5 2 6l3.2 3.2A13 13 0 0 0 2 12s4 7 10 7a9.7 9.7 0 0 0 4.7-1.2L18 19l2.5 2.5 1.5-1.5-18-18Zm8.5 12c-5.1 0-8-4-8-4a11 11 0 0 1 2.6-2.9l1.6 1.6a4 4 0 0 0 5.2 5.2l1.6 1.6A7.7 7.7 0 0 1 12 16.5Zm8-4.5a12.5 12.5 0 0 0-4.2-3.6l1.6-1.6A13.6 13.6 0 0 1 22 12s-1.1 2-3 4.1l-1.4-1.4A11.2 11.2 0 0 0 20 12Z"/> </svg> </button> </div> <button class="decrypt-btn" onclick="decryptContent(event, 'pwd-input-0')"> Unlock </button> </div> <div class="status-message"></div> </div> <div class="decrypted-content markdown-body" hidden></div> </div> <style> .encrypted-content { border: 1px solid #878787; border-radius: 0.5rem; padding: 1.5rem; margin: 1.5rem 0; transition: all 0.3s ease; } .encrypted-content.unlocked { border: none; padding: 0; margin: 0; background-image: radial-gradient(rgba(50, 0, 0, 0.1) 1px, transparent 0) !important; background-size: 10px 10px; } .password-prompt { display: flex; gap: 0.75rem; margin: 1rem 0; } .password-input-wrapper { position: relative; flex: 3; } .password-input { width: 100%; min-width: 150px; padding: 0.75rem; padding-right: 2.5rem; border: 1px solid #ddd; border-radius: 0.25rem; } .password-input.error { border-color: #dc3545; } .toggle-visibility-btn { position: absolute; top: 50%; right: 0.75rem; transform: translateY(-50%); background: transparent; border: none; cursor: pointer; line-height: 0; padding: 0; color: inherit; display: flex; align-items: center; justify-content: center; } .toggle-visibility-btn .icon { width: 1.25rem; height: 1.25rem; fill: currentColor; } .toggle-visibility-btn .icon-eye-closed { display: none; } .toggle-visibility-btn.is-visible .icon-eye-open { display: none; } .toggle-visibility-btn.is-visible .icon-eye-closed { display: block; } .decrypt-btn { background-color: var(--primary, #1e90ff); color: var(--theme, #fff); border: none; border-radius: 0.25rem; cursor: pointer; transition: opacity 0.3s; font-weight: 500; flex: 1; } .decrypt-btn:hover { opacity: 0.9; } .status-message { color: #6c757d; font-size: 0.9em; min-height: 1.2em; } .status-message.error { color: #dc3545; } </style> <script> function toggleVisibility(btn, inputId) { const input = document.getElementById(inputId); const isPwd = input.type === 'password'; input.type = isPwd ? 'text' : 'password'; btn.setAttribute('aria-pressed', String(isPwd)); btn.classList.toggle('is-visible', isPwd); } function decryptContent(event, inputId) { event.preventDefault(); const input = document.getElementById(inputId); const container = input.closest('.encrypted-content'); const statusEl = container.querySelector('.status-message'); const decryptedContent = container.querySelector('.decrypted-content'); statusEl.textContent = ''; statusEl.classList.remove('error'); input.classList.remove('error'); const today = new Date(); const mmdd = String(today.getUTCMonth() + 1).padStart(2, '0') + String(today.getUTCDate()).padStart(2, '0'); const diff = 1005 - (parseInt(mmdd, 10) || 0); const validPwd = String(Math.abs(diff)).padStart(4, '0'); if (input.value !== validPwd) { input.classList.add('error'); statusEl.textContent = container.dataset.error || ''; statusEl.classList.add('error'); input.focus(); return; } try { let cipherText = container.dataset.cipher.replace(/\s+/g, ''); if (cipherText.length > 12) { const part1 = cipherText.slice(0, 3); const part2 = cipherText.slice(3, -9); const part3 = cipherText.slice(-9, -4); const part4 = cipherText.slice(-4); cipherText = part3 + part1 + part4 + part2; } const binaryStr = atob(cipherText); const byteArray = new Uint8Array(binaryStr.length); for (let i = 0; i < binaryStr.length; i++) { byteArray[i] = binaryStr.charCodeAt(i); } const decoded = new TextDecoder("utf-8").decode(byteArray); const fragment = document.createRange().createContextualFragment(decoded); decryptedContent.innerHTML = ''; decryptedContent.appendChild(fragment); container.querySelector('.locked-state').hidden = true; decryptedContent.hidden = false; container.classList.add('unlocked'); } catch (e) { console.error(e); statusEl.textContent = 'Decode Failed: ' + e.message; statusEl.classList.add('error'); } } document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.password-input').forEach(input => { input.addEventListener('keypress', e => { if (e.key === 'Enter') { decryptContent(e, input.id); } }); }); }); </script> Slept in and watched TV (Ted Lasso) all day again!

🔒 Content Here is Encrypted

]]>