<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Diamante Blockchain Text Storage</title>
<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;
}
}
/* Button hover effect */
.btn {
transition: background-color 0.3s, transform 0.3s;
}
.btn:hover {
transform: scale(1.05);
background-color: #2563eb; /* Darker blue on hover */
}
/* Animated background */
body {
background: linear-gradient(135deg, #9c4dcc, #000000); /* Lighter shade
of purple */
color: #f5f5f5;
}
/* Container styles */
.container {
position: relative;
z-index: 10; /* Ensure the content appears above the background */
max-width: 1400px; /* Increased max width for the main document */
margin: 0 auto; /* Center the container */
padding: 2rem; /* Added padding for larger space */
}
/* Logo styles */
.logo {
height: 70px; /* Increased logo size */
margin: 0 10px;
}
/* Main heading styles */
h1 {
font-size: 3.5rem; /* Increased font size for the main heading */
}
/* Textbox styles */
input, textarea {
font-weight: bold; /* Bold text */
color: black; /* Black text color */
background-color: rgba(255, 255, 255, 0.8); /* Light background for
input */
}
</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">
<!-- Left logos -->
<div class="flex items-center">
<img src="path/to/diamante-logo.png" alt="Diamante Logo" class="logo">
<img src="path/to/actualone-logo.png" alt="ActualOne Logo"
class="logo">
</div>
<!-- Codexo logo at the top right -->
<div class="flex items-center">
<img src="path/to/codexo-logo.png" alt="Codexo Logo" class="logo">
</div>
</div>
<!-- Main Heading and Description -->
<div class="text-center">
<h1 class="text-4xl font-extrabold text-white">Diamante Blockchain</h1>
<p class="text-gray-300 mt-2">A secure platform to store and view text on
the blockchain.</p>
</div>
<!-- Login Section -->
<div id="loginSection" class="bg-gray-900 p-8 rounded-lg shadow-lg mb-10 slide-
in">
<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 hover:bg-blue-700 transition duration-
300">Login</button>
<p class="mt-4 text-gray-300 text-center">Don't have an account? <span
class="text-blue-400 cursor-pointer" onclick="showSignup()">Sign up</span></p>
</form>
</div>
<!-- Signup Section -->
<div id="signupSection" class="bg-gray-900 p-8 rounded-lg shadow-lg hidden mb-
10 slide-in">
<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 hover:bg-green-700 transition duration-
300">Sign Up</button>
<p class="mt-4 text-gray-300 text-center">Already have an account?
<span class="text-blue-400 cursor-pointer" onclick="showLogin()">Login</span></p>
</form>
</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</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 hover:bg-blue-700 transition
duration-300">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</h2>
<form id="fetchLedgerForm" class="space-y-4">
<div>
<label for="ledgerId" class="block text-sm font-medium
text-gray-300">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 hover:bg-blue-700
transition duration-300">Fetch Ledger</button>
</form>
<div id="ledgerDisplay" class="overflow-auto mt-6">
<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">Text</th>
<th class="border p-3">Timestamp</th>
</tr>
</thead>
<tbody id="ledgerTableBody"></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript Section -->
<script>
// [JavaScript for login, signup, toggleSections, storeText, fetchLedgerById]
</script>
</body>
</html>
