Skip to content

Instantly share code, notes, and snippets.

@andyjf0

andyjf0/index.html

Forked from matt-0508/index.html
Created December 9, 2025 12:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save andyjf0/8e6e1edaa778b9d2eae063ec4d941037 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save andyjf0/8e6e1edaa778b9d2eae063ec4d941037 to your computer and use it in GitHub Desktop.
Download ZIP
Module 1 JHub coding scheme 30436636
Raw
index.html
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Defence Drone Configuration Tool</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Defence Drone Configuration Tool</h1>
<p>Select your mission equipment to generate your custom reconnaissance drone.</p>
</header>
<section class="container">
<!-- Drone Image (only one) -->
<div class="image-box">
<img src="https://static.vecteezy.com/system/resources/previews/005/951/476/non_2x/military-drone-silhouette-free-vector.jpg"
alt="Military Drone" />
</div>
<!-- Form -->
<form id="droneForm">
<h2>⚙️ Drone Configuration</h2>
<!-- Sensors Dropdown -->
<div class="dropdown" data-type="sensor">
<button type="button" class="dropdown-btn">Sensors Package</button>
<ul class="dropdown-menu">
<li data-value="0">Basic EO/IR – £0</li>
<li data-value="50000">Advanced Multi-Spectral – £50,000</li>
<li data-value="120000">Synthetic Aperture Radar – £120,000</li>
</ul>
</div>
<!-- Range Dropdown -->
<div class="dropdown" data-type="range">
<button type="button" class="dropdown-btn">Range Upgrade</button>
<ul class="dropdown-menu">
<li data-value="0">Standard (300km) – £0</li>
<li data-value="45000">Extended (600km) – £45,000</li>
<li data-value="90000">Ultra (1000km) – £90,000</li>
</ul>
</div>
<!-- Stealth Dropdown -->
<div class="dropdown" data-type="stealth">
<button type="button" class="dropdown-btn">Stealth Coating</button>
<ul class="dropdown-menu">
<li data-value="0">None – £0</li>
<li data-value="30000">Radar Absorbent – £30,000</li>
</ul>
</div>
<button type="button" class="calculate-btn" onclick="calculatePrice()">Calculate Price</button>
<h3>Total Price: <span id="price">£0</span></h3>
</form>
</section>
<footer>
<p>Unclassified | Educational Project Only</p>
</footer>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
let selectedSensors = 0;
let selectedRange = 0;
let selectedStealth = 0;
/* Open/close dropdowns */
document.querySelectorAll(".dropdown-btn").forEach(btn => {
btn.addEventListener("click", () => {
// Close any other open dropdowns
document.querySelectorAll(".dropdown").forEach(drop => {
if(drop !== btn.parentElement) drop.classList.remove("open");
});
btn.parentElement.classList.toggle("open");
});
});
/* Handle selection */
document.querySelectorAll(".dropdown-menu li").forEach(item => {
item.addEventListener("click", () => {
const parent = item.closest(".dropdown");
const button = parent.querySelector(".dropdown-btn");
// Update button text
button.textContent = item.textContent;
// Get numeric value
const value = Number(item.getAttribute("data-value"));
// Determine type from parent div
const type = parent.dataset.type;
switch(type) {
case "sensor":
selectedSensors = value;
break;
case "range":
selectedRange = value;
break;
case "stealth":
selectedStealth = value;
break;
}
// Close dropdown
parent.classList.remove("open");
});
});
/* Price Calculator */
function calculatePrice() {
const basePrice = 0;
const total = basePrice + selectedSensors + selectedRange + selectedStealth;
const priceEl = document.getElementById("price");
priceEl.style.opacity = 0;
setTimeout(() => {
priceEl.textContent = "£" + total.toLocaleString();
priceEl.style.opacity = 1;
}, 150);
}
Raw
style.css
/* ---------- Global Styling ---------- */
body {
margin: 0;
font-family: 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(to bottom right, #0a1a2f, #123456);
color: #e8ecf1;
line-height: 1.6;
}
/* ---------- Header ---------- */
header {
padding: 40px 20px;
text-align: center;
background: rgba(0, 30, 60, 0.85);
backdrop-filter: blur(8px);
box-shadow: 0 4px 15px rgba(0,0,0,0.4);
border-bottom: 2px solid rgba(255,255,255,0.1);
}
header h1 {
margin: 0;
font-size: 2.4rem;
letter-spacing: 1.5px;
}
header p {
margin-top: 8px;
font-size: 1.1rem;
opacity: 0.85;
}
/* ---------- Main Layout ---------- */
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
padding: 30px;
max-width: 1100px;
margin: auto;
}
/* ---------- Image Box ---------- */
.image-box img {
width: 100%;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0,0,0,0.5);
border: 2px solid rgba(255,255,255,0.05);
}
/* ---------- Form Box ---------- */
form {
background: rgba(0, 0, 0, 0.9); /* darker solid background for visibility */
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
form h2 {
margin-top: 0;
font-size: 1.8rem;
color: #f7f9fc;
}
/* ---------- Dropdown System ---------- */
.dropdown {
margin-top: 20px;
position: relative;
}
.dropdown-btn {
width: 100%;
padding: 12px;
background: #1c1c1c;
border: 1px solid #444;
color: white;
font-size: 1.1rem;
border-radius: 10px;
cursor: pointer;
text-align: left;
position: relative;
}
.dropdown-btn::after {
content: "▼";
position: absolute;
right: 15px;
transition: transform 0.3s ease;
}
.dropdown.open .dropdown-btn::after {
transform: rotate(180deg);
}
.dropdown-menu {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
background: #222; /* darker background for readability */
border-radius: 10px;
border: 1px solid #444;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.35s ease, opacity 0.35s ease;
z-index: 5;
}
.dropdown.open .dropdown-menu {
max-height: 250px;
opacity: 1;
}
.dropdown-menu li {
padding: 12px;
cursor: pointer;
transition: background 0.2s ease;
}
.dropdown-menu li:hover {
background: #555;
}
/* ---------- Button Styling ---------- */
button.calculate-btn {
margin-top: 25px;
width: 100%;
padding: 14px;
font-size: 1.2rem;
background: linear-gradient(120deg, #1c5f9c, #0f3f6d);
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
}
button.calculate-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 18px rgba(0,0,0,0.4);
}
#price {
display: inline-block;
margin-top: 10px;
font-size: 1.7rem;
font-weight: bold;
color: #00e6ff;
opacity: 0;
transition: opacity 0.6s ease;
}
/* ---------- Footer ---------- */
footer {
text-align: center;
padding: 20px;
margin-top: 40px;
font-size: 0.9rem;
opacity: 0.6;
}
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.container {
grid-template-columns: 1fr;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment