Hugging Face's logo

Spaces:
stat2025
/
HY
Running

App Files Community
stat2025 commited on
Commit
0aff6aa
·
verified ·
1 Parent(s): b803c28

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +228 -0
index.html ADDED
@@ -0,0 +1,228 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!doctype html>
3
+ <html lang="ar" dir="rtl">
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
7
+ <title>تفاصيل عينات الباحثين لمسح الهيكلي</title>
8
+ <style>
9
+ :root{
10
+ --primary:#4137A8;
11
+ --secondary:#1CADE4;
12
+ --muted:#5C6E88;
13
+ --bg:#F6F8FC;
14
+ --text:#0B1324;
15
+ --line:#E7ECF5;
16
+ --radius:22px;
17
+ --shadow: 0 18px 55px rgba(51,91,116,.12);
18
+ --shadow2: 0 10px 26px rgba(51,91,116,.10);
19
+ --focus: 0 0 0 6px rgba(28,173,228,.18);
20
+ --maxw: 1100px;
21
+ }
22
+ *{box-sizing:border-box}
23
+ html,body{height:100%}
24
+ body{
25
+ margin:0;
26
+ font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
27
+ color:var(--text);
28
+ background:
29
+ radial-gradient(900px 520px at 18% 10%, rgba(65,55,168,.12), rgba(65,55,168,0) 60%),
30
+ radial-gradient(900px 520px at 82% 12%, rgba(28,173,228,.14), rgba(28,173,228,0) 60%),
31
+ linear-gradient(180deg, #ffffff, var(--bg));
32
+ display:flex;
33
+ flex-direction:column;
34
+ overflow-x:hidden;
35
+ }
36
+ .wrap{
37
+ width:min(var(--maxw), 92vw);
38
+ margin:0 auto;
39
+ padding:26px 0 92px;
40
+ flex:1;
41
+ display:flex;
42
+ flex-direction:column;
43
+ gap:14px;
44
+ }
45
+ header{
46
+ display:flex;
47
+ align-items:center;
48
+ justify-content:space-between;
49
+ gap:12px;
50
+ flex-wrap:wrap;
51
+ padding-top:4px;
52
+ }
53
+ .title{display:flex;align-items:center;gap:12px}
54
+ .logo{
55
+ width:44px;height:44px;border-radius:16px;
56
+ background:
57
+ radial-gradient(16px 16px at 28% 26%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%),
58
+ linear-gradient(135deg, var(--primary), var(--secondary));
59
+ box-shadow: var(--shadow2);
60
+ flex:0 0 auto;
61
+ }
62
+ h1{
63
+ margin:0;
64
+ font-size:18px;
65
+ letter-spacing:.2px;
66
+ color:var(--primary);
67
+ font-weight:850;
68
+ line-height:1;
69
+ }
70
+ .chip,.pill,.tag{
71
+ display:inline-flex;
72
+ align-items:center;
73
+ gap:8px;
74
+ white-space:nowrap;
75
+ background:#fff;
76
+ border:1px solid rgba(231,236,245,.95);
77
+ box-shadow:0 10px 26px rgba(51,91,116,.07);
78
+ }
79
+ .chip{
80
+ padding:10px 12px;
81
+ border-radius:999px;
82
+ border-color:rgba(28,173,228,.22);
83
+ background:linear-gradient(180deg, #ffffff, rgba(28,173,228,.08));
84
+ color:var(--muted);
85
+ font-size:12.5px;
86
+ }
87
+ .chip b{color:var(--primary);font-weight:900}
88
+ .card{
89
+ border-radius:var(--radius);
90
+ background:rgba(255,255,255,.92);
91
+ border:1px solid var(--line);
92
+ box-shadow:var(--shadow);
93
+ overflow:hidden;
94
+ position:relative;
95
+ }
96
+ .card::before{
97
+ content:"";
98
+ position:absolute; inset:-2px;
99
+ background:
100
+ radial-gradient(420px 260px at 15% 0%, rgba(65,55,168,.10), rgba(65,55,168,0) 60%),
101
+ radial-gradient(460px 280px at 85% 8%, rgba(28,173,228,.10), rgba(28,173,228,0) 62%);
102
+ pointer-events:none;
103
+ }
104
+ .inner{position:relative;padding:18px}
105
+ .panel{
106
+ width:min(980px, 100%);
107
+ margin:0 auto;
108
+ display:grid;
109
+ gap:12px;
110
+ padding:6px 0 2px;
111
+ }
112
+ .row{
113
+ display:grid;
114
+ grid-template-columns:minmax(0,1fr) auto;
115
+ gap:10px;
116
+ align-items:stretch;
117
+ }
118
+ .field{
119
+ display:flex;
120
+ align-items:center;
121
+ gap:10px;
122
+ background:#fff;
123
+ border:1px solid rgba(231,236,245,.95);
124
+ border-radius:18px;
125
+ padding:10px 12px;
126
+ box-shadow:0 10px 26px rgba(51,91,116,.07);
127
+ transition: box-shadow .2s ease, border-color .2s ease;
128
+ }
129
+ .field:focus-within{
130
+ border-color:rgba(28,173,228,.45);
131
+ box-shadow: var(--focus), 0 10px 26px rgba(51,91,116,.10);
132
+ }
133
+ .fieldIcon{
134
+ width:14px;height:14px;border-radius:50%;
135
+ background:
136
+ radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,0) 55%),
137
+ linear-gradient(180deg, var(--secondary), var(--primary));
138
+ box-shadow:0 0 0 4px rgba(28,173,228,.10);
139
+ flex:0 0 auto;
140
+ }
141
+ input{
142
+ width:100%;border:none;outline:none;font-size:14px;background:transparent;color:var(--text);
143
+ }
144
+ .btnGroup{display:flex;gap:10px;align-items:stretch}
145
+ .btn{
146
+ border:none;cursor:pointer;border-radius:16px;padding:10px 14px;font-weight:800;font-size:13px;
147
+ box-shadow:0 12px 30px rgba(51,91,116,.10);transition:transform .08s ease, opacity .2s ease;white-space:nowrap;
148
+ }
149
+ .btn.primary{background:linear-gradient(135deg, var(--primary), var(--secondary));color:#fff}
150
+ .btn.secondary{background:#fff;border:1px solid rgba(231,236,245,.95);color:var(--muted)}
151
+ .btn:active{transform:translateY(1px)}
152
+ .btn:hover{opacity:.93}
153
+ .meta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
154
+ .pill{padding:8px 10px;border-radius:999px;color:var(--muted);font-size:12.5px}
155
+ .results{display:grid;gap:12px}
156
+ .empty{
157
+ white-space:pre-line;text-align:center;color:var(--muted);background:#fff;border:1px dashed rgba(92,110,136,.35);
158
+ border-radius:18px;padding:18px 12px;
159
+ }
160
+ .tableWrap{
161
+ background:#fff;border:1px solid rgba(231,236,245,.95);border-radius:18px;overflow:auto;
162
+ box-shadow:0 10px 26px rgba(51,91,116,.07);
163
+ }
164
+ table{width:100%;border-collapse:separate;border-spacing:0;min-width:860px;font-size:13px}
165
+ thead th{
166
+ position:sticky;top:0;background:linear-gradient(180deg, #ffffff, rgba(28,173,228,.06));color:var(--primary);
167
+ text-align:right;padding:12px 10px;border-bottom:1px solid rgba(231,236,245,.95);font-weight:900;white-space:nowrap;z-index:2;
168
+ }
169
+ tbody td{padding:10px 10px;border-bottom:1px solid rgba(231,236,245,.75);color:var(--text);vertical-align:top}
170
+ tbody tr:hover td{background:rgba(28,173,228,.04)}
171
+ .tag{padding:4px 10px;border-radius:999px;color:var(--muted);font-weight:800;font-size:12px}
172
+ .tag.ok{border-color:rgba(0,176,80,.22);background:rgba(0,176,80,.06);color:#0A6A35}
173
+ .tag.warn{border-color:rgba(255,192,0,.28);background:rgba(255,192,0,.10);color:#7A5A00}
174
+ .tag.info{border-color:rgba(65,55,168,.18);background:rgba(65,55,168,.06);color:var(--primary)}
175
+ footer{
176
+ position:fixed;left:0;right:0;bottom:0;text-align:center;padding:10px 14px;background:rgba(255,255,255,.82);
177
+ border-top:1px solid rgba(231,236,245,.95);backdrop-filter:blur(10px);color:var(--muted);font-size:12.5px;z-index:40;
178
+ }
179
+ footer b{color:var(--primary);font-weight:900}
180
+ @media (max-width: 720px){
181
+ .row{grid-template-columns:1fr}
182
+ .btnGroup{width:100%}
183
+ .btn{flex:1}
184
+ table{min-width:700px}
185
+ }
186
+ </style>
187
+ </head>
188
+ <body>
189
+ <div class="wrap">
190
+ <header>
191
+ <div class="title">
192
+ <div class="logo" aria-hidden="true"></div>
193
+ <h1>تفاصيل عينات الباحثين بمسح الهيكلي</h1>
194
+ </div>
195
+ <div class="chip" id="totalChip">إجمالي السجلات: <b>—</b></div>
196
+ </header>
197
+
198
+ <section class="card" aria-label="search">
199
+ <div class="inner">
200
+ <div class="panel">
201
+ <div class="row">
202
+ <div class="field" aria-label="search field">
203
+ <div class="fieldIcon" aria-hidden="true"></div>
204
+ <input id="q" type="text" inputmode="search" autocomplete="off" placeholder="اكتب اسمك (يقبل جزء من الاسم)..." />
205
+ </div>
206
+ <div class="btnGroup" aria-label="button group">
207
+ <button id="btnSearch" class="btn primary" type="button">بحث</button>
208
+ <button id="btnClear" class="btn secondary" type="button">مسح</button>
209
+ </div>
210
+ </div>
211
+
212
+ <div class="meta">
213
+ <div class="pill" id="countPill">النتائج: 0</div>
214
+ <div class="pill" id="summaryPill">—</div>
215
+ </div>
216
+
217
+ <div class="results" id="results" aria-live="polite"></div>
218
+ </div>
219
+ </div>
220
+ </section>
221
+ </div>
222
+
223
+ <footer>تصميم وإعداد <b>نوف الناصر</b></footer>
224
+
225
+ <script src="./data.js"></script>
226
+ <script src="./script.js"></script>
227
+ </body>
228
+ </html>