Hugging Face's logo

Spaces:
salehalmansour
/
Text-to-image-ar
Runtime error

App Files Community
salehalmansour commited on
Commit
6608407
·
verified ·
1 Parent(s): 7b8f4f9

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +471 -25
templates/index.html CHANGED
@@ -1,29 +1,475 @@
1
- <!DOCTYPE html>
2
- <html lang="ar">
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>نموذج توليد الصور</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  </head>
 
8
  <body>
9
- <header>
10
- <img src="path_to_your_logo.png" alt="شعار الموقع">
11
- </header>
12
- <main>
13
- <h1>نموذج توليد الصور</h1>
14
- <p>اكتب وصف للصورة التي تود من النظام التوليدي انشاءها</p>
15
- <div>
16
- <button onclick="generateImage()">انشئ</button>
17
- </div>
18
- <div id="output"></div>
19
- </main>
20
- <script>
21
- async function generateImage() {
22
- const dummyImage = document.createElement('img');
23
- dummyImage.src = 'https://via.placeholder.com/400x400';
24
- document.getElementById('output').innerHTML = '';
25
- document.getElementById('output').appendChild(dummyImage);
26
- }
27
- </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  </body>
29
- </html>
 
 
1
+ <html lang="ar" dir="rtl">
2
+
3
  <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>تبيان</title>
7
+ <meta name="keywords"
8
+ content="المعجم الرياض, المعجم العربي, معجم معاني الكلمات, معاني الكلمات, معاني,مرادفات,متضادات,معاجم تراثية,معنى كلمة,تشكيل كلمات,تشكيل,المشكل,القاموس,قاموس,قاموس عربي,سمات لغوية,المدقق,المدقق الإملائي,">
9
+ <link rel="preload" href="{{ url_for('static', filename='ksaa.css') }}" as="style">
10
+ <link rel="stylesheet" href="{{ url_for('static', filename='ksaa.css') }}" data-n-g="">
11
+
12
+ <style data-jss="" data-meta="MuiInput">
13
+ .MuiInput-root {
14
+ position: relative;
15
+ }
16
+ label+.MuiInput-formControl {
17
+ margin-top: 16px;
18
+ }
19
+ .MuiInput-colorSecondary.MuiInput-underline:after {
20
+ border-bottom-color: #f50057;
21
+ }
22
+ .MuiInput-underline:after {
23
+ left: 0;
24
+ right: 0;
25
+ bottom: 0;
26
+ content: "";
27
+ position: absolute;
28
+ transform: scaleX(0);
29
+ transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
30
+ border-bottom: 2px solid #3f51b5;
31
+ pointer-events: none;
32
+ }
33
+ .MuiInput-underline.Mui-focused:after {
34
+ transform: scaleX(1);
35
+ }
36
+ .MuiInput-underline.Mui-error:after {
37
+ transform: scaleX(1);
38
+ border-bottom-color: #f44336;
39
+ }
40
+ .MuiInput-underline:before {
41
+ left: 0;
42
+ right: 0;
43
+ bottom: 0;
44
+ content: "\00a0";
45
+ position: absolute;
46
+ transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
47
+ border-bottom: 1px solid rgba(0, 0, 0, 0.42);
48
+ pointer-events: none;
49
+ }
50
+ .MuiInput-underline:hover:not(.Mui-disabled):before {
51
+ border-bottom: 2px solid rgba(0, 0, 0, 0.87);
52
+ }
53
+ .MuiInput-underline.Mui-disabled:before {
54
+ border-bottom-style: dotted;
55
+ }
56
+ @media (hover: none) {
57
+ .MuiInput-underline:hover:not(.Mui-disabled):before {
58
+ border-bottom: 1px solid rgba(0, 0, 0, 0.42);
59
+ }
60
+ }
61
+ </style>
62
+ <style data-jss="" data-meta="MuiFormLabel">
63
+ .MuiFormLabel-root {
64
+ color: rgba(0, 0, 0, 0.54);
65
+ padding: 0;
66
+ font-size: 1rem;
67
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
68
+ font-weight: 400;
69
+ line-height: 1;
70
+ letter-spacing: 0.00938em;
71
+ }
72
+ .MuiFormLabel-root.Mui-focused {
73
+ color: #3f51b5;
74
+ }
75
+ .MuiFormLabel-root.Mui-disabled {
76
+ color: rgba(0, 0, 0, 0.38);
77
+ }
78
+ .MuiFormLabel-root.Mui-error {
79
+ color: #f44336;
80
+ }
81
+ .MuiFormLabel-colorSecondary.Mui-focused {
82
+ color: #f50057;
83
+ }
84
+ .MuiFormLabel-asterisk.Mui-error {
85
+ color: #f44336;
86
+ }
87
+ </style>
88
+ <style data-jss="" data-meta="MuiInputLabel">
89
+ .MuiInputLabel-root {
90
+ display: block;
91
+ transform-origin: top left;
92
+ }
93
+ .MuiInputLabel-formControl {
94
+ top: 0;
95
+ left: 0;
96
+ position: absolute;
97
+ transform: translate(0, 24px) scale(1);
98
+ }
99
+ .MuiInputLabel-marginDense {
100
+ transform: translate(0, 21px) scale(1);
101
+ }
102
+ .MuiInputLabel-shrink {
103
+ transform: translate(0, 1.5px) scale(0.75);
104
+ transform-origin: top left;
105
+ }
106
+ .MuiInputLabel-animated {
107
+ transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
108
+ }
109
+ .MuiInputLabel-filled {
110
+ z-index: 1;
111
+ transform: translate(12px, 20px) scale(1);
112
+ pointer-events: none;
113
+ }
114
+ .MuiInputLabel-filled.MuiInputLabel-marginDense {
115
+ transform: translate(12px, 17px) scale(1);
116
+ }
117
+ .MuiInputLabel-filled.MuiInputLabel-shrink {
118
+ transform: translate(12px, 10px) scale(0.75);
119
+ }
120
+ .MuiInputLabel-filled.MuiInputLabel-shrink.MuiInputLabel-marginDense {
121
+ transform: translate(12px, 7px) scale(0.75);
122
+ }
123
+ .MuiInputLabel-outlined {
124
+ z-index: 1;
125
+ transform: translate(14px, 20px) scale(1);
126
+ pointer-events: none;
127
+ }
128
+ .MuiInputLabel-outlined.MuiInputLabel-marginDense {
129
+ transform: translate(14px, 12px) scale(1);
130
+ }
131
+ .MuiInputLabel-outlined.MuiInputLabel-shrink {
132
+ transform: translate(14px, -6px) scale(0.75);
133
+ }
134
+ </style>
135
+ <style data-jss="" data-meta="MuiFormControl">
136
+ .MuiFormControl-root {
137
+ border: 0;
138
+ margin: 0;
139
+ display: inline-flex;
140
+ padding: 0;
141
+ position: relative;
142
+ min-width: 0;
143
+ flex-direction: column;
144
+ vertical-align: top;
145
+ }
146
+ .MuiFormControl-marginNormal {
147
+ margin-top: 16px;
148
+ margin-bottom: 8px;
149
+ }
150
+ .MuiFormControl-marginDense {
151
+ margin-top: 8px;
152
+ margin-bottom: 4px;
153
+ }
154
+ .MuiFormControl-fullWidth {
155
+ width: 100%;
156
+ }
157
+ </style>
158
+ <style data-jss="" data-meta="MuiPaper">
159
+ .MuiPaper-root {
160
+ color: rgba(0, 0, 0, 0.87);
161
+ transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
162
+ background-color: #fff;
163
+ }
164
+ .MuiPaper-rounded {
165
+ border-radius: 4px;
166
+ }
167
+ .MuiPaper-outlined {
168
+ border: 1px solid rgba(0, 0, 0, 0.12);
169
+ }
170
+ .MuiPaper-elevation0 {
171
+ box-shadow: none;
172
+ }
173
+ .MuiPaper-elevation1 {
174
+ box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
175
+ }
176
+ .MuiPaper-elevation2 {
177
+ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
178
+ }
179
+ .MuiPaper-elevation3 {
180
+ box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
181
+ }
182
+ .MuiPaper-elevation4 {
183
+ box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
184
+ }
185
+ .MuiPaper-elevation5 {
186
+ box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
187
+ }
188
+ .MuiPaper-elevation6 {
189
+ box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
190
+ }
191
+ .MuiPaper-elevation7 {
192
+ box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
193
+ }
194
+ .MuiPaper-elevation8 {
195
+ box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
196
+ }
197
+ .MuiPaper-elevation9 {
198
+ box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
199
+ }
200
+ .MuiPaper-elevation10 {
201
+ box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
202
+ }
203
+ .MuiPaper-elevation11 {
204
+ box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
205
+ }
206
+ .MuiPaper-elevation12 {
207
+ box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
208
+ }
209
+ .MuiPaper-elevation13 {
210
+ box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
211
+ }
212
+ .MuiPaper-elevation14 {
213
+ box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
214
+ }
215
+ .MuiPaper-elevation15 {
216
+ box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
217
+ }
218
+ .MuiPaper-elevation16 {
219
+ box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
220
+ }
221
+ .MuiPaper-elevation17 {
222
+ box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
223
+ }
224
+ .MuiPaper-elevation18 {
225
+ box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
226
+ }
227
+ .MuiPaper-elevation19 {
228
+ box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
229
+ }
230
+ .MuiPaper-elevation20 {
231
+ box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
232
+ }
233
+ .MuiPaper-elevation21 {
234
+ box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
235
+ }
236
+ .MuiPaper-elevation22 {
237
+ box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
238
+ }
239
+ .MuiPaper-elevation23 {
240
+ box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
241
+ }
242
+ .MuiPaper-elevation24 {
243
+ box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
244
+ }
245
+ </style>
246
+ <style data-jss="" data-meta="MuiSvgIcon">
247
+ .MuiSvgIcon-root {
248
+ fill: currentColor;
249
+ width: 1em;
250
+ height: 1em;
251
+ display: inline-block;
252
+ font-size: 1.5rem;
253
+ transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
254
+ flex-shrink: 0;
255
+ user-select: none;
256
+ }
257
+ .MuiSvgIcon-colorPrimary {
258
+ color: #3f51b5;
259
+ }
260
+ .MuiSvgIcon-colorSecondary {
261
+ color: #f50057;
262
+ }
263
+ .MuiSvgIcon-colorAction {
264
+ color: rgba(0, 0, 0, 0.54);
265
+ }
266
+ .MuiSvgIcon-colorError {
267
+ color: #f44336;
268
+ }
269
+ .MuiSvgIcon-colorDisabled {
270
+ color: rgba(0, 0, 0, 0.26);
271
+ }
272
+ .MuiSvgIcon-fontSizeInherit {
273
+ font-size: inherit;
274
+ }
275
+ .MuiSvgIcon-fontSizeSmall {
276
+ font-size: 1.25rem;
277
+ }
278
+ .MuiSvgIcon-fontSizeLarge {
279
+ font-size: 2.1875rem;
280
+ }
281
+ </style>
282
+
283
  </head>
284
+
285
  <body>
286
+ <div id="__next" data-reactroot="">
287
+ <div id="content">
288
+
289
+
290
+ <header class="header-inside">
291
+ <div class="container">
292
+ <nav class="navbar navbar-expand-lg home-nav">
293
+ <nav class="navbar navbar-light m-0 mr-4">
294
+ <img src="{{ url_for('static', filename='imgs/logo-dark.svg') }}"
295
+ alt="KSAA Logo شعار مجمع الملك سلمان العالمي للغة العربية" height="45">
296
+ </nav><button class="navbar-toggler" type="button" data-toggle="collapse"
297
+ data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
298
+ aria-label="Toggle navigation">
299
+ <img src="{{ url_for('static', filename='imgs/menu-black.svg') }}" width="25px;" alt="menu">
300
+ </button>
301
+ <div class="collapse navbar-collapse responsive-light" id="navbarNav">
302
+ <ul class="navbar-nav Traditional_nav__zD2_d bg-white border-1">
303
+ <li class="nav-item active"><a class="nav-link Traditional_navItem25__VUKZC"
304
+ href="">الرئيسة</a></li>
305
+ <li class="nav-item"><a class="nav-link Traditional_navItem25__VUKZC" href="">كلمة
306
+ اليوم</a></li>
307
+ <li class="nav-item"><a class="nav-link Traditional_navItem25__VUKZC handCutsor"
308
+ href="">إثراء المعجم</a></li>
309
+ <li class="nav-item"><a class="nav-link Traditional_navItem25__VUKZC" href="">عن
310
+ المعجم</a></li>
311
+ <li class="nav-item"><a class="nav-link Traditional_navItem25__VUKZC"
312
+ href="">إحصاءات</a></li>
313
+ <li class="nav-item"><a class="nav-link Traditional_navItem25__VUKZC handCutsor"
314
+ href="">اتصل بنا</a></li>
315
+ </ul>
316
+ </div>
317
+ <a href="" class="ml-5 hide-md hide-xs">
318
+ <img src="{{ url_for('static', filename='imgs/logoA.png') }}" height="45"
319
+ alt="شعار مجمع الملك سلمان العالي للغة العربية ">
320
+ </a>
321
+ </nav>
322
+ </div>
323
+ </header>
324
+
325
+ <main class="pages-bg">
326
+
327
+ <header class="header-inside">
328
+ <main class="sub-menu ">
329
+ <div class="container mx-auto ">
330
+ <form action="/" method="" class="pb-1 pt-5">
331
+ <div
332
+ class="row no-gutters justify-content-between custom-search bg-white rounded-5 border-1">
333
+ <div class="col-xs-12 col-sm-8 col-lg-8 row no-wrap justify-content-between pl-3 ">
334
+ <img alt="search icon" src="/assets/img/searchIcon.png" class="search-icon">
335
+ <div class="form-group ">
336
+ <div class="MuiAutocomplete-root" role="combobox" aria-expanded="false"
337
+ style="width: 300px;">
338
+ <div
339
+ class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth">
340
+ <label
341
+ class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
342
+ data-shrink="false" for="autocomplete-box"
343
+ id="autocomplete-box-label">كلمة البحث</label>
344
+ <div
345
+ class="MuiInputBase-root MuiInput-root MuiInput-underline MuiAutocomplete-inputRoot MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd">
346
+ <input aria-invalid="false" autocomplete="off"
347
+ id="autocomplete-box" name="word" placeholder="كلمة البحث"
348
+ type="text"
349
+ class="MuiInputBase-input MuiInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused MuiInputBase-inputAdornedEnd"
350
+ aria-autocomplete="list" autocapitalize="none"
351
+ spellcheck="false" value="">
352
+ <div class="MuiAutocomplete-endAdornment"></div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ <div class=" col-xs-12 col-sm-4 col-lg-4 p-0"><input type="submit"
359
+ class="m-0 rounded-5 " value="ابحث"></div>
360
+ </div>
361
+ <div class="search-letters mt-5">
362
+ <ul>
363
+ <li id="A1">ء</li>
364
+ <li id="A2">ب</li>
365
+ <li id="A3">ت</li>
366
+ <li id="A4">ث</li>
367
+ <li id="A5">ج</li>
368
+ <li id="A6">ح</li>
369
+ <li id="A7">خ</li>
370
+ <li id="A8">د</li>
371
+ <li id="A9">ذ</li>
372
+ <li id="A10">ر</li>
373
+ <li id="A11">ز</li>
374
+ <li id="A12">س</li>
375
+ <li id="A13">ش</li>
376
+ <li id="A14">ص</li>
377
+ <li id="A15">ض</li>
378
+ <li id="A16">ط</li>
379
+ <li id="A17">ظ</li>
380
+ <li id="A18">ع</li>
381
+ <li id="A19">غ</li>
382
+ <li id="A20">ف</li>
383
+ <li id="A21">ق</li>
384
+ <li id="A22">ك</li>
385
+ <li id="A23">ل</li>
386
+ <li id="A24">م</li>
387
+ <li id="A25">ن</li>
388
+ <li id="A26">هـ</li>
389
+ <li id="A27">و</li>
390
+ <li id="A28">ي</li>
391
+ <li id="A29">رموز</li>
392
+ </ul>
393
+ </div>
394
+ </form>
395
+ </div>
396
+ </main>
397
+ </header>
398
+
399
+ {% if data is not none %}
400
+ <section class="words-detail">
401
+ <div class="container">
402
+ <div>
403
+ <div class="mb-5">
404
+ <div id="d17053" class="list-card-list p-0 my-2 clearfix separate">
405
+ <div id="17053" class="row items-center wordBg justify-content-between">
406
+ <div class="col-xs-8 col-lg-8 pl-4 pr-0">
407
+ <h2 class="clr-blue h1 py-3">{{ data.word }} </h2>
408
+ <h4 class="">
409
+ {{ data.english }}
410
+ </h4>
411
+ </div>
412
+ {% if data.img is not none %}
413
+ <div>
414
+ <img style="padding: 10px; border-radius: 20px;" width="200px"
415
+ src="data:image/jpeg;base64,{{ data.img }}">
416
+ <br>
417
+ <p style="text-align: center; font-size:12px;"> كيف يرى الذكاء الإصطناعي هذه الكلمة</p>
418
+ </div>
419
+ {% endif %}
420
+ </div>
421
+ <div class="px-2 show collapse" id="c17053">
422
+ <div class="examples-container">
423
+
424
+ {% for meaning_example in data.meanings_examples %}
425
+
426
+ <div class="examples">
427
+ <ul class="text-left arabic">
428
+ <li>
429
+ <div class="row justify-content-between examplesBg">
430
+ <div class="clr-blue"><span>{{ meaning_example.i }} .
431
+ </span>
432
+ <p class="d-inline font-bol">{{ meaning_example.meaning
433
+ }}</p>
434
+ </div>
435
+ </div>
436
+
437
+ {% if meaning_example.example is not none %}
438
+
439
+ <div class="buttons-more mt-3 ">
440
+ <div class="row mx-0"><button
441
+ class="btn mr-3 my-2 rounded-3 bg-blue font-bold text-white">أمثلة</button>
442
+ </div>
443
+ </div>
444
+ <div class="row justify-content-between">
445
+ <div class="clr-blue">
446
+ <p class="d-inline font-bol">{{ meaning_example.example
447
+ }}</p>
448
+ </div>
449
+ </div>
450
+
451
+ {% endif %}
452
+
453
+ </li>
454
+ </ul>
455
+ </div>
456
+
457
+ {% endfor %}
458
+
459
+ </div>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ </div>
464
+
465
+ </div>
466
+ </section>
467
+ {% endif %}
468
+
469
+ </main>
470
+ </div>
471
+ </div>
472
+
473
  </body>
474
+
475
+ </html>