|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>CodeGuard | AI-Powered Code Review & Security Analysis</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #22272E; |
|
|
color: #ADBAC7; |
|
|
} |
|
|
.code-font { |
|
|
font-family: 'JetBrains Mono', monospace; |
|
|
} |
|
|
.sidebar { |
|
|
scrollbar-width: thin; |
|
|
scrollbar-color: #2D333B #22272E; |
|
|
} |
|
|
.sidebar::-webkit-scrollbar { |
|
|
width: 6px; |
|
|
} |
|
|
.sidebar::-webkit-scrollbar-track { |
|
|
background: #22272E; |
|
|
} |
|
|
.sidebar::-webkit-scrollbar-thumb { |
|
|
background-color: #2D333B; |
|
|
border-radius: 3px; |
|
|
} |
|
|
.code-editor { |
|
|
background-color: #1C2128; |
|
|
} |
|
|
.cm-editor { |
|
|
height: 100%; |
|
|
} |
|
|
.security-critical { |
|
|
border-left: 3px solid #CF222E; |
|
|
} |
|
|
.security-high { |
|
|
border-left: 3px solid #E16F24; |
|
|
} |
|
|
.security-medium { |
|
|
border-left: 3px solid #D4A017; |
|
|
} |
|
|
.security-low { |
|
|
border-left: 3px solid #347D39; |
|
|
} |
|
|
.tab-active { |
|
|
border-bottom: 2px solid #347D39; |
|
|
color: white; |
|
|
} |
|
|
.resizer { |
|
|
background-color: #2D333B; |
|
|
} |
|
|
.resizer:hover { |
|
|
background-color: #347D39; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="h-screen flex flex-col overflow-hidden"> |
|
|
|
|
|
<header class="bg-[#2D333B] border-b border-[#444C56] px-6 py-3 flex items-center justify-between"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="flex items-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-[#347D39]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path> |
|
|
</svg> |
|
|
<span class="ml-2 text-xl font-bold">CodeGuard</span> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-6"> |
|
|
<a href="#" class="hover:text-white">Dashboard</a> |
|
|
<a href="#" class="hover:text-white">Code Review</a> |
|
|
<a href="#" class="hover:text-white">Security Scan</a> |
|
|
<a href="#" class="hover:text-white">Reports</a> |
|
|
<a href="#" class="hover:text-white">Settings</a> |
|
|
</nav> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="bg-[#347D39] hover:bg-[#46954A] text-white px-4 py-1.5 rounded-md text-sm font-medium"> |
|
|
New Scan |
|
|
</button> |
|
|
<div class="relative"> |
|
|
<div class="h-8 w-8 rounded-full bg-[#444C56] flex items-center justify-center cursor-pointer"> |
|
|
<span class="text-sm">JS</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="flex flex-1 overflow-hidden"> |
|
|
|
|
|
<div class="sidebar w-64 bg-[#2D333B] border-r border-[#444C56] overflow-y-auto flex flex-col"> |
|
|
<div class="p-4 border-b border-[#444C56]"> |
|
|
<h2 class="font-semibold text-lg mb-2">Recent Projects</h2> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex items-center p-2 rounded hover:bg-[#373E47] cursor-pointer"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#ADBAC7]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 2h5a2 2 0 0 1 2 2z"></path> |
|
|
</svg> |
|
|
<span class="ml-2">web-app-frontend</span> |
|
|
</div> |
|
|
<div class="flex items-center p-2 rounded hover:bg-[#373E47] cursor-pointer"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#ADBAC7]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 2h5a2 2 0 0 1 2 2z"></path> |
|
|
</svg> |
|
|
<span class="ml-2">api-service</span> |
|
|
</div> |
|
|
<div class="flex items-center p-2 rounded hover:bg-[#373E47] cursor-pointer"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#ADBAC7]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 2h5a2 2 0 0 1 2 2z"></path> |
|
|
</svg> |
|
|
<span class="ml-2">mobile-app</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 border-b border-[#444C56]"> |
|
|
<h2 class="font-semibold text-lg mb-2">Security Scans</h2> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex items-center p-2 rounded hover:bg-[#373E47] cursor-pointer"> |
|
|
<div class="h-2 w-2 rounded-full bg-[#347D39]"></div> |
|
|
<span class="ml-2 text-sm">Completed 2 min ago</span> |
|
|
</div> |
|
|
<div class="flex items-center p-2 rounded hover:bg-[#373E47] cursor-pointer"> |
|
|
<div class="h-2 w-2 rounded-full bg-[#E16F24]"></div> |
|
|
<span class="ml-2 text-sm">Running (45%)</span> |
|
|
</div> |
|
|
<div class="flex items-center p-2 rounded hover:bg-[#373E47] cursor-pointer"> |
|
|
<div class="h-2 w-2 rounded-full bg-[#CF222E]"></div> |
|
|
<span class="ml-2 text-sm">Failed</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h2 class="font-semibold text-lg mb-2">Quick Actions</h2> |
|
|
<div class="space-y-2"> |
|
|
<button class="w-full flex items-center p-2 rounded hover:bg-[#373E47] cursor-pointer text-left"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#ADBAC7]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> |
|
|
<polyline points="14 2 14 8 20 8"></polyline> |
|
|
<line x1="16" y1="13" x2="8" y2="13"></line> |
|
|
<line x1="16" y1="17" x2="8" y2="17"></line> |
|
|
<polyline points="10 9 9 9 8 9"></polyline> |
|
|
</svg> |
|
|
<span class="ml-2">New Code Review</span> |
|
|
</button> |
|
|
<button class="w-full flex items-center p-2 rounded hover:bg-[#373E47] cursor-pointer text-left"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#ADBAC7]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<circle cx="12" cy="12" r="10"></circle> |
|
|
<line x1="12" y1="8" x2="12" y2="12"></line> |
|
|
<line x1="12" y1="16" x2="12.01" y2="16"></line> |
|
|
</svg> |
|
|
<span class="ml-2">Vulnerability Scan</span> |
|
|
</button> |
|
|
<button class="w-full flex items-center p-2 rounded hover:bg-[#373E47] cursor-pointer text-left"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#ADBAC7]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<path d="M12 20h9"></path> |
|
|
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path> |
|
|
</svg> |
|
|
<span class="ml-2">Penetration Test</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden"> |
|
|
|
|
|
<div class="border-b border-[#444C56] flex"> |
|
|
<div class="px-4 py-3 font-medium tab-active">Code Review</div> |
|
|
<div class="px-4 py-3 font-medium text-[#768390] hover:text-white cursor-pointer">Security Analysis</div> |
|
|
<div class="px-4 py-3 font-medium text-[#768390] hover:text-white cursor-pointer">Red Team Tools</div> |
|
|
<div class="px-4 py-3 font-medium text-[#768390] hover:text-white cursor-pointer">Blue Team Tools</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex overflow-hidden"> |
|
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden border-r border-[#444C56]"> |
|
|
<div class="p-3 border-b border-[#444C56] flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-sm font-medium">app/components/AuthForm.js</span> |
|
|
<span class="ml-2 text-xs px-2 py-0.5 bg-[#444C56] rounded">JavaScript</span> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="p-1 rounded hover:bg-[#373E47]"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path> |
|
|
</svg> |
|
|
</button> |
|
|
<button class="p-1 rounded hover:bg-[#373E47]"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path> |
|
|
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path> |
|
|
</svg> |
|
|
</button> |
|
|
<button class="p-1 rounded hover:bg-[#373E47]"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<circle cx="12" cy="12" r="1"></circle> |
|
|
<circle cx="12" cy="5" r="1"></circle> |
|
|
<circle cx="12" cy="19" r="1"></circle> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="code-editor flex-1 overflow-auto p-4 code-font"> |
|
|
<div class="relative"> |
|
|
<div class="absolute left-0 top-0 w-8 text-right pr-2 text-[#768390] select-none"> |
|
|
<div>1</div> |
|
|
<div>2</div> |
|
|
<div>3</div> |
|
|
<div>4</div> |
|
|
<div>5</div> |
|
|
<div>6</div> |
|
|
<div>7</div> |
|
|
<div>8</div> |
|
|
<div>9</div> |
|
|
<div>10</div> |
|
|
<div>11</div> |
|
|
<div>12</div> |
|
|
<div>13</div> |
|
|
<div>14</div> |
|
|
<div>15</div> |
|
|
<div>16</div> |
|
|
<div>17</div> |
|
|
<div>18</div> |
|
|
<div>19</div> |
|
|
<div>20</div> |
|
|
</div> |
|
|
<div class="ml-10"> |
|
|
<div><span class="text-[#6CB6FF]">import</span> React <span class="text-[#6CB6FF]">from</span> <span class="text-[#96D0FF]">'react'</span>;</div> |
|
|
<div><span class="text-[#6CB6FF]">import</span> { useState } <span class="text-[#6CB6FF]">from</span> <span class="text-[#96D0FF]">'react'</span>;</div> |
|
|
<div><span class="text-[#6CB6FF]">import</span> axios <span class="text-[#6CB6FF]">from</span> <span class="text-[#96D0FF]">'axios'</span>;</div> |
|
|
<div><br></div> |
|
|
<div><span class="text-[#6CB6FF]">const</span> <span class="text-[#DCBDFB]">AuthForm</span> = () <span class="text-[#6CB6FF]">=></span> {</div> |
|
|
<div> <span class="text-[#6CB6FF]">const</span> [email, setEmail] = <span class="text-[#DCBDFB]">useState</span>(<span class="text-[#96D0FF]">''</span>);</div> |
|
|
<div> <span class="text-[#6CB6FF]">const</span> [password, setPassword] = <span class="text-[#DCBDFB]">useState</span>(<span class="text-[#96D0FF]">''</span>);</div> |
|
|
<div><br></div> |
|
|
<div> <span class="text-[#6CB6FF]">const</span> <span class="text-[#DCBDFB]">handleSubmit</span> = <span class="text-[#6CB6FF]">async</span> (e) <span class="text-[#6CB6FF]">=></span> {</div> |
|
|
<div> e.<span class="text-[#DCBDFB]">preventDefault</span>();</div> |
|
|
<div> <span class="text-[#6CB6FF]">try</span> {</div> |
|
|
<div> <span class="text-[#6CB6FF]">const</span> response = <span class="text-[#6CB6FF]">await</span> axios.<span class="text-[#DCBDFB]">post</span>(<span class="text-[#96D0FF]">'/api/auth'</span>, { email, password });</div> |
|
|
<div> console.<span class="text-[#DCBDFB]">log</span>(response.<span class="text-[#DCBDFB]">data</span>);</div> |
|
|
<div> } <span class="text-[#6CB6FF]">catch</span> (error) {</div> |
|
|
<div> console.<span class="text-[#DCBDFB]">error</span>(error.<span class="text-[#DCBDFB]">response</span>.<span class="text-[#DCBDFB]">data</span>);</div> |
|
|
<div> }</div> |
|
|
<div> };</div> |
|
|
<div><br></div> |
|
|
<div> <span class="text-[#6CB6FF]">return</span> (</div> |
|
|
<div> <form onSubmit={<span class="text-[#DCBDFB]">handleSubmit</span>}></div> |
|
|
<div> <input type=<span class="text-[#96D0FF]">"email"</span> value={<span class="text-[#DCBDFB]">email</span>} onChange={(e) <span class="text-[#6CB6FF]">=></span> <span class="text-[#DCBDFB]">setEmail</span>(e.<span class="text-[#DCBDFB]">target</span>.<span class="text-[#DCBDFB]">value</span>)} /></div> |
|
|
<div> <input type=<span class="text-[#96D0FF]">"password"</span> value={<span class="text-[#DCBDFB]">password</span>} onChange={(e) <span class="text-[#6CB6FF]">=></span> <span class="text-[#DCBDFB]">setPassword</span>(e.<span class="text-[#DCBDFB]">target</span>.<span class="text-[#DCBDFB]">value</span>)} /></div> |
|
|
<div> <button type=<span class="text-[#96D0FF]">"submit"</span>>Login</button></div> |
|
|
<div> </form></div> |
|
|
<div> );</div> |
|
|
<div>};</div> |
|
|
<div><br></div> |
|
|
<div><span class="text-[#6CB6FF]">export</span> <span class="text-[#6CB6FF]">default</span> <span class="text-[#DCBDFB]">AuthForm</span>;</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-96 flex flex-col border-l border-[#444C56]"> |
|
|
<div class="p-3 border-b border-[#444C56] flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-sm font-medium">Analysis Results</span> |
|
|
<span class="ml-2 text-xs px-2 py-0.5 bg-[#444C56] rounded">3 issues</span> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="p-1 rounded hover:bg-[#373E47]"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<polyline points="3 6 5 6 21 6"></polyline> |
|
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path> |
|
|
</svg> |
|
|
</button> |
|
|
<button class="p-1 rounded hover:bg-[#373E47]"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<circle cx="12" cy="12" r="1"></circle> |
|
|
<circle cx="12" cy="5" r="1"></circle> |
|
|
<circle cx="12" cy="19" r="1"></circle> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-1 overflow-auto p-4"> |
|
|
<div class="space-y-4"> |
|
|
|
|
|
<div class="security-critical p-3 rounded bg-[#2D333B]"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#CF222E]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<circle cx="12" cy="12" r="10"></circle> |
|
|
<line x1="12" y1="8" x2="12" y2="12"></line> |
|
|
<line x1="12" y1="16" x2="12.01" y2="16"></line> |
|
|
</svg> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h3 class="text-sm font-medium">Sensitive Data Exposure</h3> |
|
|
<div class="mt-1 text-sm"> |
|
|
<p>Passwords are being transmitted in plaintext. Use HTTPS and implement proper password hashing.</p> |
|
|
</div> |
|
|
<div class="mt-2 flex items-center text-xs text-[#768390]"> |
|
|
<span>Line 9</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>Critical</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="security-high p-3 rounded bg-[#2D333B]"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#E16F24]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<circle cx="12" cy="12" r="10"></circle> |
|
|
<line x1="12" y1="8" x2="12" y2="12"></line> |
|
|
<line x1="12" y1="16" x2="12.01" y2="16"></line> |
|
|
</svg> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h3 class="text-sm font-medium">Insecure Direct Object Reference</h3> |
|
|
<div class="mt-1 text-sm"> |
|
|
<p>The authentication endpoint doesn't implement rate limiting, making it vulnerable to brute force attacks.</p> |
|
|
</div> |
|
|
<div class="mt-2 flex items-center text-xs text-[#768390]"> |
|
|
<span>Line 9</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>High</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="security-medium p-3 rounded bg-[#2D333B]"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#D4A017]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<circle cx="12" cy="12" r="10"></circle> |
|
|
<line x1="12" y1="8" x2="12" y2="12"></line> |
|
|
<line x1="12" y1="16" x2="12.01" y2="16"></line> |
|
|
</svg> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h3 class="text-sm font-medium">Debug Information Exposure</h3> |
|
|
<div class="mt-1 text-sm"> |
|
|
<p>Console logging of sensitive information in production code. Remove or implement proper logging.</p> |
|
|
</div> |
|
|
<div class="mt-2 flex items-center text-xs text-[#768390]"> |
|
|
<span>Lines 10, 12</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>Medium</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<h3 class="text-sm font-medium mb-2">Suggested Fixes</h3> |
|
|
<div class="bg-[#1C2128] p-3 rounded code-font text-sm"> |
|
|
<div>1. Implement HTTPS for all authentication requests</div> |
|
|
<div>2. Use bcrypt or Argon2 for password hashing</div> |
|
|
<div>3. Add rate limiting to the auth endpoint</div> |
|
|
<div>4. Remove console.log statements in production</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<button class="w-full bg-[#347D39] hover:bg-[#46954A] text-white px-4 py-2 rounded-md text-sm font-medium"> |
|
|
Apply Auto-Fixes |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const tabs = document.querySelectorAll('.flex.border-b div[class*="px-4"]'); |
|
|
tabs.forEach(tab => { |
|
|
tab.addEventListener('click', function() { |
|
|
tabs.forEach(t => t.classList.remove('tab-active', 'text-white')); |
|
|
tabs.forEach(t => t.classList.add('text-[#768390]')); |
|
|
this.classList.add('tab-active', 'text-white'); |
|
|
this.classList.remove('text-[#768390]'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const analysisPanel = document.querySelector('.w-96'); |
|
|
if (analysisPanel) { |
|
|
const loadingIndicator = document.createElement('div'); |
|
|
loadingIndicator.className = 'absolute inset-0 flex items-center justify-center bg-[#22272E] bg-opacity-80'; |
|
|
loadingIndicator.innerHTML = ` |
|
|
<div class="flex flex-col items-center"> |
|
|
<svg class="animate-spin h-8 w-8 text-[#347D39]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> |
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> |
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> |
|
|
</svg> |
|
|
<span class="mt-2 text-sm">Analyzing code...</span> |
|
|
</div> |
|
|
`; |
|
|
analysisPanel.appendChild(loadingIndicator); |
|
|
|
|
|
setTimeout(() => { |
|
|
loadingIndicator.remove(); |
|
|
}, 1500); |
|
|
} |
|
|
}, 500); |
|
|
}); |
|
|
</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=S-Dreamer/codeguard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
