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>Choose Estimation Method | CodeSizer Pro</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 <style>11 .gradient-text {12 background: linear-gradient(90deg, #3b82f6, #8b5cf6);13 -webkit-background-clip: text;14 background-clip: text;15 color: transparent;16 }17 .method-card {18 transition: transform 0.3s ease, box-shadow 0.3s ease;19 }20 .method-card:hover {21 transform: translateY(-5px);22 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);23 }24 </style>25</head>26<body class="bg-gray-900 text-white min-h-screen">27 <div class="relative z-10 min-h-screen flex flex-col">28 <!-- Header -->29 <header class="py-6 px-4 sm:px-6 lg:px-8">30 <div class="flex justify-between items-center">31 <div class="flex items-center space-x-2">32 <i data-feather="code" class="text-blue-400" width="28" height="28"></i>33 <h1 class="text-2xl font-bold tracking-tighter">34 <a href="/" class="gradient-text">CodeSizer Pro</a>35 </h1>36 </div>37 <nav class="hidden md:flex space-x-8">38 <a href="/features.html" class="hover:text-blue-400 transition">Features</a>39 <a href="#" class="hover:text-blue-400 transition">Pricing</a>40 <a href="#" class="hover:text-blue-400 transition">Docs</a>41 <a href="/newproject.html" class="hover:text-blue-400 transition">New Project</a>42 </nav>43 <div class="flex items-center space-x-4">44 <a href="/login.html" class="px-4 py-2 rounded-md hover:bg-gray-800 transition">Login</a>45 <a href="/register.html" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-md transition">Register</a>46 </div>47 </div>48 </header>49 50 <!-- Main Content -->51 <main class="flex-grow py-12 px-4 sm:px-6 lg:px-8">52 <div class="max-w-6xl mx-auto">53 <div class="text-center mb-12">54 <h1 class="text-3xl md:text-4xl font-bold mb-2">Choose Estimation Method for</h1>55 <h2 class="text-2xl md:text-3xl font-bold mb-4 gradient-text" id="project-name">New Project</h2>56 <p class="text-lg text-gray-300 max-w-2xl mx-auto">57 Select the estimation technique that best fits your project needs58 </p>59 </div>60 61 <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">62 <!-- Use Case Points Card -->63 <a href="/usecasepoints.html" class="bg-gray-800 rounded-xl p-6 method-card block">64<div class="flex items-center mb-4">65 <div class="w-12 h-12 bg-blue-900 rounded-lg flex items-center justify-center mr-4">66 <i data-feather="cpu" class="text-blue-400"></i>67 </div>68 <h2 class="text-2xl font-bold">Use Case Points</h2>69 </div>70 <p class="text-gray-300 mb-4">71 Best for projects with well-defined use cases and user interactions.72 </p>73 <button class="w-full py-2 bg-blue-600 hover:bg-blue-700 rounded-md font-medium transition">74 Select Method75 </button>76 </a>77 78 <!-- Functional Points Card -->79 <a href="#" class="bg-gray-800 rounded-xl p-6 method-card block">80 <div class="flex items-center mb-4">81 <div class="w-12 h-12 bg-purple-900 rounded-lg flex items-center justify-center mr-4">82 <i data-feather="layers" class="text-purple-400"></i>83 </div>84 <h2 class="text-2xl font-bold">Functional Points</h2>85 </div>86 <p class="text-gray-300 mb-4">87 Ideal for measuring functionality from the user perspective.88 </p>89 <button class="w-full py-2 bg-purple-600 hover:bg-purple-700 rounded-md font-medium transition">90 Select Method91 </button>92 </a>93 94 <!-- COCOMO Card -->95 <a href="#" class="bg-gray-800 rounded-xl p-6 method-card block">96 <div class="flex items-center mb-4">97 <div class="w-12 h-12 bg-green-900 rounded-lg flex items-center justify-center mr-4">98 <i data-feather="box" class="text-green-400"></i>99 </div>100 <h2 class="text-2xl font-bold">COCOMO II</h2>101 </div>102 <p class="text-gray-300 mb-4">103 Perfect for estimating effort, cost and schedule based on project size.104 </p>105 <button class="w-full py-2 bg-green-600 hover:bg-green-700 rounded-md font-medium transition">106 Select Method107 </button>108 </a>109 </div>110 </div>111 </main>112 113 <!-- Footer -->114 <footer class="py-8 px-4 sm:px-6 lg:px-8 border-t border-gray-800 mt-auto">115 <div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center">116 <div class="flex items-center space-x-2 mb-4 md:mb-0">117 <i data-feather="code" class="text-blue-400"></i>118 <span class="font-medium">CodeSizer Pro</span>119 </div>120 <div class="flex space-x-6">121 <a href="#" class="text-gray-400 hover:text-white transition">122 <i data-feather="twitter"></i>123 </a>124 <a href="#" class="text-gray-400 hover:text-white transition">125 <i data-feather="github"></i>126 </a>127 <a href="#" class="text-gray-400 hover:text-white transition">128 <i data-feather="linkedin"></i>129 </a>130 </div>131 </div>132 </footer>133 </div>134 135 <script>136 document.addEventListener('DOMContentLoaded', () => {137 feather.replace();138 139 // Get project name from URL or local storage140 const urlParams = new URLSearchParams(window.location.search);141 const projectName = urlParams.get('name') || 'New Project';142 document.getElementById('project-name').textContent = projectName;143 });144 </script>145</body>146</html>