[go: up one dir, main page]
Scribd
Upload
255 views12 pages

Original Portal Design Wifi

This document contains the HTML code for a web page interface that displays account information and controls for a user. It includes sections for displaying banners, announcements, account details like credits and expiration time. It also includes buttons to perform actions like inserting money, pausing time, checking balances, and redeeming vouchers. The page is populated with dynamic data passed in through template variables.

Uploaded by

Joan Diel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
255 views12 pages

Original Portal Design Wifi

This document contains the HTML code for a web page interface that displays account information and controls for a user. It includes sections for displaying banners, announcements, account details like credits and expiration time. It also includes buttons to perform actions like inserting money, pausing time, checking balances, and redeeming vouchers. The page is populated with dynamic data passed in through template variables.

Uploaded by

Joan Diel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 12

<!

DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>{{ title }}</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
target-densitydpi=medium-dpi" />
{% include 'header.html' %}
</head>

<body>
<div class="container text-center">

<div id="carousel-id" class="carousel slide" data-


interval="{{slidertimer}}000" data-ride="carousel">
<div class="carousel-inner" role="listbox">
{% for d in banner if d.banner %}
<div class="carousel-item {% if loop.first %} active {% endif
%}">
<img src="/assets/images/{{ d.banner }}" class="img-fluid">
</div>
{% endfor %}
</div>

</div>

<div style="margin:10px"></div>
<!--<div class="animate-area">
<img class="img-fluid temp-hidden" src="images/logo-small.png" />
</div>-->

<div class="d-flex justify-content-center">


<div class="alert alert-success">{{ portalannouncement }} </div>
</div>

<div class="row">
<div class="col-md-12 h2">
<div id="status">{{getstatus| raw}}</div>
</div>
</div>
<div id="default_container">
<div class="row" style="margin-bottom:10px;">
<div class="col-md-12"> <small style="color:#007bff;text-
transform: uppercase;">IP: {{ ip }} | Mac: {{ mac }} </small>
</div>
<div class="col-md-12"> <small style="color:#007bff;text-
transform: uppercase;">Account Credits: ₱{{ remainingcredit }} </small>
</div>
<div class="col-md-12"> <small style="color:#007bff;text-
transform: uppercase;">{{ expiretime }}</small>
</div>
<div class="col-md-12"> <small style="color:#007bff;text-
transform: uppercase;"><div id="remaindata"> </div> </small>
</div>
<div class="col-md-12"> <small style="color:#748c8a;text-
transform: uppercase;"> <div id="timesign"> {{TimeSign | raw}} </div></small>
</div>
<div class="col-md-12">
<div id="rtime"> {{getUserremainingTime | raw}}</div>
</div>
</div>
<div class="temp-hidden">

{% if freehour == 1 %}
<div class="row" style="margin-bottom:10px;">
<div class="col-md-12">
<button type="button" id="freetime" class="btn
btn-danger button-rnd ">Get Free Time</button>
</div>
</div>
{% endif %}

{% if insertcoin == 1 %}
<div class="row" style="margin-bottom:10px;">
<div class="col-md-12">
{% if checkavailableonline < 1 %}
<button type="button" id="insert_coin_button"
value="zxcv" class="insert_coin_button btn btn-success button-rnd">Insert
Money</button>
{% else %}
<button type="button" data-toggle="modal" data-
target="#multicoinslot" class="btn btn-success button-rnd">Insert Money</button>
{% endif %}
</div>
</div>
{% endif %}

{% if pausetime == 1 %}
{% if userpausetime == 1 %}
<div class="row" id="pcheck" style="margin-bottom:10px;">
<div class="col-md-12">
<button type="button" id="pfunc" class="btn
btn-danger button-rnd btn-spinner">Pause Time</button>
</div>
</div>
{% endif %}
{% endif %}

{% if viewrates == 1 %}
<div class="row" id="pfuncwifi" style="margin-
bottom:10px;">
<div class="col-md-12">
<button type="button" class="btn btn-primary
button-rnd" data-toggle="modal" data-target="#popup">Wifi Rates</button>
</div>
</div>
{% endif %}

{% if viewchargingrates == 1 %}
<div class="row" id="pfunccrates" style="margin-
bottom:10px;">
<div class="col-md-12">
<button type="button" class="btn btn-primary
button-rnd" data-toggle="modal" data-target="#chargingstation">Charging
Rates</button>
</div>
</div>
{% endif %}

{% if buyload == 1 %}
<div class="row" id="peload" style="margin-bottom:10px;">
<div class="col-md-12">
<button type="button" class="btn btn-danger
button-rnd" data-target="#buyload" data-toggle="modal" data-backdrop="static" data-
keyboard="false">Buy Load</button>
</div>
</div>
{% endif %}

{% if checkbalance == 1 %}
<div class="row" id="pcheckbalance" style="margin-
bottom:10px;">
<div class="col-md-12">
<button type="button" class="btn btn-danger
button-rnd" data-target="#checkbalance" data-toggle="modal" data-backdrop="static"
data-keyboard="false">Check Balance</button>
</div>
</div>
{% endif %}

{% if chatbox == 1 %}
<div class="row" style="margin-bottom:10px;">
<div class="col-md-12">
<button type="button" class="btn btn-danger
button-rnd" data-target="#chatbox" data-toggle="modal" data-backdrop="static" data-
keyboard="false">ChatBox {{unreadmessages | raw}}</button>
</div>
</div>
{% endif %}

{% if entervoucher == 1 %}
<div class="btn-block" id="entervoucher">
<div class="input-group mb-3">
<input type="text" class="form-control"
name="vcode" id="vcode" value="" placeholder="Enter Voucher here...">
<div class="input-group-append">
<button id="sub-voucher" class="btn btn-
primary">Submit</button>
</div>
</div>
</div>
{% endif %}

{% if session2voucher == 1 %}
<div class="row" style="margin-bottom:10px;">
<div class="col-md-12">
<button type="button" id="cvoucher" data-
toggle="modal" data-target="#sessiontovoucher" class="btn btn-primary button-
rnd">Convert Time to Voucher</button>
</div>
</div>
{% elseif session2voucher == 2 %}
<div class="row" style="margin-bottom:10px;">
<div class="col-md-12">
<button type="button" id="cvoucher" data-
toggle="modal" data-target="#logout" class="btn btn-primary button-
rnd">Logout</button>
</div>
</div>
{% endif %}

{% if checkchargingpins > 0 %}
<div class="row ">
<div class="col-md-12">
<button type="button" data-toggle="modal" data-
target="#charginglist" class="btn btn-primary button-rnd">Charging
Stations</button>
</div>
</div>{% endif %}
<hr class="prettyline">
</div>
<!-- //LIST VOUCHER -->
<div class="panel panel-info hidden" id="checkvouchers">
<div class="panel-heading">
<h4 class="panel-title">My Vouchers</h4>
</div>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="text-center">Code</th>
<th class="text-center">Time</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody id="vouchersList"></tbody>
</table>
</div>
</div>
</div>
<!-- Modal -->
<div id="popup" class="modal fade bd-example-modal-sm" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">WiFi Rates</h4>
<button type="button" class="close" data-
dismiss="modal">×</button>
</div>
<div class="modal-body">
<table class="table table-striped table-
bordered table-sm">
<tr class="thead-dark">
<th>Amount</th>
<th>Time</th>
<th>Note</th>
</tr>

{% for r in rates if r.time %}


<tr>
<td>{{ r.pulses }}</td>
<td
class="rconvert{{ r.pulses }}"></td>
<td>{{ r.note }}</td>
</tr>
{% endfor %}

</table>
</div>
</div>
</div>
</div>
<div id="multicoinslot" class="modal fade bd-example-modal-sm"
role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><i class="fa fa-bars"
aria-hidden="true"></i> Select Coinslot </h4>
<button type="button" class="close" data-
dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="card-deck mb-3 text-center">
{% if mainvendo == 1 %}
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-
normal" style="cursor: pointer;" data-toggle="collapse" data-
target="#zxcv">{{cname}}</h4>
</div>
<div id="zxcv" class="collapse d-
lg-block">
<div class="card-body">
<ul class="list-unstyled">

<li>{{cdescription}}</li>
</ul>
<button type="button"
value="zxcv" class="insert_coin_button btn btn-lg btn btn-primary button-animate"
><i class="fa fa-money fa-fw"></i>Insert Coin</button>
</div>
</div>
</div>
{% endif %}
{% for m in multicoinslot if m.mac %}
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-
normal" style="cursor: pointer;" data-toggle="collapse" data-
target="#{{ m.id }}">{{ m.coinslotname }}</h4>
</div>
<div id="{{ m.id }}" class="collapse d-
lg-block">
<div class="card-body">
<ul class="list-unstyled">

<li>{{ m.description }}</li>


</ul>
<button type="button"
value="{{ m.mac }}" class="insert_coin_button btn btn-lg btn btn-primary button-
animate eload-spinner"><i class="fa fa-money fa-fw"></i>Insert Coin</button>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<div id="charginglist" class="modal fade bd-example-modal-sm"
role="dialog">
<div class="modal-dialog modal-dialog-centered">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Charging Stations</h4>
<button type="button" class="close" data-
dismiss="modal">×</button>
</div>
<div class="modal-body">
<table class="table table-striped table-
bordered table-sm">
<tr class="thead-dark">
<th>Station Port #</th>
<th>Remaining Time</th>
</tr>
<tbody id="chargingstations"></tbody>
</table>
</div>
</div>
</div>
</div>
<div id="sessiontovoucher" class="modal fade bd-example-modal-sm"
role="dialog">
<div class="modal-dialog modal-dialog-centered">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Convert Time To
Voucher</h4>
<button type="button" class="close" data-
dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<div class="input-group input-group-sm
mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm-available">Your
Minutes:</span>
</div>
<input type="number" name="minutes"
id="minutes" class="form-control" value="{{ remainingTime }}" aria-label="Small"
aria-describedby="inputGroup-sizing-sm-available" readonly>
</div>
<div class="input-group input-group-sm
mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Minutes to convert:</span>
</div>
<input type="number"
name="amountminutes" id="amountminutes" min="0" oninput="validity.valid||
(value='');" class="form-control" aria-label="Small" aria-describedby="inputGroup-
sizing-sm">
</div>
<button type="submit" id="btn-vcode"
class="btn btn-primary">Convert</button>
</div>
</div>
</div>
</div>
</div>

<div id="logout" class="modal fade bd-example-modal-sm" role="dialog">


<div class="modal-dialog modal-dialog-centered">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Time Logout!</h4>
<button type="button" class="close" data-
dismiss="modal">×</button>
</div>
<div class="modal-body">
<h4>Are you sure to logout your time? If
you sure just click "Logout".</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger waves-effect"
data-dismiss="modal">Cancel</button>
<button type="submit" id="logoutnow" class="btn btn-
success">Logout</button>
</div>
</div>
</div>
</div>

<!-- Buy Load Modal -->


<div id="buyload" class="modal fade bd-example-modal-sm" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><i class="fa fa-bars"
aria-hidden="true"></i> {{ title }} - Eloading </h4>
<button type="button" class="close" data-
dismiss="modal">×</button>
</div>
<div class="modal-body text-left">
<div class="col-xs-7 align-middle p-lg">
<h3 style="color:#009ee6"> Buy Load &
Epins</h3>
<div style="margin-top:20px"></div>
<p style="color: #101010;"><i class="fa
fa-mobile" aria-hidden="true"></i> Enter Mobile Phone Number:</p>
<div class="form-group">
<input type="text"
name="eloadnumber" id="eloadnumber" placeholder="09123456789" maxlength="11"
onkeypress="return getnumbers(this, event)" class="form-control input-lg m-b">
</div>
<hr>
<div class="panel-body">
<input type="hidden" name="mac"
id="mac" value="{{ mac }}" class="form-control">
<input type="hidden" name="ip"
id="ip" value="{{ ip }}" class="form-control">
<button type="button" class="btn
btn-success btn-lg button-rnd eload-spinner" onclick="eloadproduct()">Buy</button>
</div>
</div>
</div>
</div>
</div>
</div>

<!--Chatbox Modal -->


<div id="chatbox" class="modal fade bd-example-modal-sm" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><i class="fa fa-
bars" aria-hidden="true"></i> ChatBox </h4>
<button type="button" class="close" data-
dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="container">
<div id="msglist">

</div>
</div>
<div class="panel-footer">
<div class="input-group">
<input type="text" id="msg"
class="form-control">
<span class="input-group-btn">
<button class="btn btn-
danger" id="sendmsg" type="button">Send</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>

<!--Insert Coin Modal -->


<div id="insertcoin" class="modal fade bd-example-modal-sm"
role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div class="col-xs-7 align-middle p-lg">
<h3 style="color:#009ee6"> Please Insert
Money</h3>
<div id="progress-msg"></div>
<div class="progress progress-rounded
progress-lg progress-striped active">
<div id="progressBar"
class="progress-bar progress-bar-danger" style="width:70%"></div>
</div>
<hr class="prettyline">
<ul class="list-group text-left">
<li class="list-group-item"><i
class="fa fa-clock-o"></i>Time:<span id="totalm"> -- </li>
{% if buycharging == 1 %}
<li class="list-group-item"><i class="fa fa-
usb"></i>Charge:<span id="charging"> -- </li>
{% endif %}
{% if buyvoucher == 1 %}
<li class="list-group-item"><i class="fa fa-
ticket"></i>Voucher:<span id="voucher"> -- </li>
{% endif %}
<li class="list-group-item"><i class="fa fa-money"></i>Total
Amount:<span id="tamount" > 0.00 </li>
</ul>
<hr class="prettyline">
<div class="panel-body">
<button type="button" id="done-paying" class="btn btn-danger
btn-sm btn-spinner">Cancel</button>
{% if buyvoucher == 1 %}
<hr class="prettyline hidden" id="hr">
<button type="button" id="buy-voucher" class="btn btn-success
btn-sm hidden btn-spinner">Buy Voucher</button>
{% endif %}
{% if buycharging == 1 %}
<hr class="prettyline hidden">
{% if getchargingtime < 1 %}
<button type="button" id="buy-charging" data-toggle="modal"
data-target="#selectcharging" class="btn btn-primary btn-sm hidden">Buy
Charging</button>
{% else %}
<button type="button" id="extend-charging" class="btn btn-
primary btn-sm hidden">Extend Charging</button>
{% endif %}

{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>

<!-- Check Balance Modal -->


<div id="checkbalance" class="modal fade bd-example-modal-sm"
role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><i class="fa fa-bars" aria-
hidden="true"></i> Balance Inquiry</h5>
<button type="button" class="close" data-
dismiss="modal">×</button>
</div>
<div class="modal-body text-left">
<div class="col-xs-7 align-middle p-lg">
<h3 style="color:#009ee6"> Number Balance Checker</h3>
<div style="margin-top:20px"> </div>
<p style="color: #101010;"> <i class="fa fa-mobile" aria-
hidden="true"></i> Enter Mobile Phone Number: </p>
<div class="form-group">
<input type="text" name="ieloadnumber" id="ieloadnumber"
placeholder="09123456789" maxlength="11" onkeypress="return getnumbers(this,
event)" class="form-control input-lg m-b">
</div>
<hr>
<div class="panel-body">
<input type="hidden" name="mac" id="mac" value="{{ mac }}"
class="form-control">
<input type="hidden" name="ip" id="ip" value="{{ ip }}"
class="form-control">
<button type="button" class="btn btn-success btn-lg button-rnd
eload-spinner" onclick="balanceinquiry()">Check</button>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- Charging Station Modal -->


<div id="eloadcomplete" class="modal fade bd-example-modal-sm"
role="dialog">
<div class="modal-dialog modal-dialog-centered">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><i class="fa fa-bars" aria-
hidden="true"></i> Success!</h4>
<button type="button" class="close" data-
dismiss="modal">×</button>
</div>
<div class="modal-body">
<h4>Load has been now process.</h4>
<hr/>
<h4> Please wait the confirmation. </h4>
</div>
</div>
</div>
</div>

<!-- Charging Select Modal -->


<div class="modal fade" id="selectcharging" tabindex="-1" role="dialog" 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>
<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>
{% for sc in selectcharging if sc.port %}
<tr>
<td>{{ sc.port }}</td>
<td>{{ sc.note }}</td>
<td><input type="radio" name="port"
value='{{ sc.port }}'>Available </input></td>
</tr>
{% endfor %}
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger waves-effect"
data-dismiss="modal">Cancel</button>
<button type="submit" id="scharging" class="btn btn-
success">Select</button>
</div>
</div>
</div>
</div>
<!-- Charging Select Modal -->

<!-- Charging Station Modal -->


<div id="chargingstation" class="modal fade bd-example-modal-sm"
role="dialog">
<div class="modal-dialog modal-dialog-centered">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Charging Rates</h4>
<button type="button" class="close" data-
dismiss="modal">×</button>
</div>
<div class="modal-body">
<table class="table table-striped table-bordered table-sm">
<tr class="thead-dark">
<th>Amount
</th>
<th>Time
</th>
<th>Note
</th>
</tr>
{% for c in crates if c.time %}
<tr>
<td>{{ c.pulses }}</td>
<td class="cconvert{{ c.pulses }}"></td>
<td>{{ c.note }}</td>
</tr>
{% endfor %}
</table>
</div>
</div>
</div>
</div>

<div id="eloadannouncer"> </div>


<div id="multicoinslot_announce"> </div>
<div id="eloadprocess_announce"> </div>
<div id="auto_process"> </div>
<div id="balanceinquiry_announcer"> </div>

<!-- End Footer -->


<footer class="footer" style="margin:auto;max-width: 500px;position:
relative;">
Powered By: <a href="http://www.lpbpisowifi.com" target="_blank"
>{{ title }}</a>
</footer>
<!-- End Footer -->

</div>
<!-- End Container -->

{% include 'footer.html' %}

</body>
</html>

You might also like