1
2
3
4
5
6
7
8
9
0
Lock
Safe with Keypad and Dropdown Buttons
@keyframes grow {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #000000;
color: #fff;
}
.safe-container {
position: relative;
width: 1000px;
height: 1000px;
}
.safe-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(‘https://theworldsbestoil.com/wp-content/uploads/2024/12/Vault-3.webp’) no-repeat center;
background-size: contain;
z-index: 1;
}
.light-indicator {
position: absolute;
top: 29%; /* Percentages based on container dimensions */
left: 23%;
width: 50px;
height: 50px;
border-radius: 50%;
background-size: cover;
background-color: red;
z-index: 2;
}
.door-container {
position: absolute;
top: 0;
left: 50%;
width: 100%;
height: 100%;
transform-origin: -300px center;
transform: rotateY(0deg);
transition: transform 5s ease-in-out;
z-index: 3;
transform-style: preserve-3d;
}
.door-container.open {
transform: rotateY(-120deg);
}
.door {
position: absolute;
top: 0;
left: -50%;
width: 100%;
height: 100%;
background: url(‘https://theworldsbestoil.com/wp-content/uploads/2024/12/door.webp’) no-repeat center;
background-size: contain;
}
:root {
–crank-size-percent: 17%; /* Default size set to 100% */
}
.crank {
position: absolute;
top: 40%;
left: -7%;
width: var(–crank-size-percent);
height: var(–crank-size-percent);
background: url(‘https://theworldsbestoil.com/wp-content/uploads/2024/12/CRANK.webp’) no-repeat center;
background-size: contain;
transform-origin: center;
transform: rotate(0deg);
transition: transform 2s ease-in-out;
}
.keypad-container {
position: absolute;
top: 45.45%;
left: 75.35%;
transform: translate(-50%, 0);
z-index: 10;
}
.keypad {
display: grid;
grid-template-columns: repeat(3, 20px);
gap: 11.2px;
}
.key {
width: 20px;
height: 20px;
background-color: #000000;
color: white;
font-size: 15px;
border: none;
border-radius: 6px;
cursor: pointer;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.key.reset {
grid-column: span 2; /* Spans two columns */
width: 52px; /* Adjusted to fill the space of two keys */
height: 20px;
font-size: 15px; /* Slightly smaller font to fit “Reset” */
}
width: 52px; /* Adjusted to fill the space of two keys */
height: 20px;
font-size: 15px; /* Slightly smaller font to fit “Reset” */
}
.key:active {
background-color: #555;
}
.button-reveal-container {
position: absolute;
top: 0;
left: 32%;
width: 35%;
height: 100%;
z-index: 3;
display: none;
justify-content: center;
align-items: center;
flex-direction: column;
}
.door-container.open ~ .button-reveal-container {
display: flex;
}
/* Common styles for all buttons */
.button, .dropdown-btn, .dropdown-content button {
background-color: #004080;
color: white;
padding: 15px;
font-size: 18px;
font-weight: bold;
border: 2px solid #ccc; /* Consistent border size and color */
cursor: pointer;
border-radius: 5px;
text-align: center;
width: 100%; /* Ensuring full width for consistency */
transition: background-color 0.3s;
}
.dropdown-btn {
opacity: 0;
visibility: hidden;
transform: scale(0);
animation: grow 3s ease-out forwards;
animation-delay: 3s;
}
.door-container.open ~ .button-reveal-container .dropdown-btn {
visibility: visible;
}
.dropdown-content {
display: none;
position: relative;
background-color: #ffffff;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
z-index: 4;
border-radius: 8px;
overflow: hidden;
padding: 15px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content button {
background-color: #8B0000; /* Specific background for dropdown buttons */
margin-bottom: 10px;
}
.dropdown-content button:hover {
background-color: #004080;
}
.button-container {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.button-container button.reset {
background-color: #6c757d;
}
.button-container button:hover {
opacity: 0.9;
}
let code = [];
const correctCode = [1, 9, 6, 5];
function initializeLights() {
const lightIndicator = document.getElementById(‘lightIndicator’);
lightIndicator.style.backgroundImage = “url(‘https://theworldsbestoil.com/wp-content/uploads/2024/12/Red.webp’)”;
}
// Existing sounds for unlocking the safe
const safeSound1 = new Audio(‘https://theworldsbestoil.com/wp-content/uploads/2024/12/vaullt-2.m4a’);
const safeSound2 = new Audio(‘https://theworldsbestoil.com/wp-content/uploads/2024/12/unlocked.m4a’);
const safeSound3 = new Audio(‘https://theworldsbestoil.com/wp-content/uploads/2024/12/metal-door-creaking-closing-47323.mp3’);
// New sounds specifically for resetting the safe
const resetSound1 = new Audio(‘https://theworldsbestoil.com/wp-content/uploads/2024/12/metal-door-creaking.mp3’);
const resetSound2 = new Audio(‘https://theworldsbestoil.com/wp-content/uploads/2024/12/SPIN.m4a’);
const resetSound3 = new Audio(‘https://theworldsbestoil.com/wp-content/uploads/2024/12/LOCKED.m4a’);
// Preload all sounds
[safeSound1, safeSound2, safeSound3, resetSound1, resetSound2, resetSound3].forEach(sound => {
sound.preload = ‘auto’;
sound.load();
});
function pressKey(number) {
code.push(number);
if (code.length === correctCode.length) {
if (code.every((num, index) => num === correctCode[index])) {
unlockSafe();
} else {
code = [];
alert(‘Incorrect Code! Try Again.’);
}
}
}
function unlockSafe() {
// Play sounds when unlocking the safe
safeSound1.play();
safeSound1.onended = function() {
safeSound2.play();
safeSound2.onended = function() {
safeSound3.play();
};
};
const crank = document.getElementById(‘crank’);
const doorContainer = document.getElementById(‘doorContainer’);
const lightIndicator = document.getElementById(‘lightIndicator’);
crank.style.transform = ‘rotate(720deg)’;
setTimeout(() => {
doorContainer.classList.add(‘open’);
lightIndicator.style.backgroundImage = “url(‘https://theworldsbestoil.com/wp-content/uploads/2024/12/green.webp’)”;
lightIndicator.style.backgroundColor = ‘green’;
}, 3000);
}
function resetSafe() {
code = [];
const crank = document.getElementById(‘crank’);
const doorContainer = document.getElementById(‘doorContainer’);
const lightIndicator = document.getElementById(‘lightIndicator’);
doorContainer.classList.remove(‘open’);
// Play reset sounds sequentially
resetSound1.play();
resetSound1.onended = function() {
// Crank starts spinning as the second sound plays
crank.style.transform = ‘rotate(0deg)’;
resetSound2.play();
resetSound2.onended = function() {
resetSound3.play();
};
};
setTimeout(() => {
lightIndicator.style.backgroundImage = “url(‘https://theworldsbestoil.com/wp-content/uploads/2024/12/Red.webp’)”;
lightIndicator.style.backgroundColor = ‘red’;
}, 9000);
}
function openCenteredPopup(url, title, width, height) {
const screenWidth = window.screen.width;
const screenHeight = window.screen.height;
const left = (screenWidth – width) / 2; // Centering the popup horizontally
const top = screenHeight – height – 100; // Positioning the popup 100px above the bottom of the screen
const features = `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`;
const popupWindow = window.open(url, title, features);
if (!popupWindow || popupWindow.closed || typeof popupWindow.closed === “undefined”) {
alert(“Popup blocked! Please allow popups for this website.”);
}
}
const chartWebAppURL = “https://script.google.com/macros/s/AKfycbyYb3HjHFcwPF4xPhEEpXikV3eFZq90_bnMuDkDsHgK7E26nvByI-ifXMKT9TPt87c/exec?action=chart”;
const mapWebAppURL = “https://script.google.com/macros/s/AKfycbxn60Loa9_QtCry4RyKpML5bOnnZMdjKxuwR3nG2-7jLp0pXXUhmRVGooh9OBCwo0cD/exec?action=AMSOIL%20Map”;
const buyersWebAppURL = “https://script.google.com/macros/s/AKfycbw980Gdv8kpAOCfm2EBy4jGLs98dS55B_Pi7tTkcboa4WHBuiK0xr8zablSa577i1lQ/exec?action=Top%20Buyers”;
const loyaltyWebAppURL = “https://script.google.com/macros/s/AKfycbwOV41OPkwkfxvert7CRej5FlVkFhSPZ4yOOmkKaso8wCtZygj7CexFomzbCxZ6f0iE/exec?action=Loyalty%20Awards”;
