Added help page with some FAQs

docs/css/main.css

@@ -448,6 +448,9 @@ ul {
   stroke: none;
 }
 
+details:not(:last-of-type) {
+  border-bottom: thin solid rgba(var(--text-color), 0.3);
+}
 details summary {
   display: flex;
   justify-content: space-between;
@@ -456,11 +459,12 @@ details summary {
       -ms-user-select: none;
           user-select: none;
   cursor: pointer;
+  padding: 1rem 0;
 }
-details[open] > summary {
+details[open] {
-  margin-bottom: 1rem;
+  padding-bottom: 1rem;
 }
-details[open] > summary .icon {
+details[open] summary .icon {
   transform: rotate(180deg);
 }
 
@@ -757,7 +761,6 @@ sm-checkbox {
           user-select: none;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
   grid-template-columns: -webkit-min-content repeat(3, 1fr) -webkit-min-content;
   grid-template-columns: min-content repeat(3, 1fr) min-content;
   border-radius: 0.5rem;
@@ -781,8 +784,8 @@ sm-checkbox {
   pointer-events: none;
 }
 .order-card sm-checkbox {
-  padding: 1rem;
   cursor: pointer;
+  margin-right: 0.5rem;
 }
 .order-card__quantity, .order-card__price {
   font-size: 0.9rem;
@@ -1068,6 +1071,12 @@ sm-checkbox {
             clip-path: circle(100%);
   }
 }
+#help {
+  width: min(60ch, 100%);
+  margin-bottom: 3rem;
+  align-content: flex-start;
+}
+
 @media screen and (max-width: 40rem) and (any-hover: none) {
   .cancel-order span {
     display: none !important;

docs/css/main.scss

@@ -432,20 +432,26 @@ ul {
   }
 }
 details {
+  &:not(:last-of-type) {
+    border-bottom: thin solid rgba(var(--text-color), 0.3);
+  }
   summary {
     display: flex;
     justify-content: space-between;
     user-select: none;
     cursor: pointer;
+    padding: 1rem 0;
   }
 
-  &[open] > summary {
+  &[open] {
-    margin-bottom: 1rem;
+    padding-bottom: 1rem;
+    summary {
       .icon {
         transform: rotate(180deg);
       }
     }
   }
+}
 strip-select {
   --gap: 0;
   background-color: rgba(var(--text-color), 0.06);
@@ -716,7 +722,6 @@ sm-checkbox {
   user-select: none;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
   grid-template-columns: min-content repeat(3, 1fr) min-content;
   border-radius: 0.5rem;
   &__type {
@@ -740,8 +745,8 @@ sm-checkbox {
     }
   }
   sm-checkbox {
-    padding: 1rem;
     cursor: pointer;
+    margin-right: 0.5rem;
   }
   &__quantity,
   &__price {
@@ -987,6 +992,13 @@ sm-checkbox {
     clip-path: circle(100%);
   }
 }
+
+#help {
+  width: min(60ch, 100%);
+  margin-bottom: 3rem;
+  align-content: flex-start;
+}
+
 @media screen and (max-width: 40rem) and (any-hover: none) {
   .cancel-order {
     span {

docs/index.html

@@ -292,6 +292,122 @@
                     <ul id="my_assets" class="grid"></ul>
                 </div>
             </section>
+            <div id="help" class="mobile-page hide grid gap-2">
+                <h1>Hey there! How can we help you today?</h1>
+                <div class="grid gap-0-5">
+                    <h5>F.A.Qs</h5>
+                    <div class="grid gap-0-5">
+                        <details>
+                            <summary class="interact">
+                                <h4>
+                                    What are rupee tokens?
+                                </h4>
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                                    width="24px" fill="#000000">
+                                    <path d="M0 0h24v24H0V0z" fill="none" />
+                                    <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" />
+                                </svg>
+                            </summary>
+                            <p>
+                                Rupee tokens are a digital asset which has value equal to 1 INR. Which can be used with
+                                RanchiMall exchange and other RanchiMall products.
+                            </p>
+                        </details>
+                        <details>
+                            <summary class="interact">
+                                <h4>
+                                    Where can I get rupee tokens?
+                                </h4>
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                                    width="24px" fill="#000000">
+                                    <path d="M0 0h24v24H0V0z" fill="none" />
+                                    <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" />
+                                </svg>
+                            </summary>
+                            <p>
+                                Rupee tokens can be acquired by paying equivalent amount of rupees using our <strong>
+                                    <a href="https://ranchimall.github.io/flopay/" target="_blank">FLO Pay</a>
+                                </strong>
+                                app.
+                            </p>
+                        </details>
+                        <details>
+                            <summary class="interact">
+                                <h4>
+                                    Why my order hasn't been filled yet?
+                                </h4>
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                                    width="24px" fill="#000000">
+                                    <path d="M0 0h24v24H0V0z" fill="none" />
+                                    <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" />
+                                </svg>
+                            </summary>
+                            <p>
+                                Our Exchange works a little differently than other exchanges. You can only buy or
+                                sell at
+                                the
+                                market price.
+                                If you have placed an order at lower/higher price than current price, your order will
+                                not be
+                                executed until the market price matches your order price.
+                            </p>
+                        </details>
+                        <details>
+                            <summary class="interact">
+                                <h4>
+                                    Why am I not able to sell my assets?
+                                </h4>
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                                    width="24px" fill="#000000">
+                                    <path d="M0 0h24v24H0V0z" fill="none" />
+                                    <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" />
+                                </svg>
+                            </summary>
+                            <p>
+                                We only allows selling of assets that were bought in this exchange.
+                                Assets bought in other exchanges can not be sold here.
+                            </p>
+                        </details>
+                        <details>
+                            <summary class="interact">
+                                <h4>
+                                    I have rupee tokens in FLO ID, so why can't I see them in my wallet?
+                                </h4>
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                                    width="24px" fill="#000000">
+                                    <path d="M0 0h24v24H0V0z" fill="none" />
+                                    <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" />
+                                </svg>
+                            </summary>
+                            <p>
+                                In order to user your rupee tokens in exchange, you have to deposit them in exchange
+                                first.
+                                Assets owned by a FLO ID are different than assets you own in exchange.
+                            </p>
+                        </details>
+                        <details>
+                            <summary class="interact">
+                                <h4>
+                                    Why don't prices fluctuate often?
+                                </h4>
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                                    width="24px" fill="#000000">
+                                    <path d="M0 0h24v24H0V0z" fill="none" />
+                                    <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" />
+                                </svg>
+                            </summary>
+                            <p>
+                                Our exchange has a different pricing model than other exchanges. We have an algorithm
+                                based
+                                pricing model which updates prices every hour
+                                based on predefined rules. This prevents rapid fluctuations in price and ensures that
+                                you
+                                can always buy or sell at the best price.
+                            </p>
+                        </details>
+                    </div>
+                </div>
+            </div>
         </section>
         <nav id="main_navbar" class="flex align-center">
             <a href="#/exchange" class="main_navbar__item main_navbar__item--active interact">
@@ -343,6 +459,15 @@
                 </svg>
                 <div class="item__title">Wallet</div>
             </a>
+            <a href="#/help" class="main_navbar__item user-content hide interact">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                    fill="#000000">
+                    <path d="M0 0h24v24H0z" fill="none" />
+                    <path
+                        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" />
+                </svg>
+                <div class="item__title">Help</div>
+            </a>
         </nav>
     </article>