<!DOCTYPE html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/> <meta charset="utf-8"> <meta name='viewport' content='width=device-width, initial-scale=1.0' > <link rel="stylesheet" type="text/css" href="z0.css"> <link rel="stylesheet" type="text/css" href="z51.css"> <script type="text/javascript" src="z.js"></script> <?php require_once "ssession.php"; session_start(); // Check if the user is logged in, if not then redirect him to login page if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){ header("location: welcome.php"); exit; } $id=$_SESSION["uid"] ; $username=$_SESSION["username"]; // $company=$_SESSION["company"]; // $guser=$_SESSION["guser"]; $userid=$_SESSION["uid"] ; //if (intval($guser)>=100) header("location: cosmos.php"); //if (intval($guser)==10) header("location: osmo.php"); if (intval($guser)<1) header("location: kosmo.php"); ?> </head> <body> <div id=sbcont><div class="vsmenu"> <a href="zlisalist60.php" >User</a> <a href="zlisalist60.php" class=active> My</a> <a href="zlisalist60a.php" > User Score All</a> <a href="zprog_list.php" >Program</a> <a href="zprog_list.php" > Program</a> <a href="zprog_listd.php" > List Program</a> <a href="zlistq.php"> List Question</a> <a href="zall_items.php" > List all items</a> <a href="cloud3.php" class=> Cloud3</a> <a href="zsuperu2.php" >SU</a> <a href="cosmos.php" class=""> cosmos</a> <a href="cloud.php" > cloud</a> <a href=https://on.itlgx.xyz/zcreate_difa4.php?t=t> attcProfile</a> <a href="sky.php" class=""> Sky</a> <a href="sky2.php" class=""> Sky2</a> <a href="zregister.php" > AddUserR1</a> <a href="zprof_list.php" > Profile</a> <a href="zprof_listd.php"> List Address</a> <a href="zlistpf.php"> List Profile</a> <a href="zallpf_items.php" > List all items</a> <a href="zallpfa_items.php" > List all items/users</a> <a href="zallpfa2_items.php" > all items/users</a> <div class=rsslbar_body> <a href="earth.php" >earth</a> <center><center> <h3>Rec.Numbers <span id="count3" </span></h3> <br><br> <img src="venus.png" width=80px height=80px> </div></div></div> <div id="snackbar2">Data Saved <br>message<br>..</div> <div id="snackbar5" > <span class=close5 onclick=closeme5("snackbar5"); >✕</span><div id=snackbar5cont></div><br></div> <div id="snackbar6" > <span class=close6 onclick=closeme6("snackbar6"); >✕</span><div id=snackbar6cont></div><br></div> <div id="snackbarx" > <span class=closex onclick=closemex("snackbarx"); >✕</span><br></div> <div id="rsslbar" class="rsslbar vrmenu"> <div class=rsslbar_title onclick="rsslbar_off()"><span title="Setting"></span> </div><br><br> <a href="javascript:void(0)" class="closebtnr" onclick="rsslbar_off()">×</a> <a href="#" class="active">Q/A</a> <a href="#">Services</a> <a href="#">Clientss</a> <a href="#">Contact</a> <div class=rsslbar_body> <br> User Name:songpon_K:0 <hr> Current LANG:<span id=lang>en</span> <br><button class="button1 grey" onclick=setlang("th")>TH</button>/<button class="button1 grey" onclick=setlang("en")>EN</button> </div> </div> <div id="lsslbar" class="lsslbar vlmenu" onclick="lsslbar_off()"> <div class=lsslbar_title><></div><br><br> <a href="javascript:void(0)" class="closebtn" onclick="lsslbar_off()">×</a> <a href="#" class="active" >About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> <div id="extbar" class="extbar" onclick="extbar_off()"> <a href="javascript:void(0)" class="closebtn" onclick="extbar_off()">×</a> <br><br><div class=extbar_title >info</div> <div class=extbar_body> <div class=extbar_body_in> iNfO<br> User Name:songpon_K </div> <button class="button red d-center" onclick="extbar_off()"></span>Close</button> </div> </div> <div id="alertbar" class="alertbar" onclick="alertbar_off()"> <div class=extbar_body_in> info<br> User Name:songpon_K </div> </div> <div id=maincont> <!--st breadcrumb--> <span class="breadcrumb"> <a href="welcome.php">Home</a> / <a href="osmo.php" class=active>Admin Dashboard</a> / <a href="kosmo.php" class=active>User Dashboard</a> / <a href="logout.php" class="btn btn-danger">Sign Out of Your Account</a> </span> <!--en breadcrumb--> <div id=topbar> <span class=whead>WMenu</span><span class=mhead >⟨</span> <span id="logo" class="icon icon-logo" ></span> <span class=right > <a style="padding-left:1px;" href="#\" onclick="extbar_on();"><span class="icon icon-warning" title="connected"></span></a> <a style="padding-left:1px;" href="#\" onclick="snackbar('user');"><span class="icon icon-user" title="HELLO "></span></a> <a style="padding-left:1px;" href="#\" onclick=reloadme();><span class="icon icon-sync" title="sync data"></span></a> <a style="padding-left:1px;" href="#\" onclick="rsslbar_on();"><span class="icon icon-gear" title="Setting"></span></a> <!-- <a style="padding-left:1px;" href="#" onclick=sbconth2no();><span class="icon icon-menufold" title="LOGOUT"></span></a> --> <a style="padding-left:1px;" href="logout.php" ><span class="icon icon-logout" title="Logout"></span></a> </span> </div> <link rel="stylesheet" type="text/css" href="shirt.css"> <script type="text/javascript" src="shoes.js"></script> <script> p=new makediv ("bottombar"); ebyid ("bottombar").innerHTML='<a id=lang style="margin-right:10px;float:left;" href=# ><?php echo $_SESSION['lang'];?></a><a style="margin-right:10px;float:left;" href=# ></a><span class="ibrinking" style="color:black"; style="margin-left:1%;"><?php echo htmlspecialchars($username);?>:<?php echo ($guser);?></span><a style="margin-right:20px;float:right;;" href=#\ onclick="dlmode();return false;">DAK</a><a style="margin-right:10px;float:right;" href=# onclick="blmode();return false;" >BLU</a><a style="margin-right:10px;float:right;" href=# onclick="ormode();return false;" >YEL</a><a style="margin-right:10px;float:right;" href=# onclick="rdmode();return false;" >RED</a><a style="margin-right:10px;float:right;" href=# onclick="grmode();return false;" >GRE</a>'; showd("bottombar"); p=new makediv("snackbar"); ebyid("snackbar").innerHTML="<p>USER</p>"; showd("snackbar"); //active user icon var cols = document.getElementsByClassName('icon-user')[0]; // cols.style.Color = 'black'; cols.style.filter = 'invert(0%)';// cols.style.filter = 'invert(0%)'; //active user icon </script> <script type="text/javascript" src="socks.js"></script> <!--startflexcontainer--> <div class="flex container"> <!--startsection--> <section> <div class="flex info"> <div class="info-name"></div> <div class="info-code"><?php echo date("Y-m-d"). ":".date("h:i:sa");?></div> </div> <?php // Include config file require_once "configs.php"; $rows=0; $sql="SELECT tas,fixa.title,packid,count(dyna.id) as total ,sum(CASE WHEN progress>0 THEN 1 ELSE 0 END) as progress,sum(CASE WHEN submit=1 THEN 1 ELSE 0 END) as submit,sum(CASE WHEN register=1 THEN 1 ELSE 0 END) as approve ,sum(CASE WHEN register=1 THEN 1 ELSE 0 END) as register FROM `dyna` left join fixa on fixa.id=dyna.packid group by packid"; $res = $db->query($sql); while ($row = $res->fetchArray()) { $registered=$row['register']; $submit=$row['submit']; $title=urlencode($row['title']); $titled=urldecode($row['title']); $packid=$row['packid']; $total=$row['total']; $tas=$row['tas']; $progress=$row['progress']; $approve=$row['approve']; $links.="🧾<a href=?packid=$packid®istered=$registered&progress=$progress&total=$total&tas=$tas&submit=$submit&title=$title>$titled</a><br>"; } $total=$_GET['total']; if (!$progress) $progress=$_GET['progress']; if (!$grade) $grade=$_GET['grade']; $registered=$_GET['registered']; $submit=$_GET['submit']; if (!$percent) $ascore=$_GET['ascore']; else $ascore=$percent; $progress=$_GET['progress']; if (!$percent) $pscore=$_GET['pscore']; $percent=number_format(floor(($registered/$total)*100),2); $percent=number_format(($progress/$registered)*100,2); //$percent=($registered/$submit)*100; $act=$total-$submit-$noact; ?> <center><h3>in Progress <?php echo $progress." of ".$total;?></h3><hr><br> <div class="pie" data-pie='{ "percent": <?php echo $percent;?> }'></div> <div class="code"> </div><br> TIME LEFT <p id=demo></p></center> <i>*inProgress=OnProgress+Submited</i> </section> <section> <div class="flex info"> <div class="info-name">Program:All</div> <div class="info-code"></div> </div> <div class="profile_pic"> <img style="max-width:100%; border-radius: 50%;" src=img/clist.jpg> </div> Check-List for <br> <h1> <?php echo $links;?> </h1> <div class="code"> </div> </section> <!--endsection--> <!--startsection--> <section> <?php $submit=$_GET['submit']; $percent=number_format(($submit/$registered)*100,2); $packid=$_GET['packid']; $title=urlencode($_GET['title']); ?> <div class="flex info"> <div class="info-name">Submit Status</div> <div class="info-code"><?php echo $percent."%";?></div> </div> <center> <h3>Submited <?php echo $percent;?>%</h3><hr><br> <div class="pie" data-pie='{ "inverse": true, "percent": <?php echo $percent;?>, "colorSlice": "red", "colorCircle": "blue", "fontWeight": 100 }'> </div> <table ><tr> <td><?php echo "<a href='kosmos3.php?packid=$packid&submited=$submit&total=$total&title=$title' class='button1 red' style='color:white;' >Submited $submit</a>";?></td> <td><?php echo "<a href='kosmos4.php?packid=$packid®istered=$registered&total=$total&title=$title' class='button1 blue' style='color:white;' >Registered $registered</a>";?></td> </tr> </table> <center> <div class="code"> </div> </section> <section> <?php $total=$_GET['total']; $progress=$_GET['progress']; $percent=number_format(floor(($progress/$total)*100),2); $percent=100-$percent; $packid=$_GET['packid']; ?> <div class="flex info"> <div class="info-name">Registered but Not Active</div> <div class="info-code"><?php $noact=$total-$progress;echo $noact;$act=$total-$submit-$noact;?></div> </div> <center> <div class="pie" data-pie='{ "lineargradient": ["yellow","#ff0000"], "round": true, "percent": <?php echo $percent;?>, "colorCircle": "#e6e6e6" }'> </div> <?php echo $percent."%";?><br> <br> <?php echo "<a href='kosmos7.php?packid=$packid&noact=$act&total=$total' class='button1 blue' style='color:white;' >On Progress :$act</a>";?><br><br> <?php echo "<a href='kosmos2.php?packid=$packid&noact=$noact&total=$total' class='button1 red' style='color:white;' >Not Active :$noact</a>";?> </center> <div class="code"> </div><br> *On Progress=Registered- (Submited+Not Active) </section> <section class="section2"> <div class="flex info"> <div class="info-name">RANKING</div> <div class="info-code">A,B,C,D</div> </div> <center> <?php $packid=$_GET["packid"]; $title=$_GET["title"]; $tas=$_GET["tas"]; // Include config file require_once "config.php"; $rows=0; ?> <h3><?php echo $title;?></h3> <?php // Attempt select query execution $sql = "SELECT * FROM `dyna` join fixa on dyna.packid=fixa.id"; $sql="select * from dyna left join users on dyna.ownerid=users.id left join fixa on fixa.id=dyna.packid where dyna.packid=".$packid." order by dyna.ibox"; $sql="select *,(ibox/fixa.tas)*100 as grade,sum(case when((ibox/fixa.tas)*100)<60 then 1 else 0 end ) as d ,sum(case when((ibox/fixa.tas)*100)>=60 and ((ibox/fixa.tas)*100)<70 then 1 else 0 end) as c ,sum(case when((ibox/fixa.tas)*100)>=70 and ((ibox/fixa.tas)*100)<80 then 1 else 0 end ) as b ,sum(case when((ibox/fixa.tas)*100)>80 then 1 else 0 end) as a from dyna left join users on dyna.ownerid=users.id left join fixa on fixa.id=dyna.packid where dyna.packid=$packid ORDER BY `dyna`.`ibox` DESC"; $res = $db->query($sql); if ($res) { // echo "<table id=tble style='overflow-x:auto;' class='table'>"; // echo "<tr>"; // echo "<th>Mgr</th><th style='width:150px;' onclick='sortTableX(1)'>Company</th><th onclick='sortTableX(2)'>User</th><th>Percent</th><th>Grade</th><th style='width:100px;'>Score [<a href=# onclick='sortTablen()'>🔺</a> <a href=# onclick='sortTablen2()' >🔻</a>]</th><th>Edit</th>"; // echo "</tr>"; while ($row = $res->fetchArray()) { // echo "<td> ".$row["a"].$row["b"].$row["c"].$row["d"]."</td>"; $ga=$row["a"]; $gb=$row["b"]; $gc=$row["c"]; $gd=$row["d"]; $rows++; ?> <?php } //echo "</td>"; echo "</tr>"; echo "</table>"; } else{ //echo "ERROR: Could not able to execute $sql. " . mysqli_error($link); echo "Pls choose Program"; } // Close connection //mysqli_close($link); echo "<pre>"; echo "<hr>"; ?> <table ><tr> <?php echo "<td align='left' ><a href=kosmos.php?grade=a&packid=$packid&tas=$tas&total=$ga&title=$title class='button3 red' style='color:white;' >A:$ga</a> </td><td align='right' ><a href=kosmos.php?grade=b&packid=$packid&tas=$tas&total=$gb&title=$title class='button3 pink' style='color:white;' style='padding: 5px;'>B:$gb</a> </td><td align='left' ><a href=kosmos.php?grade=c&packid=$packid&tas=$tas&total=$gc&title=$title class='button3 green' style='color:black;'>C:$gc </a></td><td align='right' ><a href=kosmos.php?grade=d&packid=$packid&tas=$tas&total=$gd&title=$title class='button3 blue' style='color:black;' style='padding: 5px;'> D:$gd</a><td>"; ?> </tr> </table> <!-- end outertb --> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.min.js" integrity="sha512-VCHVc5miKoln972iJPvkQrUYYq7XpxXzvqNfiul1H4aZDwGBGC0lq373KNleaB2LpnC2a/iNfE5zoRYmB4TRDQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <center> <div class=canvas-container > <canvas id="myChart1" width="320px" height="200"></canvas><br> </div> </center> <style> .canvas-container { // display: flex; width: 100%; margin-top:-100px; } #myChart1 { width:100%; } </style> <script> var xValues = ["A", "B","C", "D"]; var yValues = [<?php echo $ga;?>,<?php echo $gb;?>,<?php echo $gc;?>,<?php echo $gd;?>]; var barColors = ["red", "#fa82ae","green","#008CBA"]; new Chart("myChart1", { type: "bar", data: { labels: xValues, datasets: [{ backgroundColor: barColors, label: 'RANKING', data: yValues, }] }, options: { legend: {display: false}, title: { display: false, text: "Compare" }, responsive: false, maintainAspectRatio: true, } }); </script> </center> <div class="code"> </div> *A : more than 80% ,B : more than 70% ,C : more than 60% ,D : under 60% </section> <section class="section2"> <div class="flex info"> <div class="info-name">TYPE of Business</div> <div class="info-code">DRY,FRESH,NONE FOOD</div> </div> <center> <?php $packid=$_GET["packid"]; $title=$_GET["title"]; $tas=$_GET["tas"]; // Include config file require_once "configs.php"; $rows=0; ?> <h3><?php echo $title;?>:Business Type</h3> <?php // Attempt select query execution $sql = "SELECT * FROM `dyna` join fixa on dyna.packid=fixa.id"; $sql="select * from dyna left join users on dyna.ownerid=users.id left join fixa on fixa.id=dyna.packid where dyna.packid=".$packid." order by dyna.ibox"; $sql="SELECT *,sum(case when businesstype=1 then 1 else 0 end ) as b1,sum(case when businesstype=2 then 1 else 0 end ) as b2,sum(case when businesstype=3 then 1 else 0 end) as b3 FROM `dyna` join users on users.id=dyna.ownerid where packid=$packid"; $res = $db->query($sql); if ($res) { // echo "<table id=tble style='overflow-x:auto;' class='table'>"; // echo "<tr>"; // echo "<th>Mgr</th><th style='width:150px;' onclick='sortTableX(1)'>Company</th><th onclick='sortTableX(2)'>User</th><th>Percent</th><th>Grade</th><th style='width:100px;'>Score [<a href=# onclick='sortTablen()'>🔺</a> <a href=# onclick='sortTablen2()' >🔻</a>]</th><th>Edit</th>"; // echo "</tr>"; // if(mysqli_num_rows($result) > 0){ while ($row = $res->fetchArray()) { // echo "<td> ".$row["b1"].$row["b2"].$row["b3"]."</td>"; $ga=$row["b1"]; $gb=$row["b2"]; $gc=$row["b3"]; $rows++; ?> <?php } //echo "</td>"; echo "</tr>"; echo "</table>"; } else{ //echo "ERROR: Could not able to execute $sql. " . mysqli_error($link); echo "Pls choose Program"; } // Close connection //mysqli_close($link); echo "<pre>"; echo "<hr>"; ?> <table ><tr> <?php echo "<td align='left' ><a href=kosmos1.php?grade=a&packid=$packid&bt=1&tas=$tas&b=$ga&title=$title class='button3 red' style='color:white;' >DRY :$ga</a> </td><td align='right' ><a href=kosmos1.php?grade=b&packid=$packid&tas=$tas&bt=2&b=$gb&title=$title class='button3 green' style='color:green;' style='padding: 5px;'>FRESH :$gb</a> </td><td align='left' ><a href=kosmos1.php?grade=c&packid=$packid&bt=3&tas=$tas&b=$gc&title=$title class='button3 grey' style='color:black;'>NONE :$gc </a></td><td>"; ?> </tr> </table> <!-- end outertb --> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.min.js" integrity="sha512-VCHVc5miKoln972iJPvkQrUYYq7XpxXzvqNfiul1H4aZDwGBGC0lq373KNleaB2LpnC2a/iNfE5zoRYmB4TRDQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <div class=canvas-container > <canvas id="myChart2" width="340" height="200"></canvas><br> </div> <style> .canvas-container { display: flex; width: 100%; margin-top:-100px; } #myChart2 { margin-left:-25px; left:10%; width:100%; } </style> <script> var xValues = ["DRY", "FRESH","NONE"]; var yValues = [<?php echo $ga;?>,<?php echo $gb;?>,<?php echo $gc;?>]; var barColors = ["red", "green","grey"]; new Chart("myChart2", { type: "bar", data: { labels: xValues, datasets: [{ backgroundColor: barColors, label: 'RANKING', data: yValues, }] }, options: { legend: {display: false}, title: { display: false, text: "Compare" }, responsive: false, maintainAspectRatio: true, } }); </script> </center> <div class="code"> </div><br><br> * DRY : Dry Food, FRESH : Fresh Food , None : None Food </section> <section> <div class="flex info"> <div class="info-name">GRADE <b>D</b> RANKING</div> <div class="info-code"><?php echo $gd;?></div> </div><center> <?php $total=$_GET['total']; $tas=$_GET['tas']; $percentz=number_format((($gd/$total)*100),2); ?> <div class="pie" data-pie='{ "lineargradient": ["yellow","#ff0000"], "round": true, "percent": <?php echo $percentz;?>, "colorCircle": "#e6e6e6" }'> </div> <?php echo $percentz."%";?> <br><br> <?php echo "<a href='kosmos6.php?packid=$packid&grade=d&dusers=$gd&total=$total&tas=$tas' class='button1 red' style='color:white;' >Follow GRADE D users :$gd</a>";?> </center> <div class="code"> </div> </section> <hr> <section class="section4"> <div class="flex info"> <?php $percent=number_format(floor(($submit/$total)*100),2);?> <div class="info-name">Section list</div> <div class="info-code"><?php echo $score;?></div> </div> <?php $crurl= (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; // Include config file // require_once "config.php"; $rows=0; // Attempt select query execution //$userid=$_GET['ownid']; $packid=$_GET['packid']; $userid=$_GET['userid']; $sql = "SELECT * FROM fixa where scode like "."'q%'"."order by scode,title"; //$sql="SELECT * FROM `kepa` join fixa on kepa.fixaid=fixa.id WHERE kepa.ownkepaid =".$userid; $sql="SELECT * FROM `kepa` join lisa on lisa.fixaid=kepa.fixaid join fixa on kepa.fixaid=fixa.id where lisa.fbox>0 and kepa.packid=".$packid. " and kepa.ownkepaid=".$userid. " GROUP by kepa.id"; $sql="SELECT * ,lisa.id as lisaid FROM `kepa` join lisa on lisa.fixaid=kepa.fixaid join fixa on kepa.fixaid=fixa.id where lisa.fbox>0 and kepa.packid=".$packid." group by lisa.fixaid"; $res = $db->query($sql); if ($res) { echo "<table id=tble style='overflow-x:auto;' class='table'>"; echo "<thead>"; echo "<tr>"; // echo "<th style='width:2%;'>#</th>"; echo "<th style='width:20%;' onclick='sortTable(1)' >Section</th>"; // echo "<th style='width:10%;' onclick='sortTable(1)' >company</th>"; // echo "<th style='width:2%;'>Score</th>"; // echo "<th style='width:2%;'>Line Score</th>"; echo "<th style='width:5%;'>View</th>"; echo "</tr>"; echo "</thead>"; echo "<tbody>"; while ($row = $res->fetchArray()) { echo "<tr>"; // echo "<td>" . $row['id'] . "</td>"; if ($_SESSION['lang']=="en") $title=$row['title']; else $title=$row['title_th']; echo "<td>" . $title. "</td>"; // echo "<td>" . $company. "</td>"; // echo "<td>" . $row['ibox'] . "</td>"; // echo "<td>" . $row['fbox'] . "</td>"; if ($row['ibox'] >= $row['fbox']) $fail="<span style='color:green'>PASSED</span>";else $fail="<span style='color:red'>FAIL</span>"; $failscore=$row['ibox']."/".$row['fbox'] ; echo "<td>" ."<a href=zsection1.php?packid=".$packid."&lisaid=".$row['lisaid']."&title=".urlencode($title).">📄</a>". "</td>"; $rows++; ?> <?php } //echo "</td>"; echo "</tr>"; echo "</table>"; } else{ //echo "ERROR: Could not able to execute $sql. " . mysqli_error($link); echo "Pls choose Program"; } // Close connection //mysqli_close($link); echo "<pre>"; ?> <center> </section> <!--end1flexcontainer--> </div> <!--end2flexcontainer--> <script> window.addEventListener('DOMContentLoaded', () => { const circle = new CircularProgressBar('pie'); const pie = document.querySelectorAll('.pie'); const range = document.querySelector('[type="range"]'); range.addEventListener('input', (e) => { pie.forEach((el, index) => { const options = { index: index + 1, percent: e.target.value } circle.animationTo(options); }) }) document.querySelectorAll('pre code').forEach((el) => { hljs.highlightElement(el); }); const infoCode = document.querySelectorAll('.info-code'); infoCode.forEach(info => { info.addEventListener('click', (e) => { e.target.closest('section').classList.toggle('show-code'); }) }) }); </script> <script src="circularProgressBar.min.js"></script> <!-- Display the countdown timer in an element --> <script> // Set the date we're counting down to var countDownDate = new Date("Sep 8, 2021 15:37:25").getTime(); // Update the count down every 1 second var x = setInterval(function() { // Get today's date and time var now = new Date().getTime(); // Find the distance between now and the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display the result in the element with id="demo" document.getElementById("demo").innerHTML = days + " day(s) " + hours + "h " + minutes + "m " + seconds + "s "; // If the count down is finished, write some text if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; } }, 1000); </script> <style> #main { margin:auto; } section { position: relative; background-color: rgba(169,169,169,.19);//#fff; border-radius: 7px; padding: 5px 40px 30px; margin: 10px; max-width: 180px; box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07), 0 8px 16px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.07), 0 32px 64px rgba(0,0,0,0.07); flex: 31%; } .section2 { //margin: 50px; //padding: 5px 30px 30px; max-width: 320px; //max-width: 660px; min-width: 140px; //max-width: 100%; } .section3 { //margin: 50px; //padding: 5px 30px 30px; max-width: 620px; min-width: 300px; max-width: 100%; } .section4 { max-width: 460px; max-width: 1040px; } @media screen and (max-width: 900px) { section { max-width: 100%; //max-width: 160px; } .section2 img { max-width:50px; } .section2 { max-width: 100%; max-width: 930px; } .section3 { max-width: 100%; } } @media screen and (min-width: 900px) and (max-width: 1140px) { section { max-width: 175px; } .section2 { max-width: 445px; //max-width: 520px; } .section3 { max-width: 400px; //max-width: 500px; max-width:720px; } .section4 { //max-width: 460px; max-width: 720px; min-width: 720px; } } @media screen and (min-width: 1140px) { .section2 { max-width: 320px; //max-width: 520px; } .section3 { max-width: 400px; //max-width: 500px; max-width:600px; } .section4 { //max-width: 460px; max-width: 1020px; } } .flex { display: flex; } .container { flex-wrap: wrap; justify-content: center; max-width: 1400px; margin: auto; } .info { justify-content: space-between; border-bottom: 1px solid rgba(169,169,169,.59); padding: 10px 0; text-transform: uppercase; font-size: 90%; margin: auto -15px 30px; } .code { visibility: hidden; opacity: 0; position: absolute; width: 160px; height: 0; left: 0; margin: auto; line-height: 1.6; transition: visibility 0s, opacity 0.5s linear; } </style> <style> #main{ width:87%; } .vrmenu { color:black; } #piechart { margin-left:-100px; margin-top:-10px; height:300px; } </style>
Edit file:osmo.php36759