API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Mar 22nd, 2019
215
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.72 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.   <style type="text/css">
  7.     .gm-style .gm-style-mtc label,
  8.     .gm-style .gm-style-mtc div {
  9.       font-weight: 400
  10.     }
  11.   </style>
  12.   <style type="text/css">
  13.     .gm-control-active img {
  14.       box-sizing: content-box;
  15.       pointer-events: none
  16.     }
  17.  
  18.     .gm-control-active:hover img:nth-child(1),
  19.     .gm-control-active:active img:nth-child(1),
  20.     .gm-control-active:active img:nth-child(2) {
  21.       display: none
  22.     }
  23.   </style>
  24.   <link type="text/css" rel="stylesheet" href="theme/css.css">
  25.   <style type="text/css">
  26.     .gm-ui-hover-effect {
  27.       opacity: .7
  28.     }
  29.  
  30.     .gm-ui-hover-effect:hover {
  31.       opacity: 1
  32.     }
  33.   </style>
  34.   <style type="text/css">
  35.     .gm-style .gm-style-cc span,
  36.     .gm-style .gm-style-cc a,
  37.     .gm-style .gm-style-mtc div {
  38.       font-size: 10px;
  39.       box-sizing: border-box
  40.     }
  41.   </style>
  42.   <style type="text/css">
  43.     @media print {
  44.       .gm-style .gmnoprint,
  45.       .gmnoprint {
  46.         display: none
  47.       }
  48.     }
  49.  
  50.     @media screen {
  51.       .gm-style .gmnoscreen,
  52.       .gmnoscreen {
  53.         display: none
  54.       }
  55.     }
  56.   </style>
  57.   <style type="text/css">
  58.     .gm-style-pbc {
  59.       transition: opacity ease-in-out;
  60.       background-color: rgba(0, 0, 0, 0.45);
  61.       text-align: center
  62.     }
  63.  
  64.     .gm-style-pbt {
  65.       font-size: 22px;
  66.       color: white;
  67.       font-family: Roboto, Arial, sans-serif;
  68.       position: relative;
  69.       margin: 0;
  70.       top: 50%;
  71.       -webkit-transform: translateY(-50%);
  72.       -ms-transform: translateY(-50%);
  73.       transform: translateY(-50%)
  74.     }
  75.   </style>
  76.   <!-- Theme Made By www.w3schools.com - No Copyright -->
  77.   <title>Digicoin Transaction Page</title>
  78.  
  79.   <meta name="viewport" content="width=device-width, initial-scale=1">
  80.   <link rel="stylesheet" href="theme/bootstrap.min.css">
  81.   <link href="theme/css_1.css" rel="stylesheet" type="text/css">
  82.   <link href="theme/css_2.css" rel="stylesheet" type="text/css">
  83.   <script src="theme/jquery.min.js"></script>
  84.   <script src="theme/bootstrap.min.js"></script>
  85.   <style>
  86.     body {
  87.       font: 400 15px Lato, sans-serif;
  88.       line-height: 1.8;
  89.       color: #818181;
  90.     }
  91.  
  92.     h2 {
  93.       font-size: 24px;
  94.       text-transform: uppercase;
  95.       color: #303030;
  96.       font-weight: 600;
  97.       margin-bottom: 30px;
  98.     }
  99.  
  100.     h4 {
  101.       font-size: 19px;
  102.       line-height: 1.375em;
  103.       color: #303030;
  104.       font-weight: 400;
  105.       margin-bottom: 30px;
  106.     }
  107.  
  108.     .jumbotron {
  109.       background-color: #f4511e;
  110.       color: #fff;
  111.       padding: 100px 25px;
  112.       font-family: Montserrat, sans-serif;
  113.     }
  114.  
  115.     .container-fluid {
  116.       padding: 60px 50px;
  117.     }
  118.  
  119.     .bg-grey {
  120.       background-color: #f6f6f6;
  121.     }
  122.  
  123.     .logo-small {
  124.       color: #f4511e;
  125.       font-size: 50px;
  126.     }
  127.  
  128.     .logo {
  129.       color: #f4511e;
  130.       font-size: 200px;
  131.     }
  132.  
  133.     .thumbnail {
  134.       padding: 0 0 15px 0;
  135.       border: none;
  136.       border-radius: 0;
  137.     }
  138.  
  139.     .thumbnail img {
  140.       width: 100%;
  141.       height: 100%;
  142.       margin-bottom: 10px;
  143.     }
  144.  
  145.     .carousel-control.right,
  146.     .carousel-control.left {
  147.       background-image: none;
  148.       color: #f4511e;
  149.     }
  150.  
  151.     .carousel-indicators li {
  152.       border-color: #f4511e;
  153.     }
  154.  
  155.     .carousel-indicators li.active {
  156.       background-color: #f4511e;
  157.     }
  158.  
  159.     .item h4 {
  160.       font-size: 19px;
  161.       line-height: 1.375em;
  162.       font-weight: 400;
  163.       font-style: italic;
  164.       margin: 70px 0;
  165.     }
  166.  
  167.     .item span {
  168.       font-style: normal;
  169.     }
  170.  
  171.     .panel {
  172.       border: 1px solid #f4511e;
  173.       border-radius: 0 !important;
  174.       transition: box-shadow 0.5s;
  175.     }
  176.  
  177.     .panel:hover {
  178.       box-shadow: 5px 0px 40px rgba(0, 0, 0, .2);
  179.     }
  180.  
  181.     .panel-footer .btn:hover {
  182.       border: 1px solid #f4511e;
  183.       background-color: #fff !important;
  184.       color: #f4511e;
  185.     }
  186.  
  187.     .panel-heading {
  188.       color: #fff !important;
  189.       background-color: #f4511e !important;
  190.       padding: 25px;
  191.       border-bottom: 1px solid transparent;
  192.       border-top-left-radius: 0px;
  193.       border-top-right-radius: 0px;
  194.       border-bottom-left-radius: 0px;
  195.       border-bottom-right-radius: 0px;
  196.     }
  197.  
  198.     .panel-footer {
  199.       background-color: white !important;
  200.     }
  201.  
  202.     .panel-footer h3 {
  203.       font-size: 32px;
  204.     }
  205.  
  206.     .panel-footer h4 {
  207.       color: #aaa;
  208.       font-size: 14px;
  209.     }
  210.  
  211.     .panel-footer .btn {
  212.       margin: 15px 0;
  213.       background-color: #f4511e;
  214.       color: #fff;
  215.     }
  216.  
  217.     .navbar {
  218.       margin-bottom: 0;
  219.       background-color: #f4511e;
  220.       z-index: 9999;
  221.       border: 0;
  222.       font-size: 12px !important;
  223.       line-height: 1.42857143 !important;
  224.       letter-spacing: 4px;
  225.       border-radius: 0;
  226.       font-family: Montserrat, sans-serif;
  227.     }
  228.  
  229.     .navbar li a,
  230.     .navbar .navbar-brand {
  231.       color: #fff !important;
  232.     }
  233.  
  234.     .navbar-nav li a:hover,
  235.     .navbar-nav li.active a {
  236.       color: #f4511e !important;
  237.       background-color: #fff !important;
  238.     }
  239.  
  240.     .navbar-default .navbar-toggle {
  241.       border-color: transparent;
  242.       color: #fff !important;
  243.     }
  244.  
  245.     footer .glyphicon {
  246.       font-size: 20px;
  247.       margin-bottom: 20px;
  248.       color: #f4511e;
  249.     }
  250.  
  251.     .slideanim {
  252.       visibility: hidden;
  253.     }
  254.  
  255.     .slide {
  256.       animation-name: slide;
  257.       -webkit-animation-name: slide;
  258.       animation-duration: 1s;
  259.       -webkit-animation-duration: 1s;
  260.       visibility: visible;
  261.     }
  262.  
  263.     @keyframes slide {
  264.       0% {
  265.         opacity: 0;
  266.         transform: translateY(70%);
  267.       }
  268.       100% {
  269.         opacity: 1;
  270.         transform: translateY(0%);
  271.       }
  272.     }
  273.  
  274.     @-webkit-keyframes slide {
  275.       0% {
  276.         opacity: 0;
  277.         -webkit-transform: translateY(70%);
  278.       }
  279.       100% {
  280.         opacity: 1;
  281.         -webkit-transform: translateY(0%);
  282.       }
  283.     }
  284.  
  285.     @media screen and (max-width: 768px) {
  286.       .col-sm-4 {
  287.         text-align: center;
  288.         margin: 25px 0;
  289.       }
  290.       .btn-lg {
  291.         width: 100%;
  292.         margin-bottom: 35px;
  293.       }
  294.     }
  295.  
  296.     @media screen and (max-width: 480px) {
  297.       .logo {
  298.         font-size: 150px;
  299.       }
  300.     }
  301.   </style>
  302.   <style type="text/css">
  303.     .gm-style {
  304.       font: 400 11px Roboto, Arial, sans-serif;
  305.       text-decoration: none;
  306.     }
  307.  
  308.     .gm-style img {
  309.       max-width: none;
  310.     }
  311.   </style>
  312. </head>
  313.  
  314. <body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
  315.  
  316.   <nav class="navbar navbar-default navbar-fixed-top">
  317.     <div class="container">
  318.       <div class="navbar-header">
  319.         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
  320.         <span class="icon-bar"></span>
  321.         <span class="icon-bar"></span>
  322.         <span class="icon-bar"></span>                        
  323.       </button>
  324.         <a class="navbar-brand" href="#myPage">DIGICOIN</a>
  325.       </div>
  326.       <div class="collapse navbar-collapse" id="myNavbar">
  327.         <ul class="nav navbar-nav navbar-right">
  328.           <li class=""><a href="#transfer">TRANSFER</a></li>
  329.           <li class=""><a href="#transpool">TRANSACTION POOL</a></li>
  330.           <li class=""><a href="#mine">MINE</a></li>
  331.           <li class=""><a href="#blockchain">BLOCKCHAIN</a></li>
  332.           <li class=""><a href="#contact">CONTACT</a></li>
  333.         </ul>
  334.       </div>
  335.     </div>
  336.   </nav>
  337.  
  338.   <div class="jumbotron text-center">
  339.     <h1>Welcome to Digicoin</h1>
  340.     <p>Digicoin is a blockchain powered safe currency</p>
  341.   </div>
  342.  
  343.   <!-- Container (transfer Section) -->
  344.   <div id="transfer" class="container-fluid">
  345.     <div class="row">
  346.       <div class="col-sm-8">
  347.         <h2>Transfer Digicoins</h2><br>
  348.         <div class="row">
  349.           <div class="col-sm-5">
  350.             <p>Transfer From</p>
  351.             <p style="padding-top: 12px">Transfer To</p>
  352.             <!-- <p style="padding-top: 100px">Transfer Amount</p> -->
  353.           </div>
  354.           <div class="col-sm-7 slideanim slide">
  355.             <div class="row">
  356.               <div class="col-sm-6 form-group">
  357.                 <input class="form-control" id="username" name="name" placeholder="Name" type="text" disabled>
  358.               </div>
  359.             </div>
  360.             <div class="row">
  361.               <div class="col-sm-6 form-group">
  362.                 <select id="publickey" class="form-control">
  363.                       <option value="Select">Select</option>
  364.                       <option value="http://localhost:3001">Sunny</option>
  365.                       <option value="http://localhost:3002">Sreetej</option>
  366.                       <option value="http://localhost:3003">Taran</option>
  367.                        <option value="http://localhost:3004">Akhil</option>
  368.                   </select>
  369.  
  370.               </div>
  371.  
  372.             </div>
  373.             <div class="row">
  374.               <div class="form-group">
  375.                 <textarea class="form-control" id="publickeyspan" name="comments" placeholder="public-key" rows="3" style="margin-left: 15px"
  376.                  disabled></textarea>
  377.               </div>
  378.             </div>
  379.             <div class="row">
  380.               <div class="col-sm-6 form-group">
  381.                 <!-- <input class="form-control" id="noofcoins" name="noofcoins" placeholder="Amount" type="number"> -->
  382.               </div>
  383.             </div>
  384.           </div>
  385.         </div>
  386.  
  387.         <br><button class="btn btn-default btn-lg" id="transact">Vote</button>
  388.       </div>
  389.       <div class="col-sm-4">
  390.         <span class="glyphicon glyphicon-send logo" style="padding-top: 100px;padding-left: 70px;"></span>
  391.       </div>
  392.     </div>
  393.   </div>
  394.  
  395.   <div id="transpool" class="container-fluid bg-grey">
  396.     <h2 class="text-center" style="margin-top: -5px">Transaction Pool</h2>
  397.  
  398.     <div class="row">
  399.       <div class="col-sm-2">
  400.         <span class="glyphicon glyphicon-th-list logo slideanim slide"></span>
  401.       </div>
  402.       <div class="col-sm-10">
  403.         <h4>Click &nbsp;<button class="btn btn-default btn-lg" id="reftransact">Refresh</button>&nbsp; to view latest <strong>Transaction Pool</strong></h4>
  404.         <pre id="transactionDiv">dfafdaf</pre>
  405.       </div>
  406.     </div>
  407.   </div>
  408.  
  409.   <!-- Container (Portfolio Section) -->
  410.   <div id="mine" class="container-fluid">
  411.     <h2 class="text-center" style="margin-top: -5px">Mine</h2><br>
  412.     <h4 class="text-center" style="margin-top: -40px">Mine all transactions</h4>
  413.     <div class="row">
  414.       <div class="col-sm-10">
  415.         <h4>Click &nbsp;<button class="btn btn-default btn-lg" id="minetransact">Start Mining</button>&nbsp; to mine all transactions
  416.           in the <strong>Transaction Pool</strong></h4>
  417.       </div>
  418.       <div class="col-sm-2">
  419.         <span class="glyphicon glyphicon-cog logo slideanim slide" style="margin-top:-50px"></span>
  420.       </div>
  421.     </div>
  422.   </div>
  423.  
  424.   <!-- Container (Pricing Section) -->
  425.   <div id="blockchain" class="container-fluid bg-grey">
  426.     <div class="text-center">
  427.       <h2>Blockchain</h2>
  428.       <h4 style="margin-top: -20px">Digital Ledger of all transactions</h4>
  429.     </div>
  430.     <div class="row">
  431.       <div class="col-sm-2">
  432.         <span class="glyphicon glyphicon-th logo slideanim slide" style="margin-top:-50px"></span>
  433.       </div>
  434.       <div class="col-sm-10">
  435.         <h4>Click &nbsp;<button class="btn btn-default btn-lg" id="refblockchain">Refresh Blockchain</button>&nbsp; to view the
  436.           <strong>Blockchain</strong></h4>
  437.         <pre id="blockchaindiv"></pre>
  438.       </div>
  439.  
  440.     </div>
  441.   </div>
  442.  
  443.   <!-- Container (Contact Section) -->
  444.   <div id="contact" class="container-fluid">
  445.     <h2 class="text-center">CONTACT</h2>
  446.     <div class="row">
  447.       <div class="col-sm-5">
  448.         <p>Contact us and we'll get back to you within 24 hours.</p>
  449.         <p><span class="glyphicon glyphicon-map-marker"></span> Hyderabad, India</p>
  450.         <p><span class="glyphicon glyphicon-phone"></span> +91 99082 35656</p>
  451.         <p><span class="glyphicon glyphicon-envelope"></span> sandeepsinghrathod@gmail.com</p>
  452.       </div>
  453.       <div class="col-sm-7 slideanim slide">
  454.         <div class="row">
  455.           <div class="col-sm-6 form-group">
  456.             <input class="form-control" id="name" name="name" placeholder="Name" type="text" required="">
  457.           </div>
  458.           <div class="col-sm-6 form-group">
  459.             <input class="form-control" id="email" name="email" placeholder="Email" type="email" required="">
  460.           </div>
  461.         </div>
  462.         <textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br>
  463.         <div class="row">
  464.           <div class="col-sm-12 form-group">
  465.             <button class="btn btn-default pull-right" type="submit">Send</button>
  466.           </div>
  467.         </div>
  468.       </div>
  469.     </div>
  470.   </div>
  471.  
  472.  
  473.   <footer class="container-fluid text-center">
  474.     <a href="#myPage" title="To Top">
  475.     <span class="glyphicon glyphicon-chevron-up"></span>
  476.   </a>
  477.   </footer>
  478.  
  479.   <script>
  480.     var userNameArray = {
  481.       "3001": "Sunny",
  482.       "3002": "Sreetej",
  483.       "3003": "Taran"
  484.     };
  485.     $(document).ready(function () {
  486.  
  487.       $("#username").val(userNameArray[document.location.port]);
  488.  
  489.       $("#publickey").change(function () {
  490.         var urlPubKey = $("#publickey option:selected").val()
  491.  
  492.         if (urlPubKey !== "Select") {
  493.           $.get(urlPubKey + "/public-key", function (data, status) {
  494.             $("#publickeyspan").val(data.publicKey);
  495.           });
  496.         } else {
  497.           $("#publickeyspan").val('');
  498.         }
  499.       })
  500.  
  501.       $("#reftransact").click(function () {
  502.         $.get("/transaction", function (data, status) {
  503.           $("#transactionDiv").html(JSON.stringify(data, null, 4));
  504.         });
  505.       });
  506.  
  507.       $("#transact").click(function () {
  508.         var transactObj = {};
  509.         transactObj.recipient = $("#publickeyspan").val();
  510.         // transactObj.amount = parseInt($("#noofcoins").val());
  511.         transactObj.amount = 1;
  512.  
  513.         //alert(JSON.stringify(transactObj));
  514.  
  515.         var settings = {
  516.           "async": true,
  517.           "crossDomain": true,
  518.           "url": "/transact",
  519.           "method": "POST",
  520.           "headers": {
  521.             "Content-Type": "application/json",
  522.             "Cache-Control": "no-cache",
  523.           },
  524.           "processData": false,
  525.           "data": JSON.stringify(transactObj)
  526.         }
  527.  
  528.         $.ajax(settings).done(function (response) {
  529.           $("#transactionDiv").html(JSON.stringify(response, null, 4));
  530.           scrollToAnchor("transpool");
  531.         });
  532.  
  533.       });
  534.  
  535.  
  536.       $("#refblockchain").click(function () {
  537.         $.get("/block", function (data, status) {
  538.           $("#blockchaindiv").html(JSON.stringify(data, null, 4));
  539.         });
  540.       });
  541.  
  542.       $("#minetransact").click(function () {
  543.         $.get("/mine-transactions", function (data, status) {
  544.           $("#blockchaindiv").html(JSON.stringify(data, null, 4));
  545.           scrollToAnchor("blockchain");
  546.         });
  547.       });
  548.  
  549.  
  550.       function scrollToAnchor(aid) {
  551.         var aTag = $("div[id='" + aid + "']");
  552.         $('html,body').animate({
  553.           scrollTop: aTag.offset().top
  554.         }, 'slow');
  555.       }
  556.  
  557.       // Add smooth scrolling to all links in navbar + footer link
  558.       $(".navbar a, footer a[href='#myPage']").on('click', function (event) {
  559.  
  560.         // Prevent default anchor click behavior
  561.         event.preventDefault();
  562.  
  563.         // Store hash
  564.         var hash = this.hash;
  565.  
  566.         // Using jQuery's animate() method to add smooth page scroll
  567.         // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
  568.         $('html, body').animate({
  569.           scrollTop: $(hash).offset().top
  570.         }, 900, function () {
  571.  
  572.           // Add hash (#) to URL when done scrolling (default click behavior)
  573.           window.location.hash = hash;
  574.         });
  575.       });
  576.  
  577.       // Slide in elements on scroll
  578.       $(window).scroll(function () {
  579.         $(".slideanim").each(function () {
  580.           var pos = $(this).offset().top;
  581.  
  582.           var winTop = $(window).scrollTop();
  583.           if (pos < winTop + 600) {
  584.            $(this).addClass("slide");
  585.          }
  586.        });
  587.      });
  588.  
  589.  
  590.    })
  591.  </script>
  592.  
  593.  
  594.  
  595. </body>
  596.  
  597. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!