Hugging Face's logo

Spaces:
M-Zeki
/
zionweb
Running

App Files Community
zionweb / index.html
M-Zeki's picture
M-Zeki
Add 3 files
0d60b98 verified
raw
history blame contribute delete
67.6 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Content Chain | AI-Generated Content Verification</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>
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Major+Mono+Display&display=swap');
:root {
--sidebar-width: 280px;
--header-height: 80px;
}
body {
font-family: 'Rajdhani', sans-serif;
background-color: #050510;
color: #e2e8f0;
overflow-x: hidden;
background-image:
radial-gradient(circle at 10% 20%, rgba(0, 240, 255, 0.05) 0%, transparent 20%),
radial-gradient(circle at 90% 30%, rgba(189, 0, 255, 0.05) 0%, transparent 20%),
radial-gradient(circle at 50% 80%, rgba(255, 0, 240, 0.05) 0%, transparent 20%);
}
.cyber-border {
position: relative;
border: 1px solid transparent;
background-clip: padding-box;
}
.cyber-border::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
margin: -1px;
border-radius: inherit;
background: linear-gradient(135deg, #00f0ff, #bd00ff, #ff00f0);
}
.cyber-border-blue::before {
background: linear-gradient(135deg, #00f0ff, #0066ff);
}
.cyber-border-purple::before {
background: linear-gradient(135deg, #bd00ff, #6600cc);
}
.cyber-border-pink::before {
background: linear-gradient(135deg, #ff00f0, #cc0099);
}
.cyber-border-green::before {
background: linear-gradient(135deg, #00ff7f, #00994d);
}
.hologram-bg {
background: linear-gradient(-45deg, #0a0a1a, #050510, #0a0a1a, #050510);
background-size: 400% 400%;
animation: hologram 8s ease infinite;
}
.sidebar {
width: var(--sidebar-width);
transition: all 0.3s ease;
background: rgba(5, 5, 16, 0.8);
backdrop-filter: blur(10px);
}
.main-content {
margin-left: var(--sidebar-width);
width: calc(100% - var(--sidebar-width));
}
.sidebar-item {
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.sidebar-item:hover {
background-color: rgba(0, 240, 255, 0.1);
}
.sidebar-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0;
background: linear-gradient(90deg, rgba(0, 240, 255, 0.2), transparent);
transition: width 0.3s ease;
}
.sidebar-item:hover::before {
width: 100%;
}
.sidebar-item.active {
background-color: rgba(0, 240, 255, 0.1);
border-left: 3px solid #00f0ff;
}
.sidebar-item.active::before {
display: none;
}
.crypto-card {
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
position: relative;
overflow: hidden;
background: rgba(10, 10, 26, 0.6);
backdrop-filter: blur(5px);
}
.crypto-card::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.3), transparent);
}
.crypto-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 240, 255, 0.2);
}
.progress-bar {
height: 6px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 0.05);
overflow: hidden;
}
.progress-fill {
height: 100%;
border-radius: 3px;
background: linear-gradient(90deg, #00f0ff, #bd00ff);
transition: width 0.6s ease;
}
.chart-container {
background: rgba(10, 10, 26, 0.6);
backdrop-filter: blur(5px);
border: 1px solid rgba(0, 240, 255, 0.1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.ai-suggestion-card {
background: rgba(30, 41, 59, 0.2);
border: 1px solid rgba(0, 240, 255, 0.2);
transition: all 0.3s ease;
backdrop-filter: blur(5px);
}
.ai-suggestion-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 240, 255, 0.1);
border-color: rgba(0, 240, 255, 0.4);
}
.blur-bg {
backdrop-filter: blur(12px);
background-color: rgba(2, 6, 23, 0.7);
}
.notification-badge {
position: absolute;
top: -2px;
right: -2px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #ff00f0;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: bold;
color: white;
}
.glow {
box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}
.glow:hover {
box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
}
.quick-action-btn {
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.quick-action-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: all 0.6s ease;
}
.quick-action-btn:hover::before {
left: 100%;
}
.dropdown-menu {
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.2s ease;
background: rgba(10, 10, 26, 0.9);
backdrop-filter: blur(10px);
border: 1px solid rgba(0, 240, 255, 0.2);
}
.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.theme-switch {
position: relative;
width: 44px;
height: 24px;
border-radius: 12px;
background-color: #1e293b;
cursor: pointer;
transition: all 0.3s ease;
}
.theme-switch::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #00f0ff;
transition: all 0.3s ease;
}
.theme-switch.active {
background-color: #0369a1;
}
.theme-switch.active::after {
transform: translateX(20px);
}
.floating-btn {
animation: float 6s ease-in-out infinite;
}
.neon-text {
animation: neon 1.5s ease-in-out infinite alternate;
}
.neon-text-blue {
animation: neon-blue 1.5s ease-in-out infinite alternate;
}
.neon-text-purple {
animation: neon-purple 1.5s ease-in-out infinite alternate;
}
.neon-text-pink {
animation: neon-pink 1.5s ease-in-out infinite alternate;
}
@keyframes hologram {
0% { background-position: 0% 50% }
50% { background-position: 100% 50% }
100% { background-position: 0% 50% }
}
@keyframes float {
0%, 100% { transform: translateY(0) }
50% { transform: translateY(-10px) }
}
@keyframes neon {
from {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00ff7f, 0 0 30px #00ff7f, 0 0 40px #00ff7f, 0 0 55px #00ff7f, 0 0 75px #00ff7f;
}
to {
text-shadow: 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #fff, 0 0 25px #00ff7f, 0 0 35px #00ff7f, 0 0 45px #00ff7f, 0 0 60px #00ff7f, 0 0 80px #00ff7f;
}
}
@keyframes neon-blue {
from {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00f0ff, 0 0 30px #00f0ff, 0 0 40px #00f0ff, 0 0 55px #00f0ff, 0 0 75px #00f0ff;
}
to {
text-shadow: 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #fff, 0 0 25px #00f0ff, 0 0 35px #00f0ff, 0 0 45px #00f0ff, 0 0 60px #00f0ff, 0 0 80px #00f0ff;
}
}
@keyframes neon-purple {
from {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #bd00ff, 0 0 30px #bd00ff, 0 0 40px #bd00ff, 0 0 55px #bd00ff, 0 0 75px #bd00ff;
}
to {
text-shadow: 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #fff, 0 0 25px #bd00ff, 0 0 35px #bd00ff, 0 0 45px #bd00ff, 0 0 60px #bd00ff, 0 0 80px #bd00ff;
}
}
@keyframes neon-pink {
from {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00f0, 0 0 30px #ff00f0, 0 0 40px #ff00f0, 0 0 55px #ff00f0, 0 0 75px #ff00f0;
}
to {
text-shadow: 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #fff, 0 0 25px #ff00f0, 0 0 35px #ff00f0, 0 0 45px #ff00f0, 0 0 60px #ff00f0, 0 0 80px #ff00f0;
}
}
@keyframes shimmer {
0% { background-position: -1000px 0 }
100% { background-position: 1000px 0 }
}
.shimmer {
background: linear-gradient(to right, #1e293b 8%, #334155 18%, #1e293b 33%);
background-size: 1000px 100%;
animation: shimmer 2s infinite linear;
}
.crypto-chip {
position: relative;
overflow: hidden;
}
.crypto-chip::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.1), transparent);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.crypto-chip:hover::before {
transform: translateX(100%);
}
.network-node {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #00f0ff;
box-shadow: 0 0 10px #00f0ff;
}
.network-line {
position: absolute;
background: linear-gradient(90deg, #00f0ff, transparent);
height: 1px;
transform-origin: left center;
}
.network-container {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
.content-card {
transition: all 0.3s ease;
background: rgba(10, 10, 26, 0.6);
backdrop-filter: blur(5px);
border: 1px solid rgba(0, 240, 255, 0.1);
}
.content-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 15px -3px rgba(0, 240, 255, 0.1);
border-color: rgba(0, 240, 255, 0.3);
}
.verification-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
}
.verification-badge.verified {
background-color: rgba(0, 255, 127, 0.1);
color: #00ff7f;
}
.verification-badge.pending {
background-color: rgba(255, 215, 0, 0.1);
color: #ffd700;
}
.verification-badge.failed {
background-color: rgba(255, 0, 0, 0.1);
color: #ff0000;
}
.hash-chip {
font-family: 'Major Mono Display', monospace;
background-color: rgba(0, 240, 255, 0.1);
color: #00f0ff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
word-break: break-all;
}
.model-tag {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
background-color: rgba(189, 0, 255, 0.1);
color: #bd00ff;
}
.blockchain-tag {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
background-color: rgba(0, 240, 255, 0.1);
color: #00f0ff;
}
.content-type-tag {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
background-color: rgba(255, 0, 240, 0.1);
color: #ff00f0;
}
.ai-generator-card {
transition: all 0.3s ease;
background: rgba(10, 10, 26, 0.6);
backdrop-filter: blur(5px);
border: 1px solid rgba(0, 240, 255, 0.1);
}
.ai-generator-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 15px -3px rgba(0, 240, 255, 0.1);
border-color: rgba(0, 240, 255, 0.3);
}
.prompt-input {
background-color: rgba(10, 10, 26, 0.6);
border: 1px solid rgba(0, 240, 255, 0.2);
color: white;
transition: all 0.3s ease;
}
.prompt-input:focus {
outline: none;
border-color: #00f0ff;
box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.2);
}
.generate-btn {
background: linear-gradient(135deg, #00f0ff, #bd00ff);
color: white;
transition: all 0.3s ease;
}
.generate-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 240, 255, 0.3);
}
.tx-hash-link {
color: #00f0ff;
text-decoration: none;
transition: all 0.2s ease;
}
.tx-hash-link:hover {
color: #bd00ff;
text-decoration: underline;
}
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
position: fixed;
z-index: 50;
height: 100vh;
}
.sidebar.open {
transform: translateX(0);
}
.main-content {
margin-left: 0;
width: 100%;
}
}
</style>
</head>
<body class="min-h-screen flex">
<!-- Mobile sidebar overlay -->
<div id="sidebarOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden md:hidden"></div>
<!-- Sidebar -->
<div id="sidebar" class="sidebar fixed md:relative border-r border-gray-800 flex flex-col h-full">
<div class="flex items-center h-20 px-6 border-b border-gray-800">
<div class="flex items-center">
<div class="relative">
<i class="fas fa-robot text-cyberblue text-3xl mr-2 animate-float"></i>
<span class="absolute -top-1 -right-1 w-3 h-3 bg-matrixgreen rounded-full animate-pulse"></span>
</div>
<span class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyberblue to-cyberpurple font-mono">AI CONTENT CHAIN</span>
</div>
<button id="closeSidebar" class="ml-auto md:hidden text-gray-400 hover:text-white">
<i class="fas fa-times"></i>
</button>
</div>
<div class="flex flex-col flex-grow overflow-y-auto">
<!-- Wallet Info -->
<div class="px-6 py-6">
<div class="cyber-border cyber-border-blue rounded-lg p-4 hover:shadow-lg hover:shadow-cyberblue/20 transition duration-300">
<div class="flex items-center justify-between mb-2">
<span class="text-sm text-gray-400">Blockchain Network</span>
<i class="fas fa-link text-gray-400 hover:text-cyberblue cursor-pointer"></i>
</div>
<p class="text-xl font-bold text-white mb-1">Polygon Mainnet</p>
<div class="flex items-center justify-between text-xs">
<span class="text-matrixgreen">Connected</span>
<span class="text-gray-400">0x1f...3e4d</span>
</div>
</div>
</div>
<!-- Main Navigation -->
<nav class="flex-1 px-4 space-y-1">
<a href="#" class="sidebar-item active flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300">
<i class="fas fa-home mr-3 text-cyberblue"></i>
Dashboard
</a>
<a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300">
<i class="fas fa-robot mr-3 text-cyberpurple"></i>
AI Content Generator
</a>
<a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300">
<i class="fas fa-cube mr-3 text-neonpink"></i>
Blockchain Explorer
<span class="ml-auto bg-neonpink bg-opacity-20 text-neonpink text-xs px-2 py-0.5 rounded-full">New</span>
</a>
<a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300">
<i class="fas fa-file-alt mr-3 text-matrixgreen"></i>
My Content
</a>
<a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300">
<i class="fas fa-images mr-3 text-purple-400"></i>
AI Images
</a>
<a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300">
<i class="fas fa-newspaper mr-3 text-blue-400"></i>
AI Articles
</a>
<a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300">
<i class="fas fa-shield-alt mr-3 text-amber-400"></i>
Verification
</a>
<a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300">
<i class="fas fa-chart-bar mr-3 text-green-400"></i>
Analytics
</a>
</nav>
<!-- Secondary Navigation -->
<div class="px-4 py-4 border-t border-gray-800">
<a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300">
<i class="fas fa-cog mr-3 text-gray-400"></i>
AI Settings
</a>
<a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300">
<i class="fas fa-wallet mr-3 text-gray-400"></i>
Wallet Settings
</a>
<div class="mt-4 pt-4 border-t border-gray-800">
<div class="flex items-center justify-between px-2">
<span class="text-xs text-gray-400">Dark Mode</span>
<div class="theme-switch"></div>
</div>
</div>
</div>
</div>
<!-- Connect Wallet -->
<div class="p-4 border-t border-gray-800 bg-gradient-to-r from-dark to-gray-900">
<div class="text-center">
<p class="text-xs text-cyberblue mb-1">Connect to Blockchain</p>
<button class="w-full cyber-border cyber-border-purple text-white text-sm font-bold py-2 px-4 rounded-md hover:shadow-lg hover:shadow-cyberpurple/20 transition duration-300">
<i class="fab fa-ethereum mr-2"></i> Connect Wallet
</button>
</div>
</div>
</div>
<!-- Main content -->
<div class="main-content flex-1 flex flex-col overflow-hidden">
<!-- Top navigation -->
<header class="flex items-center justify-between h-20 px-6 border-b border-gray-800 bg-darker backdrop-filter backdrop-blur-lg">
<div class="flex items-center">
<button id="toggleSidebar" class="md:hidden text-gray-400 hover:text-white mr-4">
<i class="fas fa-bars"></i>
</button>
<!-- Search Bar -->
<div class="relative hidden md:block">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-search text-gray-500"></i>
</div>
<input type="text" class="bg-dark border border-gray-800 text-white text-sm rounded-lg focus:ring-cyberblue focus:border-cyberblue block w-full pl-10 pr-4 py-2" placeholder="Search content, hashes...">
</div>
</div>
<div class="flex items-center space-x-4">
<!-- Network Status -->
<div class="hidden md:flex items-center space-x-2 px-3 py-1 rounded-full bg-dark border border-gray-800">
<div class="h-2 w-2 rounded-full bg-matrixgreen animate-pulse"></div>
<span class="text-xs font-medium text-gray-300">Polygon Mainnet</span>
</div>
<!-- Notifications -->
<div class="dropdown relative">
<button class="p-2 text-gray-400 rounded-full hover:text-white hover:bg-gray-800 relative">
<i class="fas fa-bell"></i>
<div class="notification-badge">3</div>
</button>
<div class="dropdown-menu absolute right-0 mt-2 w-72 rounded-lg shadow-lg z-50 py-1">
<div class="px-4 py-2 border-b border-gray-800">
<p class="text-sm font-medium text-white">Notifications</p>
</div>
<div class="divide-y divide-gray-800 max-h-60 overflow-y-auto">
<a href="#" class="flex px-4 py-3 hover:bg-gray-800">
<div class="flex-shrink-0">
<div class="h-8 w-8 rounded-full bg-cyberblue bg-opacity-20 flex items-center justify-center">
<i class="fas fa-check text-cyberblue"></i>
</div>
</div>
<div class="ml-3">
<p class="text-sm text-white">Content verified</p>
<p class="text-xs text-gray-400 mt-1">Your article was verified on blockchain</p>
</div>
<span class="text-xs text-gray-500 ml-auto">2m ago</span>
</a>
<a href="#" class="flex px-4 py-3 hover:bg-gray-800">
<div class="flex-shrink-0">
<div class="h-8 w-8 rounded-full bg-neonpink bg-opacity-20 flex items-center justify-center">
<i class="fas fa-image text-neonpink"></i>
</div>
</div>
<div class="ml-3">
<p class="text-sm text-white">Image generated</p>
<p class="text-xs text-gray-400 mt-1">Your AI image is ready</p>
</div>
<span class="text-xs text-gray-500 ml-auto">1h ago</span>
</a>
<a href="#" class="flex px-4 py-3 hover:bg-gray-800">
<div class="flex-shrink-0">
<div class="h-8 w-8 rounded-full bg-matrixgreen bg-opacity-20 flex items-center justify-center">
<i class="fas fa-chart-line text-matrixgreen"></i>
</div>
</div>
<div class="ml-3">
<p class="text-sm text-white">New analytics</p>
<p class="text-xs text-gray-400 mt-1">Your content performance report is ready</p>
</div>
<span class="text-xs text-gray-500 ml-auto">4h ago</span>
</a>
</div>
<div class="px-4 py-2 border-t border-gray-800">
<a href="#" class="text-xs font-medium text-cyberblue hover:text-cyberpurple">View all notifications</a>
</div>
</div>
</div>
<!-- Messages -->
<div class="dropdown relative">
<button class="p-2 text-gray-400 rounded-full hover:text-white hover:bg-gray-800 relative">
<i class="fas fa-envelope"></i>
<div class="notification-badge">1</div>
</button>
<div class="dropdown-menu absolute right-0 mt-2 w-72 rounded-lg shadow-lg z-50 py-1">
<div class="px-4 py-2 border-b border-gray-800">
<p class="text-sm font-medium text-white">Messages</p>
</div>
<div class="divide-y divide-gray-800 max-h-60 overflow-y-auto">
<a href="#" class="flex px-4 py-3 hover:bg-gray-800">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User">
<div class="ml-3">
<p class="text-sm text-white">Support Team</p>
<p class="text-xs text-gray-400 mt-1 truncate">Your verification request was approved</p>
</div>
<span class="text-xs text-gray-500 ml-auto">30m ago</span>
</a>
</div>
<div class="px-4 py-2 border-t border-gray-800">
<a href="#" class="text-xs font-medium text-cyberblue hover:text-cyberpurple">View all messages</a>
</div>
</div>
</div>
<!-- User Profile Dropdown -->
<div class="dropdown relative">
<button class="flex items-center text-sm rounded-full focus:outline-none">
<img class="h-8 w-8 rounded-full border border-cyberblue" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User profile">
</button>
<div class="dropdown-menu absolute right-0 mt-2 w-48 rounded-lg shadow-lg z-50 py-1">
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">Your Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">AI Settings</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">Security</a>
<div class="border-t border-gray-800"></div>
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">Sign out</a>
</div>
</div>
</div>
</header>
<!-- Main content area -->
<main class="flex-1 overflow-auto p-6 bg-gradient-to-b from-darkest to-darker">
<!-- Welcome Banner -->
<div class="cyber-border cyber-border-blue rounded-xl p-6 mb-6 relative overflow-hidden">
<div class="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-cyberblue bg-opacity-10"></div>
<div class="absolute -right-20 top-20 h-64 w-64 rounded-full bg-cyberpurple bg-opacity-10"></div>
<div class="relative z-10">
<h1 class="text-3xl font-bold text-white mb-2 neon-text-blue">AI Content Verification Dashboard</h1>
<p class="text-gray-400 mb-4">Generate, verify and track AI-created content on the blockchain. All your content is securely stored and timestamped.</p>
<div class="flex space-x-4">
<button class="cyber-border cyber-border-green text-white font-bold py-2 px-4 rounded-md hover:shadow-lg hover:shadow-matrixgreen/20 transition duration-300">
<i class="fas fa-robot mr-2"></i> Generate Content
</button>
<button class="cyber-border cyber-border-pink text-white font-bold py-2 px-4 rounded-md hover:shadow-lg hover:shadow-neonpink/20 transition duration-300">
<i class="fas fa-shield-alt mr-2"></i> Verify Content
</button>
</div>
</div>
</div>
<!-- Stats cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
<div class="crypto-card rounded-xl p-6 border border-gray-800 hover:border-cyberblue transition duration-200">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-400">Total Content</p>
<p class="text-2xl font-bold text-white mt-1">1,248</p>
</div>
<div class="p-3 rounded-full bg-opacity-20 bg-cyberblue glow">
<i class="fas fa-file-alt text-cyberblue"></i>
</div>
</div>
<div class="mt-4">
<div class="flex items-center justify-between text-xs text-gray-400">
<span class="text-matrixgreen">+24 this week</span>
<span>≈ 178 hashes</span>
</div>
<div class="w-full bg-gray-800 rounded-full h-1.5 mt-2">
<div class="bg-gradient-to-r from-cyberblue to-cyberpurple h-1.5 rounded-full" style="width: 65%"></div>
</div>
</div>
</div>
<div class="crypto-card rounded-xl p-6 border border-gray-800 hover:border-matrixgreen transition duration-200">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-400">Verified Content</p>
<p class="text-2xl font-bold text-white mt-1">1,024</p>
</div>
<div class="p-3 rounded-full bg-opacity-20 bg-matrixgreen glow">
<i class="fas fa-check-circle text-matrixgreen"></i>
</div>
</div>
<div class="mt-4">
<div class="flex items-center justify-between text-xs text-gray-400">
<span class="text-matrixgreen">98.3% success</span>
<span>24 pending</span>
</div>
<div class="w-full bg-gray-800 rounded-full h-1.5 mt-2">
<div class="bg-gradient-to-r from-matrixgreen to-cyberblue h-1.5 rounded-full" style="width: 98%"></div>
</div>
</div>
</div>
<div class="crypto-card rounded-xl p-6 border border-gray-800 hover:border-cyberpurple transition duration-200">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-400">AI Models Used</p>
<p class="text-2xl font-bold text-white mt-1">12</p>
</div>
<div class="p-3 rounded-full bg-opacity-20 bg-cyberpurple glow">
<i class="fas fa-brain text-cyberpurple"></i>
</div>
</div>
<div class="mt-4">
<div class="flex items-center justify-between text-xs text-gray-400">
<span class="text-matrixgreen">GPT-4 most used</span>
<span>4 image models</span>
</div>
<div class="w-full bg-gray-800 rounded-full h-1.5 mt-2">
<div class="bg-gradient-to-r from-cyberpurple to-neonpink h-1.5 rounded-full" style="width: 32%"></div>
</div>
</div>
</div>
<div class="crypto-card rounded-xl p-6 border border-gray-800 hover:border-neonpink transition duration-200">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-400">Blockchain TXs</p>
<p class="text-2xl font-bold text-white mt-1">1,156</p>
</div>
<div class="p-3 rounded-full bg-opacity-20 bg-neonpink glow">
<i class="fas fa-link text-neonpink"></i>
</div>
</div>
<div class="mt-4">
<div class="flex items-center justify-between text-xs text-gray-400">
<span class="text-matrixgreen">Last TX: 2 min ago</span>
<span>≈ 0.5 MATIC</span>
</div>
<div class="w-full bg-gray-800 rounded-full h-1.5 mt-2">
<div class="bg-gradient-to-r from-neonpink to-cyberpurple h-1.5 rounded-full" style="width: 22%"></div>
</div>
</div>
</div>
</div>
<!-- Main content grid -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Left column -->
<div class="lg:col-span-2 space-y-6">
<!-- AI Content Generator -->
<div class="ai-generator-card rounded-xl border border-gray-800 p-6">
<div class="flex items-center justify-between mb-6">
<h2 class="text-lg font-semibold text-white">AI Content Generator</h2>
<div class="flex items-center space-x-2">
<span class="model-tag text-xs">
<i class="fab fa-google mr-1"></i> Gemini Pro
</span>
<span class="model-tag text-xs">
<i class="fas fa-image mr-1"></i> DALL-E 3
</span>
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-400 mb-2">Content Prompt</label>
<textarea class="prompt-input w-full px-4 py-3 rounded-lg text-sm" rows="3" placeholder="Describe the content you want to generate..."></textarea>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<label class="block text-sm font-medium text-gray-400 mb-2">Content Type</label>
<select class="prompt-input w-full px-4 py-3 rounded-lg text-sm">
<option>News Article</option>
<option>Blog Post</option>
<option>Product Description</option>
<option>Social Media Post</option>
<option>Technical Documentation</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-400 mb-2">Tone</label>
<select class="prompt-input w-full px-4 py-3 rounded-lg text-sm">
<option>Professional</option>
<option>Casual</option>
<option>Persuasive</option>
<option>Humorous</option>
<option>Formal</option>
</select>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<input type="checkbox" id="generateImage" class="rounded bg-gray-800 border-gray-700">
<label for="generateImage" class="text-sm text-gray-300">Include AI Image</label>
</div>
<button class="generate-btn font-bold py-2 px-6 rounded-lg">
<i class="fas fa-bolt mr-2"></i> Generate
</button>
</div>
</div>
<!-- Recent Content -->
<div class="content-card rounded-xl border border-gray-800 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-800 flex items-center justify-between">
<h2 class="text-lg font-semibold text-white">Recent AI-Generated Content</h2>
<button class="text-sm font-medium text-cyberblue hover:text-cyberpurple">
<i class="fas fa-history mr-1"></i> View All
</button>
</div>
<div class="divide-y divide-gray-800">
<!-- Content 1 -->
<div class="p-6 hover:bg-gray-900 transition duration-150 cursor-pointer">
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="h-10 w-10 rounded-full bg-cyberblue bg-opacity-20 flex items-center justify-center">
<i class="fas fa-newspaper text-cyberblue"></i>
</div>
</div>
<div class="ml-4 flex-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium text-white">The Future of AI in Healthcare</h3>
<span class="verification-badge verified">
<i class="fas fa-check-circle mr-1"></i> Verified
</span>
</div>
<p class="text-xs text-gray-400 mt-1">Generated article about AI applications in medical diagnosis and treatment</p>
<div class="mt-2 flex items-center space-x-2">
<span class="content-type-tag text-xs">News Article</span>
<span class="model-tag text-xs">GPT-4</span>
<span class="blockchain-tag text-xs">
<i class="fas fa-link mr-1"></i> Polygon
</span>
</div>
<div class="mt-3">
<span class="hash-chip text-xs">
<i class="fas fa-fingerprint mr-1"></i> 0x4a1b...f2e8
</span>
</div>
</div>
</div>
</div>
<!-- Content 2 -->
<div class="p-6 hover:bg-gray-900 transition duration-150 cursor-pointer">
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="h-10 w-10 rounded-full bg-neonpink bg-opacity-20 flex items-center justify-center">
<i class="fas fa-image text-neonpink"></i>
</div>
</div>
<div class="ml-4 flex-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium text-white">Cyberpunk Cityscape</h3>
<span class="verification-badge verified">
<i class="fas fa-check-circle mr-1"></i> Verified
</span>
</div>
<p class="text-xs text-gray-400 mt-1">Futuristic city with neon lights and flying cars</p>
<div class="mt-2 flex items-center space-x-2">
<span class="content-type-tag text-xs">AI Image</span>
<span class="model-tag text-xs">DALL-E 3</span>
<span class="blockchain-tag text-xs">
<i class="fas fa-link mr-1"></i> Polygon
</span>
</div>
<div class="mt-3">
<span class="hash-chip text-xs">
<i class="fas fa-fingerprint mr-1"></i> 0x8c3d...a7f1
</span>
</div>
</div>
</div>
</div>
<!-- Content 3 -->
<div class="p-6 hover:bg-gray-900 transition duration-150 cursor-pointer">
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="h-10 w-10 rounded-full bg-matrixgreen bg-opacity-20 flex items-center justify-center">
<i class="fas fa-file-alt text-matrixgreen"></i>
</div>
</div>
<div class="ml-4 flex-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium text-white">Blockchain for Supply Chain</h3>
<span class="verification-badge pending">
<i class="fas fa-clock mr-1"></i> Pending
</span>
</div>
<p class="text-xs text-gray-400 mt-1">Whitepaper on blockchain applications in logistics</p>
<div class="mt-2 flex items-center space-x-2">
<span class="content-type-tag text-xs">Technical Doc</span>
<span class="model-tag text-xs">Claude 2</span>
<span class="blockchain-tag text-xs">
<i class="fas fa-link mr-1"></i> Polygon
</span>
</div>
<div class="mt-3">
<span class="hash-chip text-xs">
<i class="fas fa-fingerprint mr-1"></i> 0xe29f...4b6c
</span>
</div>
</div>
</div>
</div>
</div>
<div class="px-6 py-4 border-t border-gray-800">
<button class="w-full flex items-center justify-center px-4 py-2 border border-dashed border-gray-600 rounded-md text-sm font-medium text-gray-400 hover:text-white hover:border-gray-500 focus:outline-none">
<i class="fas fa-plus mr-2"></i>
Generate New Content
</button>
</div>
</div>
</div>
<!-- Right sidebar -->
<div class="space-y-6">
<!-- Blockchain Verification -->
<div class="content-card rounded-xl border border-gray-800 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-800 flex items-center justify-between">
<h2 class="text-lg font-semibold text-white">Blockchain Verification</h2>
<button class="text-sm font-medium text-cyberblue hover:text-cyberpurple">
<i class="fas fa-sync-alt mr-1"></i> Refresh
</button>
</div>
<div class="p-6">
<div class="network-container mb-4">
<!-- Network visualization will be generated by JS -->
</div>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-400 mb-2">Content Hash</label>
<div class="flex">
<input type="text" class="prompt-input flex-1 px-4 py-2 rounded-l-lg text-sm" placeholder="Enter content hash...">
<button class="generate-btn px-4 py-2 rounded-r-lg">
<i class="fas fa-search"></i>
</button>
</div>
</div>
<div class="p-4 rounded-lg bg-gray-900">
<div class="flex items-center justify-between mb-2">
<span class="text-sm font-medium text-gray-400">Verification Status</span>
<span class="verification-badge verified">
<i class="fas fa-check-circle mr-1"></i> Verified
</span>
</div>
<div class="text-xs text-gray-400 space-y-1">
<div class="flex justify-between">
<span>Content Type:</span>
<span class="text-white">News Article</span>
</div>
<div class="flex justify-between">
<span>AI Model:</span>
<span class="text-white">GPT-4</span>
</div>
<div class="flex justify-between">
<span>Created:</span>
<span class="text-white">2023-11-15 14:32 UTC</span>
</div>
<div class="flex justify-between">
<span>Blockchain:</span>
<span class="text-white">Polygon</span>
</div>
<div class="flex justify-between">
<span>TX Hash:</span>
<a href="#" class="tx-hash-link">0x4a1b...f2e8</a>
</div>
<div class="flex justify-between">
<span>Block:</span>
<span class="text-white">#42,156,789</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- AI Models -->
<div class="content-card rounded-xl border border-gray-800 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-800">
<h2 class="text-lg font-semibold text-white">Available AI Models</h2>
</div>
<div class="p-4">
<div class="space-y-3">
<!-- Model 1 -->
<div class="crypto-chip flex items-center justify-between p-3 rounded-lg hover:bg-gray-900 transition duration-200 cursor-pointer">
<div class="flex items-center">
<div class="p-2 rounded-full bg-amber-500 bg-opacity-20 mr-3">
<i class="fab fa-google text-amber-500"></i>
</div>
<div>
<p class="text-sm font-medium text-white">Gemini Pro</p>
<p class="text-xs text-gray-400">Text Generation</p>
</div>
</div>
<div class="text-right">
<span class="model-tag text-xs">Active</span>
</div>
</div>
<!-- Model 2 -->
<div class="crypto-chip flex items-center justify-between p-3 rounded-lg hover:bg-gray-900 transition duration-200 cursor-pointer">
<div class="flex items-center">
<div class="p-2 rounded-full bg-cyberpurple bg-opacity-20 mr-3">
<i class="fas fa-brain text-cyberpurple"></i>
</div>
<div>
<p class="text-sm font-medium text-white">GPT-4</p>
<p class="text-xs text-gray-400">Text Generation</p>
</div>
</div>
<div class="text-right">
<span class="model-tag text-xs">Active</span>
</div>
</div>
<!-- Model 3 -->
<div class="crypto-chip flex items-center justify-between p-3 rounded-lg hover:bg-gray-900 transition duration-200 cursor-pointer">
<div class="flex items-center">
<div class="p-2 rounded-full bg-blue-500 bg-opacity-20 mr-3">
<i class="fas fa-image text-blue-400"></i>
</div>
<div>
<p class="text-sm font-medium text-white">DALL-E 3</p>
<p class="text-xs text-gray-400">Image Generation</p>
</div>
</div>
<div class="text-right">
<span class="model-tag text-xs">Active</span>
</div>
</div>
<!-- Model 4 -->
<div class="crypto-chip flex items-center justify-between p-3 rounded-lg hover:bg-gray-900 transition duration-200 cursor-pointer">
<div class="flex items-center">
<div class="p-2 rounded-full bg-green-500 bg-opacity-20 mr-3">
<i class="fas fa-robot text-green-400"></i>
</div>
<div>
<p class="text-sm font-medium text-white">Claude 2</p>
<p class="text-xs text-gray-400">Text Generation</p>
</div>
</div>
<div class="text-right">
<span class="model-tag text-xs">Active</span>
</div>
</div>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="content-card rounded-xl border border-gray-800 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-800">
<h2 class="text-lg font-semibold text-white">Quick Actions</h2>
</div>
<div class="p-4 grid grid-cols-2 gap-4">
<button class="quick-action-btn flex flex-col items-center justify-center p-4 rounded-lg bg-opacity-20 bg-cyberblue hover:bg-opacity-30 transition duration-300">
<i class="fas fa-file-alt text-cyberblue text-xl mb-2"></i>
<span class="text-xs font-medium text-white">New Article</span>
</button>
<button class="quick-action-btn flex flex-col items-center justify-center p-4 rounded-lg bg-opacity-20 bg-cyberpurple hover:bg-opacity-30 transition duration-300">
<i class="fas fa-image text-cyberpurple text-xl mb-2"></i>
<span class="text-xs font-medium text-white">New Image</span>
</button>
<button class="quick-action-btn flex flex-col items-center justify-center p-4 rounded-lg bg-opacity-20 bg-matrixgreen hover:bg-opacity-30 transition duration-300">
<i class="fas fa-shield-alt text-matrixgreen text-xl mb-2"></i>
<span class="text-xs font-medium text-white">Verify</span>
</button>
<button class="quick-action-btn flex flex-col items-center justify-center p-4 rounded-lg bg-opacity-20 bg-neonpink hover:bg-opacity-30 transition duration-300">
<i class="fas fa-chart-bar text-neonpink text-xl mb-2"></i>
<span class="text-xs font-medium text-white">Analytics</span>
</button>
<button class="quick-action-btn flex flex-col items-center justify-center p-4 rounded-lg bg-opacity-20 bg-amber-500 hover:bg-opacity-30 transition duration-300">
<i class="fas fa-cog text-amber-400 text-xl mb-2"></i>
<span class="text-xs font-medium text-white">Settings</span>
</button>
<button class="quick-action-btn flex flex-col items-center justify-center p-4 rounded-lg bg-opacity-20 bg-gray-600 hover:bg-opacity-30 transition duration-300">
<i class="fas fa-question text-gray-300 text-xl mb-2"></i>
<span class="text-xs font-medium text-white">Help</span>
</button>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- Floating action button -->
<button class="fixed bottom-6 right-6 bg-gradient-to-br from-cyberblue to-cyberpurple text-dark text-xl rounded-full w-14 h-14 flex items-center justify-center shadow-lg hover:shadow-cyberblue/40 transition duration-200 z-30 floating-btn neon-text-blue">
<i class="fas fa-robot"></i>
</button>
<script>
// Create blockchain network visualization
const networkContainer = document.querySelector('.network-container');
const width = networkContainer.offsetWidth;
const height = networkContainer.offsetHeight;
// Create nodes
const nodes = [];
for (let i = 0; i < 15; i++) {
const node = document.createElement('div');
node.className = 'network-node';
node.style.left = Math.random() * width + 'px';
node.style.top = Math.random() * height + 'px';
node.style.opacity = Math.random() * 0.5 + 0.5;
node.style.width = node.style.height = (Math.random() * 6 + 4) + 'px';
networkContainer.appendChild(node);
nodes.push(node);
}
// Create connections
for (let i = 0; i < nodes.length; i++) {
for (let j = i + 1; j < nodes.length; j++) {
if (Math.random() > 0.7) { // 30% chance of connection
const line = document.createElement('div');
line.className = 'network-line';
const x1 = parseFloat(nodes[i].style.left) + parseFloat(nodes[i].style.width) / 2;
const y1 = parseFloat(nodes[i].style.top) + parseFloat(nodes[i].style.height) / 2;
const x2 = parseFloat(nodes[j].style.left) + parseFloat(nodes[j].style.width) / 2;
const y2 = parseFloat(nodes[j].style.top) + parseFloat(nodes[j].style.height) / 2;
const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
line.style.width = length + 'px';
line.style.left = x1 + 'px';
line.style.top = y1 + 'px';
line.style.transform = 'rotate(' + angle + 'deg)';
line.style.opacity = Math.random() * 0.3 + 0.2;
networkContainer.appendChild(line);
}
}
}
// Animate nodes
function animateNodes() {
nodes.forEach(node => {
if (Math.random() > 0.95) {
node.style.boxShadow = `0 0 ${Math.random() * 15 + 5}px #00f0ff`;
}
});
requestAnimationFrame(animateNodes);
}
animateNodes();
// Mobile sidebar toggle
const sidebar = document.getElementById('sidebar');
const sidebarOverlay = document.getElementById('sidebarOverlay');
const toggleSidebar = document.getElementById('toggleSidebar');
const closeSidebar = document.getElementById('closeSidebar');
toggleSidebar.addEventListener('click', function() {
sidebar.classList.add('open');
sidebarOverlay.classList.remove('hidden');
});
closeSidebar.addEventListener('click', function() {
sidebar.classList.remove('open');
sidebarOverlay.classList.add('hidden');
});
sidebarOverlay.addEventListener('click', function() {
sidebar.classList.remove('open');
sidebarOverlay.classList.add('hidden');
});
// Theme switcher
const themeSwitch = document.querySelector('.theme-switch');
themeSwitch.addEventListener('click', function() {
this.classList.toggle('active');
// Here you would typically add logic to switch between light/dark mode
});
// Dropdown menus
const dropdowns = document.querySelectorAll('.dropdown');
dropdowns.forEach(dropdown => {
const button = dropdown.querySelector('button');
const menu = dropdown.querySelector('.dropdown-menu');
button.addEventListener('click', function(e) {
e.stopPropagation();
menu.classList.toggle('hidden');
menu.classList.toggle('opacity-0');
menu.classList.toggle('invisible');
menu.classList.toggle('translate-y-0');
});
// Close when clicking outside
document.addEventListener('click', function(e) {
if (!dropdown.contains(e.target)) {
menu.classList.add('hidden', 'opacity-0', 'invisible');
menu.classList.remove('translate-y-0');
}
});
});
// Content card click handler
const contentCards = document.querySelectorAll('.crypto-chip, .content-card > div > div');
contentCards.forEach(card => {
card.addEventListener('click', function() {
// In a real app, this would show content details
console.log('Content clicked:', this.querySelector('p.text-white')?.textContent || 'Image content');
});
});
// Generate button click handler
const generateBtn = document.querySelector('.generate-btn');
if (generateBtn) {
generateBtn.addEventListener('click', function() {
// In a real app, this would trigger AI content generation
alert('AI content generation process started. This would call the AI API in a real application.');
});
}
// Simulate loading animation
setTimeout(() => {
document.querySelectorAll('.animate-pulse').forEach(el => {
el.classList.remove('animate-pulse');
});
}, 3000);
</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=M-Zeki/zionweb" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>