ThunderStorm/PhpShit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wa

Browse Source
This commit is contained in:
L12Y08W15 2024-05-02 10:31:56 +08:00
commit 9fb08d43d0
11 changed files with 1305 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.idea/.gitignore vendored Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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;
}