File size: 6,690 Bytes
5910f7e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 | <!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>
<!-- HOME SCREEN -->
<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>
<!-- Search -->
<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>
<!-- Domain Tiles -->
<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>
<!-- Recent Questions -->
<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>
<!-- Language Toggle -->
<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>
<!-- Voice Button -->
<div class="submit-btn" onclick="startVoice()" style="margin-bottom: 10px;">
🎙️ Speak your question
</div>
<!-- Nav -->
<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>
<!-- DETAIL SCREEN -->
<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>
<!-- Loading Overlay -->
<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> |