Iglesia John Zedrick

Name: Iglesia, John Zedrick Due Date: May 31, 2022
Course/Year/Section: BSIT 2A – 3
Progress Report
3J’sMAC Simple Web Based
Inventory Management System
Iglesia John Zedrick , Mirasol, John Aldren, Morawda, Aldrin, Azorez Mark
Anthony, Cedo, Jaira, Magayanes, Carlos
SOURCE CODE:
<! – INDEX HTML -->

<!DOCTYPE html>
<html>
<head>
<title>HOMEPAGE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/style/index.css">
</head>
<body>
<nav>
<label class="logo">LOGO</label>
<ul>
<li><b><a class="active" href="#">Home</a></b></li>
<li><b><a class="active" href="#">About Us</a></b></li>
<button class="btn">Get Started</button>
</ul>
</nav>
<div class="img">
<img id ="img2" src="/images/index_image.jpg" alt="">
</div>
<div class="name">
<label>Inventory Management</label>
</div>
<span style="float:right;margin-top:30%;margin-left: 10%;">
</span>
</body>
</html>
<! – INDEX CSS-->

*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
}
body{
font-family: 'Calibri';
}
nav {
background: #2A3638;
height: 80px;
width: 100%;
}.img{
bottom: 10px;
padding: 10px;
position: relative;
left:670px;
}
img{
height: fit-content;
width:630px;
}
.name{
position: absolute;
top: 250px;
left: 100px;
}
label.logo{
color: white;
font-size: 35px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a{
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
}
a.active{
transition: .5s;
}
a:hover{
color: #EDD382;;
transition: .5s;
}
#j{
width: 120%;
height: 550px;
margin-right: 0;
float: right;
}
label {
color: #2A3638;
font-size: 50px;
line-height: 80px;
font-weight: bold;
}
button.btn {
border: 1px solid #2A3638;
background: white;
padding: 8px 10px;
font-size: 19px;
color: #2A3638;
font-weight: bold;
border-radius: 20px 10px 20px;
font-family: Calibri;
}
<! – LOGIN AND SIGN UP HTML -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title> Login and Registration Form </title>
<link rel="stylesheet" href="/style/login.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<input type="checkbox" id="flip">
<div class="cover">
<div class="front">
<img style="height:451px;width:425px; padding: 2px;" src="images/image-
front.png" alt="">
</div>
<div class="back">
<img class="backImg" src="/images/index_image.jpg" alt="">
</div>
</div>
<div class="forms">
<div class="form-content">
<div class="login-form">
<div class="title">Login</div>
<form action="#">
<div class="input-boxes">
<div class="input-box">
<i class="fas fa-envelope"></i>
<input type="text" placeholder="Enter your email" required>
</div>
<i class="fas fa-lock"></i>
<input type="password" placeholder="Enter your password" required>
</div>
<div class="text"><a href="#">Forgot password?</a></div>
<div class="button input-box">
<input type="submit" value="Login">
</div>
<div class="text sign-up-text">Don't have an account? <label for="flip">Sigup
now</label></div>
</div>
</form>
</div>
<div class="signup-form">
<div class="title">Signup Now</div>
<form action="#">
<div class="input-boxes">
<i class="fas fa-user"></i>
<input type="text" placeholder="Enter your name" required>
</div>
<i class="fas fa-envelope"></i>
<input type="text" placeholder="Enter your email" required>
</div>
<i class="fas fa-lock"></i>
<input type="password" placeholder="Enter your password" required>
</div>
<div class="button input-box">
<input type="submit" value="Signup">
</div>
<div class="text sign-up-text">Already have an account? <label for="flip">Login
now</label></div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
<! – LOGIN RESGISTER CSS -->
/* Google Font Link */

@import url('https://fonts.googleapis.com/css2?
family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: -webkit-radial-gradient(center, ellipse cover, white, gray);
padding: 30px;
}
.container{
position: relative;
max-width: 850px;
width: 100%;
background: #fff;
padding: 40px 30px;
box-shadow: 0 5px 10px rgba(0,0,0,0.5);
perspective: 2700px;
}
.container .cover{
position: absolute;
top: 0;
left: 50%;
height: 100%;
width: 50%;
z-index: 98;
transition: all 1s ease;
transform-origin: left;
transform-style: preserve-3d;
}
.container #flip:checked ~ .cover{
transform: rotateY(-180deg);
}
.container .cover .front,
.container .cover .back{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.cover .back{
transform: rotateY(180deg);
backface-visibility: hidden;
}
.container .cover::before,
.container .cover::after{
content: '';
position: absolute;
height: 100%;
width: 100%;
background:rgba(0,0,0,0.2);
opacity: 0.5;
z-index: 12;
}
.container .cover::after{
opacity: 0.3;
transform: rotateY(180deg);
backface-visibility: hidden;
}
.container .cover img{
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index:0;
}
.container .forms{
height: 100%;
width: 100%;
background: #fff;
}
.container .form-content{
display: flex;
justify-content: space-between;
}
.form-content .login-form,
.form-content .signup-form{
width: calc(100% / 2 - 25px);
}
.forms .form-content .title{
position: relative;
font-size: 24px;
font-weight: 500;
color: #333;
}
.forms .form-content .title:before{
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 25px;
background: #7d2ae8;
}
.forms .signup-form .title:before{
width: 20px;
}
.forms .form-content .input-boxes{
margin-top: 30px;
}
.forms .form-content .input-box{
display: flex;
height: 50px;
width: 100%;
margin: 10px 0;
position: relative;
}
.form-content .input-box input{
height: 100%;
width: 100%;
outline: none;
border: none;
padding: 0 30px;
font-size: 16px;
font-weight: 500;
border-bottom: 2px solid rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
.form-content .input-box input:focus,
.form-content .input-box input:valid{
border-color: #7d2ae8;
}
.form-content .input-box i{
position: absolute;
color: #7d2ae8;
font-size: 17px;
}
.forms .form-content .text{
font-size: 14px;
font-weight: 500;
color: #333;
}
.forms .form-content .text a{
text-decoration: none;
}
.forms .form-content .text a:hover{
text-decoration: underline;
}
.forms .form-content .button{
color: #fff;
margin-top: 40px;
}
.forms .form-content .button input{
color: #fff;
background: navy;
border-radius: 15px;
padding: 0;
cursor: pointer;
transition: all 0.4s ease;
}
.forms .form-content .button input:hover{
background: green;
}
.forms .form-content label{
color: blue;
cursor: pointer;
}
.forms .form-content label:hover{
text-decoration: underline;
}
.forms .form-content .login-text,
.forms .form-content .sign-up-text{
text-align: center;
margin-top: 25px;
}
.container #flip{
display: none;
}
@media (max-width: 730px) {
.container .cover{
display: none;
}
.form-content .login-form,
width: 100%;
}
display: none;
}
.container #flip:checked ~ .forms .signup-form{
display: block;
}
.container #flip:checked ~ .forms .login-form{
display: none;
}
}
<! -- DASHBOARD HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style/dashboards.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="navigation">
<ul>
<li>
<a href="#">
<span class="icon"><ion-icon name="home-outline"></ion-icon></span>
<span class="title" style="font-weight:bold ;">LOGO AND NAME</span>
<span class="icon"></span>
</a>
</li>
<li>
<a href="dashboard.html">
<span class="title">DASHBOARD</span>
</a>
</li>
<li>
<a href="addItem.html">
<span class="icon"><ion-icon
name="add-circle-outline"></ion-icon></span>
<span class="title">ADD ITEM</span>
</a>
</li>
<li>
<a href="#">
name="pricetags-outline"></ion-icon></span>
<span class="title">VIEW ITEMS</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><ion-icon name="brush-outline"></ion-icon></span>
<span class="title">UPDATE</span>
</a>
</li>
<li>
<a href="#">
name="log-out-outline"></ion-icon></span>
<span class="title">SIGN OUT</span>
</a>
</li>
</ul>
</div>


<div class="main">
<div class="topbar">
<div class="menu">
<span id="menu" ><ion-icon name="menu-outline"></ion-icon></span>
</div>
<div class="search-bar">
<span id="icon-search">
<label>
<input type="text" placeholder="Search">
<ion-icon name="search-outline"></ion-icon>
</label>
</span>
</div>
<div class="user">
<span id="user"><ion-icon name="person-circle-outline"></ion-icon></span>
</div>
</div>
<div class="infobox">
<div class="card">
<div class="wrap-box">
<div>
<div class="value">1000</div>
<div class="value-name">Stock</div>
</div>
<div class="box">
<ion-icon name="laptop-outline"></ion-icon>
</div>
</div>
</div>
<div class="card">
<div>
</div>
<div class="box">
</div>
</div>
</div>
<div class="card">
<div>
</div>
<div class="box">
</div>
</div>
</div>
<div class="card">
<div>
</div>
<div class="box">
</div>
</div>
</div>
</div>
<div class="view-wrap">
<div class="recent">
<div class="cardheader">
<h2>Items</h2>
<a href="" class="btn">View All</a>
</div>
<table>
<thead>
<tr>
<td>No.</td>
<td>Name</td>
<td>Price</td>
<td>Quantity</td>
<td>Supplier</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Samsung</td>
<td>12,000</td>
<td>12</td>
<td>Mitdul</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
// js for toggle menu if we click the menu then the navigation will show
let toggle = document.querySelector('.menu');

let navigation = document.querySelector('.navigation');
let main = document.querySelector('.main');
let infobox = document.querySelector('.box');
let details = document.querySelector('.details');
toggle.onclick = function(){
navigation.classList.toggle('active');
main.classList.toggle('active');
infobox.classList.toggle('active');
details.classList.toggle('active');
// 
// then preserve the current view
let list = document.querySelectorAll('.navigation li');

function activeLink(){
list.forEach((item) =>
item.classList.remove('hovered'));
this.classList.add('hovered');
}
list.forEach((item) =>
item.addEventListener('mouseover',activeLink));
</script>

<script type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></
script>
</body>
</html>
<! – DASHBOARD CSS -->
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper1{
background: var(--grey);
}
/* COLORS TO BE USE as a parameter in var() */
:root{
--blue:#287bff;
--white:#fff;
--grey:#f5f5f5;
--black1:#222;
--black2:#999;
}
/* BODY */
body{
min-height: 100vh;
overflow-x: hidden;
}
.container{
position: relative;
width: 100%;
}
/* NAVIGATION */
.navigation{
position: fixed;
width: 300px;
height: 100%;
background:var(--black1);
transition: 0.3s;
border-left: 10px solid var(--black1);
overflow: hidden;
}
.navigation.active{
width: 70px;
}
.navigation ul{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.navigation ul li{ /* Listsyle */
position: relative;
width: 100%;
list-style: none;
margin-bottom: 30px;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}
.navigation ul li:hover,
.navigation ul li.hovered{ /* Hover change color to white when mouse pointer */
background: var(--white);
}
.navigation ul li:nth-child(1){ /* Adjusting the bottom part of the logo */
margin-bottom: 40px;
pointer-events: none;
}
.navigation ul li a{ /* List of the Navigation */
position: relative;
display: block;
width: 100%;
display: flex;
text-decoration:none;
color:var(--white);
}
.navigation ul li:hover a,
.navigation ul li.hovered a{ /* List of the Navigation */
color: var(--black1);
}
.navigation ul li a .icon{
position: relative;
display:block;
min-width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
text-align: center;
}
.icon{
position: relative;
}
.navigation ul li a .title{
position: relative;
display:block;
top:20px;
/* curved */
.navigation ul li:hover a::before
,.navigation ul li.hovered a::before{
content: "";
position: absolute;
right:0;
width: 50px;
background: transparent;
height: 50px;
border-radius: 50%;
bottom: 60px;
box-shadow: 35px 35px 0 10px var(--white);
}
.navigation ul li:hover a::after,

.navigation ul li.hovered a::after{
content: "";
position: absolute;
right:0;
width: 50px;
background: transparent;
height: 50px;
border-radius: 50%;
top:60px;
box-shadow: 35px -35px 0 10px var(--white);
}
/* MAIN SCREEN VIEW */

.main{
position: absolute;
width: calc(100% - 300px);
left: 300px;
min-height: 100vh;
transition: 0.5s;
}
/* FOR TOGGLE para hindi sumama ung profile and search in toggle of menu */
.main.active{
width:calc(100% - 80px);
left: 80px;
}
/* SEARCH BAR,TOGGLE MENU, PROFILE */
.topbar{
width: 100%;
height: 60px;
display:flex;
padding: 0 10px;
}
.menu{
position: relative;
width: 60px;
top: 15px;
height: 60px;
display: flex;
justify-content: center;
font-size: 2.5em;
cursor: pointer;
}
.menu:hover{
color: blue;
}
.search-bar{
position: relative;
width: 80%;
margin: 0 10px;
}
.search-bar label{
position: relative;
width: 100%;
}
.search-bar label input{
width: 100%;
height: 40px;
margin-left: 10px;
margin-top: 35px;
padding: 5px 20px;
outline: none;
border: 1px solid var(--black2);
}
.search-bar label ion-icon{
position: relative;
left: 14px;
font-size: 1em;
}.user{
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
}.user #user{
position: absolute;
font-size: 2.2em;
}
/* DESIGN FOR INFO BOX VIEW STOCKS */
.infobox{
position: relative;
width: 100%;
padding:20px;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-gap: 40px;
}.infobox .wrap-box{
position: relative;
padding: 30px;
box-shadow: 0 10px 40px rgba(0, 0, 0,0.08);
border-left: 5px solid var(--black2);
cursor: pointer;
}.infobox .wrap-box .value{

position: relative;
font-weight:500;
font-size: 2.5em;
}.infobox .wrap-box .value-name{

font-size: 1.1em;
margin-top: 5px;
}.infobox .wrap-box .box{
float: right;
font-size: 1.5em;
}.infobox .wrap-box:hover{
background: var(--black1);
padding: 40px;
}.infobox .wrap-box:hover .value{

color: white;
}.infobox .wrap-box:hover .box{
color: white;
}
.view-wrap{
width: 100%;
padding: 20px;
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 2px;
margin-top: 10px;
}.view-wrap .recent{
position: relative;
display: grid;
height: 200px;
padding: 20px;
box-shadow: 0 7px 25px rgba(0, 0, 0, 0.08);
}.view-wrap table thead td{
font-weight: 600;
}.view-wrap .recent table tr{

border-bottom: 1px solid black;
}
OUTPUT:

Iglesia John Zedrick

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Iglesia John Zedrick

Uploaded by

Copyright:

Available Formats

Name: Iglesia, John Zedrick Due Date: May 31, 2022

<! – INDEX HTML -->

<! – INDEX CSS-->

<! – LOGIN AND SIGN UP HTML -->

<! – LOGIN RESGISTER CSS -->

/* Google Font Link */

let toggle = document.querySelector('.menu');

let list = document.querySelectorAll('.navigation li');

.navigation ul li:hover a::after,

/* MAIN SCREEN VIEW */

}.infobox .wrap-box .value{

}.infobox .wrap-box .value-name{

}.infobox .wrap-box:hover .value{

}.view-wrap .recent table tr{

You might also like