| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>QaanoonSathi — قانون ساتھی</title> |
| <link rel="stylesheet" href="/static/style.css"> |
| </head> |
| <body> |
| |
| <div class="phone" id="phone-home"> |
| <div class="screen"> |
| <div class="status"><span id="clock">9:41</span><span>●●●</span></div> |
| |
| <div class="header"> |
| <div class="app-name">قانون ساتھی</div> |
| <div class="app-sub">QaanoonSathi — Know your rights</div> |
| </div> |
|
|
| |
| <div class="search-bar" onclick="focusSearch()"> |
| <span class="search-icon"></span> |
| <input type="text" id="search-input" placeholder="Ask a legal question..." |
| onkeypress="if(event.key==='Enter')searchQuery()"> |
| </div> |
|
|
| |
| <div class="section-label">Choose your law</div> |
| <div class="tiles"> |
| <div class="tile tile-islamic" onclick="setDomain('islamic')"> |
| <div class="tile-icon">☪</div> |
| <div class="tile-title">Islamic law</div> |
| <div class="tile-sub">Sharia, Nikah, Mehr, Talaq</div> |
| </div> |
| <div class="tile tile-harass" onclick="setDomain('harassment')"> |
| <div class="tile-icon">⚖</div> |
| <div class="tile-title">Harassment</div> |
| <div class="tile-sub">PECA, workplace, SECP act</div> |
| </div> |
| <div class="tile tile-inherit" onclick="setDomain('inheritance')"> |
| <div class="tile-icon">⬡</div> |
| <div class="tile-title">Inheritance</div> |
| <div class="tile-sub">Faraid, Wills, Hiba</div> |
| </div> |
| <div class="tile tile-verify" onclick="setDomain('verify')"> |
| <div class="tile-icon">✓</div> |
| <div class="tile-title">Verify a law</div> |
| <div class="tile-sub">Is this rule real or farce?</div> |
| </div> |
| </div> |
|
|
| <div class="divider"></div> |
|
|
| |
| <div class="recent-label">Recent questions</div> |
| <div id="recent-list"> |
| <div class="recent-item" onclick="loadRecent('Can my husband take mehr back?', 'islamic')"> |
| <div class="recent-q">Can my husband take mehr back?</div> |
| <div class="recent-tag tag-i">Islamic</div> |
| </div> |
| <div class="recent-item" onclick="loadRecent('Boss recording me without consent', 'harassment')"> |
| <div class="recent-q">Boss recording me without consent</div> |
| <div class="recent-tag tag-h">Harass</div> |
| </div> |
| <div class="recent-item" onclick="loadRecent('Sister share in father property', 'inheritance')"> |
| <div class="recent-q">Sister's share in father's property</div> |
| <div class="recent-tag tag-in">Inherit</div> |
| </div> |
| </div> |
|
|
| |
| <div class="toggle-row" style="margin: 12px 16px;"> |
| <div class="lang-btn active" onclick="setLang('en', this)">English</div> |
| <div class="lang-btn" onclick="setLang('urdu', this)">اردو</div> |
| <div class="lang-btn" onclick="setLang('roman', this)">Roman</div> |
| </div> |
|
|
| |
| <div class="submit-btn" onclick="startVoice()" style="margin-bottom: 10px;"> |
| 🎙️ Speak your question |
| </div> |
|
|
| |
| <div class="nav-bar"> |
| <div class="nav-item active"><div class="nav-dot"></div>Home</div> |
| <div class="nav-item" onclick="showHistory()"><div class="nav-dot"></div>History</div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="phone" id="phone-detail" style="display:none;"> |
| <div class="detail-screen"> |
| <div class="status"><span id="clock2">9:42</span><span>●●●</span></div> |
| <div class="back-btn" onclick="showHome()">← Back</div> |
| |
| <div class="law-header"> |
| <div class="law-badge"> |
| <div class="law-badge-dot" id="detail-dot"></div> |
| <div class="law-badge-txt" id="detail-domain">Islamic law</div> |
| </div> |
| <div class="law-title" id="detail-question">Loading...</div> |
| <div class="source-pill" id="detail-source">Source: Searching...</div> |
| </div> |
|
|
| <div class="toggle-row"> |
| <div class="lang-btn active" onclick="setAnswerLang('en', this)">English</div> |
| <div class="lang-btn" onclick="setAnswerLang('urdu', this)">اردو</div> |
| </div> |
|
|
| <div class="answer-box"> |
| <div class="answer-q">Plain language answer</div> |
| <div class="answer-text" id="detail-answer">Loading answer...</div> |
| </div> |
|
|
| <div class="cite-box"> |
| <div class="cite-label">Cited law</div> |
| <div class="cite-text" id="detail-law">Searching database...</div> |
| </div> |
|
|
| <div class="verify-badge" id="detail-verify"> |
| <div class="verify-icon">✓</div> |
| <div class="verify-text" id="detail-verdict">Verified: Checking authenticity...</div> |
| </div> |
|
|
| <div class="dept-box"> |
| <div class="dept-label">Where to file your complaint</div> |
| <div class="dept-name" id="detail-dept">Loading...</div> |
| <div class="dept-action" id="detail-action">Searching relevant department...</div> |
| </div> |
|
|
| <div class="submit-btn" onclick="speakAnswer()">🔊 Listen to answer</div> |
| |
| <audio id="tts-audio" style="display:none;"></audio> |
| </div> |
| </div> |
|
|
| |
| <div id="loading" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; |
| background:rgba(44,44,42,0.8); z-index:1000; display:flex; align-items:center; justify-content:center;"> |
| <div style="color:#F5F0E8; font-size:18px;">⏳ Searching laws...</div> |
| </div> |
|
|
| <script src="/static/app.js"></script> |
| </body> |
| </html> |
