File size: 7,289 Bytes
e4fb67e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TradeX - Secure Automated Trading</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.gradient-bg {
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #1d4ed8 100%);
}
.input-focus:focus {
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}
.btn-hover:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.transition-all {
transition: all 0.3s ease;
}
</style>
</head>
<body class="font-sans bg-gray-50 min-h-screen flex items-center justify-center p-4">
<div class="max-w-md w-full space-y-8">
<!-- Logo and Header -->
<div class="text-center">
<div class="flex justify-center mb-4">
<div class="gradient-bg rounded-full p-3 shadow-lg">
<i class="fas fa-chart-line text-white text-3xl"></i>
</div>
</div>
<h1 class="text-3xl font-extrabold text-gray-900">TradeX</h1>
<p class="mt-2 text-gray-600">Start secure automated trading with TradeX</p>
</div>
<!-- Login Form -->
<div class="bg-white p-8 rounded-lg shadow-xl transition-all hover:shadow-2xl">
<form class="mt-8 space-y-6" id="loginForm">
<div class="rounded-md shadow-sm space-y-4">
<!-- Username Field -->
<div>
<label for="username" class="sr-only">Username</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-user text-gray-400"></i>
</div>
<input id="username" name="username" type="text" required
class="input-focus appearance-none block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
placeholder="Username">
</div>
</div>
<!-- Password Field -->
<div>
<label for="password" class="sr-only">Password</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-lock text-gray-400"></i>
</div>
<input id="password" name="password" type="password" required
class="input-focus appearance-none block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
placeholder="Password">
<div class="absolute inset-y-0 right-0 pr-3 flex items-center">
<button type="button" id="togglePassword" class="text-gray-400 hover:text-gray-500 focus:outline-none">
<i class="fas fa-eye"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Remember Me Checkbox -->
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox"
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<label for="remember-me" class="ml-2 block text-sm text-gray-700">
Remember username/password
</label>
</div>
</div>
<!-- Submit Button -->
<div>
<button type="submit"
class="btn-hover group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all">
<span class="absolute left-0 inset-y-0 flex items-center pl-3">
<i class="fas fa-sign-in-alt"></i>
</span>
Sign in
</button>
</div>
</form>
</div>
<!-- Footer -->
<div class="text-center text-sm text-gray-500 mt-6">
<p>New to TradeX? <a href="#" class="font-medium text-blue-600 hover:text-blue-500">Create an account</a></p>
<p class="mt-2">Forgot password? <a href="#" class="font-medium text-blue-600 hover:text-blue-500">Reset it</a></p>
<div class="mt-6 pt-6 border-t border-gray-200">
<p class="text-xs text-gray-400">Built with <i class="fas fa-heart text-red-400"></i> by TradeX Team</p>
</div>
</div>
</div>
<script>
// Toggle password visibility
document.getElementById('togglePassword').addEventListener('click', function() {
const passwordInput = document.getElementById('password');
const icon = this.querySelector('i');
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
icon.classList.remove('fa-eye');
icon.classList.add('fa-eye-slash');
} else {
passwordInput.type = 'password';
icon.classList.remove('fa-eye-slash');
icon.classList.add('fa-eye');
}
});
// Form submission
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
// Here you would normally handle the login logic
alert('Login functionality would be implemented here!');
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Uk/tradex" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |