Filck18/codesizer-pro
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>CodeSizer Pro | Software Estimation & Analysis</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>12 <style>13 .auth-card {14 backdrop-filter: blur(16px);15 background-color: rgba(255, 255, 255, 0.1);16 border: 1px solid rgba(255, 255, 255, 0.2);17 }18 .gradient-text {19 background: linear-gradient(90deg, #3b82f6, #8b5cf6);20 -webkit-background-clip: text;21 background-clip: text;22 color: transparent;23 }24 .input-field {25 transition: all 0.3s ease;26 }27 .input-field:focus {28 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);29 }30 </style>31</head>32<body class="bg-gray-900 text-white min-h-screen">33 <div id="vanta-bg" class="fixed inset-0 z-0"></div>34 35 <div class="relative z-10 min-h-screen flex flex-col">36 <!-- Header -->37 <header class="py-6 px-4 sm:px-6 lg:px-8">38 <div class="flex justify-between items-center">39 <div class="flex items-center space-x-2">40 <i data-feather="code" class="text-blue-400" width="28" height="28"></i>41 <h1 class="text-2xl font-bold tracking-tighter">42 <span class="gradient-text">CodeSizer Pro</span>43 </h1>44 </div>45 <nav class="hidden md:flex space-x-8">46 <a href="/features.html" class="hover:text-blue-400 transition">Features</a>47 <a href="#" class="hover:text-blue-400 transition">Pricing</a>48 <a href="#" class="hover:text-blue-400 transition">Docs</a>49 <a href="/newproject.html" class="hover:text-blue-400 transition">New Project</a>50 <a href="/projects.html" class="hover:text-blue-400 transition">Projects</a>51</nav>52 <div class="flex items-center space-x-4">53 <a href="/login.html" class="px-4 py-2 rounded-md hover:bg-gray-800 transition">Login</a>54 <a href="/register.html" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-md transition">Register</a>55 <a href="/account.html" class="px-4 py-2 rounded-md hover:bg-gray-800 transition hidden" id="account-link">Account</a>56</div>57 </div>58 </header>59 60 <!-- Main Content -->61 <main class="flex-grow flex items-center justify-center px-4">62 <div class="max-w-6xl w-full grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">63 <div class="space-y-8">64 <h1 class="text-4xl md:text-5xl font-bold leading-tight">65 Smart Software <span class="gradient-text">Size Estimation</span> 66 <br>Powered by AI67 </h1>68 <p class="text-xl text-gray-300 max-w-lg">69 Accurately predict your software project size, complexity, and development time with our advanced estimation algorithms.70 </p>71 <div class="flex space-x-4">72 <button class="px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition flex items-center">73 <i data-feather="zap" class="mr-2"></i> Try Demo74 </button>75 <button class="px-6 py-3 border border-gray-600 hover:border-blue-400 rounded-lg font-medium transition flex items-center">76 <i data-feather="book" class="mr-2"></i> Learn More77 </button>78 </div>79 </div>80<div class="flex justify-between items-center mb-6">81 <h2 id="auth-title" class="text-2xl font-bold"></h2>82 <button id="close-auth" class="text-gray-400 hover:text-white">83 <i data-feather="x"></i>84 </button>85 </div>86 <form id="auth-form" class="space-y-6">87 <div id="name-field" class="space-y-1 hidden">88 <label for="name" class="block text-sm font-medium">Full Name</label>89 <input type="text" id="name" name="name" class="input-field w-full px-4 py-3 bg-gray-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">90 </div>91 <div class="space-y-1">92 <label for="email" class="block text-sm font-medium">Email</label>93 <input type="email" id="email" name="email" class="input-field w-full px-4 py-3 bg-gray-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>94 </div>95 <div class="space-y-1">96 <label for="password" class="block text-sm font-medium">Password</label>97 <input type="password" id="password" name="password" class="input-field w-full px-4 py-3 bg-gray-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>98 </div>99 <div id="confirm-pass-field" class="space-y-1 hidden">100 <label for="confirm-password" class="block text-sm font-medium">Confirm Password</label>101 <input type="password" id="confirm-password" name="confirm-password" class="input-field w-full px-4 py-3 bg-gray-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">102 </div>103 <button type="submit" id="submit-btn" class="w-full py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition"></button>104 </form>105 <div id="auth-switch" class="mt-4 text-center text-sm text-gray-400">106 <span id="switch-text"></span> <a href="#" id="switch-link" class="text-blue-400 hover:underline"></a>107 </div>108 </div>109 </div>110 </main>111 112 <!-- Features Preview -->113 <section class="py-16 px-4 sm:px-6 lg:px-8">114 <div class="max-w-6xl mx-auto">115 <h2 class="text-3xl font-bold text-center mb-12">Powerful Estimation Features</h2>116 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">117 <div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-700 transition">118 <div class="w-12 h-12 bg-blue-900 rounded-lg flex items-center justify-center mb-4">119 <i data-feather="activity" class="text-blue-400"></i>120 </div>121 <h3 class="text-xl font-semibold mb-2">AI-Powered Analysis</h3>122 <p class="text-gray-300">Our machine learning models analyze your project requirements to predict size and complexity.</p>123 </div>124 <div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-700 transition">125 <div class="w-12 h-12 bg-purple-900 rounded-lg flex items-center justify-center mb-4">126 <i data-feather="bar-chart-2" class="text-purple-400"></i>127 </div>128 <h3 class="text-xl font-semibold mb-2">Historical Data</h3>129 <p class="text-gray-300">Compare with similar past projects to get more accurate estimates.</p>130 </div>131 <div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-700 transition">132 <div class="w-12 h-12 bg-green-900 rounded-lg flex items-center justify-center mb-4">133 <i data-feather="users" class="text-green-400"></i>134 </div>135 <h3 class="text-xl font-semibold mb-2">Team Collaboration</h3>136 <p class="text-gray-300">Invite team members to refine estimates together.</p>137 </div>138 </div>139 </div>140 </section>141 142 <!-- Footer -->143 <footer class="py-8 px-4 sm:px-6 lg:px-8 border-t border-gray-800 mt-auto">144 <div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center">145 <div class="flex items-center space-x-2 mb-4 md:mb-0">146 <i data-feather="code" class="text-blue-400"></i>147 <span class="font-medium">CodeSizer Pro</span>148 </div>149 <div class="flex space-x-6">150 <a href="#" class="text-gray-400 hover:text-white transition">151 <i data-feather="twitter"></i>152 </a>153 <a href="#" class="text-gray-400 hover:text-white transition">154 <i data-feather="github"></i>155 </a>156 <a href="#" class="text-gray-400 hover:text-white transition">157 <i data-feather="linkedin"></i>158 </a>159 </div>160 </div>161 </footer>162 </div>163 164 <script>165 // Initialize Vanta.js background166 VANTA.NET({167 el: "#vanta-bg",168 mouseControls: true,169 touchControls: true,170 gyroControls: false,171 minHeight: 200.00,172 minWidth: 200.00,173 scale: 1.00,174 scaleMobile: 1.00,175 color: 0x3b82f6,176 backgroundColor: 0x111827,177 points: 10.00,178 maxDistance: 20.00,179 spacing: 15.00180 });181// Initialize feather icons182 document.addEventListener('DOMContentLoaded', () => {183 feather.replace();184 });185 </script>186</body>187</html>188