<%@ Page Language="VB" AutoEventWireup="false" CodeFile="PayAfter.aspx.vb" Inherits="okPay" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="UTF-8">
    <title>شارژ ارز دیجیتال</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/reset.min.css">
    <link rel='stylesheet' href='css/font-awesome.min.css'>
    <link rel="icon" href="favicon.png" type="image/png" sizes="16x16">

    <style>
        @font-face {
            font-family: IRANSans;
            font-style: normal;
            font-weight: 900;
            src: url('/fonts/IRANSans/eot/IRANSansWeb(FaNum)_Black.eot');
            src: url('/fonts/IRANSans/eot/IRANSansWeb(FaNum)_Black.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('/fonts/IRANSans/woff2/IRANSansWeb(FaNum)_Black.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('/fonts/IRANSans/woff/IRANSansWeb(FaNum)_Black.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('/fonts/IRANSans/ttf/IRANSansWeb(FaNum)_Black.ttf') format('truetype');
        }

        @font-face {
            font-family: IRANSans;
            font-style: normal;
            font-weight: bold;
            src: url('/fonts/IRANSans/eot/IRANSansWeb(FaNum)_Bold.eot');
            src: url('/fonts/IRANSans/eot/IRANSansWeb(FaNum)_Bold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('/fonts/IRANSans/woff2/IRANSansWeb(FaNum)_Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('/fonts/IRANSans/woff/IRANSansWeb(FaNum)_Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('/fonts/IRANSans/ttf/IRANSansWeb(FaNum)_Bold.ttf') format('truetype');
        }

        @font-face {
            font-family: IRANSans;
            font-style: normal;
            font-weight: 500;
            src: url('/fonts/IRANSans/eot/IRANSansWeb(FaNum)_Medium.eot');
            src: url('/fonts/IRANSans/eot/IRANSansWeb(FaNum)_Medium.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('/fonts/IRANSans/woff2/IRANSansWeb(FaNum)_Medium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('/fonts/IRANSans/woff/IRANSansWeb(FaNum)_Medium.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('/fonts/IRANSans/ttf/IRANSansWeb(FaNum)_Medium.ttf') format('truetype');
        }

        @font-face {
            font-family: IRANSans;
            font-style: normal;
            font-weight: 300;
            src: url('/fonts/IRANSans/eot/IRANSansWeb(FaNum)_Light.eot');
            src: url('/fonts/IRANSans/eot/IRANSansWeb(FaNum)_Light.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('/fonts/IRANSans/woff2/IRANSansWeb(FaNum)_Light.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('/fonts/IRANSans/woff/IRANSansWeb(FaNum)_Light.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('/fonts/IRANSans/ttf/IRANSansWeb(FaNum)_Light.ttf') format('truetype');
        }

        @font-face {
            font-family: IRANSans;
            font-style: normal;
            font-weight: 200;
            src: url('/fonts/IRANSans/eot/IRANSansWeb(FaNum)_UltraLight.eot');
            src: url('/fonts/IRANSans/eot/IRANSansWeb(FaNum)_UltraLight.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('/fonts/IRANSans/woff2/IRANSansWeb(FaNum)_UltraLight.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('/fonts/IRANSans/woff/IRANSansWeb(FaNum)_UltraLight.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('/fonts/IRANSans/ttf/IRANSansWeb(FaNum)_UltraLight.ttf') format('truetype');
        }

        @font-face {
            font-family: IRANSans;
            font-style: normal;
            font-weight: normal;
            src: url('/fonts/IRANSans/eot/IRANSansWeb(FaNum).eot');
            src: url('/fonts/IRANSans/eot/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('/fonts/IRANSans/woff2/IRANSansWeb(FaNum).woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('/fonts/IRANSans/woff/IRANSansWeb(FaNum).woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('/fonts/IRANSans/ttf/IRANSansWeb(FaNum).ttf') format('truetype');
        }

        * {
            box-sizing: border-box;
            transition: .5s ease-in-out;
        }

        /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
        * {
            box-sizing: border-box;
            transition: .5s ease-in-out;
        }

        html, body {
            background-color: #220200;
            height: 100%;
            font-family: IRANSans;
        }

            html h1, body h1 {
                font-size: 25px;
                font-weight: 200;
                color: white;
                line-height: 30px;
                margin-bottom: 10px;
            }

            html h2, body h2 {
                font-size: 15px;
                color: black;
            }

        #wrapper {
            opacity: 0;
            display: table;
            height: 100%;
            width: 100%;
        }

            #wrapper.loaded {
                opacity: 1;
                transition: 2.5s ease-in-out;
            }

            #wrapper #content {
                display: table-cell;
                vertical-align: middle;
            }

        #card {
            height: 400px;
            width: 300px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
            perspective: 600px;
        }

            #card #front, #card #back {
                border-radius: 10px;
                height: 100%;
                width: 100%;
                position: absolute;
                left: 0;
                top: 0;
                transform-style: preserve-3d;
                backface-visibility: hidden;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            }

            #card #front {
                transform: rotateY(0deg);
                overflow: hidden;
                z-index: 1;
            }

                #card #front #arrow {
                    position: absolute;
                    height: 50px;
                    line-height: 50px;
                    font-size: 30px;
                    z-index: 10;
                    bottom: 0;
                    right: 50px;
                    color: rgba(255, 255, 255, 0.5);
                    animation: arrowWiggle 1s ease-in-out infinite;
                }

                #card #front #top-pic {
                    height: 50%;
                    width: 100%;
                    background-image: url('backCard.jpg');
                    background-size: cover;
                }

                #card #front #avatar {
                    width: 114px;
                    height: 114px;
                    top: 50%;
                    left: 50%;
                    margin: -77px 0 0 -57px;
                    border-radius: 100%;
                    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 4px 5px rgba(107, 5, 0, 0.6), 0 0 50px 50px rgba(255, 255, 255, 0.25);
                    background-image: url('avatar.jpg');
                    background-size: contain;
                    position: absolute;
                    z-index: 1;
                }

                #card #front #info-box {
                    height: 50%;
                    width: 100%;
                    position: absolute;
                    display: table;
                    left: 0;
                    bottom: 0;
                    background: rgba(200, 38, 29, 0.7);
                    padding: 10px;
                }

                #card #front #social-bar {
                    height: 50px;
                    width: 100%;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    line-height: 50px;
                    font-size: 18px;
                    text-align: center;
                }

                    #card #front #social-bar a {
                        display: inline-block;
                        color: white;
                        text-decoration: none;
                        padding: 5px;
                        line-height: 18px;
                        border-radius: 5px;
                    }

                        #card #front #social-bar a:hover {
                            color: #450300;
                            background: rgba(255, 255, 255, 0.3);
                            transition: .25s ease-in-out;
                        }

            #card #back {
                transform: rotateY(180deg);
                background-color: rgba(255, 255, 255, 0.6);
                display: table;
                z-index: 2;
                font-size: 13px;
                line-height: 20px;
                padding: 50px;
            }

                #card #back .back-info {
                    text-align: justify;
                    text-justify: inter-word;
                }

                #card #back #social-bar {
                    height: 50px;
                    width: 100%;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    line-height: 50px;
                    font-size: 18px;
                    text-align: center;
                }

                    #card #back #social-bar a {
                        display: inline-block;
                        line-height: 18px;
                        color: #951009;
                        text-decoration: none;
                        padding: 5px;
                        border-radius: 5px;
                    }

                        #card #back #social-bar a:hover {
                            color: #450300;
                            background: rgba(223, 74, 66, 0.5);
                            transition: .25s ease-in-out;
                        }

            #card .info {
                display: table-cell;
                height: 100%;
                vertical-align: middle;
                text-align: center;
            }

            #card.flip #front {
                transform: rotateY(180deg);
            }

            #card.flip #back {
                transform: rotateY(360deg);
            }

        #background {
            position: fixed;
            background-color: black;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
        }

            #background #background-image {
                height: calc(100% + 60px);
                width: calc(100% + 60px);
                position: absolute;
                top: -30px;
                left: -30px;
                -webkit-filter: blur(10px);
                background-image: url('back.jpg');
                background-size: cover;
            }

        @keyframes arrowWiggle {
            0% {
                right: 50px;
            }

            50% {
                right: 35px;
            }

            100% {
                right: 50px;
            }
        }
    </style>
    <script src="js/prefixfree.min.js"></script>
</head>
<body>
 <div id="wrapper">
  <div id="content">
    <div id="card">
            <form id="form1" runat="server">

    <div id="front">

        <div id="top-pic"></div>
        <div id="info-box">
          <div class="info">
            <h1>
                <asp:Label ID="lblTitle" runat="server" Text="پرداخت"></asp:Label></h1>
              <br />
             <asp:Label ID="lblDesc" runat="server" Text="" ForeColor="white" Font-Size="XX-Small"   ></asp:Label>

          </div>
        </div>
        <div id="social-bar">
                          <center>
                  <a href="index.html">
                      <i class="fa fa-home"></i>
                  </a>
                  <!--<br />
                  <a href="https://Zarinp.al/243606">
                      پرداخت از طریق زرین لینک
                  </a>-->

              </center>

            </div>
      </div>
          </form>         
      <div  id="back">
          <div class="back-info" style="direction:rtl ; text-align:right ">
              

              <br />
          </div>
          <div id="social-bar">


              <a href="javascript:void" class="more-info">
                  <i class="fa fa-undo"></i>
              </a>
          </div>
      </div>
    </div>
    <div id="background">
      <div id="background-image"></div>
    </div>
  </div>
</div>
  <script src='js/jquery.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>
