<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Account Deletion | Swarg Food</title> <style> :root { --swarg-green: #2e7d32; --swarg-gold: #f9a825; --swarg-bg: #f8fcf8; --text-dark: #2c3e50; --white: #ffffff; --border-color: #e0e0e0; } .swarg-deletion-container { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; color: var(--text-dark); background: var(--swarg-bg); border-radius: 10px; } /* --- TOGGLE TABS --- */ .tab-container { display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; border-bottom: 1px solid #ddd; padding-bottom: 20px; } .tab-btn { padding: 12px 24px; font-size: 16px; font-weight: 600; border: 2px solid var(--swarg-green); border-radius: 30px; cursor: pointer; background: transparent; color: var(--swarg-green); transition: all 0.3s ease; } .tab-btn.active { background: var(--swarg-green); color: white; box-shadow: 0 4px 10px rgba(46, 125, 50, 0.2); } /* --- SECTIONS --- */ .content-section { display: none; /* Hidden by default */ animation: fadeIn 0.5s; } .content-section.active { display: block; /* Show when active */ } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* --- FORM STYLES --- */ .web-form-box { background: var(--white); padding: 30px; border-radius: 12px; border: 1px solid #ddd; box-shadow: 0 4px 15px rgba(0,0,0,0.05); } .form-intro { background-color: #e8f5e9; padding: 15px; border-radius: 6px; font-size: 14px; margin-bottom: 20px; border-left: 4px solid var(--swarg-green); } /* --- APP GUIDE STYLES --- */ .app-guide-box { background: var(--white); padding: 25px; border-radius: 12px; border: 1px solid #ddd; } .steps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; } .step-card { text-align: center; } .img-frame { background-color: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 12px; overflow: hidden; aspect-ratio: 9/16; margin-bottom: 10px; } .img-frame img { width: 100%; height: 100%; object-fit: contain; } .step-desc { font-size: 14px; color: #555; padding: 10px; background: #f9f9f9; border-radius: 6px; } /* --- POLICY SECTION (Always Visible) --- */ .policy-section { margin-top: 50px; padding-top: 30px; border-top: 2px solid var(--border-color); font-size: 14px; color: #444; } .policy-section h3 { color: var(--swarg-green); margin-bottom: 15px; } .policy-section ul { padding-left: 20px; margin-bottom: 20px; } .policy-section li { margin-bottom: 8px; } @media (max-width: 600px) { .steps-grid { grid-template-columns: 1fr; } .tab-container { flex-direction: column; } .tab-btn { width: 100%; text-align: center; } } </style> </head> <body> <div class="swarg-deletion-container"> <h2 style="text-align: center; color: var(--swarg-green);">Account Deletion Request</h2> <p style="text-align: center; color: #666; margin-bottom: 30px;">Please select how you would like to delete your account:</p>  <div class="tab-container"> <button class="tab-btn active" onclick="openTab('webForm', this)">I don't have the App (Web Form)</button> <button class="tab-btn" onclick="openTab('appGuide', this)">I have the App (Guide)</button> </div>  <div id="webForm" class="content-section active"> <div class="web-form-box"> <div class="form-intro"> <strong>Request Deletion Online:</strong><br> Use this form if you have already uninstalled the app. We will verify your registered phone number and process the deletion. </div>  </div> </div>  <div id="appGuide" class="content-section"> <div class="app-guide-box"> <h3 style="margin-top:0; color:var(--swarg-green);">Delete directly from the App</h3> <p>If you have the app installed, this is the fastest way to delete your data.</p> <div class="steps-grid">  <div class="step-card"> <div class="img-frame">  <img src="https://swargfood.com/wp-content/uploads/2025/11/step1.jpeg" alt="Profile"> </div> <div class="step-desc">1. Tap <b>Profile Icon</b> (Top Right)</div> </div>  <div class="step-card"> <div class="img-frame">  <img src="https://swargfood.com/wp-content/uploads/2025/11/step2.jpeg" alt="Settings"> </div> <div class="step-desc">2. Select <b>Account Settings</b></div> </div>  <div class="step-card"> <div class="img-frame">  <img src="https://swargfood.com/wp-content/uploads/2025/11/step3.jpeg" alt="Delete Option"> </div> <div class="step-desc">3. Tap <b>Delete Account</b></div> </div>  <div class="step-card"> <div class="img-frame">  <img src="https://swargfood.com/wp-content/uploads/2025/11/step4.jpeg" alt="Confirm"> </div> <div class="step-desc">4. Click <b>Delete</b> to Confirm</div> </div> </div> </div> </div>  <div class="policy-section"> <h3>Data Deletion & Retention Policy</h3> <p><strong>Effect of Deletion:</strong><br> Once confirmed, your account is permanently deactivated. This action is irreversible.</p> <h4>Data that will be deleted:</h4> <ul> <li><strong>Personal Identity:</strong> Name, Phone Number, Email, and saved addresses.</li> <li><strong>Wallet Funds:</strong> Any unused balance in your Swarg Wallet will be forfeited.</li> <li><strong>Subscriptions:</strong> Active milk/food subscriptions will be cancelled immediately.</li> </ul> <h4>Data that will be retained:</h4> <ul> <li><strong>Invoices & Transaction Logs:</strong> We retain financial transaction history for <strong>5 years</strong> strictly for tax compliance and auditing purposes (as required by Indian Law).</li> </ul> <h4>Timeframe:</h4> <p>Account access is revoked immediately. Complete removal of personal data from active servers is completed within <strong>90 days</strong>.</p> </div> </div> <script> function openTab(tabName, btnElement) { // 1. Hide all content sections var sections = document.getElementsByClassName("content-section"); for (var i = 0; i < sections.length; i++) { sections.classList.remove("active"); } // 2. Remove 'active' class from all buttons var buttons = document.getElementsByClassName("tab-btn"); for (var i = 0; i < buttons.length; i++) { buttons.classList.remove("active"); } // 3. Show the selected section document.getElementById(tabName).classList.add("active"); // 4. Highlight the clicked button btnElement.classList.add("active"); } </script> </body> </html>