Skip to content
Snippets Groups Projects
Commit 7a82addf authored by Christophorus Dharma Winata's avatar Christophorus Dharma Winata
Browse files

feat: account-page.php loggedout_catch() 

feat: make-sale styling
parent 57f473de
No related merge requests found
Hide whitespace changes
Inline Side-by-side
client/css/account-page.css
+ 7
− 5
View file @ 7a82addf
......@@ -15,7 +15,7 @@
mix-blend-mode: multiply;
background-position: center;
background-size: cover;
display: grid;
display:block;
place-items: center;
}
.account-details{
......@@ -23,7 +23,9 @@
min-width: 50%;
min-height: 67%;
max-width: 67%;
margin: 15%;
margin-left: 15%;
margin-right: 15%;
margin-top: 5%;
border-style: ridge;
display:block;
border-radius: 10px;
......@@ -31,10 +33,10 @@
}
.account-details h1 {
margin-bottom: 10%;
margin-top: 5%;
margin-bottom: 10px;
/* margin-top: 5%; */
margin-left: 5%;
font-size: 40px;
font-size: 30px;
}
.button-field {
......
client/css/cart.css
+ 4
− 2
View file @ 7a82addf
......@@ -20,7 +20,9 @@
}
.cart-group{
padding-top: 10%;
margin-left: 15%;
margin-right: 15%;
margin-top: 5%;
display: block;
/* background-color: red; */
}
......@@ -71,7 +73,7 @@
#checkout-button {
cursor: pointer;
color: white;
background-color: rgb(137, 62, 137);
background-color: #3c00a0;
min-width: 25%;
height: 10vh;
font-size: 20px;
......
client/css/make-sale.css
+ 68
− 42
View file @ 7a82addf
......@@ -10,95 +10,121 @@
.container{
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../image/bg.webp);
position: relative;
/* max-width: 100%; */
/* height: 100vh; */
/* background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../image/bg.webp); */
mix-blend-mode: multiply;
background-position: center;
background-size: cover;
position: relative;
place-items: center;
display: block;
place-items: center;
}
.saleform-group {
position: relative;
/* width: 31%;
height: 31%; */
margin-top: 5vh;
min-width: 300px;
flex-shrink: 0;
display: grid;
place-items: center;
/* position: relative; */
min-width: 50%;
/* min-height: 67%; */
max-width: 67%;
margin-left: 15%;
margin-right: 15%;
margin-top: 5%;
/* border-style: ridge; */
display: block;
border-radius: 10px;
/* border-width: 10px; */
/* background-color: red; */
}
.saleform-group h1 {
color: #ffffffab;
/* color: #ffffffab; */
font-size: 30px;
font-style: normal;
font-weight: 800;
line-height: normal;
position: relative;
text-align: center;
margin-bottom: 21px;
margin-left: 5%;
margin-bottom: 10px;
}
.saleform-group button {
position: relative;
left: 25%;
}
form p {
text-align : center;
font-size : 20px;
color : #ffffffab;
/* color : #ffffffab; */
}
@media screen and ((max-width: 400px) or (max-height: 750px)) {
.saleform-group{
top: -5%;
@media screen and ((max-width: 600px)) {
.input-group{
display: flex;
flex-direction: column;
}
}
/* .input-group {
} */
#saleform {
display: flex;
flex-direction: column;
}
.input-group {
display: flex;
flex: 1 1 auto;
/* background-color: red; */
}
.input-image-field {
/* background: linear-gradient(rgba(255,255,255,0.67), rgba(255,255,255,0.67)); */
/* display:inline-block; */
flex: 1 1 1vw;
margin: 10px;
border-radius: 10px;
background-color: azure;
min-width: 20%;
min-height: 15vw;
transition: max-height 0.5s;
}
.input-text-fields {
flex: 1 1 auto;
/* background-color: #3c00a0; */
}
.input-field {
background: linear-gradient(rgba(255,255,255,0.67), rgba(255,255,255,0.67));
/* background: linear-gradient(rgba(255,255,255,0.67), rgba(255,255,255,0.67)); */
/* display: block; */
margin: 15px 0;
border-radius: 10px;
display: flex;
align-items: center;
max-height: 65px;
/* max-height: 65px; */
transition: max-height 0.5s;
overflow: hidden;
color: black ;
}
.currency_label {
margin: 15px 15px;
}
.input-field ::placeholder {
color: black;
}
#product_image {
background-color: azure;
}
input {
width: 100%;
background: transparent;
background-color: #eaeaea;
padding: 18px;
border-color: transparent;
}
.button-field {
width: 100%;
margin-top: 4vh;
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
}
.button-field button{
flex-basis: 48%;
/* flex-basis: 48%; */
min-width: 25%;
height: 5vh;
border-color: transparent;
margin-right: 15px;
/* margin-bottom: 15px; */
background: #3c00a0;
color: #fff;
height: 40px;
border-radius: 20px;
border-radius: 10px;
font-size: 20px;
border: 0;
outline: 0;
......
client/pages/account-page.php
+ 16
− 7
View file @ 7a82addf
<?php session_start()?>
<?php session_start();
if (!isset($_SESSION['username']) or !isset($_SESSION['email'])) {
echo '<script type = "text/javascript">
function loggedout_catch() {
alert("You are logged in, please logout first if you want to login again");
location.href = "../pages/login-page.php"
}
loggedout_catch();
</script>';
}?>
<!DOCTYPE html>
<html>
<head>
......@@ -6,16 +15,16 @@
<title>Account Page</title>
<link rel="stylesheet" href="../css/account-page.css">
<script src="https://kit.fontawesome.com/8505941c5b.js" crossorigin="anonymous"></script>
<!-- <link rel="stylesheet" href="../css/navbar.css"> -->
<!-- <script src="../js/navbar.js"></script> -->
<link rel="stylesheet" href="../css/navbar.css">
<script src="../js/navbar.js"></script>
</head>
<body>
<div class="container">
<!-- <div class="tabgroup" id="tabgroup">
<div class="tabgroup" id="tabgroup">
<script>
addnavbar();
</script>
</div> -->
</div>
<div class="account-details">
<h1>
Account Details
......@@ -23,13 +32,13 @@
<div class="text-field">
<label class="detail-label">Email</label>
<input class="detail-value" type="text" id="email-value" placeholder=
<?php echo isset($_SESSION["email"])?$_SESSION['email']:"ERROR: no login"?>
<?php echo isset($_SESSION["email"])?$_SESSION['email']:"<nologin>"?>
disabled>
</div>
<div class="text-field">
<label class="detail-label">Username</label>
<input class="detail-value" type="text" id="username-value" placeholder=
<?php echo isset($_SESSION["username"])?$_SESSION['username']:"ERROR: no login"?>
<?php echo isset($_SESSION["username"])?$_SESSION['username']:"<nologin>"?>
disabled>
</div>
<div class="text-field">
......
client/pages/make-sale.php
+ 16
− 13
View file @ 7a82addf
......@@ -18,21 +18,24 @@
<h1 id="title">Make A Sale</h1>
<form id="saleform">
<div class="input-group">
<div class="input-field">
<input type="text" id="product_name" placeholder="Product Name">
</div>
<div class="input-field">
<input type="text" id="product_description" placeholder="Product Description">
</div>
<div class="input-field">
<input type="text" id="product_price" placeholder="Price">
</div>
<div class="input-field">
<input type="text" id="product_qty" placeholder="Quantity">
</div>
<div class="input-field">
<div class="input-image-field">
<input type="image" id="product_image" placeholder="Product Image" title="Product Image">
</div>
<div class="input-text-fields">
<div class="input-field">
<input type="text" id="product_name" placeholder="Product Name">
</div>
<div class="input-field" id="product_description-field">
<input type="text" id="product_description" placeholder="Product Description">
</div>
<div class="input-field">
<input type="text" id="product_price" placeholder="Price">
</div>
<div class="input-field">
<input type="text" id="product_qty" placeholder="Quantity">
</div>
</div>
</div>
<div class="button-field">
<button type="button" id="salesubmit">Done</button>
......
client/protoype/account-page.html deleted 100644 → 0
+ 0
− 50
View file @ 57f473de
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial scale=1.0">
<title>Account Page</title>
<link rel="stylesheet" href="../css/account-page.css">
<script src="https://kit.fontawesome.com/8505941c5b.js" crossorigin="anonymous"></script>
<!-- <link rel="stylesheet" href="../css/navbar.css"> -->
<!-- <script src="../js/navbar.js"></script> -->
<!-- <?php session_start() ?> -->
</head>
<body>
<div class="container">
<!-- <div class="tabgroup" id="tabgroup">
<script>
addnavbar();
</script>
</div> -->
<div class="account-details">
<h1>
Account Details
</h1>
<div class="text-field">
<label class="detail-label">Email</label>
<input class="detail-value" type="text" id="email-value" placeholder="email-value" disabled>
</div>
<div class="text-field">
<label class="detail-label">Username</label>
<input class="detail-value" type="text" id="username-value" placeholder="username-value" disabled>
</div>
<div class="text-field">
<label class="detail-label">Password</label>
<input class="detail-value password" type="password" id="password-value" placeholder="--------" disabled oninput="confirmPassword()" onchange="cancelConfirmPassword()">
<p class="password-criteria"></p>
</div>
<div class="text-field" id="confirm-password-field">
<label class="detail-label">Confirm Password</label>
<input class="detail-value password" type="password" id="confirm-password-value" placeholder="Re-Type Password" oninput="confirmCorrectRetype()">
<p class="password-criteria"></p>
</div>
<div class="button-field">
<button id="edit-profile-button" onclick="startEdit()">Edit profile</button>
<button id="cancel-edit-button" onclick="cancelEdit()">Cancel</button>
<button id="submit-edit-button" onclick="submitEdit()">Submit</button>
</div>
</div>
</div>
<script src="../js/account-page.js"></script>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment