codekingpro/portable-devtools
114k
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>DevStation Pro | God-Tier AI Workstation</title>7 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">8 <style>9 :root {10 --bg: #05070a;11 --card-bg: rgba(255, 255, 255, 0.03);12 --accent-green: #76b900; /* NVIDIA Green */13 --accent-blue: #00e5ff;14 --text-main: #e0e0e0;15 --text-dim: #a0a0a0;16 --glass-border: rgba(255, 255, 255, 0.1);17 }18 19 * {20 margin: 0;21 padding: 0;22 box-sizing: border-box;23 }24 25 body {26 background: var(--bg);27 color: var(--text-main);28 font-family: 'Inter', sans-serif;29 line-height: 1.6;30 overflow-x: hidden;31 }32 33 /* Animated Background */34 .bg-glow {35 position: fixed;36 top: 0;37 left: 0;38 width: 100%;39 height: 100%;40 background: radial-gradient(circle at 50% -20%, rgba(118, 185, 0, 0.15), transparent 50%),41 radial-gradient(circle at 80% 80%, rgba(0, 229, 255, 0.05), transparent 40%);42 z-index: -1;43 }44 45 .container {46 max-width: 1200px;47 margin: 0 auto;48 padding: 40px 20px;49 }50 51 header {52 text-align: center;53 margin-bottom: 80px;54 animation: fadeInDown 1s ease-out;55 }56 57 h1 {58 font-size: 4rem;59 font-weight: 800;60 letter-spacing: -2px;61 background: linear-gradient(to right, #fff, var(--accent-green));62 -webkit-background-clip: text;63 -webkit-text-fill-color: transparent;64 margin-bottom: 10px;65 }66 67 .badge {68 display: inline-block;69 padding: 6px 16px;70 background: rgba(118, 185, 0, 0.1);71 border: 1px solid var(--accent-green);72 color: var(--accent-green);73 border-radius: 20px;74 font-size: 0.9rem;75 font-weight: 600;76 text-transform: uppercase;77 letter-spacing: 1px;78 margin-bottom: 20px;79 }80 81 .subtitle {82 font-size: 1.2rem;83 color: var(--text-dim);84 max-width: 700px;85 margin: 0 auto;86 }87 88 /* Grid Layout */89 .grid {90 display: grid;91 grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));92 gap: 25px;93 margin-bottom: 60px;94 }95 96 .card {97 background: var(--card-bg);98 border: 1px solid var(--glass-border);99 border-radius: 24px;100 padding: 40px;101 backdrop-filter: blur(12px);102 transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);103 position: relative;104 overflow: hidden;105 }106 107 .card:hover {108 transform: translateY(-10px);109 border-color: var(--accent-green);110 background: rgba(255, 255, 255, 0.05);111 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);112 }113 114 .card h2 {115 font-size: 1.8rem;116 margin-bottom: 20px;117 color: #fff;118 display: flex;119 align-items: center;120 gap: 12px;121 }122 123 .card h2 span {124 font-size: 2rem;125 }126 127 .tool-list {128 list-style: none;129 }130 131 .tool-list li {132 margin-bottom: 12px;133 display: flex;134 align-items: center;135 gap: 10px;136 color: var(--text-dim);137 font-family: 'JetBrains Mono', monospace;138 font-size: 0.95rem;139 }140 141 .tool-list li::before {142 content: "•";143 color: var(--accent-green);144 font-weight: bold;145 }146 147 .highlight {148 color: #fff;149 font-weight: 600;150 }151 152 /* Special Section */153 .full-width {154 grid-column: 1 / -1;155 background: linear-gradient(135deg, rgba(118, 185, 0, 0.1), rgba(0, 229, 255, 0.05));156 }157 158 .stats {159 display: flex;160 justify-content: space-around;161 margin-top: 30px;162 text-align: center;163 }164 165 .stat-item h3 {166 font-size: 2.5rem;167 color: var(--accent-green);168 }169 170 .stat-item p {171 color: var(--text-dim);172 text-transform: uppercase;173 font-size: 0.8rem;174 letter-spacing: 1px;175 }176 177 footer {178 text-align: center;179 margin-top: 100px;180 padding-bottom: 40px;181 color: var(--text-dim);182 font-size: 0.9rem;183 }184 185 @keyframes fadeInDown {186 from { opacity: 0; transform: translateY(-30px); }187 to { opacity: 1; transform: translateY(0); }188 }189 190 .glow-text {191 text-shadow: 0 0 20px rgba(118, 185, 0, 0.5);192 }193 194 </style>195</head>196<body>197 <div class="bg-glow"></div>198 199 <div class="container">200 <header>201 <div class="badge" style="border-color: var(--accent-blue); color: var(--accent-blue);">Engineered by Hackerb2k</div>202 <h1>DEVSTATION PRO</h1>203 <p class="subtitle glow-text">The World's Most Powerful Portable AI & Software Engineering Workstation</p>204 </header>205 206 <div class="grid">207 <!-- AI & GPU Power -->208 <div class="card">209 <h2><span>🚀</span> God-Tier AI & GPU</h2>210 <ul class="tool-list">211 <li>212 <div>213 <span class="highlight">CUDA Toolkit 12.4</span>214 <p style="font-size: 0.75rem; color: var(--text-dim); margin-top: 2px;">The industry standard for GPU-accelerated computing and AI training.</p>215 </div>216 </li>217 <li>218 <div>219 <span class="highlight">NVIDIA TensorRT 10.1</span>220 <p style="font-size: 0.75rem; color: var(--text-dim); margin-top: 2px;">Ultra-fast AI inference engine. Makes your models run 10x-100x faster.</p>221 </div>222 </li>223 <li>224 <div>225 <span class="highlight">cuDNN 9.22</span>226 <p style="font-size: 0.75rem; color: var(--text-dim); margin-top: 2px;">Highly optimized primitives for deep neural networks and machine learning.</p>227 </div>228 </li>229 <li>230 <div>231 <span class="highlight">nvCOMP & DirectStorage</span>232 <p style="font-size: 0.75rem; color: var(--text-dim); margin-top: 2px;">Next-gen tech for high-speed data compression and direct GPU loading.</p>233 </div>234 </li>235 <li>236 <div>237 <span class="highlight">Nsight Systems & Compute</span>238 <p style="font-size: 0.75rem; color: var(--text-dim); margin-top: 2px;">Master-level profiling tools to debug and optimize GPU performance.</p>239 </div>240 </li>241 </ul>242 </div>243 244 <!-- Programming Languages -->245 <div class="card">246 <h2><span>💻</span> Multi-Language Core</h2>247 <ul class="tool-list">248 <li>249 <div>250 <span class="highlight">Python 3.13 (AI Ready)</span>251 <p style="font-size: 0.75rem; color: var(--text-dim); margin-top: 2px;">The primary language for AI, pre-configured with essential libraries.</p>252 </div>253 </li>254 <li>255 <div>256 <span class="highlight">Rust 1.8x Toolchain</span>257 <p style="font-size: 0.75rem; color: var(--text-dim); margin-top: 2px;">Modern systems language for high-performance and memory-safe apps.</p>258 </div>259 </li>260 <li>261 <div>262 <span class="highlight">Node.js 24.x & Go</span>263 <p style="font-size: 0.75rem; color: var(--text-dim); margin-top: 2px;">Top-tier languages for web backends, microservices, and cloud tools.</p>264 </div>265 </li>266 <li>267 <div>268 <span class="highlight">Portable MSVC & .NET 9</span>269 <p style="font-size: 0.75rem; color: var(--text-dim); margin-top: 2px;">Full Windows development stack for C++, C#, and Enterprise software.</p>270 </div>271 </li>272 <li>273 <div>274 <span class="highlight">LLVM / Clang 19.x</span>275 <p style="font-size: 0.75rem; color: var(--text-dim); margin-top: 2px;">World-class compiler infrastructure for high-performance code.</p>276 </div>277 </li>278 </ul>279 </div>280 281 <!-- Engineering Pack -->282 <div class="card">283 <h2><span>🛠️</span> AI-Engineer Elite Pack</h2>284 <ul class="tool-list">285 <li>286 <div>287 <span class="highlight">Ruff, MyPy & Cppcheck</span>288 <p style="font-size: 0.75rem; color: var(--text-dim); margin-top: 2px;">Professional-grade code analysis to find bugs before they happen.</p>289 </div>290 </li>291 <li>292 <div>293 <span class="highlight">MkDocs & Doxygen</span>294 <p style="font-size: 0.75rem; color: var(--text-dim); margin-top: 2px;">Automatically generate stunning websites and manuals from your code.</p>295 </div>296 </li>297 <li>298 <div>299 <span class="highlight">CMake & Ninja Builder</span>300 <p style="font-size: 0.75rem; color: var(--text-dim); margin-top: 2px;">Industrial-strength build systems for large projects like Unreal Engine.</p>301 </div>302 </li>303 <li>304 <div>305 <span class="highlight">Git, SVN & GitHub CLI</span>306 <p style="font-size: 0.75rem; color: var(--text-dim); margin-top: 2px;">Complete version control suite for collaborating and sharing code.</p>307 </div>308 </li>309 </ul>310 </div>311 312 <!-- Infrastructure -->313 <div class="card">314 <h2><span>🌐</span> Dev Infrastructure</h2>315 <ul class="tool-list">316 <li>317 <div>318 <span class="highlight">PostgreSQL 17 & Redis</span>319 <p style="font-size: 0.75rem; color: var(--text-dim); margin-top: 2px;">Portable database and caching servers for data-heavy applications.</p>320 </div>321 </li>322 <li>323 <div>324 <span class="highlight">FFmpeg Video Suite</span>325 <p style="font-size: 0.75rem; color: var(--text-dim); margin-top: 2px;">The ultimate command-line tool for video/audio editing and streaming.</p>326 </div>327 </li>328 <li>329 <div>330 <span class="highlight">Android SDK Platform</span>331 <p style="font-size: 0.75rem; color: var(--text-dim); margin-top: 2px;">Full environment for building and testing Android mobile applications.</p>332 </div>333 </li>334 <li>335 <div>336 <span class="highlight">Hugging Face Integration</span>337 <p style="font-size: 0.75rem; color: var(--text-dim); margin-top: 2px;">Seamless connection to the world's largest repository of AI models.</p>338 </div>339 </li>340 </ul>341 </div>342 343 <!-- Verification Section -->344 <div class="card full-width" style="border-color: var(--accent-blue); background: rgba(0, 229, 255, 0.05);">345 <h2><span>✅</span> Verification & Getting Started</h2>346 <div style="padding: 15px; background: rgba(255, 0, 0, 0.1); border-left: 4px solid #ff4444; margin-bottom: 20px;">347 <p style="color: #fff; font-weight: 800; font-size: 1rem;">⚠️ CRITICAL: After running Easy_Setup.bat (Option 1), you MUST RESTART your Terminal (CMD/PowerShell) and IDE (VS Code/Cursor) to load the new paths.</p>348 </div>349 350 <p style="color: var(--text-dim); margin-bottom: 20px;">Copy the command suite below and paste it into a <b>fresh terminal</b> to verify your "God-Tier" setup. Every tool should return its version.</p>351 352 <!-- .NET Tip -->353 <div style="background: rgba(255, 180, 0, 0.1); border-left: 4px solid #ffb400; padding: 15px; margin-bottom: 20px; border-radius: 8px; font-size: 0.9rem;">354 <strong style="color: #ffb400;">💡 Pro-Tip for .NET:</strong> If 'dotnet' says SDK not found, copy the <code>devtools/dotnet</code> folder contents into <code>C:\Program Files\dotnet</code> (Select 'Skip' for existing files). This is a 100% fix for Windows environment conflicts.355 </div>356 357 <div style="position: relative;">358 <button onclick="copyAll()" style="position: absolute; right: 10px; top: 10px; background: var(--accent-green); border: none; padding: 8px 15px; border-radius: 8px; color: #000; font-weight: 600; cursor: pointer; transition: 0.3s;">Copy All Commands</button>359 <pre id="commands" style="background: #000; padding: 30px; border-radius: 12px; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; border: 1px solid var(--glass-border); line-height: 1.8; color: var(--accent-green); overflow-x: auto;">360nvcc --version361python --version362node --version363rustc --version364go version365cmake --version366ninja --version367make --version368git --version369gh --version370dotnet --version371java -version372php -v373ffmpeg -version374ruff --version375cppcheck --version376svn --version</pre>377 </div>378 </div>379 380 <script>381 function copyAll() {382 const commands = document.getElementById('commands').innerText;383 navigator.clipboard.writeText(commands);384 const btn = event.target;385 btn.innerText = "COPIED!";386 btn.style.background = "#fff";387 setTimeout(() => {388 btn.innerText = "Copy All Commands";389 btn.style.background = "var(--accent-green)";390 }, 2000);391 }392 </script>393 394 <!-- Value Proposition -->395 <div class="card full-width">396 <h2><span>🏆</span> Why This Workstation?</h2>397 <p style="color: var(--text-dim); margin-bottom: 20px;">398 This is not just a collection of tools. It is a highly optimized, registry-free, 100% portable environment designed to turn any computer into a high-end development studio.399 </p>400 <div class="stats">401 <div class="stat-item">402 <h3>30+</h3>403 <p>Pre-configured Tools</p>404 </div>405 <div class="stat-item">406 <h3>200+</h3>407 <p>High-End Libraries</p>408 </div>409 <div class="stat-item">410 <h3>0%</h3>411 <p>System Registry Impact</p>412 </div>413 <div class="stat-item">414 <h3>100%</h3>415 <p>Portable / USB Ready</p>416 </div>417 </div>418 </div>419 </div>420 421 <footer>422 <p>© 2026 DevStation Pro | Portable God-Tier Environment</p>423 <p style="font-size: 0.8rem; margin-top: 10px; color: var(--accent-green); font-weight: 600;">Handcrafted with Master Precision by Hackerb2k</p>424 <p style="font-size: 0.7rem; margin-top: 10px;">Designed for Professionals, AI Researchers, and Game Developers.</p>425 </footer>426 </div>427</body>428</html>429