techno-consultant/engineering-toolbox-titan
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>Engineering Tools | Engineering Toolbox Titan</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10</head>11<body class="bg-gray-50">12 <custom-header></custom-header>13 14 <div class="container mx-auto px-4 py-8">15 <div class="flex flex-col md:flex-row gap-8">16 <aside class="md:w-1/4">17 <div class="bg-white rounded-lg shadow-md p-6 mb-6">18 <h3 class="text-xl font-bold mb-4 border-b pb-2">Categories</h3>19 <ul class="space-y-2">20 <li><a href="#" class="text-blue-600 hover:text-blue-800">Mechanical</a></li>21 <li><a href="#" class="text-blue-600 hover:text-blue-800">Electrical</a></li>22 <li><a href="#" class="text-blue-600 hover:text-blue-800">Civil</a></li>23 <li><a href="#" class="text-blue-600 hover:text-blue-800">Chemical</a></li>24 <li><a href="#" class="text-blue-600 hover:text-blue-800">Fluid Mechanics</a></li>25 <li><a href="#" class="text-blue-600 hover:text-blue-800">Thermodynamics</a></li>26 </ul>27 </div>28 29 <div class="bg-white rounded-lg shadow-md p-6">30 <h3 class="text-xl font-bold mb-4 border-b pb-2">Quick Tools</h3>31 <ul class="space-y-2">32 <li><a href="#" class="text-blue-600 hover:text-blue-800">Unit Converter</a></li>33 <li><a href="#" class="text-blue-600 hover:text-blue-800">Beam Calculator</a></li>34 <li><a href="#" class="text-blue-600 hover:text-blue-800">Pipe Flow Calculator</a></li>35 <li><a href="#" class="text-blue-600 hover:text-blue-800">Heat Transfer Calc</a></li>36 </ul>37 </div>38 </aside>39 40 <main class="md:w-3/4">41 <div class="bg-white rounded-lg shadow-md p-6 mb-8">42 <h1 class="text-3xl font-bold mb-6">Engineering Tools & Resources</h1>43 44 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">45 <!-- Tool Card 1 -->46 <div class="bg-gray-50 rounded-lg p-6 hover:shadow-md transition duration-300">47 <div class="flex items-center mb-3">48 <i data-feather="cpu" class="text-blue-500 mr-3"></i>49 <h3 class="text-xl font-bold">Mechanical Tools</h3>50 </div>51 <p class="text-gray-700 mb-4">Collection of mechanical engineering calculators and reference materials.</p>52 <a href="#" class="text-blue-600 hover:underline">Explore Tools →</a>53 </div>54 55 <!-- Tool Card 2 -->56 <div class="bg-gray-50 rounded-lg p-6 hover:shadow-md transition duration-300">57 <div class="flex items-center mb-3">58 <i data-feather="zap" class="text-yellow-500 mr-3"></i>59 <h3 class="text-xl font-bold">Electrical Tools</h3>60 </div>61 <p class="text-gray-700 mb-4">Circuit calculators, wire sizing, and electrical engineering references.</p>62 <a href="#" class="text-blue-600 hover:underline">Explore Tools →</a>63 </div>64 65 <!-- Tool Card 3 -->66 <div class="bg-gray-50 rounded-lg p-6 hover:shadow-md transition duration-300">67 <div class="flex items-center mb-3">68 <i data-feather="home" class="text-green-500 mr-3"></i>69 <h3 class="text-xl font-bold">Civil Engineering</h3>70 </div>71 <p class="text-gray-700 mb-4">Structural analysis, material properties, and construction tools.</p>72 <a href="#" class="text-blue-600 hover:underline">Explore Tools →</a>73 </div>74 75 <!-- Tool Card 4 -->76 <div class="bg-gray-50 rounded-lg p-6 hover:shadow-md transition duration-300">77 <div class="flex items-center mb-3">78 <i data-feather="droplet" class="text-red-500 mr-3"></i>79 <h3 class="text-xl font-bold">Fluid Mechanics</h3>80 </div>81 <p class="text-gray-700 mb-4">Pipe flow, pump calculations, and fluid dynamics tools.</p>82 <a href="#" class="text-blue-600 hover:underline">Explore Tools →</a>83 </div>84 </div>85 </div>86 87 <div class="bg-white rounded-lg shadow-md p-6">88 <h2 class="text-2xl font-bold mb-4">Featured Engineering Resources</h2>89 <div class="space-y-4">90 <div class="border-b pb-4 last:border-0">91 <h3 class="text-lg font-semibold mb-1">Material Properties Database</h3>92 <p class="text-gray-700">Comprehensive database of material properties for various engineering applications.</p>93 </div>94 <div class="border-b pb-4 last:border-0">95 <h3 class="text-lg font-semibold mb-1">Unit Conversion Tables</h3>96 <p class="text-gray-700">Convert between different units of measurement for all engineering disciplines.</p>97 </div>98 <div class="border-b pb-4 last:border-0">99 <h3 class="text-lg font-semibold mb-1">Engineering Standards</h3>100 <p class="text-gray-700">Access to common engineering standards and specifications.</p>101 </div>102 </div>103 </div>104 </main>105 </div>106 </div>107 108 <custom-footer></custom-footer>109 110 <script src="components/header.js"></script>111 <script src="components/footer.js"></script>112 <script src="script.js"></script>113 <script>114 feather.replace();115 </script>116</body>117</html>