<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Noobismatics Collection Entry</title> <style> :root { /* High-contrast palette: Crisp off-white canvas with a touch of cash-green */ --bg-dark: #f2f7f4; --panel-dark: #ffffff; --border-color: #000000; --accent-blue: #1e3a1f; --text-light: #000000; --text-muted: #4b5563; --accent-green: #15803d; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: var(--bg-dark); color: var(--text-light); padding: 2rem; line-height: 1.5; }
.container { max-width: 1400px; margin: 0 auto; }
header { margin-bottom: 2rem; border-bottom: 2px solid var(--border-color); padding-bottom: 1.5rem; text-align: center; }
/* Macro Button Header Logo Link */ .logo-link { display: inline-block; cursor: pointer; text-decoration: none; transition: transform 0.1s ease, filter 0.1s ease; } .logo-link:hover { transform: scale(1.02); filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.15)); }
.logo-link:active { transform: scale(0.98); }
.logo-img { max-width: 100%; height: auto; max-height: 160px; display: block; }
/* Dynamic Catalog ID Banner */ .id-banner { background-color: rgba(21, 128, 61, 0.08); border: 2px solid var(--border-color); padding: 1rem; border-radius: 0.25rem; margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; }
.id-label { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: bold; }
.id-output { font-family: monospace; font-size: 1.6rem; font-weight: bold; color: var(--border-color); } /* Dashboard Grid Layout (STRICTLY handles form input panel boxes side-by-side) */ .dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 1024px) { .dashboard-grid { grid-template-columns: 1fr; } }
.panel { background-color: var(--panel-dark); border: 2px solid var(--border-color); border-radius: 0.25rem; padding: 2rem; }
.panel-title { font-size: 1.3rem; font-weight: bold; margin-bottom: 1.5rem; color: var(--text-light); border-bottom: 2px solid var(--border-color); padding-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.02em; }
/* Form Controls */ .form-group { margin-bottom: 1.25rem; }
label { display: block; font-size: 0.875rem; font-weight: bold; margin-bottom: 0.5rem; color: var(--text-light); text-transform: uppercase; }
select, input[type="text"], input[type="number"] { width: 100%; padding: 0.75rem; background-color: var(--panel-dark); border: 2px solid var(--border-color); border-radius: 0.25rem; color: var(--text-light); font-size: 1rem; font-weight: 500; }
select:focus, input:focus { outline: none; background-color: #ffffff; }
/* Image Studio Grid */ .image-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.image-uploader { border: 2px dashed var(--border-color); border-radius: 0.25rem; padding: 1.5rem; text-align: center; background-color: #ffffff; cursor: pointer; position: relative; min-height: 120px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.image-uploader:hover { background-color: rgba(0, 0, 0, 0.02); }
.image-uploader span { display: block; font-size: 0.875rem; color: var(--text-muted); margin-top: 0.5rem; }
.slot-title { font-weight: bold; color: var(--text-light); font-size: 0.9rem; }
/* Dynamic Conditional Sections */ .dynamic-section { background-color: rgba(0, 0, 0, 0.02); border: 2px dashed var(--border-color); padding: 1.25rem; border-radius: 0.25rem; margin-top: 1rem; margin-bottom: 1rem; display: none; }
/* Errors Toggles Grid */ .toggle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.75rem; }
.toggle-btn { display: block; text-align: center; background-color: var(--panel-dark); border: 2px solid var(--border-color); padding: 0.5rem; border-radius: 0.25rem; font-size: 0.875rem; font-weight: bold; cursor: pointer; user-select: none; }
.toggle-btn input { display: none; }
.toggle-btn:has(input:checked) { background-color: rgba(21, 128, 61, 0.15); color: var(--accent-green); }
/* Custom Visual Divider Centering Component */ .divider-wrapper { width: 100%; text-align: center; margin-top: 3rem; margin-bottom: 2rem; padding-top: 1rem; clear: both; }
/* Interactive Portal Link Styles for your "N" Logo */ .divider-link { display: inline-block; cursor: pointer; text-decoration: none; transition: transform 0.1s ease, filter 0.1s ease; }
.divider-link:hover { transform: scale(1.04); filter: drop-shadow(0px 6px 8px rgba(0,0,0,0.2)); }
.divider-link:active { transform: scale(0.96); }
.divider-emblem { max-width: 100%; height: auto; max-height: 180px; display: block; }
.submit-btn { grid-column: span 2; background-color: var(--border-color); color: #ffffff; border: none; padding: 1rem; border-radius: 0.25rem; font-size: 1.1rem; font-weight: bold; cursor: pointer; width: 100%; margin-top: 2rem; text-transform: uppercase; letter-spacing: 0.05em; }
.submit-btn:hover { background-color: #222222; }
@media (max-width: 1024px) { .submit-btn { grid-column: span 1; } } </style></head><body>
<div class="container"> <header> <!-- Clickable Logo Macro --> <a href="#" class="logo-link" onclick="event.preventDefault(); triggerFormSave();" title="Click to Save Entry & Start New"> <img src="/logo.png" alt="Noobismatics Logo" class="logo-img"> </a> </header>
<!-- Dynamic ID Output Banner --> <div class="id-banner"> <div> <div class="id-label">Generated Catalog Inventory ID</div> <div class="id-output" id="catalogIdOutput">US-XXXX-XXXX-XXXX-X-001</div> </div> </div>
<!-- The core input form columns --> <form id="coinForm" class="dashboard-grid"> <!-- LEFT PANEL: Identification & Photo Studio --> <div class="panel"> <div class="panel-title">1. Visual & Identification Hub</div> <!-- Category --> <div class="form-group"> <label for="category">Category</label> <select id="category" required onchange="updateSubTypes(); updateCatalogID();"> <option value="COIN" selected>COIN</option> <option value="CURRENCY">CURRENCY</option> <option value="SILVER">SILVER</option> <option value="INTERNATIONAL">INTERNATIONAL</option> <option value="COMMEMORATIVE">COMMEMORATIVE</option> <option value="OTHER">OTHER</option> </select> </div>
<!-- Parent Type --> <div class="form-group"> <label for="parentType">Type (U.S. Denominations)</label> <select id="parentType" required onchange="updateSubTypes(); updateCatalogID();"> <option value="">-- Select Type --</option> <option value="1C">1 CENT</option> <option value="5C">5 CENT</option> <option value="10C">10 CENT</option> <option value="25C">25 CENT</option> <option value="50C">50 CENT</option> <option value="1D">DOLLAR</option> </select> </div>
<!-- Sub-Type Layout Block --> <div class="form-group"> <label for="subType">Sub-Type (Era / Design Series)</label> <select id="subType" required onchange="handleSpecialFields(); updateCatalogID();"> <option value="">-- Choose Parent Type First --</option> </select> </div>
<!-- Photo Studio 4x Grid --> <label style="margin-top: 1.5rem; display: block;">Coin Photo Studio (4x Views)</label> <div class="image-grid"> <div class="image-uploader" data-slot="obverse"> <div class="slot-title">Obverse</div> <span>[ Front Side ]</span> </div> <div class="image-uploader" data-slot="reverse"> <div class="slot-title">Reverse</div> <span>[ Back Side ]</span> </div> <div class="image-uploader" data-slot="edge"> <div class="slot-title">Edge</div> <span>[ Rim Profile ]</span> </div> <div class="image-uploader" data-slot="slab"> <div class="slot-title">Slab / Detail</div> <span>[ Close-up / Tag ]</span> </div> </div>
<!-- Standard Varieties Block --> <div class="form-group"> <label for="strikeType">Strike / Finish Type</label> <select id="strikeType" onchange="updateCatalogID();"> <option value="BS">Business Strike (Circulating)</option> <option value="PR">Proof (PR / PF)</option> <option value="SMS">Special Mint Set (SMS)</option> </select> </div>
<div class="form-group"> <label for="toning">Toning / Eye Appeal Finish</label> <select id="toning"> <option value="untoned">Untoned (Blazing / Brilliant)</option> <option value="light">Lightly Toned</option> <option value="monster">Beautifully Toned (Monster Toned)</option> <option value="questionable">Artificial / Questionable</option> </select> </div> </div> <!-- RIGHT PANEL: Specs, Grades, and Errors --> <div class="panel"> <div class="panel-title">2. Collection Specs & Error Desk</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;"> <div class="form-group"> <label for="coinYear">Year</label> <input type="text" id="coinYear" placeholder="e.g., 1938" oninput="updateCatalogID();"> </div> <div class="form-group"> <label for="mintMark">Mint Office</label> <select id="mintMark" onchange="updateCatalogID();"> <option value="P">P (Philadelphia)</option> <option value="D">D (Denver)</option> <option value="S">S (San Francisco)</option> <option value="W">W (West Point)</option> <option value="O">O (New Orleans)</option> <option value="CC">CC (Carson City)</option> <option value="Plain">No Mint Mark (Plain)</option> </select> </div> </div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;"> <div class="form-group"> <label for="gradingCompany">Grading Service</label> <select id="gradingCompany"> <option value="RAW">Raw / Uncertified</option> <option value="PCGS">PCGS</option> <option value="NGC">NGC</option> <option value="ANACS">ANACS</option> <option value="ICG">ICG</option> </select> </div> <div class="form-group"> <label for="numericGrade">Sheldon Grade (1-70)</label> <input type="number" id="numericGrade" min="1" max="70" placeholder="e.g., 65"> </div> </div>
<!-- Hidden Nickel Block --> <div class="dynamic-section" id="nickelSection"> <label for="fullSteps">Jefferson Strike Designation</label> <select id="fullSteps"> <option value="standard">Standard / No Steps</option> <option value="5FS">5 Full Steps (5FS)</option> <option value="6FS">6 Full Steps (6FS)</option> </select> </div>
<!-- Hidden Dime Block --> <div class="dynamic-section" id="dimeSection"> <label for="fullBands">Dime Split-Band Designation</label> <select id="fullBands"> <option value="standard">Standard Strike</option> <option value="FB">Full Bands (FB)</option> </select> </div>
<!-- Hidden Quarter Block --> <div class="dynamic-section" id="quarterSection"> <label for="quarterType">Quarter Design Modification</label> <select id="quarterType"> <option value="standard">Standard / Not Applicable</option> <option value="T1">Type 1</option> <option value="T2">Type 2</option> </select> </div>
<!-- Hidden Memorial Penny Block --> <div class="dynamic-section" id="pennySection"> <label>Lincoln Memorial Specific Varieties</label> <div class="toggle-grid" style="margin-top: 0.5rem;"> <label class="toggle-btn"> <input type="checkbox" id="floatingRoof"> Floating Roof </label> <label class="toggle-btn"> <input type="checkbox" id="noFG"> No FG Error </label> </div> </div>
<!-- Shared General Errors Section --> <div class="form-group"> <label style="margin-top: 1.5rem; display: block;">Errors & Planchet Oddities</label> <div class="toggle-grid" style="margin-top: 0.5rem;"> <label class="toggle-btn"> <input type="checkbox" id="errDoubleDie"> Double Die </label> <label class="toggle-btn"> <input type="checkbox" id="errOffset"> Offset Striking </label> <label class="toggle-btn"> <input type="checkbox" id="errStrikethrough"> Strikethrough </label> <label class="toggle-btn"> <input type="checkbox" id="errLimited"> Limited Issue </label> </div> </div> </div>
<button type="submit" class="submit-btn">Process and Catalog New Entry</button> </form> <!-- INPUT BLOCK RECTANGLE CLOSES PERMANENTLY HERE --> <!-- VISUAL DIVIDER SECTION: Houses your interactive link to the search ledger --> <div class="divider-wrapper"> <a href="/ledger.html" target="_blank" class="divider-link" title="Open Advanced Search Ledger Database in New Tab"> <img src="/divider.png" alt="Noobismatics Emblem" class="divider-emblem"> </a> </div> </div>
<script> const subTypeData = { "1C": [ { code: "IND", name: "Indian Head Cent" }, { code: "WHT", name: "Lincoln Wheat Cent" }, { code: "MEM", name: "Lincoln Memorial Cent" }, { code: "BIC", name: "Lincoln Bicentennial Cent" }, { code: "SHL", name: "Lincoln Shield Cent" } ], "5C": [ { code: "VNK", name: "Liberty Head V Nickel" }, { code: "BUF", name: "Buffalo Nickel" }, { code: "JEF", name: "Jefferson Nickel (Base)" }, { code: "WAR", name: "Jefferson Wartime Silver" }, { code: "WJR", name: "Jefferson Westward Journey" }, { code: "FWD", name: "Jefferson Forward Facing" } ], "10C": [ { code: "BAR", name: "Liberty Head Barber Dime" }, { code: "MERC", name: "Mercury Dime" }, { code: "SLV", name: "Roosevelt Dime (Silver)" }, { code: "CLD", name: "Roosevelt Dime (Clad)" } ], "25C": [ { code: "BAR", name: "Liberty Head Barber Quarter" }, { code: "STLB", name: "Standing Liberty Quarter" }, { code: "WASH", name: "Washington Quarter (Silver)" }, { code: "WCLD", name: "Washington Quarter (Clad)" }, { code: "STAT", name: "50 State Quarters" }, { code: "TERR", name: "DC & US Territories" }, { code: "ATB", name: "America the Beautiful" }, { code: "DEL", name: "Washington Crossing Delaware" }, { code: "AMW", name: "American Women Quarters" }, { code: "SEMI", name: "Semiquincentennial Series" } ], "50C": [ { code: "BAR", name: "Liberty Head Barber Half" }, { code: "WALK", name: "Walking Liberty Half" }, { code: "FRNK", name: "Franklin Half Dollar" }, { code: "K90", name: "Kennedy Half (90% Silver)" }, { code: "K40", name: "Kennedy Half (40% Silver)" }, { code: "KCLD", name: "Kennedy Half (Clad)" } ], "1D": [ { code: "MORG", name: "Morgan Dollar" }, { code: "PEAC", name: "Peace Dollar" }, { code: "IKE", name: "Eisenhower Dollar" }, { code: "SBA", name: "Susan B. Anthony Dollar" }, { code: "SACA", name: "Sacagawea / Native American" }, { code: "PRES", name: "Presidential Dollar" }, { code: "INNO", name: "American Innovation Dollar" } ] };
// Temporary session buffers to retain base64 image strings until submission let currentUploadedImages = { obverse: "", reverse: "", edge: "", slab: "" };
let savedInventory = JSON.parse(localStorage.getItem("noobismatics_db")) || []; let activeCounter = savedInventory.length + 1; function updateSubTypes() { const parentType = document.getElementById("parentType").value; const subTypeSelect = document.getElementById("subType"); subTypeSelect.innerHTML = ""; if (!parentType || !subTypeData[parentType]) { const opt = document.createElement("option"); opt.textContent = "-- Choose Parent Type First --"; opt.value = ""; subTypeSelect.appendChild(opt); handleSpecialFields(); return; }
subTypeData[parentType].forEach(item => { const opt = document.createElement("option"); opt.value = item.code; opt.textContent = item.name; subTypeSelect.appendChild(opt); });
handleSpecialFields(); }
function handleSpecialFields() { const parentType = document.getElementById("parentType").value; const subType = document.getElementById("subType").value;
document.getElementById("nickelSection").style.display = "none"; document.getElementById("dimeSection").style.display = "none"; document.getElementById("quarterSection").style.display = "none"; document.getElementById("pennySection").style.display = "none";
if (parentType === "5C") { document.getElementById("nickelSection").style.display = "block"; } else if (parentType === "10C") { document.getElementById("dimeSection").style.display = "block"; } else if (parentType === "25C") { document.getElementById("quarterSection").style.display = "block"; } else if (parentType === "1C" && subType === "MEM") { document.getElementById("pennySection").style.display = "block"; } }
function updateCatalogID() { const category = document.getElementById("category").value.substring(0, 2); const type = document.getElementById("parentType").value || "XX"; const subType = document.getElementById("subType").value || "XXXX"; const year = document.getElementById("coinYear").value || "XXXX"; const mint = document.getElementById("mintMark").value || "X"; const strike = document.getElementById("strikeType").value || "BS"; const padCounter = String(activeCounter).padStart(3, '0');
const compiledID = `${category}-${type}-${subType}-${year}-${mint}-${strike}-${padCounter}`; document.getElementById("catalogIdOutput").textContent = compiledID.toUpperCase(); return compiledID.toUpperCase(); }
function triggerFormSave() { const form = document.getElementById("coinForm"); if (form.reportValidity()) { form.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true })); } }
// Functional Image File Upload Logic Engine mapped to object buffer states document.querySelectorAll('.image-uploader').forEach(uploader => { const slotType = uploader.getAttribute('data-slot'); const fileInput = document.createElement('input'); fileInput.type = 'file'; fileInput.accept = 'image/*'; fileInput.style.display = 'none'; uploader.appendChild(fileInput);
uploader.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', function() { if (this.files && this.files[0]) { const reader = new FileReader(); reader.onload = function(e) { uploader.style.backgroundImage = `url('${e.target.result}')`; uploader.style.backgroundSize = 'cover'; uploader.style.backgroundPosition = 'center'; uploader.querySelectorAll('span, div.slot-title').forEach(s => s.style.visibility = 'hidden'); // Buffer base64 data for form submission payload mapping currentUploadedImages[slotType] = e.target.result; } reader.readAsDataURL(this.files[0]); } }); });
document.getElementById("coinForm").addEventListener("submit", function(event) { event.preventDefault(); const finalId = updateCatalogID(); const cat = document.getElementById("category").value; const pType = document.getElementById("parentType").options[document.getElementById("parentType").selectedIndex].text; const sType = document.getElementById("subType").options[document.getElementById("subType").selectedIndex].text; const gradCo = document.getElementById("gradingCompany").value; const numGrad = document.getElementById("numericGrade").value || "Raw"; const fullGradeSpec = `${gradCo}-${numGrad}`;
let specialTraits = []; if(document.getElementById("parentType").value === "5C") { const fs = document.getElementById("fullSteps").value; if(fs !== "standard") specialTraits.push(fs); } if(document.getElementById("parentType").value === "10C") { const fb = document.getElementById("fullBands").value; if(fb !== "standard") specialTraits.push(fb); } if(document.getElementById("parentType").value === "25C") { const qt = document.getElementById("quarterType").value; if(qt !== "standard") specialTraits.push(qt); } if(document.getElementById("parentType").value === "1C" && document.getElementById("subType").value === "MEM") { if(document.getElementById("floatingRoof").checked) specialTraits.push("Floating Roof"); if(document.getElementById("noFG").checked) specialTraits.push("No FG"); }
if(document.getElementById("errDoubleDie").checked) specialTraits.push("DDO/DDR"); if(document.getElementById("errOffset").checked) specialTraits.push("Offset"); if(document.getElementById("errStrikethrough").checked) specialTraits.push("Strikethrough"); if(document.getElementById("errLimited").checked) specialTraits.push("Limited");
const traitString = specialTraits.length > 0 ? specialTraits.join(", ") : "None/Standard";
const coinEntry = { id: finalId, category: cat, parentType: pType, subType: sType, grade: fullGradeSpec, traits: traitString, images: { ...currentUploadedImages } // Commit current view states to storage entry };
savedInventory.push(coinEntry); localStorage.setItem("noobismatics_db", JSON.stringify(savedInventory)); activeCounter++; document.getElementById("coinForm").reset(); // Clean slate image resets document.querySelectorAll('.image-uploader').forEach(up => { up.style.backgroundImage = 'none'; up.querySelectorAll('span, div.slot-title').forEach(s => s.style.visibility = 'visible'); }); currentUploadedImages = { obverse: "", reverse: "", edge: "", slab: "" }; updateCatalogID(); handleSpecialFields(); alert("Entry with Photo Assets Saved Permanently to Cache Database Ledger!"); });
updateCatalogID(); </script></body></html>
