fork download
  1. سأقوم بدمج كود CSS داخل كود HTML حتى يكون من السهل نسخه وتشغيله مباشرةً كملف HTML كامل.
  2.  
  3. ```html
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <title>Web Page</title>
  8. <script src="https://c...content-available-to-author-only...s.com"></script>
  9. <link href="https://c...content-available-to-author-only...e.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
  10. <style>
  11. /* إعدادات عامة */
  12. body {
  13. background-color: #1a1a1a;
  14. font-family: 'Arial', sans-serif;
  15. color: #ffffff;
  16. margin: 0;
  17. padding: 0;
  18. overflow-x: hidden;
  19. }
  20.  
  21. /* تنسيقات الهيدر */
  22. .header-container {
  23. display: flex;
  24. justify-content: space-between;
  25. width: 100%;
  26. padding: 0 16px;
  27. margin-bottom: 16px;
  28. }
  29.  
  30. .profile-info {
  31. display: flex;
  32. align-items: center;
  33. }
  34.  
  35. .profile-info img {
  36. border-radius: 50%;
  37. width: 48px;
  38. height: 48px;
  39. margin-right: 8px;
  40. }
  41.  
  42. .profile-info span {
  43. font-size: 1.125rem;
  44. font-weight: bold;
  45. }
  46.  
  47. .gem-info {
  48. display: flex;
  49. align-items: center;
  50. background-color: #333333;
  51. padding: 8px 16px;
  52. border-radius: 50px;
  53. color: #a9a9a9;
  54. margin-right: 8px;
  55. }
  56.  
  57. .gem-info i {
  58. color: #4a90e2;
  59. margin-right: 4px;
  60. }
  61.  
  62. .gem-info span {
  63. color: #ffffff;
  64. }
  65.  
  66. .settings-icon i {
  67. color: #a9a9a9;
  68. }
  69.  
  70. /* زر الذكريات */
  71. .memories-btn {
  72. display: flex;
  73. justify-content: flex-end;
  74. width: 100%;
  75. margin-bottom: 16px;
  76. }
  77.  
  78. .memories-btn button {
  79. background-color: #6b46c1;
  80. color: #ffffff;
  81. padding: 8px 16px;
  82. border-radius: 50px;
  83. display: flex;
  84. align-items: center;
  85. }
  86.  
  87. .memories-btn i {
  88. margin-right: 8px;
  89. }
  90.  
  91. /* قسم "الجديد اليوم" */
  92. .new-today-section {
  93. width: 100%;
  94. margin-bottom: 16px;
  95. text-align: center;
  96. }
  97.  
  98. .new-today-section h2 {
  99. font-size: 1.25rem;
  100. font-weight: bold;
  101. margin-bottom: 8px;
  102. }
  103.  
  104. .new-today-items {
  105. display: flex;
  106. justify-content: space-around;
  107. }
  108.  
  109. .item-box {
  110. background-color: #333333;
  111. padding: 16px;
  112. border-radius: 8px;
  113. width: 30%;
  114. text-align: center;
  115. }
  116.  
  117. .item-box img {
  118. border-radius: 8px;
  119. width: 100px;
  120. height: 100px;
  121. margin-bottom: 8px;
  122. }
  123.  
  124. .item-box span {
  125. display: block;
  126. font-size: 0.875rem;
  127. color: #ffffff;
  128. margin-top: 4px;
  129. }
  130.  
  131. .item-box .gem-count {
  132. display: flex;
  133. align-items: center;
  134. justify-content: center;
  135. margin-top: 8px;
  136. }
  137.  
  138. .item-box .gem-count i {
  139. color: #4a90e2;
  140. margin-right: 4px;
  141. }
  142.  
  143. /* عرض الماس */
  144. .diamond-count {
  145. font-size: 1.875rem;
  146. font-weight: bold;
  147. color: #4a90e2;
  148. text-align: center;
  149. margin-bottom: 16px;
  150. }
  151.  
  152. .diamond-count i {
  153. font-size: 2rem;
  154. }
  155.  
  156. /* الشخصية الرئيسية */
  157. .main-character {
  158. display: flex;
  159. justify-content: center;
  160. margin-bottom: 16px;
  161. }
  162.  
  163. .main-character img {
  164. width: 200px;
  165. height: 200px;
  166. border-radius: 50%;
  167. padding: 4px;
  168. background: linear-gradient(to right, #4a90e2, #6b46c1);
  169. }
  170.  
  171. /* شريط التنقل */
  172. .navbar {
  173. display: flex;
  174. justify-content: space-around;
  175. align-items: center;
  176. background-color: #333333;
  177. padding: 12px 0;
  178. width: 100%;
  179. position: fixed;
  180. bottom: 0;
  181. }
  182.  
  183. .nav-item {
  184. display: flex;
  185. flex-direction: column;
  186. align-items: center;
  187. color: #a9a9a9;
  188. }
  189.  
  190. .nav-item.active {
  191. color: #4a90e2;
  192. }
  193.  
  194. .nav-item i {
  195. margin-bottom: 4px;
  196. font-size: 1.25rem;
  197. }
  198.  
  199. .nav-item span {
  200. font-size: 0.875rem;
  201. }
  202.  
  203. /* التأثيرات عند التحريك */
  204. .memories-btn button:hover,
  205. .item-box:hover,
  206. .nav-item:hover {
  207. background-color: #6b46c1;
  208. color: #ffffff;
  209. cursor: pointer;
  210. }
  211. </style>
  212. </head>
  213. <body class="text-white">
  214. <div class="flex flex-col items-center p-4">
  215. <!-- Header -->
  216. <div class="header-container">
  217. <div class="profile-info">
  218. <img alt="Profile picture of a dog in a suit" src="https://s...content-available-to-author-only...s.com/a1aa/image/Z2Qtjgm0G27HH5pQ3vsGKr1rjEbvHxZisEenttKUJPwIsa1JA.jpg"/>
  219. <span>Jo Jo (CEO)</span>
  220. </div>
  221. <div class="flex items-center">
  222. <div class="gem-info">
  223. <i class="fas fa-gem"></i>
  224. <span>+1.32</span>
  225. <i class="fas fa-info-circle ml-2"></i>
  226. </div>
  227. <i class="fas fa-cog settings-icon"></i>
  228. </div>
  229. </div>
  230.  
  231. <!-- Memories Button -->
  232. <div class="memories-btn">
  233. <button>
  234. <i class="fas fa-heart"></i>
  235. <span>Memories</span>
  236. </button>
  237. </div>
  238.  
  239. <!-- New Today Section -->
  240. <div class="new-today-section">
  241. <h2>New today</h2>
  242. <div class="new-today-items">
  243. <div class="item-box">
  244. <img alt="Cartoon hamster holding a pumpkin" src="https://s...content-available-to-author-only...s.com/a1aa/image/xKNPv2zehepSm08euW3eob1bJ7EiiJhtJUl0eqA1sT5eDWt6E.jpg"/>
  245. <span>Merge Away</span>
  246. <div class="gem-count">
  247. <i class="fas fa-gem"></i>
  248. <span>x3</span>
  249. </div>
  250. </div>
  251. <div class="item-box">
  252. <img alt="Cartoon hamster with multiplication and subtraction signs" src="https://s...content-available-to-author-only...s.com/a1aa/image/eiUWGTfo5vskKEWvu0HJIPW6fyEJD4eBMHapcDwcGbfFCrWdC.jpg"/>
  253. <span>Count Masters</span>
  254. <div class="gem-count">
  255. <i class="fas fa-gem"></i>
  256. <span>x3</span>
  257. </div>
  258. </div>
  259. <div class="item-box">
  260. <img alt="Cartoon hamster dressed as a ninja" src="https://s...content-available-to-author-only...s.com/a1aa/image/gvlejpPuHTyIR6VfaUPx8iwct1EAi1qgNqLDjOY7sdgTY1qTA.jpg"/>
  261. <span>Tower Defence</span>
  262. <div class="gem-count">
  263. <i class="fas fa-gem"></i>
  264. <span>x3</span>
  265. </div>
  266. </div>
  267. </div>
  268. </div>
  269.  
  270. <!-- Diamond Count -->
  271. <div class="diamond-count">
  272. <i class="fas fa-gem"></i>
  273. <span>22.03</span>
  274. </div>
  275.  
  276. <!-- Main Character -->
  277. <div class="main-character">
  278. <img alt="Cartoon hamster in a black hoodie with arms crossed" src="https://s...content-available-to-author-only...s.com/a1aa/image/sLBSYwlKte2WbKzmcTfDYHc6QZB2wOJ4TVk8xSKoXShUY1qTA.jpg"/>
  279. </div>
  280.  
  281. <!-- Navigation Bar -->
  282. <div class="navbar">
  283. <div class="nav-item">
  284. <i class="fas fa-exchange-alt text-blue-400"></i>
  285. <span>Exchange</span>
  286. </div>
  287. <div class="nav-item">
  288. <i class="fas fa-gamepad"></i>
  289. <span>Playground</span>
  290. </div>
  291. <div class="nav-item">
  292. <i class="fas fa-coins text-yellow-400"></i>
  293. <span>AirDrop</span>
  294. </div>
  295. <div class="
  296.  
  297. nav-item">
  298. <i class="fas fa-user-friends"></i>
  299. <span>Friends</span>
  300. </div>
  301. <div class="nav-item">
  302. <i class="fas fa-gem"></i>
  303. <span>Earn</span>
  304. </div>
  305. </div>
  306. </div>
  307. </body>
  308. </html>
  309. ```
  310.  
  311. يمكنك نسخ الكود بالكامل ولصقه في ملف HTML جديد وتجربته مباشرة في المتصفح.
Success #stdin #stdout 0.03s 25928KB
stdin
H
stdout
سأقوم بدمج كود CSS داخل كود HTML حتى يكون من السهل نسخه وتشغيله مباشرةً كملف HTML كامل.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Web Page</title>
    <script src="https://c...content-available-to-author-only...s.com"></script>
    <link href="https://c...content-available-to-author-only...e.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
    <style>
        /* إعدادات عامة */
        body {
            background-color: #1a1a1a;
            font-family: 'Arial', sans-serif;
            color: #ffffff;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }

        /* تنسيقات الهيدر */
        .header-container {
            display: flex;
            justify-content: space-between;
            width: 100%;
            padding: 0 16px;
            margin-bottom: 16px;
        }

        .profile-info {
            display: flex;
            align-items: center;
        }

        .profile-info img {
            border-radius: 50%;
            width: 48px;
            height: 48px;
            margin-right: 8px;
        }

        .profile-info span {
            font-size: 1.125rem;
            font-weight: bold;
        }

        .gem-info {
            display: flex;
            align-items: center;
            background-color: #333333;
            padding: 8px 16px;
            border-radius: 50px;
            color: #a9a9a9;
            margin-right: 8px;
        }

        .gem-info i {
            color: #4a90e2;
            margin-right: 4px;
        }

        .gem-info span {
            color: #ffffff;
        }

        .settings-icon i {
            color: #a9a9a9;
        }

        /* زر الذكريات */
        .memories-btn {
            display: flex;
            justify-content: flex-end;
            width: 100%;
            margin-bottom: 16px;
        }

        .memories-btn button {
            background-color: #6b46c1;
            color: #ffffff;
            padding: 8px 16px;
            border-radius: 50px;
            display: flex;
            align-items: center;
        }

        .memories-btn i {
            margin-right: 8px;
        }

        /* قسم "الجديد اليوم" */
        .new-today-section {
            width: 100%;
            margin-bottom: 16px;
            text-align: center;
        }

        .new-today-section h2 {
            font-size: 1.25rem;
            font-weight: bold;
            margin-bottom: 8px;
        }

        .new-today-items {
            display: flex;
            justify-content: space-around;
        }

        .item-box {
            background-color: #333333;
            padding: 16px;
            border-radius: 8px;
            width: 30%;
            text-align: center;
        }

        .item-box img {
            border-radius: 8px;
            width: 100px;
            height: 100px;
            margin-bottom: 8px;
        }

        .item-box span {
            display: block;
            font-size: 0.875rem;
            color: #ffffff;
            margin-top: 4px;
        }

        .item-box .gem-count {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 8px;
        }

        .item-box .gem-count i {
            color: #4a90e2;
            margin-right: 4px;
        }

        /* عرض الماس */
        .diamond-count {
            font-size: 1.875rem;
            font-weight: bold;
            color: #4a90e2;
            text-align: center;
            margin-bottom: 16px;
        }

        .diamond-count i {
            font-size: 2rem;
        }

        /* الشخصية الرئيسية */
        .main-character {
            display: flex;
            justify-content: center;
            margin-bottom: 16px;
        }

        .main-character img {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            padding: 4px;
            background: linear-gradient(to right, #4a90e2, #6b46c1);
        }

        /* شريط التنقل */
        .navbar {
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #333333;
            padding: 12px 0;
            width: 100%;
            position: fixed;
            bottom: 0;
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #a9a9a9;
        }

        .nav-item.active {
            color: #4a90e2;
        }

        .nav-item i {
            margin-bottom: 4px;
            font-size: 1.25rem;
        }

        .nav-item span {
            font-size: 0.875rem;
        }

        /* التأثيرات عند التحريك */
        .memories-btn button:hover,
        .item-box:hover,
        .nav-item:hover {
            background-color: #6b46c1;
            color: #ffffff;
            cursor: pointer;
        }
    </style>
</head>
<body class="text-white">
    <div class="flex flex-col items-center p-4">
        <!-- Header -->
        <div class="header-container">
            <div class="profile-info">
                <img alt="Profile picture of a dog in a suit" src="https://s...content-available-to-author-only...s.com/a1aa/image/Z2Qtjgm0G27HH5pQ3vsGKr1rjEbvHxZisEenttKUJPwIsa1JA.jpg"/>
                <span>Jo Jo (CEO)</span>
            </div>
            <div class="flex items-center">
                <div class="gem-info">
                    <i class="fas fa-gem"></i>
                    <span>+1.32</span>
                    <i class="fas fa-info-circle ml-2"></i>
                </div>
                <i class="fas fa-cog settings-icon"></i>
            </div>
        </div>

        <!-- Memories Button -->
        <div class="memories-btn">
            <button>
                <i class="fas fa-heart"></i>
                <span>Memories</span>
            </button>
        </div>

        <!-- New Today Section -->
        <div class="new-today-section">
            <h2>New today</h2>
            <div class="new-today-items">
                <div class="item-box">
                    <img alt="Cartoon hamster holding a pumpkin" src="https://s...content-available-to-author-only...s.com/a1aa/image/xKNPv2zehepSm08euW3eob1bJ7EiiJhtJUl0eqA1sT5eDWt6E.jpg"/>
                    <span>Merge Away</span>
                    <div class="gem-count">
                        <i class="fas fa-gem"></i>
                        <span>x3</span>
                    </div>
                </div>
                <div class="item-box">
                    <img alt="Cartoon hamster with multiplication and subtraction signs" src="https://s...content-available-to-author-only...s.com/a1aa/image/eiUWGTfo5vskKEWvu0HJIPW6fyEJD4eBMHapcDwcGbfFCrWdC.jpg"/>
                    <span>Count Masters</span>
                    <div class="gem-count">
                        <i class="fas fa-gem"></i>
                        <span>x3</span>
                    </div>
                </div>
                <div class="item-box">
                    <img alt="Cartoon hamster dressed as a ninja" src="https://s...content-available-to-author-only...s.com/a1aa/image/gvlejpPuHTyIR6VfaUPx8iwct1EAi1qgNqLDjOY7sdgTY1qTA.jpg"/>
                    <span>Tower Defence</span>
                    <div class="gem-count">
                        <i class="fas fa-gem"></i>
                        <span>x3</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Diamond Count -->
        <div class="diamond-count">
            <i class="fas fa-gem"></i>
            <span>22.03</span>
        </div>

        <!-- Main Character -->
        <div class="main-character">
            <img alt="Cartoon hamster in a black hoodie with arms crossed" src="https://s...content-available-to-author-only...s.com/a1aa/image/sLBSYwlKte2WbKzmcTfDYHc6QZB2wOJ4TVk8xSKoXShUY1qTA.jpg"/>
        </div>

        <!-- Navigation Bar -->
        <div class="navbar">
            <div class="nav-item">
                <i class="fas fa-exchange-alt text-blue-400"></i>
                <span>Exchange</span>
            </div>
            <div class="nav-item">
                <i class="fas fa-gamepad"></i>
                <span>Playground</span>
            </div>
            <div class="nav-item">
                <i class="fas fa-coins text-yellow-400"></i>
                <span>AirDrop</span>
            </div>
            <div class="

nav-item">
                <i class="fas fa-user-friends"></i>
                <span>Friends</span>
            </div>
            <div class="nav-item">
                <i class="fas fa-gem"></i>
                <span>Earn</span>
            </div>
        </div>
    </div>
</body>
</html>
```

يمكنك نسخ الكود بالكامل ولصقه في ملف HTML جديد وتجربته مباشرة في المتصفح.