-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
157 lines (134 loc) · 7.1 KB
/
index.html
File metadata and controls
157 lines (134 loc) · 7.1 KB
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
147
148
149
150
151
152
153
154
155
156
157
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Emergency Contact App</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="manifest" href="manifest.json" />
<meta name="theme-color" content="#ef4444" />
</head>
<body>
<header class="topbar">
<div class="brand">
<h1 data-i18n="title">Emergency Contacts</h1>
</div>
<div class="top-actions" id="topActions">
<label class="sr-only" for="langSelect">Language</label>
<select id="langSelect" aria-label="Language" class="icon-btn">
<option value="en">EN</option>
<option value="ur">اردو</option>
</select>
<button id="darkToggle" class="icon-btn" aria-label="Toggle dark mode">🌙</button>
<button id="emergencyCall" class="emergency-btn" data-i18n="emergencyCall">Emergency Call</button>
</div>
</header>
<main class="container" id="mainContent">
<section class="left-panel">
<form id="contactForm" class="card form-card" autocomplete="off" novalidate>
<h2 data-i18n="addContact">Add Emergency Contact</h2>
<label>
<span class="label-text" data-i18n="name">Name</span>
<input type="text" id="name" required />
</label>
<label>
<span class="label-text" data-i18n="relationship">Relationship</span>
<input type="text" id="relationship" />
</label>
<label>
<span class="label-text" data-i18n="phone">Phone Number</span>
<input type="tel" id="phone" placeholder="+1234567890" required />
</label>
<label>
<span class="label-text" data-i18n="category">Category</span>
<select id="category">
<option value="Family" data-i18n="family">Family</option>
<option value="Doctor" data-i18n="doctor">Doctor</option>
<option value="Police" data-i18n="police">Police</option>
<option value="Other" data-i18n="other">Other</option>
</select>
</label>
<label class="inline">
<input type="checkbox" id="priority" />
<span class="label-text" data-i18n="priority">Priority contact</span>
</label>
<div class="form-actions">
<button type="submit" class="btn primary" data-i18n="saveContact">Save Contact</button>
<button type="reset" class="btn ghost" data-i18n="clear">Clear</button>
</div>
<div id="formError" class="form-error" aria-live="polite"></div>
</form>
<section class="card form-card" id="medicalCard">
<h2 data-i18n="medicalInfo">Medical Information</h2>
<label>
<span class="label-text" data-i18n="bloodGroup">Blood Group</span>
<input type="text" id="bloodGroup" placeholder="e.g., O+" />
</label>
<label>
<span class="label-text" data-i18n="allergies">Allergies</span>
<input type="text" id="allergies" placeholder="Comma separated" />
</label>
<label>
<span class="label-text" data-i18n="conditions">Existing Conditions</span>
<input type="text" id="conditions" placeholder="Comma separated" />
</label>
<label>
<span class="label-text" data-i18n="medications">Current Medications</span>
<input type="text" id="medications" placeholder="Comma separated" />
</label>
<label>
<span class="label-text" data-i18n="notes">Emergency Notes</span>
<textarea id="notes" rows="3" placeholder="Important notes"></textarea>
</label>
<div class="form-actions">
<button id="saveMedical" class="btn primary" data-i18n="saveMedical">Save Medical Info</button>
</div>
</section>
<section class="card form-card">
<h3 data-i18n="backup">Backup and Restore</h3>
<div class="form-actions" style="flex-direction:column;align-items:stretch">
<button id="exportBtn" class="btn" data-i18n="export">Export JSON</button>
<label class="btn file-btn" for="importFile" role="button" aria-label="Import JSON"
data-i18n="import">Import JSON</label>
<input id="importFile" type="file" accept="application/json" style="display:none" />
<div style="display:flex;gap:8px;margin-top:8px">
<button id="importMerge" class="btn" data-i18n="importMerge">Import Merge</button>
<button id="importReplace" class="btn" data-i18n="importReplace">Import Replace</button>
</div>
</div>
</section>
</section>
<section class="right-panel">
<div class="controls card">
<input id="search" type="search" placeholder="Search contacts by name or phone" />
<select id="filterCategory">
<option value="All" data-i18n="all">All Categories</option>
<option value="Family" data-i18n="family">Family</option>
<option value="Doctor" data-i18n="doctor">Doctor</option>
<option value="Police" data-i18n="police">Police</option>
<option value="Other" data-i18n="other">Other</option>
</select>
</div>
<section id="contactsList" class="cards-grid" aria-live="polite"></section>
</section>
</main>
<footer class="footer">
<small data-i18n="footer">Fast access to life-saving contacts and medical info. Data stored locally on this
device.</small>
</footer>
<!-- Import preview modal -->
<div id="importPreviewModal" class="modal" aria-hidden="true" role="dialog" aria-labelledby="previewTitle"
aria-modal="true">
<div class="modal-content card" role="document">
<h3 id="previewTitle" data-i18n="previewTitle">Preview Imported Contacts</h3>
<div id="importPreviewList" class="import-list" tabindex="0"></div>
<div style="display:flex;gap:8px;margin-top:12px;justify-content:flex-end">
<button id="applyImportMerge" class="btn" data-i18n="merge">Merge</button>
<button id="applyImportReplace" class="btn" data-i18n="replace">Replace</button>
<button id="cancelImport" class="btn ghost" data-i18n="cancel">Cancel</button>
</div>
</div>
</div>
<script type="module" src="js/app.js"></script>
</body>
</html>