wa
This commit is contained in:
commit
9fb08d43d0
8
.idea/.gitignore
vendored
Normal file
8
.idea/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Editor-based HTTP Client requests
|
||||
/httpRequests/
|
||||
# Datasource local storage ignored files
|
||||
/dataSources/
|
||||
/dataSources.local.xml
|
||||
8
.idea/PILA_LoginAndInsert.iml
Normal file
8
.idea/PILA_LoginAndInsert.iml
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$" />
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
12
.idea/dataSources.xml
Normal file
12
.idea/dataSources.xml
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="DataSourceManagerImpl" format="xml" multifile-model="true">
|
||||
<data-source source="LOCAL" name="g1_pila@localhost" uuid="7303aaeb-6e1d-4970-b61b-ab692dc4f07a">
|
||||
<driver-ref>mysql.8</driver-ref>
|
||||
<synchronize>true</synchronize>
|
||||
<jdbc-driver>com.mysql.cj.jdbc.Driver</jdbc-driver>
|
||||
<jdbc-url>jdbc:mysql://localhost:3306/g1_pila</jdbc-url>
|
||||
<working-dir>$ProjectFileDir$</working-dir>
|
||||
</data-source>
|
||||
</component>
|
||||
</project>
|
||||
8
.idea/modules.xml
Normal file
8
.idea/modules.xml
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/PILA_LoginAndInsert.iml" filepath="$PROJECT_DIR$/.idea/PILA_LoginAndInsert.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
19
.idea/php.xml
Normal file
19
.idea/php.xml
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="MessDetectorOptionsConfiguration">
|
||||
<option name="transferred" value="true" />
|
||||
</component>
|
||||
<component name="PHPCSFixerOptionsConfiguration">
|
||||
<option name="transferred" value="true" />
|
||||
</component>
|
||||
<component name="PHPCodeSnifferOptionsConfiguration">
|
||||
<option name="highlightLevel" value="WARNING" />
|
||||
<option name="transferred" value="true" />
|
||||
</component>
|
||||
<component name="PhpStanOptionsConfiguration">
|
||||
<option name="transferred" value="true" />
|
||||
</component>
|
||||
<component name="PsalmOptionsConfiguration">
|
||||
<option name="transferred" value="true" />
|
||||
</component>
|
||||
</project>
|
||||
67
display.php
Normal file
67
display.php
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
|
||||
<title>Placeholder Register</title>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1'>
|
||||
<link rel='stylesheet' type='text/css' media='screen' href='style.css'>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<span style="font-family: cursive; color:white; font-size: xx-large;" >Placeholder</span>
|
||||
<nav>
|
||||
<table>
|
||||
<tr>
|
||||
<th><a href="index.html">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>Home</a></th>
|
||||
<th><a href="Equipment.html">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>Equipment</a></th>
|
||||
<th><a href="">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>About Us</a></th>
|
||||
</tr>
|
||||
</table>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="login-box">
|
||||
<table>
|
||||
<tr>
|
||||
<th> Full Name </th>
|
||||
<th>Update?</th>
|
||||
<th>Delete?</th>
|
||||
</tr>
|
||||
|
||||
|
||||
<?php
|
||||
session_start();
|
||||
if($_SESSION['EmployeeID'] = ''){
|
||||
header("location:index.php");
|
||||
}
|
||||
$conn = mysqli_connect('localhost','root','','g1_pila');
|
||||
$command = "select CONCAT(FIRST_NAME, ' ',LAST_NAME) as name from employee";
|
||||
$result = mysqli_query($conn,$command);
|
||||
|
||||
while ($row = mysqli_fetch_array($result)){
|
||||
echo "<tr>";
|
||||
echo "<th> $row[0] </th>";
|
||||
echo "<th><a href = 'update.php'>Update</a></th>";
|
||||
echo "<th><a href = 'delete.php'>Delete</a></th>";
|
||||
echo "</tr>";
|
||||
}
|
||||
?>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
<?php
|
||||
44
home.php
Normal file
44
home.php
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
|
||||
<title>Placeholder Register</title>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1'>
|
||||
<link rel='stylesheet' type='text/css' media='screen' href='style.css'>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<span style="font-family: cursive; color:white; font-size: xx-large;" >Placeholder</span>
|
||||
|
||||
</header>
|
||||
<div class="login-box">
|
||||
<h2>Hello, User</h2>
|
||||
<header>
|
||||
<nav>
|
||||
<table>
|
||||
<tr>
|
||||
<th><a href="display.php">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>Display Table</a></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a href="Insert.php">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>Insert</a></th>
|
||||
</tr>
|
||||
</table>
|
||||
</nav>
|
||||
</header>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
<?php
|
||||
112
index.php
Normal file
112
index.php
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
|
||||
<title>Placeholder Login</title>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1'>
|
||||
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
|
||||
<script src='main.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<span style="font-family: cursive; color:white; font-size: xx-large;" >Placeholder</span>
|
||||
<nav>
|
||||
<table>
|
||||
<tr>
|
||||
<th><a href="index.html">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>Home</a></th>
|
||||
<th><a href="Equipment.html">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>Equipment</a></th>
|
||||
<th><a href="">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>About Us</a></th>
|
||||
</tr>
|
||||
</table>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="login-box">
|
||||
<h2>Login</h2>
|
||||
<form action="index.php" METHOD="post">
|
||||
<div class="user-box">
|
||||
<input type="text" name="employeeID" required="">
|
||||
<label>Username</label>
|
||||
</div>
|
||||
<div class="user-box">
|
||||
<input type="password" name="employeePassword" required="">
|
||||
<label>Password</label>
|
||||
</div>
|
||||
<div id="pakbox">
|
||||
<button type="submit" id="submitButton" name="Submitto">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
<div id="regbox"><div id="memb">Not a member?</div>
|
||||
<a href="register.html">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
Click Here!
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
<?php
|
||||
session_start();
|
||||
define('MYSQL','localhost');
|
||||
define('USERNAME','root');
|
||||
define('PASSWORD','');
|
||||
define('DATABASE','g1_pila');
|
||||
if(isset($_SESSION['Attempts']) == 0){
|
||||
$_SESSION['Attempts'] = 3;
|
||||
}
|
||||
$connect = mysqli_connect(MYSQL,USERNAME,PASSWORD,DATABASE) or die('<script>alert("Server Connection Failed.");</script>');
|
||||
if(isset($_POST['Submitto'])){
|
||||
$employeeUser = $_POST['employeeID'];
|
||||
$employeePass = $_POST['employeePassword'];
|
||||
$whereto = "SELECT EMPLOYEE_ID,PASSWD FROM employee where EMPLOYEE_ID='$employeeUser'";
|
||||
$result = mysqli_query($connect,$whereto);
|
||||
$rows = mysqli_num_rows($result);
|
||||
$row = mysqli_fetch_array($result);
|
||||
if($_SESSION['Attempts'] != 0){
|
||||
if($rows == 0){
|
||||
echo"<script> alert('No such User Exists')</script>";
|
||||
}elseif ($row[1] != $employeePass){
|
||||
$_SESSION['Attempts']--;
|
||||
echo "<script>
|
||||
alert('Incorrect password, ";
|
||||
echo $_SESSION['Attempts'];
|
||||
if($_SESSION['Attempts'] < 2){
|
||||
echo " Try left');</script>";
|
||||
}else{
|
||||
echo " Tries left'); </script>";
|
||||
}
|
||||
}else{
|
||||
$_SESSION['EmployeeID'] = $employeeUser;
|
||||
header("location:home.php");
|
||||
}
|
||||
}else{
|
||||
echo "<script language='javascript'>
|
||||
alert('Sorry, You ran out of attempts');
|
||||
</script>";
|
||||
session_destroy();
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
|
||||
|
||||
|
||||
153
insert.php
Normal file
153
insert.php
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
|
||||
<title>Placeholder Register</title>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1'>
|
||||
<link rel='stylesheet' type='text/css' media='screen' href='style.css'>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<span style="font-family: cursive; color:white; font-size: xx-large;" >Placeholder</span>
|
||||
</header>
|
||||
<div class="login-box">
|
||||
<h2>Shipment Fill-out form</h2>
|
||||
<form action="insert.php" method="post">
|
||||
<div class="user-box">
|
||||
<input type="number" name="shipmentID" required>
|
||||
<label>Shipment ID</label>
|
||||
</div>
|
||||
<div class="user-box">
|
||||
<input type="text" name="source_addr" required>
|
||||
<label>Source Address</label>
|
||||
</div>
|
||||
<div class="user-box">
|
||||
<input type="text" name="dest_addr" required>
|
||||
<label>Destination Address</label>
|
||||
</div>
|
||||
<div class="user-box">
|
||||
<select name="shipType" class="styled-combo" style="margin-top: 25px" >
|
||||
<option value="small">Small</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="large">Large</option>
|
||||
</select>
|
||||
<label style="margin-top: -10px">Shipment Type</label>
|
||||
</div>
|
||||
<h2>Shipment Process form</h2>
|
||||
<div class="user-box">
|
||||
<input type="text" name="storeID" required>
|
||||
<label>Store ID</label>
|
||||
</div>
|
||||
<div id="pakbox">
|
||||
<button type="submit" id="submitButton" name="Register">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<!--The bettah code that I wrote MWAHAHAHA-->
|
||||
<?php
|
||||
session_start();
|
||||
if($_SESSION['EmployeeID'] = ''){
|
||||
header("location:index.php");
|
||||
}
|
||||
define('MYSQL','localhost');
|
||||
define('USERNAME','root');
|
||||
define('PASSWORD','');
|
||||
define('DATABASE','g1_pila');
|
||||
|
||||
|
||||
$connect = mysqli_connect(MYSQL,USERNAME,PASSWORD,DATABASE) or die('<script>alert("Server Connection Failed.");</script>');
|
||||
if(isset($_POST['Register'])){
|
||||
$shipID =$_POST['shipmentID'];
|
||||
$source=$_POST['source_addr'];
|
||||
$dest = $_POST['dest_addr'];
|
||||
$shipType = $_POST['shipType'];
|
||||
$storeID = $_POST['storeID'];
|
||||
|
||||
if(empty($shipID) || empty($source) || empty($dest) || empty($shipType) || empty($storeID)){
|
||||
echo "<script>alert('Sorry There are empty fields that needs to be filled');</script>";
|
||||
}else{
|
||||
$sql = "INSERT INTO shipment (SHIPMENT_ID, SOURCE_ADDRESS, DESTINATION_ADDRESS, SHIPMENT_TYPE) values ('$shipID','$source','$dest','$shipType')";
|
||||
if(mysqli_query($connect,$sql)){
|
||||
$sql = "INSERT INTO shipment_process (SHIPMENT_ID,STORE_ID) values ($shipID,$storeID)";
|
||||
if(mysqli_query($connect,$sql)){
|
||||
echo '<script>alert("Record saved successfully");</script>';
|
||||
}else{
|
||||
echo "<script>alert('shipment process record fail ERROR: 1D-10T Process Br1@n');</script>";
|
||||
}
|
||||
}else{
|
||||
echo "<script>alert('Shipment fillup fail ERROR: ERROR: 1D-10T Process Br1@n');</script>";
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--Trash code before I completely understood the lection-->
|
||||
/* <!--
|
||||
try {
|
||||
define('SERVER','localhost');
|
||||
define('USERNAME','root');
|
||||
define('PASSWORD','');
|
||||
define('DATABASE','');
|
||||
$pdo = mysqli_connect(SERVER, USERNAME, PASSWORD);
|
||||
|
||||
if($_SERVER["REQUEST_METHOD"] == "POST"){
|
||||
$shipmentID = $_POST['shipmentID'];
|
||||
$sourceAddr = $_POST['source_addr'];
|
||||
$destAddr = $_POST['dest_addr'];
|
||||
$shipmentType = $_POST['shipType'];
|
||||
$storeID = $_POST['storeID'];
|
||||
|
||||
if(empty($shipmentID) || empty($sourceAddr) || empty($destAddr) || empty($shipmentType) || empty($storeID)){
|
||||
echo '<script>alert("These fields cannot be empty");</script>';
|
||||
}else{
|
||||
$statement = $pdo->prepare("INSERT INTO shipment (SHIPMENT_ID, SOURCE_ADDRESS, DESTINATION_ADDRESS, SHIPMENT_TYPE) VALUES (:shipmentID, :sourceAddr, :destAddr, :shipmentType)");
|
||||
$statement->bindParam(':shipmentID', $shipmentID);
|
||||
$statement->bindParam(':sourceAddr', $sourceAddr);
|
||||
$statement->bindParam(':destAddr', $destAddr);
|
||||
$statement->bindParam(':shipmentType', $shipmentType);
|
||||
if ($statement->execute()) {
|
||||
if ($statement->rowCount() > 0) {
|
||||
$statement = $pdo->prepare("INSERT INTO shipment_process (SHIPMENT_ID, STORE_ID) VALUES (:shipmentID, :storeID)");
|
||||
$statement->bindParam(':shipmentID', $shipmentID);
|
||||
$statement->bindParam(':storeID', $storeID);
|
||||
if($statement->execute()){
|
||||
echo '<script>alert("Stuff Recorded!");</script>';
|
||||
} else {
|
||||
echo '<script>alert("Failed to insert into shipment_process!");</script>';
|
||||
}
|
||||
} else {
|
||||
echo '<script>alert("Failed to insert into shipment!");</script>';
|
||||
}
|
||||
} else {
|
||||
echo '<script>alert("Failed to insert into shipment!");</script>';
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (PDOException $e) {
|
||||
echo '<script>alert("Connection failed: ' . $e->getMessage() . '");</script>';
|
||||
}
|
||||
?> -->
|
||||
420
main.css
Normal file
420
main.css
Normal file
|
|
@ -0,0 +1,420 @@
|
|||
/*This is for de HTML*/
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
font-family: sans-serif;
|
||||
background: linear-gradient(#141e30, #243b55);
|
||||
}
|
||||
|
||||
/*This is for de Log in Box*/
|
||||
.login-box {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 400px;
|
||||
padding: 40px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(0,0,0,.5);
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 15px 25px rgba(0,0,0,.6);
|
||||
border-radius: 10px;
|
||||
}
|
||||
/*This is for de Header*/
|
||||
header{
|
||||
position: relative;
|
||||
top: 0%;
|
||||
width: relative;
|
||||
padding: 40px;
|
||||
background: rgba(0,0,0,.5);
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 15px 25px rgba(0,0,0,.6);
|
||||
border-radius: 10px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
header nav{
|
||||
position: relative;
|
||||
top: 35%;
|
||||
width: 20%;
|
||||
margin-left: 70%;
|
||||
margin-top: -40px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
header nav table tr th{
|
||||
overflow: hidden;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
header nav table tr th a{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
color: #03e9f4;
|
||||
font-size: x-large;
|
||||
text-wrap: nowrap;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
transition: .5s;
|
||||
}
|
||||
header nav table tr th a:hover {
|
||||
background: #03e9f4;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 5px #03e9f4,
|
||||
0 0 25px #03e9f4,
|
||||
0 0 50px #03e9f4,
|
||||
0 0 100px #03e9f4;
|
||||
}
|
||||
|
||||
header nav table tr th a span {
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
header nav table tr th a span:nth-child(1) {
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #03e9f4);
|
||||
animation: btn-anim1 1s linear infinite;
|
||||
}
|
||||
|
||||
|
||||
header nav table tr th a span:nth-child(2) {
|
||||
top: -100%;
|
||||
right: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, transparent, #03e9f4);
|
||||
animation: btn-anim2 1s linear infinite;
|
||||
animation-delay: .25s
|
||||
}
|
||||
|
||||
|
||||
header nav table tr th a span:nth-child(3) {
|
||||
bottom: 0;
|
||||
right: -100%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(270deg, transparent, #03e9f4);
|
||||
animation: btn-anim3 1s linear infinite;
|
||||
animation-delay: .5s
|
||||
}
|
||||
|
||||
|
||||
|
||||
header nav table tr th a span:nth-child(4) {
|
||||
bottom: -100%;
|
||||
left: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: linear-gradient(360deg, transparent, #03e9f4);
|
||||
animation: btn-anim4 1s linear infinite;
|
||||
animation-delay: .75s
|
||||
}
|
||||
|
||||
|
||||
/*End of Headers*/
|
||||
|
||||
/*This is for de Login Box*/
|
||||
.login-box h2 {
|
||||
margin: 0 0 30px;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-box .user-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.login-box .user-box input {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
margin-bottom: 30px;
|
||||
border: none;
|
||||
border-bottom: 1px solid #fff;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
.login-box .user-box label {
|
||||
position: absolute;
|
||||
top:0;
|
||||
left: 0;
|
||||
padding: 10px 0;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
pointer-events: none;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.login-box .user-box input:focus ~ label,
|
||||
.login-box .user-box input:valid ~ label {
|
||||
top: -20px;
|
||||
left: 0;
|
||||
color: #03e9f4;
|
||||
font-size: 12px;
|
||||
}
|
||||
/*This thing is important for making a kewl animated Box*/
|
||||
.login-box form a {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
color: #03e9f4;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
transition: .5s;
|
||||
margin-top: 40px;
|
||||
letter-spacing: 4px
|
||||
}
|
||||
|
||||
.login-box a:hover {
|
||||
background: #03e9f4;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 5px #03e9f4,
|
||||
0 0 25px #03e9f4,
|
||||
0 0 50px #03e9f4,
|
||||
0 0 100px #03e9f4;
|
||||
}
|
||||
|
||||
.login-box a span {
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.login-box a span:nth-child(1) {
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #03e9f4);
|
||||
animation: btn-anim1 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes btn-anim1 {
|
||||
0% {
|
||||
left: -100%;
|
||||
}
|
||||
50%,100% {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.login-box a span:nth-child(2) {
|
||||
top: -100%;
|
||||
right: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, transparent, #03e9f4);
|
||||
animation: btn-anim2 1s linear infinite;
|
||||
animation-delay: .25s
|
||||
}
|
||||
|
||||
@keyframes btn-anim2 {
|
||||
0% {
|
||||
top: -100%;
|
||||
}
|
||||
50%,100% {
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.login-box a span:nth-child(3) {
|
||||
bottom: 0;
|
||||
right: -100%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(270deg, transparent, #03e9f4);
|
||||
animation: btn-anim3 1s linear infinite;
|
||||
animation-delay: .5s
|
||||
}
|
||||
|
||||
@keyframes btn-anim3 {
|
||||
0% {
|
||||
right: -100%;
|
||||
}
|
||||
50%,100% {
|
||||
right: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.login-box a span:nth-child(4) {
|
||||
bottom: -100%;
|
||||
left: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: linear-gradient(360deg, transparent, #03e9f4);
|
||||
animation: btn-anim4 1s linear infinite;
|
||||
animation-delay: .75s
|
||||
}
|
||||
|
||||
@keyframes btn-anim4 {
|
||||
0% {
|
||||
bottom: -100%;
|
||||
}
|
||||
50%,100% {
|
||||
bottom: 100%;
|
||||
}
|
||||
}
|
||||
/*This is for de Login box*/
|
||||
|
||||
|
||||
/*This is for de Register Box*/
|
||||
|
||||
#memb{
|
||||
position: relative;
|
||||
color: white;
|
||||
margin-top: 40px;
|
||||
margin-bottom: -30px;
|
||||
}
|
||||
|
||||
.login-box #regbox a span {
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.login-box #regbox a {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
color: #03e9f4;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
transition: .5s;
|
||||
margin-top: 40px;
|
||||
letter-spacing: 4px
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.login-box #regbox a span:nth-child(1) {
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #03e9f4);
|
||||
animation: btn-anim1 1s linear infinite;
|
||||
}
|
||||
|
||||
|
||||
.login-box #regbox a span:nth-child(2) {
|
||||
top: -100%;
|
||||
right: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, transparent, #03e9f4);
|
||||
animation: btn-anim2 1s linear infinite;
|
||||
animation-delay: .25s
|
||||
}
|
||||
|
||||
|
||||
.login-box #regbox a span:nth-child(3) {
|
||||
bottom: 0;
|
||||
right: -100%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(270deg, transparent, #03e9f4);
|
||||
animation: btn-anim3 1s linear infinite;
|
||||
animation-delay: .5s
|
||||
}
|
||||
|
||||
|
||||
|
||||
.login-box #regbox a span:nth-child(4) {
|
||||
bottom: -100%;
|
||||
left: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: linear-gradient(360deg, transparent, #03e9f4);
|
||||
animation: btn-anim4 1s linear infinite;
|
||||
animation-delay: .75s
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*This is for de submit button, no design but it suffices enough*/
|
||||
#submitButton {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
color: #03e9f4;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
transition: .5s;
|
||||
margin-top: 40px;
|
||||
letter-spacing: 4px;
|
||||
border: none; /* Remove default border */
|
||||
background: none; /* Remove default background */
|
||||
cursor: pointer; /* Change cursor to pointer on hover */
|
||||
}
|
||||
|
||||
#submitButton:hover {
|
||||
background: #03e9f4;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 5px #03e9f4,
|
||||
0 0 25px #03e9f4,
|
||||
0 0 50px #03e9f4,
|
||||
0 0 100px #03e9f4;
|
||||
}
|
||||
|
||||
|
||||
.outsideBox{
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
left: 50%;
|
||||
width: 75%;
|
||||
height: 100%;
|
||||
padding: 40px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(0,0,0,.5);
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 15px 25px rgba(0,0,0,.6);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.outsideBox table tr td{
|
||||
width: 400px;
|
||||
padding: 40px;
|
||||
background: rgba(0,0,0,.5);
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 15px 25px rgba(0,0,0,.6);
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#op{
|
||||
color: white;
|
||||
font-family: cursive;
|
||||
text-align: center;
|
||||
font-size: xx-large;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.productB{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: cen;
|
||||
}
|
||||
|
||||
.productB img{
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
454
style.css
Normal file
454
style.css
Normal file
|
|
@ -0,0 +1,454 @@
|
|||
/*This is for de HTML*/
|
||||
|
||||
html {
|
||||
height: 120%;
|
||||
}
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
font-family: sans-serif;
|
||||
background: linear-gradient(#141e30, #243b55);
|
||||
}
|
||||
|
||||
/*This is for de Log in Box*/
|
||||
.login-box {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 400px;
|
||||
padding: 40px;
|
||||
transform: translate(-50%, -30%);
|
||||
background: rgba(0,0,0,.5);
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 15px 25px rgba(0,0,0,.6);
|
||||
border-radius: 10px;
|
||||
}
|
||||
/*This is for de Header*/
|
||||
header{
|
||||
position: relative;
|
||||
top: 0%;
|
||||
width: relative;
|
||||
padding: 40px;
|
||||
background: rgba(0,0,0,.5);
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 15px 25px rgba(0,0,0,.6);
|
||||
border-radius: 10px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
header nav{
|
||||
position: relative;
|
||||
top: 35%;
|
||||
width: 20%;
|
||||
margin-left: 70%;
|
||||
margin-top: -40px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
header nav table tr th{
|
||||
overflow: hidden;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
header nav table tr th a{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
color: #03e9f4;
|
||||
font-size: x-large;
|
||||
text-wrap: nowrap;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
transition: .5s;
|
||||
}
|
||||
header nav table tr th a:hover {
|
||||
background: #03e9f4;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 5px #03e9f4,
|
||||
0 0 25px #03e9f4,
|
||||
0 0 50px #03e9f4,
|
||||
0 0 100px #03e9f4;
|
||||
}
|
||||
|
||||
header nav table tr th a span {
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
header nav table tr th a span:nth-child(1) {
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #03e9f4);
|
||||
animation: btn-anim1 1s linear infinite;
|
||||
}
|
||||
|
||||
|
||||
header nav table tr th a span:nth-child(2) {
|
||||
top: -100%;
|
||||
right: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, transparent, #03e9f4);
|
||||
animation: btn-anim2 1s linear infinite;
|
||||
animation-delay: .25s
|
||||
}
|
||||
|
||||
|
||||
header nav table tr th a span:nth-child(3) {
|
||||
bottom: 0;
|
||||
right: -100%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(270deg, transparent, #03e9f4);
|
||||
animation: btn-anim3 1s linear infinite;
|
||||
animation-delay: .5s
|
||||
}
|
||||
|
||||
|
||||
|
||||
header nav table tr th a span:nth-child(4) {
|
||||
bottom: -100%;
|
||||
left: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: linear-gradient(360deg, transparent, #03e9f4);
|
||||
animation: btn-anim4 1s linear infinite;
|
||||
animation-delay: .75s
|
||||
}
|
||||
|
||||
|
||||
/*End of Headers*/
|
||||
|
||||
/*This is for de Login Box*/
|
||||
.login-box h2 {
|
||||
margin: 0 0 30px;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-box .user-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.login-box .user-box input {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
margin-bottom: 30px;
|
||||
border: none;
|
||||
border-bottom: 1px solid #fff;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.styled-combo {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 30px;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid #fff;
|
||||
cursor: pointer;
|
||||
/* Additional styles for appearance */
|
||||
border-radius: 5px;
|
||||
/* Add hover effect */
|
||||
}
|
||||
.styled-combo:hover {
|
||||
background: #03e9f4;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 5px #03e9f4,
|
||||
0 0 25px #03e9f4,
|
||||
0 0 50px #03e9f4,
|
||||
0 0 100px #03e9f4;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.styled-combo:focus {
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
|
||||
.login-box .user-box label {
|
||||
position: absolute;
|
||||
top:0;
|
||||
left: 0;
|
||||
padding: 10px 0;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
pointer-events: none;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.login-box .user-box input:focus ~ label,
|
||||
.login-box .user-box input:valid ~ label {
|
||||
top: -20px;
|
||||
left: 0;
|
||||
color: #03e9f4;
|
||||
font-size: 12px;
|
||||
}
|
||||
/*This thing is important for making a kewl animated Box*/
|
||||
.login-box form a {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
color: #03e9f4;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
transition: .5s;
|
||||
margin-top: 40px;
|
||||
letter-spacing: 4px
|
||||
}
|
||||
|
||||
.login-box a:hover {
|
||||
background: #03e9f4;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 5px #03e9f4,
|
||||
0 0 25px #03e9f4,
|
||||
0 0 50px #03e9f4,
|
||||
0 0 100px #03e9f4;
|
||||
}
|
||||
|
||||
.login-box a span {
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.login-box a span:nth-child(1) {
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #03e9f4);
|
||||
animation: btn-anim1 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes btn-anim1 {
|
||||
0% {
|
||||
left: -100%;
|
||||
}
|
||||
50%,100% {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.login-box a span:nth-child(2) {
|
||||
top: -100%;
|
||||
right: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, transparent, #03e9f4);
|
||||
animation: btn-anim2 1s linear infinite;
|
||||
animation-delay: .25s
|
||||
}
|
||||
|
||||
@keyframes btn-anim2 {
|
||||
0% {
|
||||
top: -100%;
|
||||
}
|
||||
50%,100% {
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.login-box a span:nth-child(3) {
|
||||
bottom: 0;
|
||||
right: -100%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(270deg, transparent, #03e9f4);
|
||||
animation: btn-anim3 1s linear infinite;
|
||||
animation-delay: .5s
|
||||
}
|
||||
|
||||
@keyframes btn-anim3 {
|
||||
0% {
|
||||
right: -100%;
|
||||
}
|
||||
50%,100% {
|
||||
right: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.login-box a span:nth-child(4) {
|
||||
bottom: -100%;
|
||||
left: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: linear-gradient(360deg, transparent, #03e9f4);
|
||||
animation: btn-anim4 1s linear infinite;
|
||||
animation-delay: .75s
|
||||
}
|
||||
|
||||
@keyframes btn-anim4 {
|
||||
0% {
|
||||
bottom: -100%;
|
||||
}
|
||||
50%,100% {
|
||||
bottom: 100%;
|
||||
}
|
||||
}
|
||||
/*This is for de Login box*/
|
||||
|
||||
|
||||
/*This is for de Register Box*/
|
||||
|
||||
#memb{
|
||||
position: relative;
|
||||
color: white;
|
||||
margin-top: 40px;
|
||||
margin-bottom: -30px;
|
||||
}
|
||||
|
||||
.login-box #regbox a span {
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.login-box #regbox a {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
color: #03e9f4;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
transition: .5s;
|
||||
margin-top: 40px;
|
||||
letter-spacing: 4px
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.login-box #regbox a span:nth-child(1) {
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #03e9f4);
|
||||
animation: btn-anim1 1s linear infinite;
|
||||
}
|
||||
|
||||
|
||||
.login-box #regbox a span:nth-child(2) {
|
||||
top: -100%;
|
||||
right: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, transparent, #03e9f4);
|
||||
animation: btn-anim2 1s linear infinite;
|
||||
animation-delay: .25s
|
||||
}
|
||||
|
||||
|
||||
.login-box #regbox a span:nth-child(3) {
|
||||
bottom: 0;
|
||||
right: -100%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(270deg, transparent, #03e9f4);
|
||||
animation: btn-anim3 1s linear infinite;
|
||||
animation-delay: .5s
|
||||
}
|
||||
|
||||
|
||||
|
||||
.login-box #regbox a span:nth-child(4) {
|
||||
bottom: -100%;
|
||||
left: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: linear-gradient(360deg, transparent, #03e9f4);
|
||||
animation: btn-anim4 1s linear infinite;
|
||||
animation-delay: .75s
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*This is for de submit button, no design but it suffices enough*/
|
||||
#submitButton {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
color: #03e9f4;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
transition: .5s;
|
||||
margin-top: 40px;
|
||||
letter-spacing: 4px;
|
||||
border: none; /* Remove default border */
|
||||
background: none; /* Remove default background */
|
||||
cursor: pointer; /* Change cursor to pointer on hover */
|
||||
}
|
||||
|
||||
#submitButton:hover {
|
||||
background: #03e9f4;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 5px #03e9f4,
|
||||
0 0 25px #03e9f4,
|
||||
0 0 50px #03e9f4,
|
||||
0 0 100px #03e9f4;
|
||||
}
|
||||
|
||||
|
||||
.outsideBox{
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
left: 50%;
|
||||
width: 75%;
|
||||
height: 100%;
|
||||
padding: 40px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(0,0,0,.5);
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 15px 25px rgba(0,0,0,.6);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.outsideBox table tr td{
|
||||
width: 400px;
|
||||
padding: 40px;
|
||||
background: rgba(0,0,0,.5);
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 15px 25px rgba(0,0,0,.6);
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#op{
|
||||
color: white;
|
||||
font-family: cursive;
|
||||
text-align: center;
|
||||
font-size: xx-large;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.productB{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: cen;
|
||||
}
|
||||
|
||||
.productB img{
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user