Guest User

Untitled

a guest
Dec 12th, 2017
46
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.25 KB | None | 0 0
  1. <html>
  2. <head>
  3.   <meta charset="utf-8">
  4.   <meta name="viewport" content="width=device-width, initial-scale=1">
  5.   <link rel="stylesheet" href="assets/css/style.css">
  6.   <!--<link href='https://fonts.googleapis.com/css?family=Raleway:400,500,400italic,300,700,600' rel='stylesheet' type='text/css'>-->
  7.   <link href='https://fonts.googleapis.com/css?family=Josefin+Sans:400,600,400italic,700,300'
  8.        rel='stylesheet'
  9.        type='text/css'>
  10.   <link rel="stylesheet"
  11.        href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  12.   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  13.   <link rel="stylesheet" href="/resources/demos/style.css">
  14. </head>
  15.  
  16. <body>
  17. <header>
  18.   <div class="logo">Supreme</div>
  19.   <div class="title">cop'fast</div>
  20. </header>
  21.  
  22. <div id="tabs">
  23.   <ul>
  24.     <li><a href="#tabs-1">Settings</a></li>
  25.     <li><a href="#tabs-2">Personnal informations</a></li>
  26.   </ul>
  27. <div id="tabs-1">
  28.   <div class="card has-header">
  29.     <div class="header flex-container">
  30.       <div>Settings</div>
  31.     </div>
  32.  
  33.     <div class="flex-container" id="settings">
  34.       <div class="flex-item" style="margin-right: 0px;">
  35.         <div class="toggle" id="toggle-autocheckout">
  36.           <div class="toggle-label">Auto checkout</div>
  37.           <div>
  38.             <span class="toggle-text toggle-true">ON</span>
  39.             <span class="toggle-text toggle-false">OFF</span>
  40.           </div>
  41.         </div>
  42.       </div>
  43.  
  44.       <div class="flex-item" style="margin-left: 5px">
  45.         <div class="toggle" id="toggle-atc">
  46.           <div class="toggle-label">Auto ATC</div>
  47.           <div>
  48.             <span class="toggle-text toggle-true">ON</span>
  49.             <span class="toggle-text toggle-false">OFF</span>
  50.           </div>
  51.         </div>
  52.       </div>
  53.  
  54.       <div class="flex-item" style="margin-left: 5px;">
  55.         <div class="toggle" id="toggle-images">
  56.           <div class="toggle-label">Show images</div>
  57.           <div>
  58.             <span class="toggle-text toggle-true">ON</span>
  59.             <span class="toggle-text toggle-false">OFF</span>
  60.           </div>
  61.         </div>
  62.       </div>
  63.  
  64.       <div class="warning" id="checkout-warning">
  65.         <div class="text-warning">Warning</div>
  66.         <div>
  67.           <b>Auto checkout</b> is set to <em>on</em>, it will
  68.           automatically fill the checkout page with your informations
  69.           and try to pay when you visit it.<br>
  70.           We are not responsible for any accidental purchase.<br>
  71.           Be sure to set auto checkout to <em>off</em> when you don't need
  72.           it.
  73.         </div>
  74.       </div>
  75.     <div class="flex-container-row" style="margin: 0px 5px 0px 5px">
  76.       <div class="flex-item" style="margin-top: 10px; min-width: 100%">
  77.         <label class="field-label" for="cart-limit">Cart limit</label>
  78.         <select id="cart-limit" style="width: 100%">
  79.           <option value=""></option>
  80.           <option value="1">1</option>
  81.           <option value="2">2</option>
  82.           <option value="3">3</option>
  83.           <option value="4">4</option>
  84.           <option value="5">5</option>
  85.           <option value="6">6</option>
  86.         </select>
  87.       </div>
  88.     </div>
  89.     <div class="flex-container-row" style="margin: 0px 5px 0px 5px">
  90.       <div class="flex-item" style="margin-top: 10px; min-width: 100%">
  91.         <label class="field-label" for="checkout-delay">Checkout delay</label>
  92.         <select id="checkout-delay" style="width: 100%">
  93.           <option value=""></option>
  94.           <option value="1">1</option>
  95.           <option value="2">2</option>
  96.           <option value="3">3</option>
  97.           <option value="4">4</option>
  98.           <option value="5">5</option>
  99.           <option value="6">6</option>
  100.         </select>
  101.       </div>
  102.     </div> <!-- #settings.flex-container -->
  103.   </div>
  104.  
  105.           <!--<button class="btn-primary" id="save-cart-limit"
  106.                style=   "margin-left: 5px">Save
  107.        </button> -->
  108.         <!-- <button class="btn-primary" id="save-checkout-time"
  109.          style=   "margin-left: 5px">Save
  110.        </button> -->
  111.  
  112.   <div class="card has-header" id="keywords-finder">
  113.     <div class="header flex-container">
  114.       <div>Keywords finder</div>
  115.     </div>
  116.     <div class="flex-container flex-row">
  117.       <div class="flex-item field-label">type</div>
  118.       <div class="flex-item field-label">keywords</div>
  119.       <div class="flex-item field-label">color</div>
  120.       <div class="flex-item field-label">size</div>
  121.     </div>
  122.     <div id="wishlist"></div>
  123.   </div>
  124. </div>
  125. </div> <!-- end of settings tab -->
  126.  
  127. <div id="tabs-2">
  128.   <div class="card has-header" id="usr-size">
  129.     <div class="header flex-container">
  130.       <div>Your sizes</div>
  131.       <div class="header-btn">
  132.         <button class="btn-primary" id="edit-size-btn">Edit</button>
  133.       </div>
  134.     </div>
  135.  
  136.     <div class="flex-container">
  137.       <div class="flex-item">
  138.         <div>
  139.           <div class="field-label">Tops</div>
  140.           <div class="field-value" id="usr-top-size"></div>
  141.         </div>
  142.         <div>
  143.           <div class="field-label">Pants (small, medium..)</div>
  144.           <div class="field-value" id="usr-pants-size-text"></div>
  145.         </div>
  146.         <div>
  147.           <div class="field-label">Pants (32, 34..)</div>
  148.           <div class="field-value" id="usr-pants-size-num"></div>
  149.         </div>
  150.       </div>
  151.  
  152.       <div class="flex-item">
  153.         <div>
  154.           <div class="field-label">Shoes (UK size)</div>
  155.           <div class="field-value" id="usr-shoes-size"></div>
  156.         </div>
  157.         <div>
  158.           <div class="field-label">Hats</div>
  159.           <div class="field-value" id="usr-hats-size"></div>
  160.         </div>
  161.         <div>
  162.           <div class="field-label">Accessories</div>
  163.           <div class="field-value" id="usr-accessories-size"></div>
  164.         </div>
  165.       </div>
  166.     </div>
  167.   </div>
  168.  
  169.   <div class="card has-header hidden" id="edit-size">
  170.     <div class="header flex-container">
  171.       <div>Your sizes</div>
  172.       <div class="header-btn">
  173.         <button class="btn-primary" id="save-size">Save</button>
  174.       </div>
  175.     </div>
  176.  
  177.     <div class="flex-container">
  178.       <div class="flex-item">
  179.         <label for="top-size">Tops</label>
  180.         <select name="top-size" id="top-size">
  181.           <option value=""></option>
  182.           <option value="small">Small</option>
  183.           <option value="medium">Medium</option>
  184.           <option value="large">Large</option>
  185.           <option value="xlarge">XLarge</option>
  186.           <option value="xxlarge">XXLarge</option>
  187.         </select>
  188.  
  189.         <label for="pants-size-text">Pants (small, medium..)</label>
  190.         <select name="pants-size-text" id="pants-size-text">
  191.           <option value=""></option>
  192.           <option value="small">small</option>
  193.           <option value="medium">medium</option>
  194.           <option value="large">large</option>
  195.           <option value="xlarge">xlarge</option>
  196.           <option value="xxlarge">xxlarge</option>
  197.         </select>
  198.  
  199.         <label for="pants-size-num">Pants (32, 34, 36..)</label>
  200.         <select name="pants-size-num" id="pants-size-num">
  201.           <option value=""></option>
  202.           <option value="32">32</option>
  203.           <option value="34">34</option>
  204.           <option value="36">36</option>
  205.           <option value="38">38</option>
  206.           <option value="40">40</option>
  207.           <option value="42">42</option>
  208.           <option value="44">44</option>
  209.         </select>
  210.  
  211.       </div>
  212.       <div class="flex-item">
  213.         <label for="shoes-size">Shoes (UK size)</label>
  214.         <select name="shoes-size" id="shoes-size">
  215.           <option value=""></option>
  216.           <option value="6">6</option>
  217.           <option value="6.5">6.5</option>
  218.           <option value="7">7</option>
  219.           <option value="7.5">7.5</option>
  220.           <option value="8">8</option>
  221.           <option value="8.5">8.5</option>
  222.           <option value="9">9</option>
  223.           <option value="9.5">9.5</option>
  224.           <option value="10">10</option>
  225.         </select>
  226.  
  227.         <label for="hats-size">Hats</label>
  228.         <select name="hats-size" id="hats-size">
  229.           <option value=""></option>
  230.           <option value="small">Small</option>
  231.           <option value="medium">Medium</option>
  232.           <option value="large">Large</option>
  233.           <option value="xlarge">XLarge</option>
  234.           <option value="xxlarge">XXLarge</option>
  235.         </select>
  236.  
  237.         <label for="accessories-size">Accessories</label>
  238.         <select name="accessories-size" id="accessories-size">
  239.           <option value=""></option>
  240.           <option value="small">Small</option>
  241.           <option value="medium">Medium</option>
  242.           <option value="large">Large</option>
  243.           <option value="xlarge">XLarge</option>
  244.           <option value="xxlarge">XXLarge</option>
  245.         </select>
  246.       </div>
  247.     </div>
  248.   </div>
  249.  
  250.   <div class="card has-header" id="usr-infos">
  251.     <div class="header flex-container">
  252.       <div class="flex-item">Billing/Shipping information</div>
  253.       <div class="flex-item">Credit card information</div>
  254.       <div class="header-btn">
  255.         <button class="btn-primary" id="edit-usr-btn">Edit</button>
  256.       </div>
  257.     </div>
  258.     <div class="flex-container">
  259.       <div class="flex-item">
  260.         <div>
  261.           <div class="field-label">Order billing name</div>
  262.           <div class="field-value" id="usr-order_billing_name"></div>
  263.         </div>
  264.         <div>
  265.           <div class="field-label">e-mail</div>
  266.           <div class="field-value" id="usr-order_email"></div>
  267.         </div>
  268.         <div>
  269.           <div class="field-label">Tel</div>
  270.           <div class="field-value" id="usr-order_tel"></div>
  271.         </div>
  272.         <div>
  273.           <div class="field-label">Address</div>
  274.           <div class="field-value" id="usr-bo"></div>
  275.         </div>
  276.         <div>
  277.           <div class="field-label">Address2</div>
  278.           <div class="field-value" id="usr-oba3"></div>
  279.         </div>
  280.         <div>
  281.           <div class="field-label">Address 3</div>
  282.           <div class="field-value" id="usr-order_billing_address_3"></div>
  283.         </div>
  284.         <div>
  285.           <div class="field-label">City</div>
  286.           <div class="field-value" id="usr-order_billing_city"></div>
  287.         </div>
  288.         <div>
  289.           <div class="field-label">Zipcode</div>
  290.           <div class="field-value" id="usr-order_billing_zip"></div>
  291.         </div>
  292.         <div>
  293.           <div class="field-label">Country</div>
  294.           <div class="field-value" id="usr-order_billing_country"></div>
  295.         </div>
  296.       </div>
  297.  
  298.       <div class="flex-item">
  299.         <div>
  300.           <div class="field-label">Credit card type</div>
  301.           <div class="field-value" id="usr-credit_card_type"></div>
  302.         </div>
  303.         <div class="cc-infos">
  304.           <div>
  305.             <div class="field-label">Credit card number</div>
  306.             <div class="field-value" id="usr-cnb"></div>
  307.           </div>
  308.           <div>
  309.             <div class="field-label">Credit card month</div>
  310.             <div class="field-value" id="usr-credit_card_month"></div>
  311.           </div>
  312.           <div>
  313.             <div class="field-label">Credit card year</div>
  314.             <div class="field-value" id="usr-credit_card_year"></div>
  315.           </div>
  316.           <div>
  317.             <div class="field-label">CVV</div>
  318.             <div class="field-value" id="usr-vval"></div>
  319.           </div>
  320.         </div>
  321.       </div> <!-- .flex-item -->
  322.  
  323.     </div> <!-- .flex-container -->
  324.  
  325.   </div>
  326.  
  327.   <div class="card has-header hidden" id="edit-usr-infos">
  328.     <div class="header flex-container">
  329.       <div class="flex-item">Billing/Shipping information</div>
  330.       <div class="flex-item">Credit card information</div>
  331.       <div class="header-btn">
  332.         <button class="btn-primary" id="save-usr-infos">Save</button>
  333.       </div>
  334.     </div>
  335.     <div class="flex-container">
  336.       <div class="flex-item">
  337.         <label for="order_billing_name"> Full name </label>
  338.         <input type="text" id="order_billing_name">
  339.  
  340.         <label for="order_email"> e-mail </label>
  341.         <input type="text" id="order_email">
  342.  
  343.         <label for="order_tel"> Tel </label>
  344.         <input type="text" id="order_tel">
  345.  
  346.         <label for="bo"> Address </label>
  347.         <input type="text" id="bo">
  348.  
  349.         <label for="oba3"> Address 2 </label>
  350.         <input type="text" id="oba3">
  351.  
  352.         <label for="order_billing_address_3"> Address 3 </label>
  353.         <input type="text" id="order_billing_address_3">
  354.  
  355.         <label for="order_billing_city"> City </label>
  356.         <input type="text" id="order_billing_city">
  357.  
  358.         <label for="order_billing_zip"> Postcode </label>
  359.         <input type="text" id="order_billing_zip">
  360.  
  361.         <label for="order_billing_country"> Country </label>
  362.         <select id="order_billing_country">
  363.           <option value=""></option>
  364.           <option value="UK">UK</option>
  365.           <option value="FR">FR</option>
  366.           <option value="CH">CH</option>
  367.         </select>
  368.       </div> <!-- .flex-item -->
  369.  
  370.       <div class="flex-item">
  371.         <label for="credit_card_type"> Type </label>
  372.         <select id="credit_card_type">
  373.           <option value=""></option>
  374.           <option value="visa">Visa</option>
  375.           <option value="master">Mastercard</option>
  376.           <option value="american_express">American Express</option>
  377.           <option value="paypal">Paypal</option>
  378.         </select>
  379.  
  380.         <div class="cc-infos">
  381.           <label for="cnb"> Number </label>
  382.           <input type="text" id="cnb">
  383.  
  384.           <label for="credit_card_month"> exp. date </label>
  385.           <select id="credit_card_month">
  386.             <option value=""></option>
  387.             <option value="01">01</option>
  388.             <option value="02">02</option>
  389.             <option value="03">03</option>
  390.             <option value="04">04</option>
  391.             <option value="05">05</option>
  392.             <option value="06">06</option>
  393.             <option value="07">07</option>
  394.             <option value="08">08</option>
  395.             <option value="09">09</option>
  396.             <option value="10">10</option>
  397.             <option value="11">11</option>
  398.             <option value="12">12</option>
  399.           </select>
  400.           <select id="credit_card_year">
  401.             <option value=""></option>
  402.             <option value="2016">2016</option>
  403.             <option value="2017">2017</option>
  404.             <option value="2018">2018</option>
  405.             <option value="2019">2019</option>
  406.             <option value="2020">2020</option>
  407.             <option value="2021">2021</option>
  408.             <option value="2022">2022</option>
  409.           </select>
  410.  
  411.           <label for="vval"> CVV </label>
  412.           <input type="text" id="vval">
  413.         </div>
  414.  
  415.       </div> <!-- .flex-item -->
  416.  
  417.     </div> <!-- .flex-container -->
  418.  
  419.   </div> <!-- #edit-usr-infos -->
  420.  
  421. </div> <!-- end of personnal informations tabs -->
  422.  
  423. </div> <!-- end of tabs -->
  424.  
  425. <footer>
  426.   <span class="fa fa-copyright"></span> cop'fast - 2016-2018
  427. </footer>
  428.  
  429. <script src="./inject/jquery-1.12.4.js"></script>
  430. <script src="./inject/jquery-ui.js"></script>
  431. <script src="./usrInfos.js"></script>
  432.  
  433. </body>
  434.  
  435. </html>
Add Comment
Please, Sign In to add comment