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>COCOMO II Calculator | 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 fieldset {18 border: 1px solid #4b5563;19 border-radius: 0.5rem;20 padding: 1rem;21 margin-bottom: 1.5rem;22 }23 legend {24 padding: 0 0.5rem;25 font-weight: 600;26 color: #3b82f6;27 }28 </style>29</head>30<body class="bg-gray-900 text-white min-h-screen">31 <div class="relative z-10 min-h-screen flex flex-col">32 <!-- Header -->33 <header class="py-6 px-4 sm:px-6 lg:px-8">34 <div class="flex justify-between items-center">35 <div class="flex items-center space-x-2">36 <i data-feather="code" class="text-blue-400" width="28" height="28"></i>37 <h1 class="text-2xl font-bold tracking-tighter">38 <a href="/" class="gradient-text">CodeSizer Pro</a>39 </h1>40 </div>41 <nav class="hidden md:flex space-x-8">42 <a href="/features.html" class="hover:text-blue-400 transition">Features</a>43 <a href="#" class="hover:text-blue-400 transition">Pricing</a>44 <a href="#" class="hover:text-blue-400 transition">Docs</a>45 <a href="/projects.html" class="hover:text-blue-400 transition">Projects</a>46 </nav>47 <div class="flex items-center space-x-4">48 <a href="/login.html" class="px-4 py-2 rounded-md hover:bg-gray-800 transition">Login</a>49 <a href="/register.html" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-md transition">Register</a>50 </div>51 </div>52 </header>53 54 <!-- Main Content -->55 <main class="flex-grow py-8 px-4 sm:px-6 lg:px-8">56 <div class="max-w-4xl mx-auto">57 <div class="text-center mb-8">58 <h1 class="text-3xl md:text-4xl font-bold mb-2">COCOMO II Calculator</h1>59 <h2 class="text-xl md:text-2xl font-bold mb-4 gradient-text" id="project-name">Post-Architecture Model</h2>60 </div>61 62 <form id="cocomo-form">63 <!-- Basic Inputs Section -->64 <section class="bg-gray-800 rounded-xl p-6 mb-8">65 <h2 class="text-2xl font-bold mb-4 flex items-center">66 <i data-feather="info" class="mr-2 text-blue-400"></i>67 Basic Inputs68 </h2>69 70 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">71 <div>72 <label for="size-kloc" class="block text-sm font-medium mb-1">Project Size (KLOC)</label>73 <input type="number" id="size-kloc" name="size-kloc" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>74 </div>75 76 <div>77 <label for="function-points" class="block text-sm font-medium mb-1">Function Points (optional)</label>78 <input type="number" id="function-points" name="function-points" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">79 </div>80 81 <div class="md:col-span-2">82 <label for="model-type" class="block text-sm font-medium mb-1">Model Type</label>83 <select id="model-type" name="model-type" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>84 <option value="application">Application Composition</option>85 <option value="early">Early Design</option>86 <option value="post" selected>Post-Architecture</option>87 </select>88 </div>89 </div>90 </section>91 92 <!-- Scale Drivers Section -->93 <section class="bg-gray-800 rounded-xl p-6 mb-8">94 <h2 class="text-2xl font-bold mb-4 flex items-center">95 <i data-feather="layers" class="mr-2 text-purple-400"></i>96 Scale Drivers97 </h2>98 99 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">100 <div>101 <label for="prec" class="block text-sm font-medium mb-1">PREC - Precedentedness</label>102 <select id="prec" name="prec" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>103 <option value="very_low">Very Low</option>104 <option value="low">Low</option>105 <option value="nominal" selected>Nominal</option>106 <option value="high">High</option>107 <option value="very_high">Very High</option>108 <option value="extra_high">Extra High</option>109 </select>110 </div>111 112 <div>113 <label for="flex" class="block text-sm font-medium mb-1">FLEX - Development Flexibility</label>114 <select id="flex" name="flex" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>115 <option value="very_low">Very Low</option>116 <option value="low">Low</option>117 <option value="nominal" selected>Nominal</option>118 <option value="high">High</option>119 <option value="very_high">Very High</option>120 <option value="extra_high">Extra High</option>121 </select>122 </div>123 124 <div>125 <label for="resl" class="block text-sm font-medium mb-1">RESL - Architecture/Risk Resolution</label>126 <select id="resl" name="resl" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>127 <option value="very_low">Very Low</option>128 <option value="low">Low</option>129 <option value="nominal" selected>Nominal</option>130 <option value="high">High</option>131 <option value="very_high">Very High</option>132 <option value="extra_high">Extra High</option>133 </select>134 </div>135 136 <div>137 <label for="team" class="block text-sm font-medium mb-1">TEAM - Team Cohesion</label>138 <select id="team" name="team" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>139 <option value="very_low">Very Low</option>140 <option value="low">Low</option>141 <option value="nominal" selected>Nominal</option>142 <option value="high">High</option>143 <option value="very_high">Very High</option>144 <option value="extra_high">Extra High</option>145 </select>146 </div>147 148 <div>149 <label for="pmat" class="block text-sm font-medium mb-1">PMAT - Process Maturity</label>150 <select id="pmat" name="pmat" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>151 <option value="very_low">Very Low</option>152 <option value="low">Low</option>153 <option value="nominal" selected>Nominal</option>154 <option value="high">High</option>155 <option value="very_high">Very High</option>156 <option value="extra_high">Extra High</option>157 </select>158 </div>159 </div>160 </section>161 162 <!-- Cost Drivers Section -->163 <section class="bg-gray-800 rounded-xl p-6 mb-8">164 <h2 class="text-2xl font-bold mb-4 flex items-center">165 <i data-feather="cpu" class="mr-2 text-green-400"></i>166 Cost Drivers167 </h2>168 169 <!-- Product Factors -->170 <fieldset>171 <legend>PRODUCT Factors</legend>172 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">173 <div>174 <label for="rely" class="block text-sm font-medium mb-1">RELY - Required Reliability</label>175 <select id="rely" name="rely" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>176 <option value="very_low">Very Low</option>177 <option value="low">Low</option>178 <option value="nominal" selected>Nominal</option>179 <option value="high">High</option>180 <option value="very_high">Very High</option>181 <option value="extra_high">Extra High</option>182 </select>183 </div>184 185 <div>186 <label for="data" class="block text-sm font-medium mb-1">DATA - Database Size</label>187 <select id="data" name="data" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>188 <option value="very_low">Very Low</option>189 <option value="low">Low</option>190 <option value="nominal" selected>Nominal</option>191 <option value="high">High</option>192 <option value="very_high">Very High</option>193 <option value="extra_high">Extra High</option>194 </select>195 </div>196 197 <div>198 <label for="cplx" class="block text-sm font-medium mb-1">CPLX - Product Complexity</label>199 <select id="cplx" name="cplx" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>200 <option value="very_low">Very Low</option>201 <option value="low">Low</option>202 <option value="nominal" selected>Nominal</option>203 <option value="high">High</option>204 <option value="very_high">Very High</option>205 <option value="extra_high">Extra High</option>206 </select>207 </div>208 209 <div>210 <label for="ruse" class="block text-sm font-medium mb-1">RUSE - Required Reusability</label>211 <select id="ruse" name="ruse" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>212 <option value="very_low">Very Low</option>213 <option value="low">Low</option>214 <option value="nominal" selected>Nominal</option>215 <option value="high">High</option>216 <option value="very_high">Very High</option>217 <option value="extra_high">Extra High</option>218 </select>219 </div>220 221 <div>222 <label for="docu" class="block text-sm font-medium mb-1">DOCU - Documentation Match</label>223 <select id="docu" name="docu" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>224 <option value="very_low">Very Low</option>225 <option value="low">Low</option>226 <option value="nominal" selected>Nominal</option>227 <option value="high">High</option>228 <option value="very_high">Very High</option>229 <option value="extra_high">Extra High</option>230 </select>231 </div>232 </div>233 </fieldset>234 235 <!-- Platform Factors -->236 <fieldset>237 <legend>PLATFORM Factors</legend>238 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">239 <div>240 <label for="time" class="block text-sm font-medium mb-1">TIME - Execution Time Constraint</label>241 <select id="time" name="time" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>242 <option value="very_low">Very Low</option>243 <option value="low">Low</option>244 <option value="nominal" selected>Nominal</option>245 <option value="high">High</option>246 <option value="very_high">Very High</option>247 <option value="extra_high">Extra High</option>248 </select>249 </div>250 251 <div>252 <label for="stor" class="block text-sm font-medium mb-1">STOR - Main Storage Constraint</label>253 <select id="stor" name="stor" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>254 <option value="very_low">Very Low</option>255 <option value="low">Low</option>256 <option value="nominal" selected>Nominal</option>257 <option value="high">High</option>258 <option value="very_high">Very High</option>259 <option value="extra_high">Extra High</option>260 </select>261 </div>262 263 <div>264 <label for="pvol" class="block text-sm font-medium mb-1">PVOL - Platform Volatility</label>265 <select id="pvol" name="pvol" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>266 <option value="very_low">Very Low</option>267 <option value="low">Low</option>268 <option value="nominal" selected>Nominal</option>269 <option value="high">High</option>270 <option value="very_high">Very High</option>271 <option value="extra_high">Extra High</option>272 </select>273 </div>274 </div>275 </fieldset>276 277 <!-- Personnel Factors -->278 <fieldset>279 <legend>PERSONNEL Factors</legend>280 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">281 <div>282 <label for="acap" class="block text-sm font-medium mb-1">ACAP - Analyst Capability</label>283 <select id="acap" name="acap" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>284 <option value="very_low">Very Low</option>285 <option value="low">Low</option>286 <option value="nominal" selected>Nominal</option>287 <option value="high">High</option>288 <option value="very_high">Very High</option>289 <option value="extra_high">Extra High</option>290 </select>291 </div>292 293 <div>294 <label for="pcap" class="block text-sm font-medium mb-1">PCAP - Programmer Capability</label>295 <select id="pcap" name="pcap" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>296 <option value="very_low">Very Low</option>297 <option value="low">Low</option>298 <option value="nominal" selected>Nominal</option>299 <option value="high">High</option>300 <option value="very_high">Very High</option>301 <option value="extra_high">Extra High</option>302 </select>303 </div>304 305 <div>306 <label for="pcon" class="block text-sm font-medium mb-1">PCON - Personnel Continuity</label>307 <select id="pcon" name="pcon" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>308 <option value="very_low">Very Low</option>309 <option value="low">Low</option>310 <option value="nominal" selected>Nominal</option>311 <option value="high">High</option>312 <option value="very_high">Very High</option>313 <option value="extra_high">Extra High</option>314 </select>315 </div>316 317 <div>318 <label for="apex" class="block text-sm font-medium mb-1">APEX - Application Experience</label>319 <select id="apex" name="apex" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>320 <option value="very_low">Very Low</option>321 <option value="low">Low</option>322 <option value="nominal" selected>Nominal</option>323 <option value="high">High</option>324 <option value="very_high">Very High</option>325 <option value="extra_high">Extra High</option>326 </select>327 </div>328 329 <div>330 <label for="plex" class="block text-sm font-medium mb-1">PLEX - Platform Experience</label>331 <select id="plex" name="plex" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>332 <option value="very_low">Very Low</option>333 <option value="low">Low</option>334 <option value="nominal" selected>Nominal</option>335 <option value="high">High</option>336 <option value="very_high">Very High</option>337 <option value="extra_high">Extra High</option>338 </select>339 </div>340 341 <div>342 <label for="ltex" class="block text-sm font-medium mb-1">LTEX - Language and Tool Experience</label>343 <select id="ltex" name="ltex" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>344 <option value="very_low">Very Low</option>345 <option value="low">Low</option>346 <option value="nominal" selected>Nominal</option>347 <option value="high">High</option>348 <option value="very_high">Very High</option>349 <option value="extra_high">Extra High</option>350 </select>351 </div>352 </div>353 </fieldset>354 355 <!-- Project Factors -->356 <fieldset>357 <legend>PROJECT Factors</legend>358 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">359 <div>360 <label for="tool" class="block text-sm font-medium mb-1">TOOL - Use of Software Tools</label>361 <select id="tool" name="tool" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>362 <option value="very_low">Very Low</option>363 <option value="low">Low</option>364 <option value="nominal" selected>Nominal</option>365 <option value="high">High</option>366 <option value="very_high">Very High</option>367 <option value="extra_high">Extra High</option>368 </select>369 </div>370 371 <div>372 <label for="site" class="block text-sm font-medium mb-1">SITE - Multisite Development</label>373 <select id="site" name="site" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>374 <option value="very_low">Very Low</option>375 <option value="low">Low</option>376 <option value="nominal" selected>Nominal</option>377 <option value="high">High</option>378 <option value="very_high">Very High</option>379 <option value="extra_high">Extra High</option>380 </select>381 </div>382 383 <div>384 <label for="sced" class="block text-sm font-medium mb-1">SCED - Required Schedule</label>385 <select id="sced" name="sced" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>386 <option value="very_low">Very Low</option>387 <option value="low">Low</option>388 <option value="nominal" selected>Nominal</option>389 <option value="high">High</option>390 <option value="very_high">Very High</option>391 <option value="extra_high">Extra High</option>392 </select>393 </div>394 </div>395 </fieldset>396 </section>397 398 <!-- Submit Button -->399 <div class="text-center">400 <button type="submit" class="px-8 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition text-lg">401 Calculate COCOMO II402 </button>403 </div>404 </form>405 </div>406 </main>407 408 <!-- Footer -->409 <footer class="py-8 px-4 sm:px-6 lg:px-8 border-t border-gray-800 mt-auto">410 <div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center">411 <div class="flex items-center space-x-2 mb-4 md:mb-0">412 <i data-feather="code" class="text-blue-400"></i>413 <span class="font-medium">CodeSizer Pro</span>414 </div>415 <div class="flex space-x-6">416 <a href="#" class="text-gray-400 hover:text-white transition">417 <i data-feather="twitter"></i>418 </a>419 <a href="#" class="text-gray-400 hover:text-white transition">420 <i data-feather="github"></i>421 </a>422 <a href="#" class="text-gray-400 hover:text-white transition">423 <i data-feather="linkedin"></i>424 </a>425 </div>426 </div>427 </footer>428 </div>429 430 <script>431 document.addEventListener('DOMContentLoaded', () => {432 feather.replace();433 434 // Get project name from URL or local storage435 const urlParams = new URLSearchParams(window.location.search);436 const projectName = urlParams.get('name') || 'New Project';437 document.getElementById('project-name').textContent = projectName;438 });439 </script>440</body>441</html>