<!
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\[Link]" type="image/png">
<link href="[Link]
css/[Link]" rel="stylesheet">
<link rel="stylesheet"
href="[Link]
<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/[Link]" alt="Diamante Logo" class="logo">
<img src="Logos/[Link]" 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/[Link]" 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) {
[Link]("loginSection").[Link] = sectionId ===
'loginSection' ? 'block' : 'none';
[Link]("signupSection").[Link] = sectionId ===
'signupSection' ? 'block' : 'none';
}
// Placeholder login function
function login() {
const username = [Link]("username").value;
const password = [Link]("password").value;
// Placeholder logic for checking credentials
if (username && password) {
[Link]("authSection").[Link] = "none";
[Link]("mainContent").[Link] = "block";
} else {
alert("Please enter your credentials.");
}
}
// Placeholder signup function
function signup() {
const newUsername = [Link]("newUsername").value;
const newPassword = [Link]("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 = [Link]("senderSecret").value;
const senderPublic = [Link]("senderPublic").value;
const key = [Link]("key").value;
const text = [Link]("text").value;
const timestamp = new Date().toISOString();
if (senderSecret && senderPublic && key && text) {
const ledgerEntry = { senderSecret, senderPublic, text, timestamp };
[Link](key, [Link](ledgerEntry));
[Link]("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 = [Link]("ledgerId").value;
const ledgerData = [Link](ledgerId);
const ledgerTableBody = [Link]("ledgerTableBody");
[Link] = "";
if (ledgerData) {
const { senderPublic, text, timestamp } = [Link](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>;
[Link] += row;
} else {
alert("No data found for this Ledger ID.");
}
}
</script>
</body>
</html>
