diff --git a/index.html b/index.html index c1a1e4c..49cf4b6 100644 --- a/index.html +++ b/index.html @@ -962,6 +962,94 @@ body { background: var(--gray-50); } +/* Photo upload */ +.photo-upload { + display: flex; + align-items: center; + gap: 10px; + flex-wrap: wrap; +} + +.photo-upload input[type="file"] { + display: none; +} + +.photo-label { + display: inline-block; + padding: 8px 18px; + background: var(--gray-100); + border: 1px solid var(--gray-200); + border-radius: 8px; + font-size: 14px; + font-weight: 600; + cursor: pointer; + color: var(--ink); + transition: border-color 0.15s; +} + +.photo-label:hover { + border-color: var(--blue); + background: var(--blue-50); +} + +.photo-name { + font-size: 13px; + color: var(--gray-500); + max-width: 200px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.photo-clear { + background: none; + border: none; + font-size: 20px; + color: var(--red); + cursor: pointer; + line-height: 1; + padding: 0 4px; +} + +.photo-preview img { + max-width: 200px; + max-height: 150px; + border-radius: 8px; + border: 1px solid var(--gray-200); + margin-top: 8px; +} + +.entry-photo { + width: 48px; + height: 48px; + border-radius: 6px; + object-fit: cover; + border: 1px solid var(--gray-200); + flex-shrink: 0; + cursor: pointer; +} + +.photo-viewer { + display: none; + position: fixed; + top: 0; left: 0; right: 0; bottom: 0; + background: rgba(0,0,0,0.85); + z-index: 9999; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.photo-viewer.active { + display: flex; +} + +.photo-viewer img { + max-width: 90vw; + max-height: 90vh; + border-radius: 8px; +} + /* Mobile */ @media (max-width: 640px) { .hero { padding: 64px 0 48px; } @@ -1210,6 +1298,16 @@ body { +