Hugging Face's logo

Spaces:
Jaouadart
/
test
Running

App Files Community
Jaouadart commited on
Commit
0ee7c7c
·
verified ·
1 Parent(s): e8d5319

Upload 4 files

Browse files
Files changed (4) hide show
  1. code (10).html +133 -0
  2. index.html +175 -19
  3. logo.png +0 -0
  4. self_learning.jpg +0 -0
code (10).html ADDED
@@ -0,0 +1,133 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>شخصيات تاريخية</title>
7
+ <style>
8
+ body {
9
+ font-family: sans-serif; /* Use a suitable Arabic font if needed */
10
+ background-color: #e0e0f0; /* Light blue background */
11
+ margin: 0;
12
+ padding: 0;
13
+ }
14
+
15
+ .container {
16
+ max-width: 400px; /* Adjust as needed for mobile responsiveness */
17
+ margin: 20px auto;
18
+ padding: 10px;
19
+ background-color: #d0d0e8; /* Slightly darker blue */
20
+ border-radius: 10px;
21
+ }
22
+
23
+ .header {
24
+ display: flex;
25
+ justify-content: space-between;
26
+ align-items: center;
27
+ margin-bottom: 20px;
28
+ }
29
+
30
+ .header button {
31
+ background-color: transparent;
32
+ border: none;
33
+ font-size: 24px;
34
+ cursor: pointer;
35
+ }
36
+
37
+ .header h1 {
38
+ text-align: center;
39
+ flex-grow: 1;
40
+ font-size: 1.2em; /* Adjust font size */
41
+ }
42
+
43
+ .grid-container {
44
+ display: grid;
45
+ grid-template-columns: repeat(3, 1fr); /* 3 columns */
46
+ grid-gap: 10px; /* Spacing between items */
47
+ }
48
+
49
+ .grid-item {
50
+ text-align: center;
51
+
52
+ }
53
+
54
+ .grid-item img {
55
+ width: 80px; /* Adjust image size */
56
+ height: 80px;
57
+ border-radius: 50%; /* Make images circular */
58
+ object-fit: cover; /* Important: Keeps aspect ratio and covers the area */
59
+ border: 2px solid #fff; /* Optional: Add a white border */
60
+ }
61
+
62
+ .grid-item p {
63
+ margin-top: 5px;
64
+ font-size: 0.8em; /* Smaller font size for names */
65
+ white-space: nowrap; /* Prevents names from wrapping */
66
+ overflow: hidden; /* Hides overflowing text */
67
+ text-overflow: ellipsis; /* Adds "..." for long names */
68
+ width: 80px; /* Matches the image width */
69
+
70
+ }
71
+ </style>
72
+ </head>
73
+ <body>
74
+ <div class="container">
75
+ <div class="header">
76
+ <button>&#8592;</button> <!-- Back arrow -->
77
+ <h1>طريقك نحو المعرفة والتفوق</h1>
78
+ <button>&#8962;</button> <!-- Home icon -->
79
+ </div>
80
+
81
+ <div class="grid-container">
82
+ <div class="grid-item">
83
+ <a href="index.html">
84
+ <img src="self_learning.jpg" alt="القديس أوغسطينوس">
85
+ </a>
86
+ <p>القديس أوغسطينوس</p>
87
+ </div>
88
+ <div class="grid-item">
89
+ <a href="https://aistudio.google.com/prompts/new_chat">
90
+ <img src="massinissa.jpg" alt="ماسينسا">
91
+ <p>ماسينسا</p>
92
+ </a>
93
+ </div>
94
+ <div class="grid-item">
95
+ <img src="dihya.jpg" alt="الملكة ديهيا">
96
+ <p>الملكة (Dihya)</p>
97
+ </div>
98
+ <div class="grid-item">
99
+ <img src="jugurtha.jpg" alt="يوغرتن">
100
+ <p>يوغرتن</p>
101
+ </div>
102
+ <div class="grid-item">
103
+ <img src="apuleius.jpg" alt="بوبا الثاني">
104
+ <p>بوبا الثاني</p>
105
+ </div>
106
+ <div class="grid-item">
107
+ <img src="tariq.jpg" alt="طارق بن زياد">
108
+ <p>طارق بن زياد</p>
109
+ </div>
110
+ <div class="grid-item">
111
+ <img src="lucius_apuleius.jpg" alt="لوشيوس أبوليوس">
112
+ <p>لوشيوس أبوليوس</p>
113
+ </div>
114
+ <div class="grid-item">
115
+ <img src="yusuf_ibn_tashfin.jpg" alt="يوسف بن تاشفين">
116
+ <p>يوسف بن تاشفين</p>
117
+ </div>
118
+ <div class="grid-item">
119
+ <img src="mokhtar_soussi.jpg" alt="المختار السوسي">
120
+ <p>المختار السوسي</p>
121
+ </div>
122
+ <div class="grid-item">
123
+ <img src="al_zahrawi.jpg" alt="أبو القاسم الزهراوي">
124
+ <p>أبو القاسم الزهراوي</p>
125
+ </div>
126
+ <div class="grid-item">
127
+ <img src="ibn_battuta.jpg" alt="ابن بطوطة">
128
+ <p>ابن بطوطة</p>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </body>
133
+ </html>
index.html CHANGED
@@ -1,19 +1,175 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>نجاح - الصفحة الرئيسية</title>
7
+ <style>
8
+ body {
9
+ font-family: 'Arial', sans-serif;
10
+ margin: 0;
11
+ padding: 0;
12
+ background-color: #3f51b5; /* Main background color (dark blue) */
13
+ color: #fff;
14
+ display: flex;
15
+ flex-direction: column;
16
+ align-items: center;
17
+ min-height: 100vh;
18
+ }
19
+
20
+ .container {
21
+ background-color: #fff; /* White container */
22
+ padding: 20px;
23
+ border-radius: 15px;
24
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
25
+ width: 90%; /* Responsive width */
26
+ max-width: 400px; /* Maximum width */
27
+ text-align: center;
28
+ position: relative; /* For absolute positioning of back button */
29
+ }
30
+ .top-section{
31
+ background-color: #303f9f; /* Darker blue for the top section */
32
+ color: white;
33
+ padding: 25px;
34
+ border-radius: 15px 15px 0 0; /* Rounded top corners */
35
+ margin-bottom:20px;
36
+
37
+ }
38
+ .logo {
39
+ /* Replace with your logo image later */
40
+ width: 80px;
41
+ height: 80px;
42
+ background-image: url('logo.png'); /* Placeholder image */
43
+ background-size: cover;
44
+ margin: 0 auto 15px; /* Center the logo */
45
+ border-radius: 0%; /* Make logo circular if it is not*/
46
+
47
+ }
48
+
49
+ .title {
50
+ font-size: 2.5em;
51
+ font-weight: bold;
52
+ margin-bottom: 20px;
53
+ }
54
+
55
+ .grid-container {
56
+ display: grid;
57
+ grid-template-columns: repeat(2, 1fr); /* Two columns */
58
+ grid-template-rows: repeat(3, auto); /* Three rows, auto height */
59
+ gap: 20px;
60
+ width: 100%;
61
+ }
62
+
63
+ .grid-item {
64
+ background-color: #eee; /* Light gray background, will be overwritten by image */
65
+ border-radius: 10px;
66
+ padding: 40px 20px; /* Padding inside each box */
67
+ display: flex;
68
+ justify-content: center;
69
+ align-items: center;
70
+ font-size: 1em;
71
+ cursor: pointer;
72
+ transition: transform 0.2s ease;
73
+ position: relative;/*for text positioning*/
74
+ overflow: hidden; /* Hide overflowing content (the image) */
75
+ }
76
+
77
+ .grid-item:hover {
78
+ transform: scale(1.05);
79
+ box-shadow: 0 2px 4px rgba(0,0,0,0.3);
80
+ }
81
+
82
+ .grid-item img {
83
+ width: 100%;
84
+ height: 100%;
85
+ object-fit: cover; /* Cover the entire box */
86
+ position: absolute; /*Position over text*/
87
+ top: 0;
88
+ left: 0;
89
+ z-index: 0; /*Behind the text*/
90
+
91
+ }
92
+ .grid-item-text{
93
+ position: relative; /* Bring text in front of image */
94
+ z-index: 1; /* Bring text to the front */
95
+ color: #333; /* Or any color that stands out on the image */
96
+ font-weight: bold;
97
+
98
+ }
99
+ .back-button {
100
+ position: absolute;
101
+ bottom: 10px;
102
+ left: 10px;
103
+ background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent black */
104
+ color: white;
105
+ border: none;
106
+ border-radius: 5px;
107
+ padding: 5px 10px;
108
+ cursor: pointer;
109
+ font-size: 1.2em;
110
+ }
111
+ .back-button:hover{
112
+ background-color: rgba(0, 0, 0, 0.5);
113
+ }
114
+ /* Responsive Styles */
115
+ @media (max-width: 768px) {
116
+
117
+ .grid-item {
118
+ padding: 30px 15px; /* Adjust padding for smaller screens */
119
+ font-size: 0.9em; /* Adjust font size for smaller screens */
120
+ }
121
+ .title {
122
+ font-size: 2em;
123
+ }
124
+ .logo{
125
+ width: 60px;
126
+ height: 60px;
127
+ }
128
+ .container{
129
+ padding: 15px;
130
+ }
131
+ .top-section{
132
+ padding:15px;
133
+ }
134
+ }
135
+
136
+ </style>
137
+ </head>
138
+ <body>
139
+ <div class="container">
140
+ <div class="top-section">
141
+ <div class="logo">
142
+ </div>
143
+ <div class="title">نجاح</div>
144
+ </div>
145
+
146
+ <div class="grid-container">
147
+ <div class="grid-item">
148
+ <img src="tifinagh_learning.png" alt="تعلم تيفيناغ">
149
+ <div class="grid-item-text">تعلم تيفيناغ</div>
150
+ </div>
151
+ <div class="grid-item">
152
+ <img src="amazigh_levels.png" alt="سنوات الدراسة لمسلك اللغة الأمازيغية">
153
+ <div class="grid-item-text">سنوات الدراسة لمسلك اللغة الأمازيغية</div>
154
+ </div>
155
+ <div class="grid-item">
156
+ <img src="amazigh_dictionaries.png" alt="قواميس اللغة الأمازيغية">
157
+ <div class="grid-item-text">قواميس اللغة الأمازيغية</div>
158
+ </div>
159
+ <div class="grid-item">
160
+ <img src="amazigh_origins.png" alt="علمك من أصول أمازيغية">
161
+ <div class="grid-item-text">علمك من أصول أمازيغية</div>
162
+ </div>
163
+ <div class="grid-item">
164
+ <img src="self_learning.jpg" alt="هل تعلم">
165
+ <div class="grid-item-text">هل تعلم</div>
166
+ </div>
167
+ <div class="grid-item">
168
+ <img src="tests_evaluation.png" alt="اختبارات وتقييم">
169
+ <div class="grid-item-text">اختبارات وتقييم</div>
170
+ </div>
171
+ </div>
172
+ <button class="back-button">></button>
173
+ </div>
174
+ </body>
175
+ </html>
logo.png ADDED
self_learning.jpg ADDED