winebox 0.1.1__py3-none-any.whl → 0.1.3__py3-none-any.whl

winebox/static/css/style.css

@@ -982,6 +982,41 @@ h3 {
     text-align: left;
 }
 
+/* Password Toggle */
+.password-input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.password-input-wrapper input {
+    flex: 1;
+    padding-right: 3rem;
+}
+
+.password-toggle {
+    position: absolute;
+    right: 0.75rem;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.5rem;
+    color: var(--text-muted);
+    transition: color 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.password-toggle:hover {
+    color: var(--primary-color);
+}
+
+.password-toggle svg {
+    width: 20px;
+    height: 20px;
+}
+
 .login-error {
     background: rgba(166, 61, 64, 0.1);
     color: var(--error-color);
@@ -1084,3 +1119,312 @@ body.logged-out #user-info {
         content: '...';
     }
 }
+
+/* Checkin Confirmation Modal */
+.checkin-confirm {
+    text-align: center;
+}
+
+.checkin-confirm-header {
+    margin-bottom: 1.5rem;
+}
+
+.checkin-confirm-icon {
+    width: 60px;
+    height: 60px;
+    background: var(--success-color);
+    color: white;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2rem;
+    margin-bottom: 1rem;
+}
+
+.checkin-confirm-header h3 {
+    color: var(--success-color);
+    margin: 0;
+}
+
+.checkin-confirm-content {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 1.5rem;
+    text-align: left;
+    margin-bottom: 1.5rem;
+}
+
+.checkin-confirm-image {
+    width: 150px;
+    height: 200px;
+    border-radius: var(--radius);
+    overflow: hidden;
+    background: var(--background-color);
+    border: 1px solid var(--border-color);
+}
+
+.checkin-confirm-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.checkin-confirm-details h4 {
+    color: var(--primary-color);
+    margin-bottom: 1rem;
+    font-size: 1.25rem;
+}
+
+.checkin-confirm-fields {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.75rem;
+}
+
+.checkin-confirm-field {
+    background: var(--background-color);
+    padding: 0.5rem 0.75rem;
+    border-radius: var(--radius);
+}
+
+.checkin-confirm-field .label {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.checkin-confirm-field .value {
+    font-weight: 500;
+    color: var(--text-color);
+}
+
+.checkin-confirm-field .value.empty {
+    color: var(--text-muted);
+    font-style: italic;
+    font-weight: normal;
+}
+
+.checkin-confirm-ocr {
+    text-align: left;
+    margin-bottom: 1.5rem;
+}
+
+.checkin-confirm-ocr h5 {
+    color: var(--text-color);
+    margin-bottom: 0.75rem;
+    font-size: 0.9rem;
+}
+
+.ocr-text-container {
+    background: var(--background-color);
+    border-radius: var(--radius);
+    padding: 1rem;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.ocr-section {
+    margin-bottom: 1rem;
+}
+
+.ocr-section:last-child {
+    margin-bottom: 0;
+}
+
+.ocr-section strong {
+    display: block;
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    margin-bottom: 0.25rem;
+}
+
+.ocr-section pre {
+    font-family: inherit;
+    font-size: 0.85rem;
+    white-space: pre-wrap;
+    word-break: break-word;
+    margin: 0;
+    color: var(--text-color);
+}
+
+.checkin-confirm .form-actions {
+    justify-content: center;
+}
+
+@media (max-width: 600px) {
+    .checkin-confirm-content {
+        grid-template-columns: 1fr;
+    }
+
+    .checkin-confirm-image {
+        width: 100%;
+        height: 150px;
+    }
+
+    .checkin-confirm-fields {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Collapsible Sections */
+.collapsible {
+    margin-bottom: 1.5rem;
+}
+
+.collapsible-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    padding: 0.5rem 0;
+    user-select: none;
+}
+
+.collapsible-header h3 {
+    margin: 0;
+    color: var(--text-muted);
+    font-size: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.scan-method-badge {
+    font-size: 0.7rem;
+    font-weight: 600;
+    padding: 0.2rem 0.5rem;
+    border-radius: 999px;
+    background: var(--primary-color);
+    color: white;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.collapsible-header:hover h3 {
+    color: var(--primary-color);
+}
+
+.collapse-icon {
+    font-size: 1.25rem;
+    font-weight: bold;
+    color: var(--text-muted);
+    transition: transform 0.2s;
+}
+
+.collapsible.open .collapse-icon {
+    transform: rotate(45deg);
+}
+
+.collapsible-content {
+    padding-top: 1rem;
+}
+
+/* Raw OCR Text Display */
+.ocr-raw-text {
+    background: var(--background-color);
+    border-radius: var(--radius);
+    padding: 1rem;
+}
+
+.ocr-raw-section {
+    margin-bottom: 1rem;
+}
+
+.ocr-raw-section:last-child {
+    margin-bottom: 0;
+}
+
+.ocr-raw-section label {
+    display: block;
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: var(--text-muted);
+    margin-bottom: 0.5rem;
+}
+
+.ocr-raw-section pre {
+    background: var(--card-background);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    padding: 0.75rem;
+    font-family: monospace;
+    font-size: 0.8rem;
+    white-space: pre-wrap;
+    word-break: break-word;
+    max-height: 150px;
+    overflow-y: auto;
+    margin: 0;
+}
+
+/* Wine Detail Label Text */
+.wine-detail-label-text {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border-color);
+}
+
+.wine-detail-label-text .collapsible-header {
+    padding: 0;
+}
+
+.wine-detail-label-text .collapsible-header .label {
+    font-size: 0.85rem;
+    color: var(--primary-color);
+    cursor: pointer;
+}
+
+.wine-detail-label-text .collapsible-header .label:hover {
+    text-decoration: underline;
+}
+
+/* Auto-fill Animation */
+.auto-filled {
+    animation: autoFillPulse 0.5s ease;
+    background-color: rgba(74, 124, 89, 0.1) !important;
+}
+
+@keyframes autoFillPulse {
+    0% {
+        background-color: rgba(74, 124, 89, 0.3);
+    }
+    100% {
+        background-color: rgba(74, 124, 89, 0.1);
+    }
+}
+
+/* Scanning Indicator */
+.form-note.scanning {
+    color: var(--primary-color);
+    font-weight: 500;
+}
+
+.form-note.scanning::after {
+    content: '';
+    animation: dots 1.5s steps(4, end) infinite;
+}
+
+/* Footer */
+#app-footer {
+    background: var(--primary-dark);
+    color: rgba(255, 255, 255, 0.7);
+    text-align: center;
+    padding: 1rem 2rem;
+    font-size: 0.85rem;
+    margin-top: 2rem;
+}
+
+#app-footer #app-info {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+#app-footer .version {
+    background: rgba(255, 255, 255, 0.15);
+    padding: 0.15rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.75rem;
+}

winebox/static/favicon.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="bottle" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#8b4049"/>
+      <stop offset="100%" style="stop-color:#5a252c"/>
+    </linearGradient>
+    <linearGradient id="wine" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#722f37"/>
+      <stop offset="100%" style="stop-color:#4a1f24"/>
+    </linearGradient>
+  </defs>
+  <!-- Bottle neck -->
+  <rect x="26" y="4" width="12" height="14" rx="2" fill="url(#bottle)"/>
+  <!-- Bottle neck ring -->
+  <rect x="24" y="16" width="16" height="4" rx="1" fill="url(#bottle)"/>
+  <!-- Bottle body -->
+  <path d="M24 20 L24 24 Q18 28 18 36 L18 56 Q18 60 22 60 L42 60 Q46 60 46 56 L46 36 Q46 28 40 24 L40 20 Z" fill="url(#bottle)"/>
+  <!-- Wine level -->
+  <path d="M20 40 L20 56 Q20 58 22 58 L42 58 Q44 58 44 56 L44 40 Q44 38 32 42 Q20 38 20 40 Z" fill="url(#wine)"/>
+  <!-- Highlight -->
+  <ellipse cx="38" cy="48" rx="2" ry="6" fill="rgba(255,255,255,0.15)"/>
+</svg>

winebox/static/index.html

@@ -7,6 +7,7 @@
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="theme-color" content="#722f37">
     <title>WineBox - Wine Cellar Management</title>
+    <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
     <link rel="stylesheet" href="/static/css/style.css">
 </head>
 <body>
@@ -40,7 +41,19 @@
                     </div>
                     <div class="form-group">
                         <label for="login-password">Password</label>
-                        <input type="password" id="login-password" name="password" required autocomplete="current-password">
+                        <div class="password-input-wrapper">
+                            <input type="password" id="login-password" name="password" required autocomplete="current-password">
+                            <button type="button" class="password-toggle" aria-label="Show password">
+                                <svg class="eye-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                                    <circle cx="12" cy="12" r="3"></circle>
+                                </svg>
+                                <svg class="eye-off-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: none;">
+                                    <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
+                                    <line x1="1" y1="1" x2="23" y2="23"></line>
+                                </svg>
+                            </button>
+                        </div>
                     </div>
                     <div id="login-error" class="login-error" style="display: none;"></div>
                     <button type="submit" class="btn btn-primary btn-full">Sign In</button>
@@ -152,6 +165,25 @@
                     </div>
                 </div>
 
+                <div class="form-section collapsible" id="label-text-section" style="display: none;">
+                    <div class="collapsible-header" id="label-text-toggle">
+                        <h3>Raw Label Text</h3>
+                        <span class="collapse-icon">+</span>
+                    </div>
+                    <div class="collapsible-content" id="label-text-content" style="display: none;">
+                        <div class="ocr-raw-text">
+                            <div class="ocr-raw-section">
+                                <label>Front Label OCR:</label>
+                                <pre id="raw-front-label-text"></pre>
+                            </div>
+                            <div class="ocr-raw-section" id="raw-back-label-section" style="display: none;">
+                                <label>Back Label OCR:</label>
+                                <pre id="raw-back-label-text"></pre>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
                 <div class="form-actions">
                     <button type="submit" class="btn btn-primary">Check In Wine</button>
                     <button type="reset" class="btn btn-secondary">Clear Form</button>
@@ -263,6 +295,48 @@
         </div>
     </div>
 
+    <!-- Checkin Confirmation Modal -->
+    <div id="checkin-confirm-modal" class="modal">
+        <div class="modal-content">
+            <span class="modal-close">&times;</span>
+            <div class="checkin-confirm">
+                <div class="checkin-confirm-header">
+                    <div class="checkin-confirm-icon">&#10003;</div>
+                    <h3>Wine Checked In Successfully</h3>
+                </div>
+                <div class="checkin-confirm-content">
+                    <div class="checkin-confirm-image" id="checkin-confirm-image"></div>
+                    <div class="checkin-confirm-details">
+                        <h4 id="checkin-confirm-name"></h4>
+                        <div class="checkin-confirm-fields" id="checkin-confirm-fields"></div>
+                    </div>
+                </div>
+                <div class="checkin-confirm-ocr">
+                    <h5>Extracted Label Text</h5>
+                    <div class="ocr-text-container">
+                        <div class="ocr-section">
+                            <strong>Front Label:</strong>
+                            <pre id="checkin-confirm-front-ocr"></pre>
+                        </div>
+                        <div class="ocr-section" id="checkin-confirm-back-ocr-section" style="display: none;">
+                            <strong>Back Label:</strong>
+                            <pre id="checkin-confirm-back-ocr"></pre>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-actions">
+                    <button type="button" class="btn btn-primary" id="checkin-confirm-done">Done</button>
+                    <button type="button" class="btn btn-secondary" id="checkin-confirm-another">Check In Another</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <footer id="app-footer">
+        <span id="app-info">WineBox</span>
+    </footer>
+
     <!-- Toast Notifications -->
     <div id="toast-container"></div>