<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blockchain Ledger for Transparent Logistics</title>
<link rel="icon" href="Logos\codexo.png" type="image/png">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/
css/all.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
<style>
/* Custom animations */
.slide-in { animation: slide-in 0.5s ease-in-out; }
@keyframes slide-in { from { transform: translateY(-20px); opacity: 0; } to
{ transform: translateY(0); opacity: 1; }}
.fade-in { animation: fade-in 0.5s ease-in-out; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; }}
.btn { transition: background-color 0.3s, transform 0.3s; }
.btn:hover { transform: scale(1.05); background-color: #2563eb; }
/* Background and container styles */
body { background: linear-gradient(135deg, #03045E, #00B4D8); color:
#f5f5f5; display: flex; justify-content: center; align-items: center; height:
100vh; margin: 0; }
.container { max-width: 60%; padding: 50px; background-color: #2d2d2d;
border-radius: 8px; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25); }
/* Logo and heading */
.logo { height: 70px; margin: 0 10px; }
h1 { font-size: 3.5rem; }
input, textarea { font-weight: 500; color: black; background-color:
rgba(255, 255, 255, 0.8); }
</style>
</head>
<body class="font-sans leading-normal tracking-normal min-h-screen">
<!-- Container -->
<div class="container mx-auto p-6 bg-gray-800 rounded-xl shadow-lg overflow-
hidden">
<!-- Header -->
<div class="flex items-center justify-between mb-10">
<div class="flex">
<img src="Logos/diamante.png" alt="Diamante Logo" class="logo">
<img src="Logos/actualone.png" alt="ActualOne Logo" class="logo">
</div>
<div class="ml-4 text-center flex-grow">
<h1 class="text-4xl font-extrabold text-white">Blockchain Ledger for
Transparent Logistics</h1>
<p class="text-gray-300 mt-2">Ensuring Visibility, Security, and Trust
in Every Shipment!</p>
</div>
<img src="Logos/codexo.png" alt="Codexo Logo" class="logo">
</div>
<!-- Authentication Sections -->
<div id="authSection" class="bg-gray-900 p-8 rounded-lg shadow-lg slide-in">
<!-- Login Section -->
<div id="loginSection">
<h2 class="text-2xl font-semibold text-blue-400 mb-6">Login</h2>
<form id="loginForm" class="space-y-4">
<div>
<label for="username" class="block text-sm font-medium text-
gray-300">Username</label>
<input type="text" id="username" class="mt-1 p-3 w-full border
rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-300" placeholder="Enter
your username" required>
</div>
<div>
<label for="password" class="block text-sm font-medium text-
gray-300">Password</label>
<input type="password" id="password" class="mt-1 p-3 w-full
border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-300"
placeholder="Enter your password" required>
</div>
<button type="button" onclick="login()" class="w-full py-3 btn
text-white font-semibold rounded-lg bg-blue-600">Login</button>
<p class="mt-4 text-gray-300 text-center">Don't have an account?
<span class="text-blue-400 cursor-pointer"
onclick="showSection('signupSection')">Sign up</span></p>
</form>
</div>
<!-- Signup Section -->
<div id="signupSection" class="hidden">
<h2 class="text-2xl font-semibold text-blue-400 mb-6">Sign Up</h2>
<form id="signupForm" class="space-y-4">
<div>
<label for="newUsername" class="block text-sm font-medium text-
gray-300">Username</label>
<input type="text" id="newUsername" class="mt-1 p-3 w-full
border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-300"
placeholder="Create a username" required>
</div>
<div>
<label for="newPassword" class="block text-sm font-medium text-
gray-300">Password</label>
<input type="password" id="newPassword" class="mt-1 p-3 w-full
border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-300"
placeholder="Create a password" required>
</div>
<button type="button" onclick="signup()" class="w-full py-3 btn
text-white font-semibold rounded-lg bg-green-600">Sign Up</button>
<p class="mt-4 text-gray-300 text-center">Already have an account?
<span class="text-blue-400 cursor-pointer"
onclick="showSection('loginSection')">Login</span></p>
</form>
</div>
</div>
<!-- Main Content Grid (Visible after login) -->
<div id="mainContent" class="hidden fade-in">
<div class="grid lg:grid-cols-2 gap-10">
<!-- Store Text Section -->
<div class="bg-gray-900 p-8 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold text-blue-400 mb-6">Store Text
Data</h2>
<form id="storeTextForm" class="space-y-4">
<div>
<label for="senderSecret" class="block text-sm font-medium
text-gray-300">Sender Secret</label>
<input type="text" id="senderSecret" class="mt-1 p-3 w-full
border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-300"
placeholder="Enter sender secret key" required>
</div>
<div>
<label for="senderPublic" class="block text-sm font-medium
text-gray-300">Sender Public Key</label>
<input type="text" id="senderPublic" class="mt-1 p-3 w-full
border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-300"
placeholder="Enter sender public key" required>
</div>
<div>
<label for="key" class="block text-sm font-medium text-
gray-300">Ledger ID</label>
<input type="text" id="key" class="mt-1 p-3 w-full border
rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-300" placeholder="Enter
ledger ID" required>
</div>
<div>
<label for="text" class="block text-sm font-medium text-
gray-300">Status of Package</label>
<textarea id="text" class="mt-1 p-3 w-full border rounded-
lg focus:outline-none focus:ring-2 focus:ring-blue-300" placeholder="Enter text to
store" required></textarea>
</div>
<button type="button" onclick="storeText()" class="w-full py-3
btn text-white font-semibold rounded-lg bg-blue-600">Store Text</button>
<p id="storeResult" class="mt-4 text-green-400 font-medium
text-center"></p>
</form>
</div>
<!-- View Ledger Section -->
<div class="bg-gray-900 p-8 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold text-blue-400 mb-6">View Ledger
by ID</h2>
<div class="mb-6">
<label for="ledgerId" class="block text-sm font-medium text-
gray-300">Enter Ledger ID</label>
<input type="text" id="ledgerId" class="mt-1 p-3 w-full border
rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-300" placeholder="Enter
ledger ID" required>
</div>
<button type="button" onclick="fetchLedgerById()" class="w-full py-
3 btn text-white font-semibold rounded-lg bg-blue-600">Fetch Ledger</button>
<div id="ledgerDisplay" class="overflow-auto">
<table class="min-w-full bg-gray-800 rounded-lg overflow-
hidden">
<thead>
<tr>
<th class="border p-3">Sender Public Key</th>
<th class="border p-3">Ledger ID</th>
<th class="border p-3">Status</th>
<th class="border p-3">Timestamp</th>
</tr>
</thead>
<tbody id="ledgerTableBody"></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script>
// Function to switch between login and signup sections
function showSection(sectionId) {
document.getElementById("loginSection").style.display = sectionId ===
'loginSection' ? 'block' : 'none';
document.getElementById("signupSection").style.display = sectionId ===
'signupSection' ? 'block' : 'none';
}
// Placeholder login function
function login() {
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
// Placeholder logic for checking credentials
if (username && password) {
document.getElementById("authSection").style.display = "none";
document.getElementById("mainContent").style.display = "block";
} else {
alert("Please enter your credentials.");
}
}
// Placeholder signup function
function signup() {
const newUsername = document.getElementById("newUsername").value;
const newPassword = document.getElementById("newPassword").value;
// Placeholder logic for user registration
if (newUsername && newPassword) {
alert("Signup successful! You can now log in.");
showSection('loginSection');
} else {
alert("Please fill out all fields.");
}
}
// Function to store text data in local storage
function storeText() {
const senderSecret = document.getElementById("senderSecret").value;
const senderPublic = document.getElementById("senderPublic").value;
const key = document.getElementById("key").value;
const text = document.getElementById("text").value;
const timestamp = new Date().toISOString();
if (senderSecret && senderPublic && key && text) {
const ledgerEntry = { senderSecret, senderPublic, text, timestamp };
localStorage.setItem(key, JSON.stringify(ledgerEntry));
document.getElementById("storeResult").textContent = "Data stored
successfully!";
} else {
alert("All fields are required to store data.");
}
}
// Function to fetch ledger data by ID
function fetchLedgerById() {
const ledgerId = document.getElementById("ledgerId").value;
const ledgerData = localStorage.getItem(ledgerId);
const ledgerTableBody = document.getElementById("ledgerTableBody");
ledgerTableBody.innerHTML = "";
if (ledgerData) {
const { senderPublic, text, timestamp } = JSON.parse(ledgerData);
const row = <tr>
<td class="border p-3">${senderPublic}</td>
<td class="border p-3">${ledgerId}</td>
<td class="border p-3">${text}</td>
<td class="border p-3">${timestamp}</td>
</tr>;
ledgerTableBody.innerHTML += row;
} else {
alert("No data found for this Ledger ID.");
}
}
</script>
</body>
</html>
