gcoder824/subdocflow-smooth-document-request-system
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>Request Document - SubDocFlow</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 <style>12 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');13 body {14 font-family: 'Poppins', sans-serif;15 }16 .sidebar {17 transition: all 0.3s ease;18 }19 .sidebar.collapsed {20 width: 80px;21 }22 .sidebar.collapsed .sidebar-text {23 display: none;24 }25 .sidebar.collapsed .sidebar-icon {26 margin-right: 0;27 }28 .main-content {29 transition: margin-left 0.3s ease;30 }31 </style>32</head>33<body class="bg-gray-50">34 <div class="flex h-screen">35 <!-- Sidebar -->36 <div class="sidebar bg-white shadow-md w-64 flex-shrink-0">37 <div class="p-4 border-b border-gray-200">38 <div class="flex items-center">39 <i data-feather="file-text" class="text-indigo-600 h-8 w-8"></i>40 <span class="sidebar-text ml-2 text-xl font-bold text-gray-900">SubDocFlow</span>41 </div>42 </div>43 <nav class="p-4">44 <ul class="space-y-2">45 <li>46 <a href="dashboard.html" class="flex items-center p-2 rounded-lg text-gray-700 hover:bg-gray-100">47 <i data-feather="home" class="sidebar-icon h-5 w-5"></i>48 <span class="sidebar-text ml-3">Dashboard</span>49 </a>50 </li>51 <li>52 <a href="request_form.html" class="flex items-center p-2 rounded-lg bg-indigo-50 text-indigo-700">53 <i data-feather="file-plus" class="sidebar-icon h-5 w-5"></i>54 <span class="sidebar-text ml-3">New Request</span>55 </a>56 </li>57 <li>58 <a href="requests.html" class="flex items-center p-2 rounded-lg text-gray-700 hover:bg-gray-100">59 <i data-feather="list" class="sidebar-icon h-5 w-5"></i>60 <span class="sidebar-text ml-3">My Requests</span>61 </a>62 </li>63 <li>64 <a href="notifications.html" class="flex items-center p-2 rounded-lg text-gray-700 hover:bg-gray-100">65 <i data-feather="bell" class="sidebar-icon h-5 w-5"></i>66 <span class="sidebar-text ml-3">Notifications</span>67 </a>68 </li>69 <li>70 <a href="profile.html" class="flex items-center p-2 rounded-lg text-gray-700 hover:bg-gray-100">71 <i data-feather="user" class="sidebar-icon h-5 w-5"></i>72 <span class="sidebar-text ml-3">Profile</span>73 </a>74 </li>75 </ul>76 <div class="mt-8 pt-4 border-t border-gray-200">77 <a href="login.html" class="flex items-center p-2 rounded-lg text-gray-700 hover:bg-gray-100">78 <i data-feather="log-out" class="sidebar-icon h-5 w-5"></i>79 <span class="sidebar-text ml-3">Logout</span>80 </a>81 </div>82 </nav>83 </div>84 85 <!-- Main Content -->86 <div class="main-content flex-1 flex flex-col overflow-hidden">87 <!-- Header -->88 <header class="bg-white shadow-sm">89 <div class="flex items-center justify-between px-6 py-4">90 <div class="flex items-center">91 <button id="sidebar-toggle" class="p-2 rounded-md text-gray-500 hover:text-gray-600 hover:bg-gray-100 focus:outline-none">92 <i data-feather="menu"></i>93 </button>94 <h1 class="ml-4 text-xl font-semibold text-gray-900">New Document Request</h1>95 </div>96 <div class="flex items-center">97 <img src="http://static.photos/people/200x200/1" alt="User" class="h-8 w-8 rounded-full">98 <span class="ml-2 text-sm font-medium text-gray-700">John Doe</span>99 </div>100 </div>101 </header>102 103 <!-- Content -->104 <main class="flex-1 overflow-y-auto p-6 bg-gray-50">105 <div class="max-w-3xl mx-auto">106 <div class="bg-white shadow rounded-lg p-6">107 <h2 class="text-lg font-medium text-gray-900 mb-6">Request Details</h2>108 109 <form action="request_submitted.html" method="POST" enctype="multipart/form-data">110 <!-- Document Type -->111 <div class="mb-6">112 <label for="document_type" class="block text-sm font-medium text-gray-700 mb-2">Document Type</label>113 <select id="document_type" name="document_type" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required>114 <option value="">Select document type</option>115 <option value="business_permit">Business Permit</option>116 <option value="amenities_permit">Amenities Permit</option>117 <option value="lot_title">Lot Title</option>118 <option value="vehicle_ticket">Vehicle Ticket</option>119 <option value="residency_certificate">Residency Certificate</option>120 <option value="other">Other Document</option>121 </select>122 </div>123 124 <!-- Purpose -->125 <div class="mb-6">126 <label for="purpose" class="block text-sm font-medium text-gray-700 mb-2">Purpose of Request</label>127 <textarea id="purpose" name="purpose" rows="3" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Please specify the purpose of this document request" required></textarea>128 </div>129 130 <!-- Additional Information -->131 <div class="mb-6">132 <label for="additional_info" class="block text-sm font-medium text-gray-700 mb-2">Additional Information</label>133 <textarea id="additional_info" name="additional_info" rows="3" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Any additional information that might help process your request"></textarea>134 </div>135 136 <!-- File Upload -->137 <div class="mb-6">138 <label for="attachment" class="block text-sm font-medium text-gray-700 mb-2">Supporting Documents (if required)</label>139 <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">140 <div class="space-y-1 text-center">141 <div class="flex text-sm text-gray-600">142 <label for="attachment" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none">143 <span>Upload a file</span>144 <input id="attachment" name="attachment" type="file" class="sr-only">145 </label>146 <p class="pl-1">or drag and drop</p>147 </div>148 <p class="text-xs text-gray-500">149 PDF, JPG, PNG up to 10MB150 </p>151 </div>152 </div>153 </div>154 155 <!-- Terms and Conditions -->156 <div class="mb-6">157 <div class="flex items-start">158 <div class="flex items-center h-5">159 <input id="terms" name="terms" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" required>160 </div>161 <div class="ml-3 text-sm">162 <label for="terms" class="font-medium text-gray-700">I certify that all information provided is accurate and complete.</label>163 <p class="text-gray-500">By submitting this request, I agree to the subdivision's terms and conditions.</p>164 </div>165 </div>166 </div>167 168 <!-- Submit Button -->169 <div class="flex justify-end">170 <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">171 Submit Request172 </button>173 </div>174 </form>175 </div>176 </div>177 </main>178 </div>179 </div>180 181 <script>182 // Toggle sidebar183 document.getElementById('sidebar-toggle').addEventListener('click', function() {184 const sidebar = document.querySelector('.sidebar');185 sidebar.classList.toggle('collapsed');186 });187 188 // Initialize feather icons189 feather.replace();190 191 // Set document type from URL parameter if present192 document.addEventListener('DOMContentLoaded', function() {193 const urlParams = new URLSearchParams(window.location.search);194 const documentType = urlParams.get('document');195 if (documentType) {196 const selectElement = document.getElementById('document_type');197 selectElement.value = documentType;198 }199 });200 </script>201</body>202</html>203