<?php
session_start();
include '../../corporate-admin/settings/database.php';
$id = $_GET['user_id'];
/*
if($id == ''){
header("Location:index.php?page=Logout");
}elseif($id == 0){
header("Location:index.php?page=Logout");
*/
$user_id_get = $_GET['user_id'];
$user_name_get = $_GET['user_name'];
$user_role_get = 'Student';
$_SESSION['user_id_session'] = $user_id_get;
$_SESSION['user_name_session'] = $user_name_get;
$user_id = $_SESSION['user_id_session'];
$user_name = $_SESSION['user_name_session'];
//echo "+======= $user_id ====== $user_name ===";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@300&family=Jost:wght@100&family=Lato:wght@700&family=Roboto+Slab:wght@300;400;500&family=Roboto:wght@500&family=Rubik:wght@300&family=Sevillana&display=swap" rel="stylesheet">
<title></title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.profile-section{
height: auto;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 0 auto;
margin-top: 10px;
font-family: 'Rubik', sans-serif;
}
a{
text-decoration: none;
color: rgb(24, 23, 23);
}
.second-section{
width: 100%;
height: auto;
}
.first-section{
display: flex;
justify-content: space-between;
flex-direction: row;
height: auto;
width: 100%;
align-items: center;
gap:10px;
margin-bottom:50px;
}
.profile-heading{
display: flex;
align-items: center;
gap: 20px;
justify-content: center;
}
.heading{
font-size:20px ;
font-weight: 700;
}
.arrow-left{
font-size: 30px;
}
.profile-heading{
padding-right:10px;
}
.profile-img img{
height: 60px;
width: 60px;
border-radius: 50%;
}
.meter-img img{
height: 200px;
width: 80%;
margin-right: 10%;
margin-left: 10%;
}
.second-section{
display: flex;
justify-content: space-between;
flex-direction: row;
height: auto;
width: 100%;
align-items: center;
background-color: #ffffff;
border-radius: 10px;
}
.third-section{
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
background-color: #5b65ad;
height: auto;
width: 100%;
gap: 15px;
}
.third-section .third-section-top{
height: auto;
width: 30%;
display: flex;
align-items: center;
flex-direction: column;
color: white;
padding-top: 10px;
gap: 14px;
margin-bottom:10px;
}
.third-section .third-section-top button{
padding: 4px;
height: 40px;
width: 150px;
border-radius: 10px;
background-color:white ;
color: #4274b6;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
font-size: 15px;
border: none;
cursor: pointer;
}
.third-section .third-section-top span{
font-size: 30px;
}
.third-section-middle{
height: auto;
width: 100%;
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-around;
color: white;
}
.middle-common{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.button-section{
display: flex;
flex-direction: column;
height: auto;
width: 100%;
align-items: center;
justify-content: center;
gap: 21px;
margin: 10px;
}
.button-section button {
height: auto;
padding: 6px;
width: 80%;
background-color: white;
display: flex;
align-items: center;
justify-content: space-around;
border-radius: 10px;
font-size: 16px;
gap: 15px;
border: none;
cursor: pointer;
margin-bottom: 10px;
box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}
.btn-icon{
font-size: 40px;
}
hr{
height: 30px;
}
@media screen and (min-width: 480px) {
.profile-section{
height: auto;
width: 30%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 0 auto;
margin-top: 30px;
}
}
</style>
</head>
<body>
<div class="profile-section">
<div class="first-section">
<div class="profile-heading">
<!-- <a href="">
<span class="arrow-left"><i class="fa-solid fa-circle-arrow-left"></i></span>
</a>
<a href="">
<span class="heading">Profile</span>
</a>-->
</div>
<div class="profile-img">
<a href="">
<img src="data:image/jpeg;base64,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" alt="no img">
</a>
</div>
</div>
<div class="second-section">
<div class="meter">
<div class="meter-img">
<img src="../../images/meter-img.jpeg" alt="">
</div>
</div>
</div>
<div class="third-section">
<div class="third-section-top">
<h4 style="text-align: center;"><?php echo $user_name; ?></h4>
<span style="font-size:15px;">Skill Score</span>
<button><h5>invite a friend</h5><span><i class="fa-solid fa-circle-plus"></i></span></button>
</div>
<div class="third-section-middle">
<div class="middle-common">
<span>2</span>
<span>Courses</span>
</div>
<hr>
<div class="middle-common">
<span>3</span>
<span>Points</span>
</div>
<hr>
<div class="middle-common">
<span>4</span>
<span>Rank</span>
</div>
</div>
<div class="button-section">
<button><span class="btn-icon"><i class="fa-solid fa-user"></i></span><h3>Profile</h3><span><i class="fa-solid fa-circle-arrow-right"></i></span></button>
<button> <span class="btn-icon"><i class="fa-solid fa-record-vinyl"></i></span><h3>Record</h3><span><i class="fa-solid fa-circle-arrow-right"></i></span></button>
<button><span class="btn-icon"><i class="fa-solid fa-certificate"></i></span><h3>Certificate</h3><span><i class="fa-solid fa-circle-arrow-right"></i></span></button>
</div>
</div>
</body>
</html>