Merge pull request #6 from nafasebra/main

Resolved responsive issues
SajadJalilian · Jan 3, 2025 · 0b7c00f · 0b7c00f
2 parents 4d084aa + e429556
commit 0b7c00f
Showing 1 changed file with 12 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -2,21 +2,20 @@
 <html dir="rtl">
 
 <head>
-    <script src="functions.js"></script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
     <link rel="stylesheet" href="./index.css">
     <title>محاسبه‌گر ارزش واقعی پول امروز</title>
+    <meta name="description" content="محاسبه‌گر ارزش واقعی پول امروز">
 
 </head>
 
 <body>
-
-    <div class="container pt-5 d-flex justify-content-center align-items-center flex-column">
-
-        <div class="d-flex justify-content-between align-items-center">
-
-            <div class="pt-3 col-3">
+    <div class="container-lg">
+        <div class="row pt-5">
+            <div class="col-sm-12 col-md-6">
                 <h3>چطور کار میکنه؟</h3>
                 <p>
                     آرشیو ما از 1391/12/17 وجود داره.
@@ -27,8 +26,8 @@ <h3>چطور کار میکنه؟</h3>
                     برمی‌گردیم و سکه‌ها رو می‌فروشیم و پولی که به دست اومده رو به شما نشون می‌دیم.
                 </p>
             </div>
-
-            <div x-data="{ data: fetchData() ,
+    
+            <div class="col-sm-12 col-md-6" x-data="{ data: fetchData() ,
                 calcResult : '', 
                 rawData : '', 
                 userInputRial : '', 
@@ -41,7 +40,7 @@ <h1 class="">پول واقعی</h1>
                 <p class="">مبلغ را به تومان و تاریخ را به شمسی وارد کنید</p>
                 <input type="number" x-model="userInputRial" placeholder="مبلغ به تومان">
                 <br>
-                <div class="d-flex justify-content-center align-items-center mt-3">
+                <div class="d-flex flex-wrap align-items-center mt-3">
                     <input type="number" min="01" max="31" x-model="userInputDay" placeholder="روز" class="ms-2">
                     <input type="number" min="01" max="12" x-model="userInputMonth" placeholder="ماه" class="ms-2">
                     <input type="number" min="1391" x-model="userInputYear" placeholder="سال" class="ms-2">
@@ -52,13 +51,13 @@ <h1 class="">پول واقعی</h1>
                         محاسبه‌
                     </button>
                 </div>
-
+    
                 <p class="mt-3">آخرین قیمت سکه بهار آزادی: <span type="number" x-text="calcResult.lastUsdValue"
                         class="text-primary ms-2"></span></p>
                 <p>قیمت سکه بهار آزادی در تاریخی که وارد شده: <span type="number" x-text="calcResult.usdValueOnDate"
                         class="text-primary"></span>
                 </p>
-
+    
                 <p>ارزش مبلغ وارد شده در امروز: <span x-text="calcResult.value" class="text-danger"
                         type="number"></span>
                 </p>
@@ -88,6 +87,7 @@ <h1 class="">پول واقعی</h1>
         crossorigin="anonymous"></script>
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-VL6DSZLQG3"></script>
     <script src="https://unpkg.com/[email protected]/dist/cdn.min.js" defer></script>
+    <script src="functions.js"></script>
 </body>
 
 </html>