|
|
<!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"> |
|
|
|
|
|
<div id="sidebarOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden md:hidden"></div> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="main-content flex-1 flex flex-col overflow-hidden"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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 class="flex-1 overflow-auto p-6 bg-gradient-to-b from-darkest to-darker"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="lg:col-span-2 space-y-6"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<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"> |
|
|
|
|
|
</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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
const networkContainer = document.querySelector('.network-container'); |
|
|
const width = networkContainer.offsetWidth; |
|
|
const height = networkContainer.offsetHeight; |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
|
|
|
|
|
|
for (let i = 0; i < nodes.length; i++) { |
|
|
for (let j = i + 1; j < nodes.length; j++) { |
|
|
if (Math.random() > 0.7) { |
|
|
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); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function animateNodes() { |
|
|
nodes.forEach(node => { |
|
|
if (Math.random() > 0.95) { |
|
|
node.style.boxShadow = `0 0 ${Math.random() * 15 + 5}px #00f0ff`; |
|
|
} |
|
|
}); |
|
|
requestAnimationFrame(animateNodes); |
|
|
} |
|
|
animateNodes(); |
|
|
|
|
|
|
|
|
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'); |
|
|
}); |
|
|
|
|
|
|
|
|
const themeSwitch = document.querySelector('.theme-switch'); |
|
|
themeSwitch.addEventListener('click', function() { |
|
|
this.classList.toggle('active'); |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
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'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', function(e) { |
|
|
if (!dropdown.contains(e.target)) { |
|
|
menu.classList.add('hidden', 'opacity-0', 'invisible'); |
|
|
menu.classList.remove('translate-y-0'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const contentCards = document.querySelectorAll('.crypto-chip, .content-card > div > div'); |
|
|
contentCards.forEach(card => { |
|
|
card.addEventListener('click', function() { |
|
|
|
|
|
console.log('Content clicked:', this.querySelector('p.text-white')?.textContent || 'Image content'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const generateBtn = document.querySelector('.generate-btn'); |
|
|
if (generateBtn) { |
|
|
generateBtn.addEventListener('click', function() { |
|
|
|
|
|
alert('AI content generation process started. This would call the AI API in a real application.'); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
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> |
