Spaces:
Build error
Build error
| <html lang="en" style="scroll-behavior:smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>How to Export Chat | The Algorithm</title> | |
| <meta name="description" content="Step-by-step instructions to export your WhatsApp and Telegram chat history for analysis with The Algorithm."> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> | |
| <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}"> | |
| <style> | |
| .step-card { counter-increment: step-counter; } | |
| .step-card::before { | |
| content: counter(step-counter); | |
| position: absolute; top: -12px; left: 20px; | |
| width: 32px; height: 32px; border-radius: 50%; | |
| display: flex; align-items: center; justify-content: center; | |
| font-family: var(--font-heading); font-weight: 900; font-size: 1rem; | |
| z-index: 10; border: 2px solid var(--black); box-shadow: 2px 2px 0 0 var(--black); | |
| } | |
| .whatsapp-steps, .telegram-steps, .instagram-steps, .discord-steps { counter-reset: step-counter; } | |
| .whatsapp-steps .step-card::before { background: var(--green); color: #fff; } | |
| .telegram-steps .step-card::before { background: var(--blue); color: #fff; } | |
| .instagram-steps .step-card::before { background: var(--pink); color: #fff; } | |
| .discord-steps .step-card::before { background: var(--purple); color: #fff; } | |
| .tab-btn.active-tab { | |
| background: var(--pink) ; color: var(--white) ; | |
| box-shadow: inset 4px 4px 0 0 rgba(0,0,0,0.1); transform: translateY(2px); | |
| } | |
| .platform-panel { display: none; opacity: 0; transition: opacity 0.3s ease; } | |
| .platform-panel.active-panel { display: block; opacity: 1; } | |
| .device-btn { transition: all 0.2s ease; } | |
| .device-btn.active-device { background: var(--yellow) ; } | |
| </style> | |
| </head> | |
| <body class="comic-dots"> | |
| <!-- Nav --> | |
| <header class="nav"> | |
| <div class="container"> | |
| <a href="/" class="nav-logo" style="color:var(--white)"> | |
| <span style="font-size:1.2rem;margin-right:.25rem">←</span> | |
| 🧠 The Algorithm | |
| </a> | |
| <a href="{{ url_for('index') }}" class="nav-link" style="font-size:.8rem">Back to Analyzer</a> | |
| </div> | |
| </header> | |
| <main style="flex-grow:1;display:flex;justify-content:center;padding:2rem 1.25rem"> | |
| <div style="max-width:800px;width:100%"> | |
| <!-- Title --> | |
| <div class="text-center mb-10" style="padding-top:1rem"> | |
| <h1 style="color:var(--pink);text-shadow:2px 2px 0 var(--black);margin-bottom:.75rem;font-size:clamp(2rem,5vw,3rem)">How to Export Your Chat</h1> | |
| <p style="color:var(--gray-600);font-size:1.05rem;font-weight:500;max-width:550px;margin:0 auto">Follow these quick steps to export your conversation history. It only takes a minute.</p> | |
| </div> | |
| <!-- Platform Tabs --> | |
| <div class="flex flex-wrap justify-center gap-3 mb-8"> | |
| <button id="tab-api-keys" onclick="switchTab('api-keys')" class="tab-btn active-tab btn" style="font-size:.75rem;padding:.5rem 1.25rem">🔑 Get API Keys</button> | |
| <button id="tab-whatsapp" onclick="switchTab('whatsapp')" class="tab-btn btn btn--white" style="font-size:.75rem;padding:.5rem 1.25rem">💬 WhatsApp</button> | |
| <button id="tab-telegram" onclick="switchTab('telegram')" class="tab-btn btn btn--white" style="font-size:.75rem;padding:.5rem 1.25rem">✈️ Telegram</button> | |
| <button id="tab-instagram" onclick="switchTab('instagram')" class="tab-btn btn btn--white" style="font-size:.75rem;padding:.5rem 1.25rem">📸 Instagram</button> | |
| <button id="tab-discord" onclick="switchTab('discord')" class="tab-btn btn btn--white" style="font-size:.75rem;padding:.5rem 1.25rem">🎮 Discord</button> | |
| </div> | |
| <!-- ========== API KEYS PANEL ========== --> | |
| <div id="panel-api-keys" class="platform-panel active-panel"> | |
| <div class="text-center mb-8"> | |
| <p class="pill-label pill-label--yellow" style="font-style:normal;font-size:.75rem;text-transform:none">The Algorithm requires your own API Key (BYOK) for 100% privacy and zero middleman servers.</p> | |
| </div> | |
| <div style="display:flex;flex-direction:column;gap:1.5rem"> | |
| <!-- Gemini --> | |
| <div class="card" style="border-width:4px;border-radius:20px;box-shadow:6px 6px 0 0 var(--purple);position:relative;padding:1.5rem"> | |
| <span class="pill-label pill-label--pink" style="position:absolute;top:-12px;right:16px;font-size:.6rem">Recommended / Best Free Tier</span> | |
| <h3 style="display:flex;align-items:center;gap:.75rem;margin-bottom:1rem"><span style="font-size:1.75rem">🤖</span>Google Gemini</h3> | |
| <ol style="padding-left:1.5rem;line-height:1.8;font-size:.9rem;color:var(--gray-600)"> | |
| <li><strong style="color:var(--black)">Click Here:</strong> Go to <a href="https://aistudio.google.com/app/apikey" target="_blank" style="color:var(--purple);font-weight:700;text-decoration:underline">Google AI Studio API Keys</a>.</li> | |
| <li>Sign in with your Google account.</li> | |
| <li>Click the blue <strong style="color:var(--black)">"Create API key"</strong> button.</li> | |
| <li>Select an existing project or create a new one.</li> | |
| <li>Copy the key (looks like <code style="background:var(--cream);padding:2px 6px;border-radius:4px;border:1px solid var(--black);color:var(--pink);font-size:.85rem">AIzaSy...</code>) and paste into the settings modal.</li> | |
| </ol> | |
| <p style="font-size:.75rem;color:var(--gray-400);margin-top:1rem;border-top:1px solid var(--gray-200);padding-top:.75rem"><em>Note: Gemini offers a very generous free tier (15 RPM), perfect for heavy chats at $0 cost.</em></p> | |
| </div> | |
| <!-- xAI --> | |
| <div class="card" style="border-width:4px;border-radius:20px;box-shadow:6px 6px 0 0 var(--black);padding:1.5rem"> | |
| <h3 style="display:flex;align-items:center;gap:.75rem;margin-bottom:1rem"><span style="font-size:1.75rem">✖️</span>xAI (Grok)</h3> | |
| <ol style="padding-left:1.5rem;line-height:1.8;font-size:.9rem;color:var(--gray-600)"> | |
| <li><strong style="color:var(--black)">Click Here:</strong> Go to <a href="https://console.x.ai/" target="_blank" style="color:var(--purple);font-weight:700;text-decoration:underline">xAI Console</a>.</li> | |
| <li>Sign in or create an account.</li> | |
| <li>Navigate to <strong style="color:var(--black)">API Keys</strong> section.</li> | |
| <li>Click <strong style="color:var(--black)">"Create API Key"</strong>.</li> | |
| <li>Copy the key and paste into the settings modal.</li> | |
| </ol> | |
| <p style="font-size:.75rem;color:var(--gray-400);margin-top:1rem;border-top:1px solid var(--gray-200);padding-top:.75rem"><em>Note: xAI recently introduced a free tier for Grok; check their console for availability.</em></p> | |
| </div> | |
| <!-- Anthropic --> | |
| <div class="card" style="border-width:4px;border-radius:20px;box-shadow:6px 6px 0 0 var(--yellow);padding:1.5rem"> | |
| <h3 style="display:flex;align-items:center;gap:.75rem;margin-bottom:1rem"><span style="font-size:1.75rem">🧠</span>Anthropic (Claude 3.5)</h3> | |
| <ol style="padding-left:1.5rem;line-height:1.8;font-size:.9rem;color:var(--gray-600)"> | |
| <li><strong style="color:var(--black)">Click Here:</strong> Go to <a href="https://console.anthropic.com/settings/keys" target="_blank" style="color:var(--purple);font-weight:700;text-decoration:underline">Anthropic Console</a>.</li> | |
| <li>Sign in or create an account.</li> | |
| <li>Navigate to <strong style="color:var(--black)">Settings → API Keys</strong>.</li> | |
| <li>Click <strong style="color:var(--black)">"Create Key"</strong>. Name it "The Algorithm".</li> | |
| <li>Copy the key (starts with <code style="background:var(--cream);padding:2px 6px;border-radius:4px;border:1px solid var(--black);color:var(--pink);font-size:.85rem">sk-ant-</code>) and paste it in.</li> | |
| </ol> | |
| <p style="font-size:.75rem;color:var(--gray-400);margin-top:1rem;border-top:1px solid var(--gray-200);padding-top:.75rem"><em>Note: Requires $5 minimum billing credits.</em></p> | |
| </div> | |
| <!-- OpenAI --> | |
| <div class="card" style="border-width:4px;border-radius:20px;box-shadow:6px 6px 0 0 var(--green);padding:1.5rem"> | |
| <h3 style="display:flex;align-items:center;gap:.75rem;margin-bottom:1rem"><span style="font-size:1.75rem">🟢</span>OpenAI (GPT-4o)</h3> | |
| <ol style="padding-left:1.5rem;line-height:1.8;font-size:.9rem;color:var(--gray-600)"> | |
| <li><strong style="color:var(--black)">Click Here:</strong> Go to <a href="https://platform.openai.com/api-keys" target="_blank" style="color:var(--purple);font-weight:700;text-decoration:underline">OpenAI API Keys</a>.</li> | |
| <li>Sign in or create a developer account.</li> | |
| <li>Click <strong style="color:var(--black)">"Create new secret key"</strong>.</li> | |
| <li>Copy the key (starts with <code style="background:var(--cream);padding:2px 6px;border-radius:4px;border:1px solid var(--black);color:var(--pink);font-size:.85rem">sk-</code>) immediately.</li> | |
| <li>Paste it into the settings modal.</li> | |
| </ol> | |
| <p style="font-size:.75rem;color:var(--gray-400);margin-top:1rem;border-top:1px solid var(--gray-200);padding-top:.75rem"><em>Note: Requires $5 minimum prepaid credits via <a href="https://platform.openai.com/account/billing" target="_blank" style="color:var(--purple);text-decoration:underline">Billing</a>.</em></p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ========== WHATSAPP PANEL ========== --> | |
| <div id="panel-whatsapp" class="platform-panel"> | |
| <div class="flex justify-center gap-3 mb-8"> | |
| <button onclick="switchDevice('whatsapp','android')" class="device-btn device-btn-whatsapp btn btn--white active-device" style="font-size:.7rem;padding:.4rem 1rem">📱 Android</button> | |
| <button onclick="switchDevice('whatsapp','ios')" class="device-btn device-btn-whatsapp btn btn--white" style="font-size:.7rem;padding:.4rem 1rem">🍎 iPhone</button> | |
| </div> | |
| <div id="whatsapp-android" class="whatsapp-steps device-panel-whatsapp" style="display:flex;flex-direction:column;gap:1.25rem"> | |
| <div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--green);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Open the Chat</h3><p style="font-size:.9rem;color:var(--gray-600)">Navigate to the individual or group chat you want to analyze.</p></div> | |
| <div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--green);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Tap Three-dots</h3><p style="font-size:.9rem;color:var(--gray-600)">Tap the <strong>⋮</strong> icon in the top-right.</p></div> | |
| <div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--green);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">More → Export Chat</h3><p style="font-size:.9rem;color:var(--gray-600)">Choose <strong>More</strong>, then <strong>Export chat</strong>.</p></div> | |
| <div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--green);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Without Media</h3><p style="font-size:.9rem;color:var(--gray-600)">Select <strong>Without media</strong> to get your <code style="background:var(--cream);padding:2px 6px;border-radius:4px;border:1px solid var(--black);color:var(--pink)">.txt</code> file.</p></div> | |
| </div> | |
| <div id="whatsapp-ios" class="whatsapp-steps device-panel-whatsapp" style="display:none;flex-direction:column;gap:1.25rem"> | |
| <div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--green);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Open Chat Info</h3><p style="font-size:.9rem;color:var(--gray-600)">Tap the contact name at the top of the chat.</p></div> | |
| <div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--green);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Export Chat</h3><p style="font-size:.9rem;color:var(--gray-600)">Scroll down and tap <strong>Export Chat</strong>.</p></div> | |
| <div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--green);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Without Media</h3><p style="font-size:.9rem;color:var(--gray-600)">Select <strong>Without Media</strong> to get the <code style="background:var(--cream);padding:2px 6px;border-radius:4px;border:1px solid var(--black);color:var(--pink)">.txt</code> file.</p></div> | |
| </div> | |
| </div> | |
| <!-- ========== TELEGRAM PANEL ========== --> | |
| <div id="panel-telegram" class="platform-panel"> | |
| <div class="flex justify-center gap-3 mb-8"> | |
| <button onclick="switchDevice('telegram','desktop')" class="device-btn device-btn-telegram btn btn--white active-device" style="font-size:.7rem;padding:.4rem 1rem">💻 Desktop</button> | |
| <button onclick="switchDevice('telegram','mobile')" class="device-btn device-btn-telegram btn btn--white" style="font-size:.7rem;padding:.4rem 1rem">📱 Mobile</button> | |
| </div> | |
| <div id="telegram-desktop" class="telegram-steps device-panel-telegram" style="display:flex;flex-direction:column;gap:1.25rem"> | |
| <div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--blue);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Open Chat Menu</h3><p style="font-size:.9rem;color:var(--gray-600)">Open the chat and click the <strong>⋮</strong> menu in the top-right.</p></div> | |
| <div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--blue);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Export Chat History</h3><p style="font-size:.9rem;color:var(--gray-600)">Select <strong>Export chat history</strong> from the dropdown.</p></div> | |
| <div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--blue);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Set Format to HTML</h3><p style="font-size:.9rem;color:var(--gray-600)">Uncheck photos/videos and ensure format is <strong>HTML</strong>.</p></div> | |
| </div> | |
| <div id="telegram-mobile" class="telegram-steps device-panel-telegram" style="display:none;flex-direction:column;gap:1.25rem"> | |
| <div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--blue);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Not Supported Natively</h3><p style="font-size:.9rem;color:var(--gray-600)">Mobile apps don't support export. Please use <strong>Telegram Desktop</strong>.</p></div> | |
| </div> | |
| </div> | |
| <!-- ========== INSTAGRAM PANEL ========== --> | |
| <div id="panel-instagram" class="platform-panel"> | |
| <div class="instagram-steps" style="display:flex;flex-direction:column;gap:1.25rem"> | |
| <div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--pink);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Go to Accounts Center</h3><p style="font-size:.9rem;color:var(--gray-600)">Settings → Accounts Center → <strong>Your information and permissions</strong>.</p></div> | |
| <div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--pink);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Download Your Information</h3><p style="font-size:.9rem;color:var(--gray-600)">Select <strong>Download your information</strong> and tap 'Download or transfer'.</p></div> | |
| <div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--pink);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Select Messages Only</h3><p style="font-size:.9rem;color:var(--gray-600)">Choose <strong>Specific information</strong> and check only <strong>Messages</strong>.</p></div> | |
| <div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--pink);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Format: JSON (Critical)</h3><p style="font-size:.9rem;color:var(--gray-600)">Set the format to <strong style="color:var(--pink)">JSON</strong>. The Algorithm cannot parse HTML/PDF for Instagram.</p></div> | |
| <div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--pink);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Download and Extract</h3><p style="font-size:.9rem;color:var(--gray-600)">Find the <code style="background:var(--cream);padding:2px 6px;border-radius:4px;border:1px solid var(--black);color:var(--pink)">message_1.json</code> in your inbox folder.</p></div> | |
| </div> | |
| </div> | |
| <!-- ========== DISCORD PANEL ========== --> | |
| <div id="panel-discord" class="platform-panel"> | |
| <div class="discord-steps" style="display:flex;flex-direction:column;gap:1.25rem"> | |
| <div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--purple);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Recommended: DiscordChatExporter</h3><p style="font-size:.9rem;color:var(--gray-600)">The native export takes 30 days. Use the open-source <a href="https://github.com/Tyrrrz/DiscordChatExporter" target="_blank" style="color:var(--purple);font-weight:700;text-decoration:underline">DiscordChatExporter</a> for instant results.</p></div> | |
| <div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--purple);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Export as JSON</h3><p style="font-size:.9rem;color:var(--gray-600)">Open the tool, select your DM, and export as <strong>JSON</strong> format.</p></div> | |
| <div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--purple);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Native Method (Slow)</h3><p style="font-size:.9rem;color:var(--gray-600)">User Settings → Privacy & Safety → <strong>Request all of my data</strong>. Takes days to arrive.</p></div> | |
| <div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--purple);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Upload the JSON</h3><p style="font-size:.9rem;color:var(--gray-600)">Upload the <code style="background:var(--cream);padding:2px 6px;border-radius:4px;border:1px solid var(--black);color:var(--pink)">.json</code> file here for analysis.</p></div> | |
| </div> | |
| </div> | |
| <!-- Tips --> | |
| <div style="margin-top:4rem;margin-bottom:3rem"> | |
| <h2 style="display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem"><span style="font-size:1.75rem;background:var(--yellow);width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--black)">💡</span>Tips for Best Results</h2> | |
| <div class="grid gap-4" style="grid-template-columns:repeat(auto-fit,minmax(260px,1fr))"> | |
| <div class="card" style="border-left:4px solid var(--purple);border-width:4px"><p style="font-size:.9rem;color:var(--gray-600)"><strong style="display:block;margin-bottom:.35rem;font-size:1rem">More history = better analysis.</strong>3+ months of data gives the most accurate patterns.</p></div> | |
| <div class="card" style="border-left:4px solid var(--pink);border-width:4px"><p style="font-size:.9rem;color:var(--gray-600)"><strong style="display:block;margin-bottom:.35rem;font-size:1rem">Always export without media.</strong>Photos and videos can't be analyzed.</p></div> | |
| <div class="card" style="border-left:4px solid var(--green);border-width:4px"><p style="font-size:.9rem;color:var(--gray-600)"><strong style="display:block;margin-bottom:.35rem;font-size:1rem">Multiple files? No problem.</strong>Upload multiple .txt, .html, or .json files. They're merged automatically.</p></div> | |
| <div class="card" style="border-left:4px solid var(--yellow);border-width:4px"><p style="font-size:.9rem;color:var(--gray-600)"><strong style="display:block;margin-bottom:.35rem;font-size:1rem">Your privacy is safe.</strong>Chat text is erased immediately after analysis. Nothing stored.</p></div> | |
| </div> | |
| </div> | |
| <!-- CTA --> | |
| <div class="text-center" style="margin-bottom:3rem"> | |
| <a href="{{ url_for('index') }}" class="btn btn--primary btn--lg">Start Analyzing ⚡️</a> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer style="background:var(--black);text-align:center;padding:2rem 0;border-top:3px solid var(--yellow)"> | |
| <p style="font-size:.75rem;color:var(--gray-500);max-width:400px;margin:0 auto;padding:0 1rem"><strong>The Algorithm</strong> operates securely inside your browser. Your chats never leave this window unless sent to the AI provider you chose.</p> | |
| </footer> | |
| <script> | |
| function switchTab(platform) { | |
| document.querySelectorAll('.tab-btn').forEach(b => { | |
| b.classList.remove('active-tab'); | |
| b.style.background = ''; b.style.color = ''; | |
| }); | |
| const activeBtn = document.getElementById('tab-' + platform); | |
| if (activeBtn) activeBtn.classList.add('active-tab'); | |
| document.querySelectorAll('.platform-panel').forEach(p => { | |
| p.classList.remove('active-panel'); p.style.opacity = '0'; | |
| }); | |
| const activePanel = document.getElementById('panel-' + platform); | |
| if (activePanel) { | |
| activePanel.classList.add('active-panel'); | |
| setTimeout(() => { activePanel.style.opacity = '1'; }, 50); | |
| } | |
| history.replaceState(null, null, '#' + platform); | |
| } | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const hash = window.location.hash.replace('#', ''); | |
| if (hash) switchTab(hash); | |
| }); | |
| function switchDevice(platform, device) { | |
| document.querySelectorAll('.device-btn-' + platform).forEach(b => b.classList.remove('active-device')); | |
| event.currentTarget.classList.add('active-device'); | |
| document.querySelectorAll('.device-panel-' + platform).forEach(p => p.style.display = 'none'); | |
| document.getElementById(platform + '-' + device).style.display = ''; | |
| } | |
| </script> | |
| </body> | |
| </html> |