Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8" />
- <title><?= $title ?></title>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta charset utf="8">
- <link rel="shortcut icon" href="images/wifi-symbol.png" type="image/x-icon">
- <link rel="icon" href="images/wifi-symbol.png" type="image/x-icon">
- <link rel="stylesheet" href="css/insertcoin.css" media="screen">
- <link href="css/bootstrap4.min.css" rel="stylesheet">
- <link href="css/animate.min.css" rel="stylesheet">
- <link href="css/toastr.min.css" rel="stylesheet">
- <!--<link href="css/style.min.css" rel="stylesheet">-->
- <link rel="stylesheet" href="css/font-awesome.min.css">
- <script src="js/jquery.min.js"></script>
- <script src="js/apps.min.js"></script>
- <style>
- body {
- background-color: #cfedfc !important;
- background-image: url("images/bg.jpg");
- background-size: cover;
- background-position: center center;
- margin:auto;
- text-align: center;
- }
- .vertical-form {
- padding-left:15px;
- padding-right:15px;
- }
- a {color:#428bca !important;}
- a:hover{
- text-decoration: none !important;
- }
- .button-rnd {
- min-width: 300px !important;
- max-width: 300px !important;
- }
- .button-rnd:hover{
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
- }
- .footer {
- font-size:90%;
- color:#748c8a;
- }
- .footer a{
- margin-left:3px;
- }
- .button-animate {
- -webkit-animation: glowing 1500ms infinite;
- -moz-animation: glowing 1500ms infinite;
- -o-animation: glowing 1500ms infinite;
- animation: glowing 1500ms infinite;
- }
- @-webkit-keyframes glowing {
- 0% { box-shadow: 0 0 3px #80c780; background-color: #4cae4c;}
- 50% { box-shadow: 0 0 40px #6ec06e; background-color: #449d44; }
- 100% { box-shadow: 0 0 3px #5cb85c; background-color: #4cae4c;}
- }
- @-moz-keyframes glowing {
- 0% { box-shadow: 0 0 3px #80c780; background-color: #4cae4c;}
- 50% { box-shadow: 0 0 40px #6ec06e; background-color: #449d44; }
- 100% { box-shadow: 0 0 3px #5cb85c; background-color: #4cae4c;}
- }
- @-o-keyframes glowing {
- 0% { box-shadow: 0 0 3px #80c780; background-color: #4cae4c;}
- 50% { box-shadow: 0 0 40px #6ec06e; background-color: #449d44; }
- 100% { box-shadow: 0 0 3px #5cb85c; background-color: #4cae4c;}
- }
- @keyframes glowing {
- 0% { box-shadow: 0 0 3px #80c780; background-color: #4cae4c;}
- 50% { box-shadow: 0 0 40px #6ec06e; background-color: #449d44; }
- 100% { box-shadow: 0 0 3px #5cb85c; background-color: #4cae4c;}
- }
- .modal {
- z-index:99999;
- }
- .modal-dialog{
- overflow-y: initial !important
- }
- .modal-body{
- height: 250px;
- overflow-y: auto;
- }
- .visible {
- visibility: visible;
- }
- .invisible {
- visibility: hidden;
- }
- </style>
- </head>
- <body class='insertcoin'>
- <div class="vertical-form">
- <div style="margin:0;padding:0;display:inline"></div>
- <legend>
- <!--START animated coin slot-->
- <div style="background-image: url('images/coin-slot.png');width:220px;height: 220px;background-size:cover;padding:0px;margin:auto">
- <img src="images/coinslot-coins-only.gif" width="220px" />
- </div>
- <!--END animated coin slot-->
- </legend>
- <!--Toast-->
- <div align="center">
- <p> TOTAL AMOUNT :
- <span id="tamount">0.00 <br> </p>
- <p> <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-clock-o"></i><span id="ttime"> --</button> <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-usb"></i><span id="tcharging"> --</button>
- <div class="progress progress-rounded progress-lg progress-striped active">
- <div id="progressBar" class="progress-bar progress-bar-danger" style="width:70%"></div>
- </div>
- <div id="progress-msg" class="text-center text-white" style="margin-top:-25px;"> </div>
- <div style="clear: both; height:60px;"></div>
- <div id="transcoins">
- </div>
- <div class="vertical-form">
- <div style="margin:0;padding:0;display:inline"></div>
- <form action="<?= $done?>" method="post">
- <button style="font-size: 150%;margin-bottom:25px;font-weight: normal;padding:10px;border-radius:15px;"<button type="submit" name="transmode" value="coin" class="btn btn-primary btn-sm button-animate <?= (!$buytimezxc) ? 'invisible' : 'visible' ?>"><i class="fa fa-clock-o"></i>Start Internet</button>
- <?= ($getChargeRemaing < 0) ? '<button style="font-size: 150%;margin-bottom:25px;font-weight: normal;padding:10px;border-radius:15px;"<button type="button" data-toggle="modal" data-target="#exampleModal" class="btn btn-primary btn-sm button-animate '.((!$buychargingzxc) ? 'invisible' : 'visible').'"><i class="fa fa-usb"></i>Start Charging</button>' : '<button style="font-size: 150%;margin-bottom:25px;font-weight: normal;padding:10px;border-radius:15px;"
- <button type="submit" name="transmode" value="addchargetime" class="btn btn-primary btn-sm button-animate">Extend Charging</button>' ?>
- </form>
- </div>
- </div>
- <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
- <div class="modal-dialog modal-dialog-centered">
- <div class="modal-content">
- <div class="modal-header">
- <h5 class="modal-title"><i class="fa fa-usb"></i> Select Charging Ports <i class="fa fa-usb"></i></h5>
- </div>
- <form action="<?= $done?>" method="post">
- <div class="modal-body">
- <table class="table table-striped table-bordered table-sm">
- <tr class="thead-dark">
- <th>Port
- </th>
- <th>Note
- </th>
- <th>Availability
- </th>
- </tr>
- <?= selectcharging($link,$ip); ?>
- </table>
- </div>
- <div class="modal-footer">
- <button type="submit" name="transmode" value="port" class="btn btn-success">Select</button>
- </div>
- </form>
- </div>
- </div>
- </div>
- <script src="js/jquery-migrate-1.1.0.min.js"></script>
- <script src="js/jquery-ui.min.js"></script>
- <script src="js/bootstrap4.min.js"></script>
- <script src="js/jquery.slimscroll.min.js"></script>
- <script src="js/jquery.cookie.js"></script>
- <script type="text/javascript" src="js/soundjs.min.js"></script>
- <script type="text/javascript" src="js/preloadjs.min.js"></script>
- <script src="js/toastr.min.js"></script>
- <!--//footer-->
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement