winebox 0.1.2__py3-none-any.whl → 0.1.4__py3-none-any.whl

winebox/static/css/style.css

@@ -555,6 +555,140 @@ h3 {
     max-width: 400px;
 }
 
+.modal-content.modal-large {
+    max-width: 900px;
+}
+
+/* Checkin Confirmation Modal */
+.checkin-confirm-header {
+    text-align: center;
+    margin-bottom: 1.5rem;
+}
+
+.checkin-confirm-header h3 {
+    color: var(--primary-color);
+    margin-bottom: 0.25rem;
+}
+
+.checkin-confirm-subtitle {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+}
+
+.checkin-confirm-content {
+    display: grid;
+    grid-template-columns: 200px 1fr;
+    gap: 1.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.checkin-confirm-image {
+    width: 200px;
+    height: 250px;
+    border-radius: var(--radius);
+    overflow: hidden;
+    border: 1px solid var(--border-color);
+    background: var(--background-color);
+}
+
+.checkin-confirm-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.checkin-confirm-form .form-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+}
+
+.checkin-confirm-form .form-group {
+    margin-bottom: 0;
+}
+
+.checkin-confirm-form .form-group.full-width {
+    grid-column: 1 / -1;
+}
+
+.checkin-confirm-form label {
+    display: block;
+    font-size: 0.85rem;
+    color: var(--text-muted);
+    margin-bottom: 0.25rem;
+}
+
+.checkin-confirm-form input,
+.checkin-confirm-form textarea {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    font-size: 0.95rem;
+}
+
+.checkin-confirm-form textarea {
+    resize: vertical;
+}
+
+.checkin-confirm-ocr {
+    margin-bottom: 1.5rem;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+}
+
+.checkin-confirm-ocr .collapsible-header {
+    padding: 0.75rem 1rem;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--background-color);
+    border-radius: var(--radius);
+}
+
+.checkin-confirm-ocr .collapsible-header:hover {
+    background: #f0ede8;
+}
+
+.checkin-confirm-ocr .collapsible-content {
+    padding: 1rem;
+    border-top: 1px solid var(--border-color);
+}
+
+.checkin-confirm-ocr .ocr-text-container {
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.checkin-confirm-ocr pre {
+    white-space: pre-wrap;
+    font-size: 0.85rem;
+    background: var(--background-color);
+    padding: 0.75rem;
+    border-radius: var(--radius);
+    margin-top: 0.5rem;
+}
+
+@media (max-width: 768px) {
+    .checkin-confirm-content {
+        grid-template-columns: 1fr;
+    }
+
+    .checkin-confirm-image {
+        width: 100%;
+        height: 200px;
+    }
+
+    .checkin-confirm-form .form-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .modal-content.modal-large {
+        max-width: 100%;
+    }
+}
+
 .modal-close {
     position: absolute;
     top: 1rem;
@@ -982,6 +1116,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);
@@ -1009,6 +1178,19 @@ h3 {
     font-weight: 500;
 }
 
+.user-info .username-link {
+    color: rgba(255, 255, 255, 0.9);
+    text-decoration: none;
+    padding: 0.4rem 0.75rem;
+    border-radius: var(--radius);
+    transition: all 0.2s ease;
+}
+
+.user-info .username-link:hover {
+    background: rgba(255, 255, 255, 0.15);
+    color: white;
+}
+
 .user-info .btn {
     padding: 0.4rem 0.75rem;
     font-size: 0.85rem;
@@ -1021,6 +1203,60 @@ h3 {
     background: rgba(255, 255, 255, 0.3);
 }
 
+/* Settings Page */
+.settings-section {
+    background: var(--card-background);
+    border-radius: var(--radius-lg);
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    box-shadow: var(--shadow);
+    border: 1px solid var(--border-color);
+}
+
+.settings-section h3 {
+    color: var(--primary-color);
+    margin-bottom: 1rem;
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.settings-description {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    margin-bottom: 1rem;
+    line-height: 1.5;
+}
+
+.api-key-status {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    background: var(--background-color);
+    border-radius: var(--radius);
+    margin-bottom: 1rem;
+}
+
+.api-key-status .status-indicator {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--text-muted);
+}
+
+.api-key-status.configured .status-indicator {
+    background: var(--success-color);
+}
+
+.api-key-status.not-configured .status-indicator {
+    background: var(--warning-color);
+}
+
+.api-key-status .status-text {
+    font-size: 0.9rem;
+    color: var(--text-color);
+}
+
 /* Hide main content when not logged in */
 body.logged-out main {
     display: none;
@@ -1084,3 +1320,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>