projekt.html
<!DOCTYPE html>
<html lang="hu">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amazon-Employee</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<style>
.kep {
width: 20%;
height: 20%;
}
.divke {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.navbar-brand {
color: aliceblue;
font-weight: bold;
font-family: "Nunito", sans-serif;
font-optical-sizing: auto;
font-style: normal;
}
.fontok {
font-family: "Nunito", sans-serif;
font-optical-sizing: auto;
color: rgba(255, 83, 1);
font-style: normal;
}
.navbar-brand:hover {
color: aliceblue;
}
.col-6 {
display: flex;
justify-content: center;
align-items: center;
}
.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited {
background-color: rgba(21, 29, 40) !important;
color: rgba(255, 83, 1);
}
.anyu {
margin-top: 10px;
}
.cantsee {
display: none;
}
.apu {
margin-right: auto;
}
.shift-end {
font-size: 2rem;
color: rgba(255, 83, 1);
font-weight: bold;
margin-top: 30px;
animation: fadeIn 1s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
body.shift-mode {
background-color: rgba(21, 29, 40);
}
body.shift-mode .divke {
display: none;
}
body.shift-mode .container {
display: none;
}
body.shift-mode .shift-container {
display: flex !important;
}
.shift-container {
display: none;
justify-content: center;
align-items: center;
height: calc(100vh - 56px);
}
.error-message {
color: #dc3545;
margin-top: 10px;
font-weight: bold;
}
</style>
<link rel="icon"
href="https://upload.wikimedia.org/wikipedia/commons/d/de/Amazon_icon.png?utm_source=commons.wikimedia.org&utm_campaign=index&utm_content=original">
</head>
<body>
<nav class="navbar" style="background-color: rgba(21, 29, 40);" data-bs-theme="light">
<div class="container-fluid">
<a class="navbar-brand" href="https://www.amazon.com/">
<img src="amazon-rebrand-2025_dezeen_2364_col_1-1.jpg" alt="Logo" width="7%" height="7%"
class=" align-text-center">
AMAZON WORKER SIMULATOR lost package handling
</a>
</div>
</nav>
<div class="divke">
<a
href="https://www.shutterstock.com/image-photo/beautiful-wonderful-cute-kitten-wallpaper-600nw-2435308283.jpg">
<img src="Névtelen terv (5).png" alt="kep" class="kep">
</a><br>
</div>
<div class="container text-center">
<div class="row">
<div id="kod" class="col-6"><br>
<button onclick="vonalkod()" type="button" class="btn btn-primary">Ready</button>
</div>
<div class="col-6">
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping">#</span>
<input id="beirt" type="text" class="form-control" placeholder="Barcode-address"
aria-label="Username" aria-describedby="addon-wrapping">
<button type="button" onclick="olvas()" class="btn btn-primary">Scan</button>
</div>
<div id="error" class="error-message cantsee"></div>
</div>
<div id="apu" class="apu cantsee">
<p id="name">Product name: </p>
<div id="approve" class="anyu cantsee">
<button type="button" onclick="approve()" class="btn btn-primary">Approve</button>
</div>
</div>
</div>
</div>
<div class="shift-container">
<div id="shift-content" class="text-center"></div>
</div>
<br><br><br><br><br><br><br><br><br><br>
<a href="kod.html"></a>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"></script>
<script>
let kodok = [
"Kép (1).png",
"Kép (2).png",
"Kép (3).png",
"Kép (4).png"
];
let currentImage = null;
function vonalkod() {
if (kodok.length === 0) {
document.body.classList.add("shift-mode");
document.getElementById("shift-content").innerHTML = `<div class="shift-end">Well done, your family is free</div>`;
return;
}
let randomIndex = Math.floor(Math.random() * kodok.length);
currentImage = kodok[randomIndex];
let kep = document.querySelector("#kod");
kep.innerHTML = `<img src="${currentImage}">`;
}
async function olvas() {
let kod = document.querySelector("#beirt").value;
let errorDiv = document.getElementById("error");
if (kod.trim() === "") {
errorDiv.innerHTML = "Kérlek írd be a vonalkódot!";
errorDiv.classList.remove("cantsee");
return;
}
errorDiv.classList.add("cantsee");
try {
let adat = await (await fetch(`https://cors.borbelyb.workers.dev/?https%3A%2F%2Fapi.upcitemdb.com%2Fprod%2Ftrial%2Flookup%3Fupc%3D${kod}%20%20`)).json();
if (adat.items && adat.items.length > 0) {
document.getElementById("approve").classList.remove("cantsee");
document.getElementById("apu").classList.remove("cantsee");
document.getElementById("name").innerHTML = "Product name: " + adat.items[0].title;
} else {
errorDiv.innerHTML = "Termék nem található!";
errorDiv.classList.remove("cantsee");
}
} catch (error) {
errorDiv.innerHTML = "Hiba történt az adatlekéréskor!";
errorDiv.classList.remove("cantsee");
}
}
function approve() {
kodok = kodok.filter(img => img !== currentImage);
if (kodok.length === 0) {
document.body.classList.add("shift-mode");
document.getElementById("shift-content").innerHTML = `<div class="shift-end">Well done, your family is free</div>`;
document.getElementById("approve").classList.add("cantsee");
document.getElementById("apu").classList.add("cantsee");
} else {
document.querySelector("#kod").innerHTML = `<br> <button onclick="vonalkod()" type="button" class="btn btn-primary">Ready</button>`;
document.getElementById("approve").classList.add("cantsee");
document.getElementById("apu").classList.add("cantsee");
}
document.getElementById("beirt").value = null;
document.getElementById("name").innerHTML = "Product name: ";
document.getElementById("error").classList.add("cantsee");
}
</script>
</body>
</html>