<!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)>0) header("location: cosmos.php"); else 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="kosmo.php" class=active>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="wider"></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);?></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">TODAY:</div> <div class="info-code">AUG2021 15:00</div> </div> <center><h3>Check-List Progress </h3><hr><br> <div class="pie" data-pie='{ "percent": 12 }'></div> <br> TIME LEFT <p id=demo></p> </center> </section> <!--endsection--> <!--startsection--> <section> <div class="flex info"> <div class="info-name">Name: gradient</div> <div class="info-code"></div> </div> <center> <div class="profile_pic"> <img style="max-width:192px ;border-radius: 50%;" src=https://i.pinimg.com/originals/03/b6/fe/03b6fe528accfd011629f5271e90e9ac.jpg> </div> <br> Name: gradientName: <br>gradientName: gradientName: </center> </section> <section> <div class="flex info"> <div class="info-name">STATUS PASSED</div> <div class="info-code"></div> </div> <div class="pie" data-pie='{ "lineargradient": ["yellow","#ff0000"], "round": true, "percent": 75, "colorCircle": "#e6e6e6" }'> </div> </section> <section> <div class="flex info"> <div class="info-name">Achived Project</div> <div class="info-code"></div> </div> <div class="pie" data-pie='{ "inverse": true, "percent": 75, "colorSlice": "#AB47BC", "colorCircle": "#f1f1f1", "fontWeight": 100 }'> </div> </section> <section class="section2"> <div class="flex info"> <div class="info-name">RANKING</div> <div class="info-code">code</div> </div> <div class="pie" data-pie='{ "rotation": 90, "percent": 75, "colorSlice": "#ff8c69", "colorCircle": "#f1f1f1", "fontWeight": 100 }'> </div> <div class="code"> <pre> <code class="language-json">data-pie='{ "rotation": 90, "percent": 75, "colorSlice": "#ff8c69", "colorCircle": "#f1f1f1", "fontWeight": 100 }'</code> </pre> </div> </section> <section class="section3"> <div class="flex info"> <div class="info-name">RANKING</div> <div class="info-code"></div> </div> <img style="max-width:600px;border-radius: 7px;box-shadow: 10px 10px #aaaa;" src=https://mobilunity.com/wp-content/uploads/2018/07/demand-for-european-software-developers-1.jpg> </section> <hr> <section> <div class="flex info"> <div class="info-name">Total Registered</div> <div class="info-code"></div> </div> <div class="pie" data-pie='{ "animationOff": true, "percent": 75, "colorSlice": "#CDDC39", "colorCircle": "#f1f1f1", "fontWeight": 100 }'> </div> </section> <section> <div class="flex info"> <div class="info-name">Total Registered</div> <div class="info-code"></div> </div> <div class="pie" data-pie='{ "animationOff": true, "percent": 75, "colorSlice": "#CDDC39", "colorCircle": "#f1f1f1", "fontWeight": 100 }'> </div> </section> <section> <div class="flex info"> <div class="info-name">Total Registered</div> <div class="info-code"></div> </div> <div class="pie" data-pie='{ "animationOff": true, "percent": 75, "colorSlice": "#CDDC39", "colorCircle": "#f1f1f1", "fontWeight": 100 }'> </div> </section> <section> <div class="flex info"> <div class="info-name">Total Registered</div> <div class="info-code"></div> </div> <div class="pie" data-pie='{ "animationOff": true, "percent": 75, "colorSlice": "#CDDC39", "colorCircle": "#f1f1f1", "fontWeight": 100 }'> </div> </section> <section class="section2"> <div class="flex info"> <div class="info-name">RANKING</div> <div class="info-code">code</div> </div> <div class="pie" data-pie='{ "rotation": 90, "percent": 75, "colorSlice": "#ff8c69", "colorCircle": "#f1f1f1", "fontWeight": 100 }'> </div> </section> <section class="section3"> <div class="flex info"> <div class="info-name">RANKING</div> <div class="info-code">code</div> </div> <div class="pie" data-pie='{ "rotation": 90, "percent": 75, "colorSlice": "#ff8c69", "colorCircle": "#f1f1f1", "fontWeight": 100 }'> </div> </section> <section class="section4"> <div class="flex info"> <div class="info-name">RANKING</div> <div class="info-code">code</div> </div> <div class="pie" data-pie='{ "rotation": 90, "percent": 75, "colorSlice": "#ff8c69", "colorCircle": "#f1f1f1", "fontWeight": 100 }'> </div> </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("Aug 18, 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:k.php21910