Skip to content

Instantly share code, notes, and snippets.

@zlumer

zlumer/index.html

Last active July 2, 2019 19:12
Show Gist options
  • Save zlumer/0bb82eceb73fd31d6f3a6c70b9e26fcb to your computer and use it in GitHub Desktop.
Save zlumer/0bb82eceb73fd31d6f3a6c70b9e26fcb to your computer and use it in GitHub Desktop.
Download ZIP
KLozVj
Raw
index.html
<body class="layout-boxed navbar-top bg-black">
<div class="flash-messages" style="display: none;">
</div>
<!-- Main navbar -->
<div class="navbar navbar-fixed-top navbar-inverse bg-anco-blue-dark">
<div id="jGrowl" class="top-right jGrowl"></div>
<div class="navbar-collapse collapse" id="navbar-mobile">
<p class="navbar-text pl-5"><i class="icon-watch2 opacity-50"></i> <span id="current-time"></span> UTC</p>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown language-switch">
<a class="dropdown-toggle" data-toggle="dropdown">
<img class="position-left" alt="" src="/assets/flags/en-5d72c5a8bef80fca6f99f476e15ec95ce2d5e5f65c6dab9ee8e56348be0d39fc.png" />
English
<span class="caret"></span>
</a>
</li>
</ul>
</div>
</div>
<!-- /main navbar -->
<!-- Page container -->
<div class="page-container">
<!-- Page content -->
<div class="page-content">
<!-- Main sidebar -->
<div class="sidebar sidebar-main bg-black-grad">
<div class="sidebar-content">
<!-- User menu -->
<div class="sidebar-user">
<div class="category-content">
<div class="media">
<div class="media-left">
<a class="label label-rounded label-icon bg-anco-red" href="/en/profile">
<i class="icon-user"></i>
</a> </div>
<div class="media-body">
<span id="current-user-email" class="media-heading text-semibold">zlumer@gmail.com</span>
</div>
<div class="text-size-mini user-balances-many">
<div>
<span>My Balance:</span>
0 ANCO
</div>
<div>
<span>Purchases:</span>
0 ANCO
</div>
<div>
<span>Bonuses:</span>
0 ANCO
</div>
<div>
<span>Referral bonus:</span>
0 BTC
</div>
</div>
</div>
</div>
</div>
<!-- /user menu -->
<!-- Main navigation -->
<hr/>
<!-- /main navigation -->
</div>
</div>
<!-- /main sidebar -->
<!-- Main content -->
<div class="content-wrapper">
<!-- Page header -->
<div class="page-header page-header-default page-header-xs">
<div class="page-header-content">
<div class="page-title">
<h1>My payment information for each incentive type</h1>
</div>
</div>
</div>
<!-- /page header -->
<!-- Content area -->
<div class="content">
<div class="panel panel-white">
<div class="panel-heading">
<h4 class="panel-title">1. Referral: total amount $</h4>
</div>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Referral DATE</th>
<th>ID</th>
<th>Bonus (10%)</th>
</tr>
</thead>
<tbody>
<tr>
<td>05042019</td>
<td>red</td>
<td>280$</td>
</tr>
<tr>
<td>&nbsp;</td>
<td></td>
<td></td>
</tr>
<tr>
<td>&nbsp;</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-white">
<div class="panel-heading">
<h4 class="panel-title">2. Winners: $</h4>
</div>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Awrad DATE</th>
<th>RANK (Class, Contract)</th>
<th>Bonus (10%)</th>
</tr>
</thead>
<tbody>
<tr>
<td>10042019</td>
<td>1st ( Class 1 , A )</td>
<td>50$</td>
</tr>
<tr>
<td>11042019</td>
<td>1st ( Class 1 , A )</td>
<td>250$</td>
</tr>
<tr>
<td>&nbsp;</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-white">
<div class="panel-heading">
<h4 class="panel-title">3. Incentives: $ <span class="text-danger">( Additional bonus from class 6 )</span></h4>
</div>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Awrad DATE</th>
<th>RANK (Class, Contract)</th>
<th>Bonus (10%)</th>
</tr>
</thead>
<tbody>
<tr>
<td>&nbsp;</td>
<td></td>
<td></td>
</tr>
<tr>
<td>&nbsp;</td>
<td></td>
<td></td>
</tr>
<tr>
<td>&nbsp;</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- /content area -->
</div>
<!-- /main content -->
</div>
<!-- /page content -->
</div>
<!-- /page container -->
</body>
Raw
script.js
;(function(){
if (window.ANCO_INJECT)
return;
window.ANCO_INJECT = true;
var HANDLERS = {
payment: _payment,
referral_structure: _ref_struct,
referral: _ref_program,
points: _points,
dashboard: replaceDashboardOverview,
contracts: _contracts,
social: _snsLinks,
contract_a: __contract('A'),
contract_b: __contract('B'),
contract_c: __contract('C'),
contract_d: __contract('D')
}
const API_URL = 'https://fathomless-wave-75159.herokuapp.com'
function _api(path)
{
return API_URL + path
}
var PRELOADER = '<div id="zl-preloader"><div class="lds-ring"><div></div><div></div><div></div><div></div></div></div>'
try
{
console.log('TEST SCRIPT LAUNCHED!')
$(document).ready(function(){
console.log('TEST SCRIPT: DOCUMENT IS READY!')
console.log('TEST SCRIPT user email: ' + $('#current-user-email').text())
var text = $('#current-user-email').text()
// text = 'hvcc89246@gmail.com'
/* if (text == "ulbnis@gmail.com")
$('#current-user-email').text(text + ' INJECTED') */
var page = window.location.pathname.split('/')[2]
if ((window.location.hostname == 'dashboard.anco.io') && !page)
page = 'dashboard'
// manually set page for development purposes
console.log(window.location.host)
if (window.location.host == 'cdpn.io')
page = 'payment'
updateUserInfo(text)
var h = HANDLERS[page]
if (h)
{
var $content = $('div.content')
$content.hide()
$('div.content-wrapper').append(PRELOADER)
function hidePreloader()
{
// return;
$('#zl-preloader').hide()
$content.show()
}
h({
email: text,
$content: $content,
ready: hidePreloader
})
}
})
}
catch(err)
{
console.error(err.message || err)
}
function updateUserInfo(email)
{
function blcs()
{
return $('div.user-balances-many').children().toArray()
}
$(blcs()).hide()
fetch(_api('/userinfo/' + email))
.then(function(response) { return response.json() })
.then(function(json)
{
setUserInfo(json.contracts, json.balance)
$(blcs().slice(0,2)).show()
})
}
function setUserInfo(contracts, usd)
{
let [ctrElem, usdElem] = $('div.user-balances-many').children()
let ctrText = (contracts && contracts.length) ? contracts.join(', ') : "none"
ctrElem.innerHTML = `<span>Owned contracts:</span> ${ctrText}`
usdElem.innerHTML = `<span>USD balance:</span> $${usd}`
}
function _ignore(helpers)
{
console.log(helpers)
helpers.ready()
}
function _payment(helpers)
{
return __template(_api('/payment?user=' + helpers.email), PAYMENT_TEMPLATE, { email: helpers.email, api_url: API_URL })(helpers)
}
function _snsLinks(helpers)
{
return __template(_api('/sns/links'), SNS_VISITS_TEMPLATE, { email: helpers.email })(helpers)
}
function _points(helpers)
{
return __template(_api('/points?user=' + helpers.email), POINTS_TEMPLATE)(helpers)
}
function _ref_struct(helpers)
{
return __template(_api('/referrals?user=' + helpers.email), REF_STRUCT_TEMPLATE)(helpers)
}
function _ref_program(helpers)
{
$($('div.content .panel.panel-flat').toArray().slice(2)).hide()
helpers.ready()
}
function _contracts(helpers)
{
return __template(_api('/contracts/overview?user=' + helpers.email), CONTRACTS_TEMPLATE)(helpers)
}
function __contract(ctr)
{
return function(helpers) {
return __template(_api('/contracts/contract?contract=' + ctr), CONTRACT_TEMPLATE)(helpers)
}
}
function __template(url, tmpl, extra)
{
if (!extra)
extra = {};
return function(helpers){
fetch(url)
.then(function(response) { return response.json() })
.then(function(json){ return Object.assign(json, extra); })
.then(function(json) {
console.log(JSON.stringify(json))
helpers.$content.html(tmpl(json))
helpers.ready()
})
}
}
function replaceDashboardOverview(helpers)
{
let content = helpers.$content
console.log(content)
console.log(content.children())
console.log(content.children()[0])
$(content.children()[0]).hide()
$(content.children()[1]).hide()
content.prepend('<div id="zl-dshbrd-parent"/>')
helpers.$content = $(content.children()[0]) // newly added element
return __template(_api('/summary?user=' + helpers.email), OVERVIEW_TEMPLATE)(helpers)
}
var PAYMENT_TEMPLATE = (function anonymous(it
) {
var out='<div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title">Current USD balance: &#36;'+(it.total.available)+'</h4></div>';if(it.total.available){out+='<div class="panel-body">';if(it.openw){out+='<span>Withdrawal requested at '+( new Date(it.openw.timestamp).toUTCString() )+'. Processing...</span>';}else{out+='<form id="form-withdraw" action="'+(it.api_url)+'/withdraw/'+(it.email)+'" method="POST"><input class="btn btn-primary" type="submit" value="Withdraw &#36;'+(it.total.available)+'"></form><script>;(function(){let form = $(\'#form-withdraw\');let button = $(\'#form-withdraw input\');let url = form.attr(\'action\');form.on(\'submit\', function(e){if (e && e.preventDefault)e.preventDefault();button.attr(\'disabled\', true);$.post(url, function(data){form.parent().append(\'Withdrawal request submitted.\');form.hide();});return false;})})();</script>';}out+='</div>';}out+='</div> <div class="panel panel-white"><div class="panel-heading"> <h4 class="panel-title">1. Referral: &#36;'+(it.referral.total)+'</h4></div><div class="table-responsive"> <table class="table table-striped"><thead> <tr><th>Referral DATE</th><th>ID</th><th>Bonus (10%)</th> </tr></thead><tbody>';var arr1=it.referral.users;if(arr1){var value,index=-1,l1=arr1.length-1;while(index<l1){value=arr1[index+=1];out+=' <tr><td>'+(value.date)+'</td><td>'+(value.uid)+'</td><td>&#36;'+(value.bonus)+'</td> </tr> ';} } out+='</tbody> </table></div> </div> <div class="panel panel-white"><div class="panel-heading"> <h4 class="panel-title">2. Winners: &#36;'+(it.bonuses.total)+'</h4></div><div class="table-responsive"> <table class="table table-striped"><thead> <tr><th>Award DATE</th><th>RANK (Class, Contract)</th><th>Bonus (10%)</th> </tr></thead><tbody>';var arr2=it.bonuses.awards;if(arr2){var value,index=-1,l2=arr2.length-1;while(index<l2){value=arr2[index+=1];out+=' <tr><td>'+(value.date)+'</td><td>Rank '+(value.rank)+' (Class '+(value.class)+', '+(value.contract)+')</td><td>&#36;'+(value.bonus)+'</td> </tr> ';} } out+='</tbody> </table></div> </div> <div class="panel panel-white"><div class="panel-heading"> <h4 class="panel-title">3. Incentives: &#36;'+(it.bonuses2.total)+' <span class="text-danger">( Additional bonus from class 6 )</span></h4></div><div class="table-responsive"> <table class="table table-striped"><thead> <tr><th>Awaad DATE</th><th>RANK (Class, Contract)</th><th>Bonus (10%)</th> </tr></thead><tbody>';var arr3=it.bonuses2.awards;if(arr3){var value,index=-1,l3=arr3.length-1;while(index<l3){value=arr3[index+=1];out+='<tr><td>'+(value.date)+'</td><td>Rank '+(value.rank)+' (Class '+(value.class)+', '+(value.contract)+')</td><td>&#36;'+(value.bonus)+'</td></tr>';} } out+='</tbody> </table></div> </div>';return out;
})
var POINTS_TEMPLATE = (function anonymous(it
) {
var out='<div class="row"><div class="col-md-6"> <div class="panel panel-white"><div class="panel-heading"> <h5 class="panel-title">Referral points</h5></div><div class="table-responsive"> <table class="table text-center"><thead> <tr><th>A</th><th>B</th><th>C</th><th>D</th> </tr></thead><tbody> <tr><td>'+(it.referral[0])+'</td><td>'+(it.referral[1])+'</td><td>'+(it.referral[2])+'</td><td>'+(it.referral[3])+'</td> </tr></tbody> </table></div> </div></div><div class="col-md-6"> <div class="panel panel-white"><div class="panel-heading"> <h5 class="panel-title">Sequence points</h5></div><div class="table-responsive"> <table class="table text-center"><thead> <tr><th>A</th><th>B</th><th>C</th><th>D</th> </tr></thead><tbody> <tr><td>'+(it.sequence[0])+'</td><td>'+(it.sequence[1])+'</td><td>'+(it.sequence[2])+'</td><td>'+(it.sequence[3])+'</td> </tr></tbody> </table></div> </div></div> </div> <div class="row"><div class="col-md-6"> <div class="panel"><div class="panel-heading"> <h5 class="panel-title">Daily points: '+(it.login)+'</h5></div> </div></div><div class="col-md-6"> <div class="panel"><div class="panel-heading"> <h5 class="panel-title">Daily SNS points: '+(it.sns)+'</h5></div> </div></div> </div> <div class="row"><div class="col-md-6 col-md-offset-3"> <div class="panel panel-white"><div class="panel-heading"> <h5 class="panel-title">Total</h5></div><div class="table-responsive"> <table class="table text-center"><thead> <tr><th>A</th><th>B</th><th>C</th><th>D</th> </tr></thead><tbody> <tr><td>'+(it.total[0])+'</td><td>'+(it.total[1])+'</td><td>'+(it.total[2])+'</td><td>'+(it.total[3])+'</td> </tr></tbody> </table></div> </div></div> </div>';return out;
})
var REF_STRUCT_TEMPLATE = (function anonymous(it
) {
var out=' <div class="row"><div class="col-md-6"> <div class="panel panel-white"><div class="panel-heading"> <h5 class="panel-title">Contract A</h5></div><div class="table-responsive"> <table class="table table-striped text-center"><thead> <tr><th>Level</th><th>The number of people</th><th>Total point</th> </tr></thead><tbody>';var arr1=it.referrals.A;if(arr1){var value,index=-1,l1=arr1.length-1;while(index<l1){value=arr1[index+=1];out+='<tr><td>'+((index+1))+'</td><td>'+(value.n)+'</td><td>'+(value.p)+'</td></tr> ';} } out+='</tbody><tfoot> <tr><th>Total</th><th>'+(it.totals.A.ref.n)+'</th><th>'+(it.totals.A.ref.p)+'</th> </tr></tfoot> </table></div> </div></div><div class="col-md-6"> <div class="panel panel-white"><div class="panel-heading"> <h5 class="panel-title">Contract B</h5></div><div class="table-responsive"> <table class="table table-striped text-center"><thead> <tr><th>Level</th><th>The number of people</th><th>Total point</th> </tr></thead><tbody>';var arr2=it.referrals.B;if(arr2){var value,index=-1,l2=arr2.length-1;while(index<l2){value=arr2[index+=1];out+='<tr><td>'+((index+1))+'</td><td>'+(value.n)+'</td><td>'+(value.p)+'</td></tr>';} } out+='</tbody><tfoot> <tr><th>Total</th><th>'+(it.totals.B.ref.n)+'</th><th>'+(it.totals.B.ref.p)+'</th> </tr></tfoot> </table></div> </div></div> </div> <div class="row"><div class="col-md-6"> <div class="panel panel-white"><div class="panel-heading"> <h5 class="panel-title">Contract C</h5></div><div class="table-responsive"> <table class="table table-striped text-center"><thead> <tr><th>Level</th><th>The number of people</th><th>Total point</th> </tr></thead><tbody>';var arr3=it.referrals.C;if(arr3){var value,index=-1,l3=arr3.length-1;while(index<l3){value=arr3[index+=1];out+='<tr><td>'+((index+1))+'</td><td>'+(value.n)+'</td><td>'+(value.p)+'</td></tr>';} } out+='</tbody><tfoot> <tr><th>Total</th><th>'+(it.totals.C.ref.n)+'</th><th>'+(it.totals.C.ref.p)+'</th> </tr></tfoot> </table></div> </div></div><div class="col-md-6"> <div class="panel panel-white"><div class="panel-heading"> <h5 class="panel-title">Contract D</h5></div><div class="table-responsive"> <table class="table table-striped text-center"><thead> <tr><th>Level</th><th>The number of people</th><th>Total point</th> </tr></thead><tbody>';var arr4=it.referrals.D;if(arr4){var value,index=-1,l4=arr4.length-1;while(index<l4){value=arr4[index+=1];out+='<tr><td>'+((index+1))+'</td><td>'+(value.n)+'</td><td>'+(value.p)+'</td></tr> ';} } out+='</tbody><tfoot> <tr><th>Total</th><th>'+(it.totals.D.ref.n)+'</th><th>'+(it.totals.D.ref.p)+'</th> </tr></tfoot> </table></div> </div></div> </div> <h1 class="mb-20">My sequence registration information</h1> <div class="row"><div class="col-md-3"> <div class="panel panel-white"><div class="panel-heading"> <h5 class="panel-title">Contract A</h5></div><div class="table-responsive"> <table class="table table-striped text-center"><thead> <tr><th>Level</th><th>ID</th> </tr></thead><tbody>';var arr5=it.sequence.A;if(arr5){var value,index=-1,l5=arr5.length-1;while(index<l5){value=arr5[index+=1];out+=' <tr><td>'+((index + 1))+'</td><td>'+(value)+'</td></tr>';} } out+='</tbody><tfoot> <tr><th>Total</th><th>'+(it.totals.A.seq)+'</th> </tr></tfoot> </table></div> </div></div><div class="col-md-3"> <div class="panel panel-white"><div class="panel-heading"> <h5 class="panel-title">Contract B</h5></div><div class="table-responsive"> <table class="table table-striped text-center"><thead> <tr><th>Level</th><th>ID</th> </tr></thead><tbody>';var arr6=it.sequence.B;if(arr6){var value,index=-1,l6=arr6.length-1;while(index<l6){value=arr6[index+=1];out+='<tr><td>'+((index + 1))+'</td><td>'+(value)+'</td></tr>';} } out+='</tbody><tfoot><tr><th>Total</th><th>'+(it.totals.B.seq)+'</th></tr></tfoot> </table></div> </div></div><div class="col-md-3"> <div class="panel panel-white"><div class="panel-heading"> <h5 class="panel-title">Contract C</h5></div><div class="table-responsive"> <table class="table table-striped text-center"><thead> <tr><th>Level</th><th>ID</th> </tr></thead><tbody>';var arr7=it.sequence.C;if(arr7){var value,index=-1,l7=arr7.length-1;while(index<l7){value=arr7[index+=1];out+='<tr><td>'+((index + 1))+'</td><td>'+(value)+'</td></tr>';} } out+='</tbody><tfoot><tr><th>Total</th><th>'+(it.totals.C.seq)+'</th></tr></tfoot> </table></div> </div></div><div class="col-md-3"> <div class="panel panel-white"><div class="panel-heading"> <h5 class="panel-title">Contract D</h5></div><div class="table-responsive"> <table class="table table-striped text-center"><thead> <tr><th>Level</th><th>ID</th> </tr></thead><tbody>';var arr8=it.sequence.D;if(arr8){var value,index=-1,l8=arr8.length-1;while(index<l8){value=arr8[index+=1];out+='<tr><td>'+((index + 1))+'</td><td>'+(value)+'</td></tr>';} } out+='</tbody><tfoot><tr><th>Total</th><th>'+(it.totals.D.seq)+'</th></tr></tfoot> </table></div> </div></div> </div>';return out;
})
var CONTRACTS_TEMPLATE = (function anonymous(it
) {
var out='<div class="row">';if(it.contracts.A){out+='<div class="col-md-6"> <div class="panel panel-white"><div class="panel-heading"> <h5 class="panel-title">Contract A';if(it.contracts.A.bought){out+='<span class="text-muted text-size-small ml-10">(Class '+(it.contracts.A.class)+' Rank '+(it.contracts.A.rank)+')</span>';}else{out+='<span class="text-muted text-size-small ml-10">(not purchased yet)</span>';}out+=' </h5></div><div class="table-responsive"> <table class="table"><thead> <tr><th>Rank</th><th>ID</th><th>Point</th> </tr></thead><tbody>';var arr1=it.contracts.A.neighbors;if(arr1){var value,index=-1,l1=arr1.length-1;while(index<l1){value=arr1[index+=1];out+='<tr';if((value[0] == it.contracts.A.rank)){out+='class="active"';}out+='><td>'+(value[0])+'</td><td>'+(value[1])+'</td><td>'+(value[2])+'</td></tr> ';} } out+='</tbody> </table></div> </div></div>';}if(it.contracts.B){out+='<div class="col-md-6"> <div class="panel panel-white"><div class="panel-heading"> <h5 class="panel-title">Contract B';if(it.contracts.B.bought){out+='<span class="text-muted text-size-small ml-10">(Class '+(it.contracts.B.class)+' Rank '+(it.contracts.B.rank)+')</span>';}else{out+='<span class="text-muted text-size-small ml-10">(not purchased yet)</span>';}out+=' </h5></div><div class="table-responsive"> <table class="table"><thead> <tr><th>Rank</th><th>ID</th><th>Point</th> </tr></thead><tbody>';var arr2=it.contracts.B.neighbors;if(arr2){var value,index=-1,l2=arr2.length-1;while(index<l2){value=arr2[index+=1];out+='<tr';if((value[0] == it.contracts.B.rank)){out+='class="active"';}out+='><td>'+(value[0])+'</td><td>'+(value[1])+'</td><td>'+(value[2])+'</td></tr>';} } out+='</tbody> </table></div> </div></div>';}out+=' </div> <div class="row">';if(it.contracts.C){out+='<div class="col-md-6"> <div class="panel panel-white"><div class="panel-heading"> <h5 class="panel-title">Contract C';if(it.contracts.C.bought){out+='<span class="text-muted text-size-small ml-10">(Class '+(it.contracts.C.class)+' Rank '+(it.contracts.C.rank)+')</span>';}else{out+='<span class="text-muted text-size-small ml-10">(not purchased yet)</span>';}out+=' </h5></div><div class="table-responsive"> <table class="table"><thead> <tr><th>Rank</th><th>ID</th><th>Point</th> </tr></thead><tbody>';var arr3=it.contracts.C.neighbors;if(arr3){var value,index=-1,l3=arr3.length-1;while(index<l3){value=arr3[index+=1];out+='<tr';if((value[0] == it.contracts.C.rank)){out+='class="active"';}out+='><td>'+(value[0])+'</td><td>'+(value[1])+'</td><td>'+(value[2])+'</td></tr>';} } out+='</tbody> </table></div> </div></div>';}if(it.contracts.D){out+='<div class="col-md-6"> <div class="panel panel-white"><div class="panel-heading"> <h5 class="panel-title">Contract D';if(it.contracts.D.bought){out+='<span class="text-muted text-size-small ml-10">(Class '+(it.contracts.D.class)+' Rank '+(it.contracts.D.rank)+')</span>';}else{out+='<span class="text-muted text-size-small ml-10">(not purchased yet)</span>';}out+=' </h5></div><div class="table-responsive"> <table class="table"><thead> <tr><th>Rank</th><th>ID</th><th>Point</th> </tr></thead><tbody>';var arr4=it.contracts.D.neighbors;if(arr4){var value,index=-1,l4=arr4.length-1;while(index<l4){value=arr4[index+=1];out+='<tr';if((value[0] == it.contracts.D.rank)){out+='class="active"';}out+='><td>'+(value[0])+'</td><td>'+(value[1])+'</td><td>'+(value[2])+'</td></tr>';} } out+='</tbody> </table></div> </div></div>';}out+=' </div>';return out;
})
var CONTRACT_TEMPLATE = (function anonymous(it
) {
var out='';var arr1=it.classes;if(arr1){var members,clidx=-1,l1=arr1.length-1;while(clidx<l1){members=arr1[clidx+=1];if((clidx % 3 == 0)){out+='<div class="row">';}out+='<div class="col-md-4"><div class="panel panel-white"><div class="panel-heading"><h5 class="panel-title">Class '+((clidx+1))+'<div>Member ID score</div></h5></div><div class="table-responsive"><table class="table"><thead><tr><th>Rank</th><th>ID</th><th>Point</th></tr></thead><tbody>';var arr2=members;if(arr2){var mem,memidx=-1,l2=arr2.length-1;while(memidx<l2){mem=arr2[memidx+=1];out+='<tr><td>'+(mem[0])+'</td><td>'+(mem[1])+'</td><td>'+(mem[2])+'</td></tr>';} } out+='</tbody></table></div></div></div>';if(((clidx % 3 == 2) || (clidx == it.classes.length - 1))){out+='</div>';}} } return out;
})
var OVERVIEW_TEMPLATE = (function anonymous(it
) {
var out='<style>img.zl-dash-icon {width: 20%;}h5.zl-icon-title {display: inline;margin-left: 0.5rem;}</style><div class="row"><div class="col-md-3"> <div class="panel panel-white"><div class="panel-heading"><img src="https://svgshare.com/i/DEv.svg" class="zl-dash-icon"> <h5 class="panel-title zl-icon-title">Referral bonus</h5></div><div class="table-responsive"> <table class="table text-center"><tbody> <tr><td>&#36;'+(it.referral)+'</td> </tr></tbody> </table></div> </div></div><div class="col-md-3"> <div class="panel panel-white"><div class="panel-heading"><img src="https://svgshare.com/i/DFp.svg" class="zl-dash-icon"> <h5 class="panel-title zl-icon-title">Award bonus</h5></div><div class="table-responsive"> <table class="table text-center"><tbody> <tr><td>&#36;'+(it.award)+'</td> </tr></tbody> </table></div> </div></div><div class="col-md-3"> <div class="panel panel-white"><div class="panel-heading"><img src="https://svgshare.com/i/DFq.svg" class="zl-dash-icon"> <h5 class="panel-title zl-icon-title">Additional bonus</h5></div><div class="table-responsive"> <table class="table text-center"><tbody> <tr><td>&#36;'+(it.additional)+'</td> </tr></tbody> </table></div> </div></div><div class="col-md-3"> <div class="panel panel-white"><div class="panel-heading"><img src="https://svgshare.com/i/DGp.svg" class="zl-dash-icon"> <h5 class="panel-title zl-icon-title">My ranking</h5></div><div class="table-responsive"> <table class="table text-center"><thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead><tbody><tr>';if(it.ranks.length){out+='<td>';if(it.ranks[0]){out+='C'+(it.ranks[0].class)+'R'+(it.ranks[0].rank);}out+='</td><td>';if(it.ranks[1]){out+='C'+(it.ranks[1].class)+'R'+(it.ranks[1].rank);}out+='</td><td>';if(it.ranks[2]){out+='C'+(it.ranks[2].class)+'R'+(it.ranks[2].rank);}out+='</td><td>';if(it.ranks[3]){out+='C'+(it.ranks[3].class)+'R'+(it.ranks[3].rank);}out+='</td>';}else{out+='<td colspan="4">No contracts purchased yet</td>';}out+='</tr></tbody> </table></div> </div></div> </div> <div class="row"><div class="col-md-6"> <div class="panel"><div class="panel-heading"> <h5 class="panel-title">My purchase history</h5></div><div class="table-responsive"><table class="table text-center"> <tbody>';if(!it.purchases.list.length){out+='<tr><td colspan="2">No contracts purchased yet</td></tr>';}else{if(it.purchases.list[0]){out+='<tr><td>Contract A:</td><td>&#36;'+(it.purchases.list[0])+'</td></tr>';}if(it.purchases.list[1]){out+='<tr><td>Contract B:</td><td>&#36;'+(it.purchases.list[1])+'</td></tr>';}if(it.purchases.list[2]){out+='<tr><td>Contract C:</td><td>&#36;'+(it.purchases.list[2])+'</td></tr>';}if(it.purchases.list[3]){out+='<tr><td>Contract D:</td><td>&#36;'+(it.purchases.list[3])+'</td></tr>';}}out+='<tr><td>Total:</td><td>&#36;'+(it.purchases.total)+'</td></tr> </tbody></table> </div> </div></div><div class="col-md-6"> <div class="panel"><div class="panel-heading"> <h5 class="panel-title">My score</h5></div><div class="table-responsive"><table class="table text-center"><thead><tr><th></th><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead><tbody><tr><td>Daily:</td><td colspan="4">'+(it.points.login)+'</td></tr><tr><td>Time sequence:</td><td>'+(it.points.seq[0])+'</td><td>'+(it.points.seq[1])+'</td><td>'+(it.points.seq[2])+'</td><td>'+(it.points.seq[3])+'</td></tr><tr><td>Referral:</td><td>'+(it.points.referral[0])+'</td><td>'+(it.points.referral[1])+'</td><td>'+(it.points.referral[2])+'</td><td>'+(it.points.referral[3])+'</td></tr><tr><td>Total:</td><td>'+(it.points.total[0])+'</td><td>'+(it.points.total[1])+'</td><td>'+(it.points.total[2])+'</td><td>'+(it.points.total[3])+'</td></tr></tbody></table></div> </div></div> </div>';return out;
})
var SNS_VISITS_TEMPLATE = (function anonymous(it
) {
var out='<div class="row">';if(it.links.facebook){out+='<div class="col-md-12"> <div class="panel panel-white"><div class="panel-heading"> <h5 class="panel-title">Like us on Facebook</h5></div><div class="panel-body"> <a href="https://fathomless-wave-75159.herokuapp.com/sns/visit/'+(it.email)+'/facebook" target="_blank">'+(it.links.facebook)+'</a></div> </div></div>';}if(it.links.twitter){out+='<div class="col-md-12"><div class="panel panel-white"> <div class="panel-heading"><h5 class="panel-title">Retweet us on Twitter</h5> </div> <div class="panel-body"><a href="https://fathomless-wave-75159.herokuapp.com/sns/visit/'+(it.email)+'/twitter" target="_blank">'+(it.links.twitter)+'</a> </div></div></div>';}if(it.links.youtube){out+='<div class="col-md-12"><div class="panel panel-white"> <div class="panel-heading"><h5 class="panel-title">Like us on YouTube</h5> </div> <div class="panel-body"><a href="https://fathomless-wave-75159.herokuapp.com/sns/visit/'+(it.email)+'/youtube" target="_blank">'+(it.links.youtube)+'</a> </div></div></div>';}out+='</div>';return out;
})
})();
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
Raw
style.css
#zl-preloader {
width: 64px;
margin: 0 auto;
padding-top: 50px;
}
.lds-ring {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid #ccc;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #ccc transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment