| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Digitization Project Management</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/lucide@latest"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| } |
| |
| .process-step { |
| counter-increment: step-counter; |
| } |
| |
| .process-step::before { |
| content: counter(step-counter); |
| background-color: #6366f1; |
| color: white; |
| font-weight: bold; |
| width: 2rem; |
| height: 2rem; |
| border-radius: 50%; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| margin-right: 0.5rem; |
| } |
| |
| .material-card { |
| transition: all 0.2s ease; |
| } |
| |
| .material-card:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
| } |
| |
| .tab-content { |
| display: none; |
| } |
| |
| .tab-content.active { |
| display: block; |
| animation: fadeIn 0.3s ease; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| |
| .equipment-item { |
| position: relative; |
| } |
| |
| .equipment-item::after { |
| content: ""; |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| width: 100%; |
| height: 1px; |
| background-color: #e5e7eb; |
| } |
| |
| .equipment-item:last-child::after { |
| display: none; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <nav class="bg-white shadow-sm"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 flex items-center"> |
| <i data-lucide="archive" class="w-8 h-8 text-indigo-600"></i> |
| <span class="ml-2 text-xl font-bold text-indigo-600">ArchiveDigitizer</span> |
| </div> |
| </div> |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> |
| <a href="#" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Dashboard</a> |
| <a href="#" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Projects</a> |
| <a href="#" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Resources</a> |
| </div> |
| <div class="flex items-center"> |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out"> |
| <i data-lucide="user" class="w-4 h-4 inline mr-1"></i> Account |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
| |
| <div class="mb-8"> |
| <h1 class="text-3xl font-bold text-gray-900 mb-2">Digitization Project Management</h1> |
| <p class="text-gray-600">A comprehensive workflow for preserving archival materials through digitization</p> |
| </div> |
| |
| |
| <div class="border-b border-gray-200 mb-6"> |
| <nav class="-mb-px flex space-x-8"> |
| <button data-tab="planning" class="tab-link border-b-2 border-indigo-500 text-indigo-600 whitespace-nowrap py-4 px-1 text-sm font-medium">Planning Phase</button> |
| <button data-tab="infrastructure" class="tab-link border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 text-sm font-medium">Infrastructure</button> |
| <button data-tab="procedures" class="tab-link border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 text-sm font-medium">Procedures</button> |
| <button data-tab="implementation" class="tab-link border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 text-sm font-medium">Implementation</button> |
| <button data-tab="preservation" class="tab-link border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 text-sm font-medium">Preservation</button> |
| </nav> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> |
| |
| <div id="planning" class="tab-content active p-6"> |
| <h2 class="text-2xl font-bold text-gray-900 mb-6">Initial Planning Phase</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| |
| <div> |
| <div class="process-step mb-6"> |
| <h3 class="text-lg font-semibold text-gray-900 inline">Establish goals and scope</h3> |
| <div class="mt-4 bg-gray-50 p-4 rounded-lg"> |
| <form> |
| <div class="mb-4"> |
| <label for="project-name" class="block text-sm font-medium text-gray-700 mb-1">Project Name</label> |
| <input type="text" id="project-name" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"> |
| </div> |
| <div class="mb-4"> |
| <label for="project-purpose" class="block text-sm font-medium text-gray-700 mb-1">Purpose of Digitization</label> |
| <select id="project-purpose" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"> |
| <option value="">Select primary purpose</option> |
| <option value="preservation">Preservation</option> |
| <option value="access">Improved Access</option> |
| <option value="research">Research Needs</option> |
| <option value="disaster">Disaster Recovery</option> |
| </select> |
| </div> |
| <div class="mb-4"> |
| <label for="project-scope" class="block text-sm font-medium text-gray-700 mb-1">Scope Description</label> |
| <textarea id="project-scope" rows="3" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"></textarea> |
| </div> |
| </form> |
| </div> |
| </div> |
| |
| <div class="process-step"> |
| <h3 class="text-lg font-semibold text-gray-900 inline">Conduct a collection assessment</h3> |
| <div class="mt-4"> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h4 class="font-medium text-gray-900 mb-3">Material Types in Collection</h4> |
| <div class="space-y-3"> |
| <div class="flex items-center"> |
| <input id="material-books" name="material-types" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"> |
| <label for="material-books" class="ml-2 text-sm text-gray-700">Books</label> |
| </div> |
| <div class="flex items-center"> |
| <input id="material-photos" name="material-types" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"> |
| <label for="material-photos" class="ml-2 text-sm text-gray-700">Photographs</label> |
| </div> |
| <div class="flex items-center"> |
| <input id="material-documents" name="material-types" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"> |
| <label for="material-documents" class="ml-2 text-sm text-gray-700">Documents</label> |
| </div> |
| <div class="flex items-center"> |
| <input id="material-audio" name="material-types" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"> |
| <label for="material-audio" class="ml-2 text-sm text-gray-700">Audio/Video</label> |
| </div> |
| <div class="flex items-center"> |
| <input id="material-other" name="material-types" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"> |
| <label for="material-other" class="ml-2 text-sm text-gray-700">Other</label> |
| </div> |
| </div> |
| |
| <div class="mt-4"> |
| <label for="condition-notes" class="block text-sm font-medium text-gray-700 mb-1">Condition Notes</label> |
| <textarea id="condition-notes" rows="2" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm" placeholder="Describe the physical condition of materials"></textarea> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <div class="process-step"> |
| <h3 class="text-lg font-semibold text-gray-900 inline">Develop policies and standards</h3> |
| <div class="mt-4 bg-gray-50 p-4 rounded-lg"> |
| <div class="mb-4"> |
| <label for="digitization-standard" class="block text-sm font-medium text-gray-700 mb-1">Digitization Standard</label> |
| <select id="digitization-standard" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"> |
| <option value="">Select applicable standard</option> |
| <option value="fadgi">FADGI</option> |
| <option value="nara">NARA</option> |
| <option value="iso">ISO</option> |
| <option value="institution">Institutional Standard</option> |
| </select> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-2">Handling Protocols</label> |
| <div class="space-y-2"> |
| <div class="flex items-center"> |
| <input id="protocol-gloves" name="handling-protocols" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"> |
| <label for="protocol-gloves" class="ml-2 text-sm text-gray-700">Gloves required</label> |
| </div> |
| <div class="flex items-center"> |
| <input id="protocol-cradles" name="handling-protocols" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"> |
| <label for="protocol-cradles" class="ml-2 text-sm text-gray-700">Book cradles needed</label> |
| </div> |
| <div class="flex items-center"> |
| <input id="protocol-weights" name="handling-protocols" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"> |
| <label for="protocol-weights" class="ml-2 text-sm text-gray-700">Weights needed</label> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <label for="metadata-requirements" class="block text-sm font-medium text-gray-700 mb-1">Metadata Requirements</label> |
| <textarea id="metadata-requirements" rows="3" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm" placeholder="Describe required metadata fields"></textarea> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-6 bg-indigo-50 border border-indigo-100 rounded-lg p-4"> |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <i data-lucide="lightbulb" class="h-5 w-5 text-indigo-600"></i> |
| </div> |
| <div class="ml-3"> |
| <h3 class="text-sm font-medium text-indigo-800">Planning Tip</h3> |
| <div class="mt-2 text-sm text-indigo-700"> |
| <p>Document all decisions made during planning phase for future reference and to ensure consistency throughout the project.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8 flex justify-end"> |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out"> |
| Save Planning Phase |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="infrastructure" class="tab-content p-6"> |
| <h2 class="text-2xl font-bold text-gray-900 mb-6">Building Infrastructure</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| |
| <div> |
| <div class="process-step mb-6"> |
| <h3 class="text-lg font-semibold text-gray-900 inline">Acquire appropriate equipment</h3> |
| <div class="mt-4 bg-gray-50 p-4 rounded-lg"> |
| <div class="space-y-4"> |
| <div class="equipment-item pb-4"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <h4 class="font-medium text-gray-900">Document Scanner</h4> |
| <p class="text-sm text-gray-500">Flatbed or overhead scanner</p> |
| </div> |
| <div class="flex items-center"> |
| <span class="text-sm font-medium text-gray-900 mr-2">Status:</span> |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Pending</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="equipment-item pb-4"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <h4 class="font-medium text-gray-900">Camera Setup</h4> |
| <p class="text-sm text-gray-500">DSLR with proper lighting</p> |
| </div> |
| <div class="flex items-center"> |
| <span class="text-sm font-medium text-gray-900 mr-2">Status:</span> |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Acquired</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="equipment-item pb-4"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <h4 class="font-medium text-gray-900">Computer Workstation</h4> |
| <p class="text-sm text-gray-500">Sufficient processing power</p> |
| </div> |
| <div class="flex items-center"> |
| <span class="text-sm font-medium text-gray-900 mr-2">Status:</span> |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Acquired</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="equipment-item pb-4"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <h4 class="font-medium text-gray-900">Storage Solution</h4> |
| <p class="text-sm text-gray-500">NAS or server with backup</p> |
| </div> |
| <div class="flex items-center"> |
| <span class="text-sm font-medium text-gray-900 mr-2">Status:</span> |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Pending</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="equipment-item"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <h4 class="font-medium text-gray-900">Conservation Tools</h4> |
| <p class="text-sm text-gray-500">Book cradles, weights, gloves</p> |
| </div> |
| <div class="flex items-center"> |
| <span class="text-sm font-medium text-gray-900 mr-2">Status:</span> |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Needed</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <button class="mt-4 bg-white hover:bg-gray-50 border border-gray-300 text-gray-700 px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out"> |
| <i data-lucide="plus" class="w-4 h-4 inline mr-1"></i> Add Equipment |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <div class="process-step"> |
| <h3 class="text-lg font-semibold text-gray-900 inline">Create a dedicated workspace</h3> |
| <div class="mt-4 bg-gray-50 p-4 rounded-lg"> |
| <div class="mb-4"> |
| <label for="workspace-location" class="block text-sm font-medium text-gray-700 mb-1">Location</label> |
| <input type="text" id="workspace-location" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"> |
| </div> |
| |
| <div class="grid grid-cols-2 gap-4 mb-4"> |
| <div> |
| <label for="temperature" class="block text-sm font-medium text-gray-700 mb-1">Temperature (°F)</label> |
| <input type="number" id="temperature" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"> |
| </div> |
| <div> |
| <label for="humidity" class="block text-sm font-medium text-gray-700 mb-1">Humidity (%)</label> |
| <input type="number" id="humidity" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-sm font-medium |
| </html> |
