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

Copyright:

Available Formats

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