Hugging Face's logo

Spaces:
Jaouadart
/
test
Running

App Files Community
Jaouadart commited on
Commit
ceb802b
·
verified ·
1 Parent(s): defb525

Create اناشيد للاطفال

Browse files
Files changed (1) hide show
  1. اناشيد للاطفال +176 -0
اناشيد للاطفال ADDED
@@ -0,0 +1,176 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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: 'Amiri', serif;
10
+ background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
11
+ margin: 0;
12
+ padding: 0;
13
+ color: #333;
14
+ text-align: center;
15
+ }
16
+
17
+ .container {
18
+ width: 95%;
19
+ max-width: 1100px;
20
+ margin: 0 auto;
21
+ padding: 20px;
22
+ }
23
+
24
+ header {
25
+ background-color: #fff;
26
+ color: #e94560;
27
+ padding: 50px 20px;
28
+ border-radius: 0 0 50% 50% / 0 0 40% 40%;
29
+ margin-bottom: 40px;
30
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
31
+ }
32
+
33
+ header h1 {
34
+ margin: 0;
35
+ font-size: 4em;
36
+ font-weight: bold;
37
+ text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
38
+ }
39
+
40
+ header p {
41
+ font-size: 1.5em;
42
+ margin-top: 10px;
43
+ color: #555;
44
+ }
45
+
46
+ #songs-container {
47
+ display: grid;
48
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
49
+ gap: 40px;
50
+ padding: 30px;
51
+ }
52
+
53
+ .song-card {
54
+ background-color: #fff;
55
+ border-radius: 20px;
56
+ padding: 30px;
57
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
58
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
59
+ overflow: hidden;
60
+ position: relative;
61
+ }
62
+
63
+ .song-card:hover {
64
+ transform: scale(1.05);
65
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
66
+ }
67
+
68
+ .song-card::before {
69
+ content: '';
70
+ position: absolute;
71
+ top: -20px;
72
+ right: -20px;
73
+ width: 80px;
74
+ height: 80px;
75
+ background-image: url('https://i.imgur.com/your-image-url.png');
76
+ background-size: cover;
77
+ opacity: 0.3;
78
+ z-index: 0;
79
+ }
80
+
81
+ .song-card h2 {
82
+ color: #e94560;
83
+ font-size: 2em;
84
+ margin-bottom: 20px;
85
+ position: relative;
86
+ z-index: 1;
87
+ }
88
+
89
+ .youtube-embed {
90
+ position: relative;
91
+ padding-bottom: 56.25%;
92
+ height: 0;
93
+ overflow: hidden;
94
+ }
95
+
96
+ .youtube-embed iframe {
97
+ position: absolute;
98
+ top: 0;
99
+ left: 0;
100
+ width: 100%;
101
+ height: 100%;
102
+ border: 0;
103
+ }
104
+
105
+ footer {
106
+ background-color: #fff;
107
+ color: #e94560;
108
+ padding: 30px;
109
+ margin-top: 40px;
110
+ border-radius: 40% 40% 0 0 / 50% 50% 0 0;
111
+ box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
112
+ }
113
+ </style>
114
+ </head>
115
+ <body>
116
+ <header>
117
+ <div class="container">
118
+ <h1>أناشيد الأطفال</h1>
119
+ <p>عالم من المرح والتعلم!</p>
120
+ </div>
121
+ </header>
122
+
123
+ <div class="container">
124
+ <div id="songs-container">
125
+ <!-- أناشيد هنا -->
126
+ </div>
127
+ </div>
128
+
129
+ <footer>
130
+ <div class="container">
131
+ <p>© 2024 عالم الأناشيد</p>
132
+ </div>
133
+ </footer>
134
+
135
+ <script>
136
+ const songs = [
137
+ { name: "ⵜⵉⵣⵍⵉⵜ ⵏ ⵜⵎⴰⵣⵉⵔⵜ ⵉⵏⵓ ", videoId: "rWwt_soZUfc", image: "https://i.imgur.com/vE1tB71.png" },
138
+ { name: "ⵜⵉⵣⵍⵉⵜ ⵏⴳⴰ ⵜⴰⵣⵣⴰⵏⵉⵏ", videoId: "T5X0QUEErN8", image: "https://i.imgur.com/zNq7wZY.png" },
139
+ { name: "ⵜⵉⵣⵍⵉⵜ ⵏ ⵡⴰⵜⵉⴳ ⵏ ⵡⴰⵎⴰⵏ ", videoId: "Er7FoPOTeZ4", image: "https://i.imgur.com/aJ6LS6p.png" },
140
+ { name: "ⵜⵉⵣⵍⵉⵜ ⵏ ⵓⴼⵓⵍⵍⵓⵙ ", videoId: "Dqxr0A_uqPg", image:"https://i.imgur.com/ZvePAoa.png" },
141
+ { name: "ⵜⵉⵣⵍⵉⵜ ⵏ ⵜⵡⵊⴰ ⵏⵓ ", videoId: "9wMJ_0tQrTA", image: "https://i.imgur.com/L4eF6l8.png" },
142
+ ];
143
+
144
+ const songsContainer = document.getElementById("songs-container");
145
+
146
+ songs.forEach(song => {
147
+ const songCard = document.createElement("div");
148
+ songCard.classList.add("song-card");
149
+
150
+ songCard.style.setProperty('--song-image', `url(${song.image})`);
151
+
152
+ const imageBefore = document.createElement("style");
153
+ imageBefore.innerHTML = `
154
+ .song-card::before {
155
+ background-image: url(${song.image});
156
+ }
157
+ `;
158
+ songCard.appendChild(imageBefore);
159
+
160
+ const title = document.createElement("h2");
161
+ title.textContent = song.name;
162
+ songCard.appendChild(title);
163
+
164
+ const youtubeEmbed = document.createElement("div");
165
+ youtubeEmbed.classList.add("youtube-embed");
166
+ const iframe = document.createElement("iframe");
167
+ iframe.src = `https://www.youtube.com/embed/${song.videoId}`;
168
+ iframe.allowFullscreen = true;
169
+ youtubeEmbed.appendChild(iframe);
170
+ songCard.appendChild(youtubeEmbed);
171
+
172
+ songsContainer.appendChild(songCard);
173
+ });
174
+ </script>
175
+ </body>
176
+ </html>