+

+

Image Sensor Parameter Database

+

+

+

+

+

+

+

+

+ buildHtml

+ baseUrl https://sensordb.scroll.pub

+ metaTags

+ description "Image Sensor Parameter Database - Browse and edit sensor modes and specifications"

+ keywords "image sensor, sensor parameters, camera sensors, sensor database"

+ editButton /edit.html

+ title Image Sensor Parameter Database

+ style.css

+ body.html

+ script.js

+ {

+ "id": "msg_01KP11WPJ4wNiWxksEHoEcmH",

+ "type": "message",

+ "role": "assistant",

+ "model": "claude-3-5-sonnet-20241022",

+ "content": [

+ {

+ "type": "text",

+ "text": "I'll help create this image sensor parameter database website. For the domain, I suggest:\n\nsensordb.scroll.pub\n\nHere's the complete website:\n\n---domain---\nsensordb.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://sensordb.scroll.pub\nmetaTags\n description \"Image Sensor Parameter Database - Browse and edit sensor modes and specifications\"\n keywords \"image sensor, sensor parameters, camera sensors, sensor database\"\neditButton /edit.html\ntitle Image Sensor Parameter Database\nstyle.css\nbody.html\nscript.js\n---body.html---\n

\n

Image Sensor Parameter Database

\n

\n \n

\n

\n\n

\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Mode	Resolution	FPS	Bit Depth	ADC	SNR	Power

\n

\n

\n\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --secondary-color: #3498db;\n --background-color: #f5f6fa;\n --text-color: #2c3e50;\n --border-color: #dcdde1;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n background-color: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\nheader {\n background-color: var(--primary-color);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\nh1 {\n margin-bottom: 1.5rem;\n font-size: 2.5rem;\n}\n\n.search-container {\n max-width: 600px;\n margin: 0 auto;\n}\n\n#searchInput {\n width: 100%;\n padding: 0.8rem;\n border: none;\n border-radius: 25px;\n font-size: 1rem;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n}\n\n.table-container {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n overflow-x: auto;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n background: white;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\nth, td {\n padding: 1rem;\n text-align: left;\n border-bottom: 1px solid var(--border-color);\n}\n\nth {\n background-color: var(--secondary-color);\n color: white;\n font-weight: 600;\n}\n\ntr:hover {\n background-color: #f8f9fa;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0,0,0,0.5);\n z-index: 1000;\n}\n\n.modal-content {\n background: white;\n width: 90%;\n max-width: 600px;\n margin: 2rem auto;\n padding: 2rem;\n border-radius: 8px;\n position: relative;\n animation: modalSlide 0.3s ease;\n}\n\n@keyframes modalSlide {\n from {\n transform: translateY(-100px);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n.close {\n position: absolute;\n right: 1rem;\n top: 1rem;\n font-size: 1.5rem;\n cursor: pointer;\n}\n\n.form-group {\n margin-bottom: 1rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n}\n\ninput {\n width: 100%;\n padding: 0.5rem;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n}\n\nbutton {\n background-color: var(--secondary-color);\n color: white;\n padding: 0.8rem 1.5rem;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 1rem;\n transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n background-color: #2980b9;\n}\n\n@media (max-width: 768px) {\n h1 {\n font-size: 2rem;\n }\n \n th, td {\n padding: 0.8rem;\n font-size: 0.9rem;\n }\n \n .modal-content {\n width: 95%;\n padding: 1.5rem;\n }\n}\n---script.js---\n// Sample data\nlet sensorData = [\n { mode: \"4K60\", resolution: \"3840x2160\", fps: 60, bitDepth: 12, adc: \"Column\", snr: 42.3, power: 350.5 },\n { mode: \"1080p120\", resolution: \"1920x1080\", fps: 120, bitDepth: 10, adc: \"Column\", snr: 40.1, power: 280.0 },\n { mode: \"720p240\", resolution: \"1280x720\", fps: 240, bitDepth: 10, adc: \"Pixel\", snr: 38.5, power: 420.2 }\n];\n\nconst tableBody = document.getElementById('tableBody');\nconst modal = document.getElementById('editModal');\nconst closeBtn = document.querySelector('.close');\nconst editForm = document.getElementById('editForm');\nconst searchInput = document.getElementById('searchInput');\n\nlet currentEditIndex = -1;\n\n// Render table\nfunction renderTable(data) {\n tableBody.innerHTML = '';\n data.forEach((row, index) => {\n const tr = document.createElement('tr');\n tr.innerHTML = `\n ${row.mode}\n ${row.resolution}\n ${row.fps}\n ${row.bitDepth}\n ${row.adc}\n ${row.snr}\n ${row.power}\n `;\n tr.addEventListener('click', () => openEditModal(index));\n tableBody.appendChild(tr);\n });\n}\n\n// Open edit modal\nfunction openEditModal(index) {\n currentEditIndex = index;\n const row = sensorData[index];\n \n document.getElementById('editMode').value = row.mode;\n document.getElementById('editResolution').value = row.resolution;\n document.getElementById('editFps').value = row.fps;\n document.getElementById('editBitDepth').value = row.bitDepth;\n document.getElementById('editAdc').value = row.adc;\n document.getElementById('editSnr').value = row.snr;\n document.getElementById('editPower').value = row.power;\n \n modal.style.display = 'block';\n}\n\n// Close modal\ncloseBtn.onclick = () => {\n modal.style.display = 'none';\n};\n\nwindow.onclick = (event) => {\n if (event.target === modal) {\n modal.style.display = 'none';\n }\n};\n\n// Handle form submission\neditForm.onsubmit = (e) => {\n e.preventDefault();\n \n sensorData[currentEditIndex] = {\n mode: document.getElementById('editMode').value,\n resolution: document.getElementById('editResolution').value,\n fps: parseInt(document.getElementById('editFps').value),\n bitDepth: parseInt(document.getElementById('editBitDepth').value),\n adc: document.getElementById('editAdc').value,\n snr: parseFloat(document.getElementById('editSnr').value),\n power: parseFloat(document.getElementById('editPower').value)\n };\n \n renderTable(sensorData);\n modal.style.display = 'none';\n};\n\n// Search functionality\nsearchInput.addEventListener('input', (e) => {\n const searchTerm = e.target.value.toLowerCase();\n const filteredData = sensorData.filter(row => \n Object.values(row).some(value => \n value.toString().toLowerCase().includes(searchTerm)\n )\n );\n renderTable(filteredData);\n});\n\n// Initial render\nrenderTable(sensorData);\n---end---\n\nThis implementation provides:\n\n1. A clean, responsive table displaying sensor parameters\n2. Click-to-edit functionality for each row\n3. A modal form for editing parameters\n4. Search functionality\n5. Sample data with common sensor parameters\n6. Modern styling with animations and transitions\n7. Mobile-responsive design\n8. Semantic HTML5 structure\n9. Accessibility features\n10. Clean and organized JavaScript code\n\nThe design uses a professional color scheme and includes subtle animations for better user experience. The table is scrollable on mobile devices, and the modal form adjusts its size based on screen width."

+ }

+ ],

+ "stop_reason": "end_turn",

+ "stop_sequence": null,

+ "usage": {

+ "input_tokens": 308,

+ "cache_creation_input_tokens": 0,

+ "cache_read_input_tokens": 0,

+ "output_tokens": 2966

+ }

+ }

+ # sensordb.scroll.pub

+ Website generated by Claude from prompt: Create react website that has large database of image sensor paramters, the parameters shown in each line per mode, when clicking on specific row (mode) it pop up and can edit the row

+ // Sample data

+ let sensorData = [

+ { mode: "4K60", resolution: "3840x2160", fps: 60, bitDepth: 12, adc: "Column", snr: 42.3, power: 350.5 },

+ { mode: "1080p120", resolution: "1920x1080", fps: 120, bitDepth: 10, adc: "Column", snr: 40.1, power: 280.0 },

+ { mode: "720p240", resolution: "1280x720", fps: 240, bitDepth: 10, adc: "Pixel", snr: 38.5, power: 420.2 }

+ ];

+

+ const tableBody = document.getElementById('tableBody');

+ const modal = document.getElementById('editModal');

+ const closeBtn = document.querySelector('.close');

+ const editForm = document.getElementById('editForm');

+ const searchInput = document.getElementById('searchInput');

+

+ let currentEditIndex = -1;

+

+ // Render table

+ function renderTable(data) {

+ tableBody.innerHTML = '';

+ data.forEach((row, index) => {

+ const tr = document.createElement('tr');

+ tr.innerHTML = `

+ ${row.mode}

+ ${row.resolution}

+ ${row.fps}

+ ${row.bitDepth}

+ ${row.adc}

+ ${row.snr}

+ ${row.power}

+ `;

+ tr.addEventListener('click', () => openEditModal(index));

+ tableBody.appendChild(tr);

+ });

+ }

+

+ // Open edit modal

+ function openEditModal(index) {

+ currentEditIndex = index;

+ const row = sensorData[index];

+

+ document.getElementById('editMode').value = row.mode;

+ document.getElementById('editResolution').value = row.resolution;

+ document.getElementById('editFps').value = row.fps;

+ document.getElementById('editBitDepth').value = row.bitDepth;

+ document.getElementById('editAdc').value = row.adc;

+ document.getElementById('editSnr').value = row.snr;

+ document.getElementById('editPower').value = row.power;

+

+ modal.style.display = 'block';

+ }

+

+ // Close modal

+ closeBtn.onclick = () => {

+ modal.style.display = 'none';

+ };

+

+ window.onclick = (event) => {

+ if (event.target === modal) {

+ modal.style.display = 'none';

+ }

+ };

+

+ // Handle form submission

+ editForm.onsubmit = (e) => {

+ e.preventDefault();

+

+ sensorData[currentEditIndex] = {

+ mode: document.getElementById('editMode').value,

+ resolution: document.getElementById('editResolution').value,

+ fps: parseInt(document.getElementById('editFps').value),

+ bitDepth: parseInt(document.getElementById('editBitDepth').value),

+ adc: document.getElementById('editAdc').value,

+ snr: parseFloat(document.getElementById('editSnr').value),

+ power: parseFloat(document.getElementById('editPower').value)

+ };

+

+ renderTable(sensorData);

+ modal.style.display = 'none';

+ };

+

+ // Search functionality

+ searchInput.addEventListener('input', (e) => {

+ const searchTerm = e.target.value.toLowerCase();

+ const filteredData = sensorData.filter(row =>

+ Object.values(row).some(value =>

+ value.toString().toLowerCase().includes(searchTerm)

+ )

+ );

+ renderTable(filteredData);

+ });

+

+ // Initial render

+ renderTable(sensorData);

+ :root {

+ --primary-color: #2c3e50;

+ --secondary-color: #3498db;

+ --background-color: #f5f6fa;

+ --text-color: #2c3e50;

+ --border-color: #dcdde1;

+ }

+

+ * {

+ margin: 0;

+ padding: 0;

+ box-sizing: border-box;

+ }

+

+ body {

+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

+ background-color: var(--background-color);

+ color: var(--text-color);

+ line-height: 1.6;

+ }

+

+ header {

+ background-color: var(--primary-color);

+ color: white;

+ padding: 2rem;

+ text-align: center;

+ }

+

+ h1 {

+ margin-bottom: 1.5rem;

+ font-size: 2.5rem;

+ }

+

+ .search-container {

+ max-width: 600px;

+ margin: 0 auto;

+ }

+

+ #searchInput {

+ width: 100%;

+ padding: 0.8rem;

+ border: none;

+ border-radius: 25px;

+ font-size: 1rem;

+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);

+ }

+

+ .table-container {

+ max-width: 1200px;

+ margin: 2rem auto;

+ padding: 0 1rem;

+ overflow-x: auto;

+ }

+

+ table {

+ width: 100%;

+ border-collapse: collapse;

+ background: white;

+ border-radius: 8px;

+ overflow: hidden;

+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);

+ }

+

+ th, td {

+ padding: 1rem;

+ text-align: left;

+ border-bottom: 1px solid var(--border-color);

+ }

+

+ th {

+ background-color: var(--secondary-color);

+ color: white;

+ font-weight: 600;

+ }

+

+ tr:hover {

+ background-color: #f8f9fa;

+ cursor: pointer;

+ transition: background-color 0.3s ease;

+ }

+

+ .modal {

+ display: none;

+ position: fixed;

+ top: 0;

+ left: 0;

+ width: 100%;

+ height: 100%;

+ background: rgba(0,0,0,0.5);

+ z-index: 1000;

+ }

+

+ .modal-content {

+ background: white;

+ width: 90%;

+ max-width: 600px;

+ margin: 2rem auto;

+ padding: 2rem;

+ border-radius: 8px;

+ position: relative;

+ animation: modalSlide 0.3s ease;

+ }

+

+ @keyframes modalSlide {

+ from {

+ transform: translateY(-100px);

+ opacity: 0;

+ }

+ to {

+ transform: translateY(0);

+ opacity: 1;

+ }

+ }

+

+ .close {

+ position: absolute;

+ right: 1rem;

+ top: 1rem;

+ font-size: 1.5rem;

+ cursor: pointer;

+ }

+

+ .form-group {

+ margin-bottom: 1rem;

+ }

+

+ label {

+ display: block;

+ margin-bottom: 0.5rem;

+ font-weight: 500;

+ }

+

+ input {

+ width: 100%;

+ padding: 0.5rem;

+ border: 1px solid var(--border-color);

+ border-radius: 4px;

+ }

+

+ button {

+ background-color: var(--secondary-color);

+ color: white;

+ padding: 0.8rem 1.5rem;

+ border: none;

+ border-radius: 4px;

+ cursor: pointer;

+ font-size: 1rem;

+ transition: background-color 0.3s ease;

+ }

+

+ button:hover {

+ background-color: #2980b9;

+ }

+

+ @media (max-width: 768px) {

+ h1 {

+ font-size: 2rem;

+ }

+

+ th, td {

+ padding: 0.8rem;

+ font-size: 0.9rem;

+ }

+

+ .modal-content {

+ width: 95%;

+ padding: 1.5rem;

+ }

+ }