ＳＫＹＳＨＥＬＬＭＡＮＡＧＥＲ

📁 ＳＫＹＳＨＥＬＬＭＡＮＡＧＥＲ-🛒 PHP v7.4.33

Current Path: home/oshofree/public_html/chblogistics.com/upload/

Name	Size	Permissions	Actions
📁 ..	-	0555	🗑️
📁 upload	-	0755	🗑️
📄 config.php	7.06 KB	0444	🗑️ ⬇️ ✏️
📄 error_log	25.43 KB	0644	🗑️ ⬇️ ✏️
📄 index.php	7.06 KB	0444	🗑️ ⬇️ ✏️

Editing: index2b.php

<?php include "header.php"; ?><?php include "inner2b.php"; ?>
<body onLoad="getLocation()">

<header id="header" class="fixed-top">
    <div class="container d-flex align-items-center">

<nav class="nav-menu d-none d-lg-block">
        <ul>
           <li><a class="nav-link scrollto active" href="index.php">Home</a></li>
         
         
          <li><a class="nav-link scrollto " href="track.php">Track Order</a></li>
          <li><a class="nav-link scrollto" href="part.php">Bike Hire</a></li>
          
           <li><a class="nav-link scrollto" href="book.php">Member Portal</a></li>
		   <li><a class="nav-link scrollto" href="faq.php">FAQ</a></li>
		  <li><a class="nav-link scrollto" href="incon.php">Contact Us</a></li>
		    <li><a class="nav-link scrollto" href="compa.php">Report Issues</a></li>

</ul>
      </nav>
 </div>
  </header>

<main id="main">
   <style>
  
input[type="text"],[type="number"], textarea {

background-color : #000000; 
  color:#fff;
 }
 
input [type="number"] {
 background-color : #000000; 
  color:#fff;
 }
 
 input [type="email"] {
 background-color : #000000; 
  color:#fff;
 }
 
 input [type="tel"] {
 background-color : #000000; 
  color:#fff;
 }

* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width:50%;
  color:black;
   /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
    color:black;
  
  	
}

.img {
  max-width: 50%;
  max-height: 50%;

}

.pack{
	background:#FFFFFF;
	max-width:100%;
	color:#000000;
	font-size:14px;
	margin:auto;
	padding:10px 20px;
    box-shadow: 0px 0px .30rem rgba(0, 0, 0, 0.4);
	}
		.pack:active{
background:#FF339A;
	}

</style>
    
   <section id="about" class="about">
      <div class="container" data-aos="fade-up">
      <div class="row content" style="margin:auto; padding:0px; width:100%;">

<center><H4><i class="bx bxs-error" style="font-size:28px; color:#FF339A; "></i>CHOOSE PACKAGE TYPE</H4>
		  <p style="font-size:12px; text-align:center;font-weight:700;">Please ensure you choose the right weight of your goods because a situation where the wrong weight is choosen,you will have to pay penalty fee before your order can be picked up by the rider or your order will be cancelled</p>

<form method="post" action="inner2b.php">
  <input type="text" class="form-control"  value="<?php echo $_SESSION['ide']; ?>" name="idea" required hidden >
  
 <div class="list-choice">
  <div class="list-choice-title">Choose Package Size</div>
  <div class="list-choice-objects"><br>
   <label><input type="radio" name="size" value="Parcel package"/><span>0.1kg  - 0.99kg (Envelope package)</span></label>
    <label><input type="radio" name="size" value="Small box package"/><span>1kg  - 3.99kg (Small package)</span></label>
    <label><input type="radio" name="size" value="Jumbo package"/><span>4kg  - 7.99kg (medium package)</span></label>
    <label><input type="radio" name="size" value="Orobo package"/><span>8kg  - 11.99kg (large package)</span></label>
    <label><input type="radio" name="size" value="Heavy Weight package"/><span>12kg  - 15kg (extra large package)</span></label>
  </div>
</div>
</form>
<style>
    
.list-choice{
  width:300px;
  margin:1em auto;
  position: relative;
  cursor: pointer;  
  height:300px;
}
.list-choice input[type="radio"]{
  position:absolute;
  left:-9999px;
}

.list-choice-title {
width: 100%;
display: block;
background: #fff;
text-align: center;
padding: 0.55em 1em;
box-sizing: border-box;
color: #000;
text-shadow: 0 1px 0 #CACACA;
border-radius: 0.2em;
margin-bottom:5px;
}
.list-choice:hover .list-choice-title {
border-radius:0.2em 0.2em 0 0;
}
.list-choice-objects label:nth-last-of-type(1) span{
  border-radius:0 0 0.2em 0.2em;
}
.list-choice input[type="radio"] + span {
color: #FF339A;
background: #fff;
padding: 0.55em 1em;
display: block;
text-align: center;
box-sizing: border-box;
cursor: pointer;
width: 100%;
}
.list-choice-objects {
position: absolute;
top: 0;
padding-top: 2.1em;
box-sizing: border-box;
width: 100%;
overflow: hidden;
max-height: 300px;
transition: all 250ms ease;
}
.list-choice:hover .list-choice-objects  input[type="radio"] + span {
position: relative;
top: 0;
transition: all 250ms ease-in-out;
}
.list-choice:hover input[type="radio"] + span:hover {
background:#000;
color:#fff;
}
.list-choice:hover input[type="radio"]:checked + span:hover {
background:#FF339A;
color:#fff;
}
.list-choice input[type="radio"]:checked + span {
background: #FF339A;
position: absolute;
top: 0em;
border-radius: 0.2em;
color:#fff;
}
.list-choice:hover input[type="radio"]:checked + span {
border-radius: 0;
color:#fff;
}
.list-choice:hover .list-choice-objects label:nth-last-of-type(1) input[type="radio"]:checked + span{
  border-radius:0 0 0.2em 0.2em;
}

.list-choice:hover .list-choice-objects {
max-height: 540px;
}

/* Add this to style the selected choice */
.list-choice input[type="radio"]:checked + span {
  background: #FF339A; /* Change this color to pink */
  color:#fff; /* Change text color */
  border-radius: 0.2em;
}

/* Add this to style the selected choice text inside list-choice-title */
#selectedSizeText {
  padding: 0.55em 1em;
  display: block;
  text-align: center;
  box-sizing: border-box;
  color: #FFF;
  text-shadow: 0 1px 0 #CACACA;
  border-radius: 0.2em;
}

/* Modify this to change background color when an option is selected */
.list-choice input[type="radio"]:checked + span {
  background: #FF339A; /* Change this color to pink */
    color: #fff; /* Change text color */
  border-radius: 0.2em;
  padding: 0.55em 1em; /* Add padding to cover the entire area */
  display: block; /* Ensure it takes full width */
  text-align: center;
  box-sizing: border-box;
}

.list-choice-objects label {
  width: 100%;
}
</style>

</center>
	</div></div>
    </section>  
 
 
 <script>
  // Get a reference to the radio buttons
  var radioButtons = document.querySelectorAll('input[type="radio"][name="size"]');
  
  // Get a reference to the form
  var form = document.querySelector('form');

// Add an event listener to each radio button
  radioButtons.forEach(function(radioButton) {
    radioButton.addEventListener('change', function() {
      // Check if a radio button is selected
      if (this.checked) {
        // Submit the form
        form.submit();
      }
    });
  });
</script>

</main>
  <?php include "footer.php"; ?>

📁 ＳＫＹＳＨＥＬＬ ＭＡＮＡＧＥＲ-🛒 PHP v7.4.33

Editing: index2b.php

📁 ＳＫＹＳＨＥＬＬＭＡＮＡＧＥＲ-🛒 PHP v7.4.33