diff --git a/grantstream.html b/grantstream.html index 25ad411..39f0994 100644 --- a/grantstream.html +++ b/grantstream.html @@ -837,6 +837,216 @@ color: var(--text2); border: 1px solid var(--border); } + + /* ── IPFS UPLOADER ──────────────────────────────────────────────── */ + .ipfs-uploader { + border: 1px solid var(--border2); + border-radius: var(--radius); + overflow: hidden; + } + + .ipfs-tabs { + display: flex; + border-bottom: 1px solid var(--border); + background: var(--surface2); + } + + .ipfs-tab { + flex: 1; padding: 8px 14px; + font-size: 0.78rem; font-weight: 600; + color: var(--text3); + background: transparent; border: none; + cursor: pointer; transition: all 0.15s; + font-family: var(--sans); + } + + .ipfs-tab.active { + color: var(--green); + background: var(--green-glow); + border-bottom: 2px solid var(--green); + } + + .ipfs-tab:hover:not(.active) { color: var(--text2); } + + .ipfs-pane { padding: 14px; display: none; } + .ipfs-pane.active { display: block; } + + .drop-zone { + border: 2px dashed var(--border2); + border-radius: var(--radius); + padding: 28px 16px; + text-align: center; + cursor: pointer; + transition: all 0.2s; + position: relative; + } + + .drop-zone:hover, + .drop-zone.dragover { + border-color: var(--green-dim); + background: var(--green-glow); + } + + .drop-zone input[type="file"] { + position: absolute; inset: 0; + opacity: 0; cursor: pointer; width: 100%; height: 100%; + } + + .drop-icon { font-size: 1.8rem; margin-bottom: 8px; } + + .drop-label { + font-size: 0.82rem; color: var(--text2); + } + + .drop-hint { + font-size: 0.72rem; color: var(--text3); margin-top: 4px; + } + + .upload-file-info { + display: none; + align-items: center; gap: 10px; + padding: 10px 12px; + background: var(--surface2); + border: 1px solid var(--border); + border-radius: var(--radius); + margin-top: 10px; + font-size: 0.8rem; + } + + .upload-file-info.visible { display: flex; } + + .file-info-name { + flex: 1; color: var(--text2); + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + } + + .file-info-size { color: var(--text3); flex-shrink: 0; } + + .file-remove { + background: none; border: none; color: var(--text3); + cursor: pointer; font-size: 1rem; padding: 0 2px; + line-height: 1; flex-shrink: 0; + } + + .file-remove:hover { color: #f87171; } + + .upload-btn { + margin-top: 10px; width: 100%; + display: flex; align-items: center; justify-content: center; gap: 8px; + } + + .upload-progress { + display: none; + margin-top: 10px; + } + + .upload-progress.visible { display: block; } + + .progress-bar-wrap { + height: 4px; background: var(--border); + border-radius: 2px; overflow: hidden; margin-bottom: 6px; + } + + .progress-bar-fill { + height: 100%; background: var(--green); + border-radius: 2px; width: 0%; + transition: width 0.3s ease; + } + + .progress-label { + font-size: 0.72rem; color: var(--text3); + text-align: center; + } + + .cid-result { + display: none; + margin-top: 10px; + padding: 10px 12px; + background: rgba(74,222,128,0.05); + border: 1px solid var(--green-dim); + border-radius: var(--radius); + } + + .cid-result.visible { display: block; } + + .cid-label { + font-size: 0.7rem; color: var(--green); font-weight: 600; + text-transform: uppercase; letter-spacing: 0.06em; + margin-bottom: 4px; display: flex; align-items: center; gap: 6px; + } + + .cid-value { + font-family: var(--mono); font-size: 0.75rem; color: var(--text2); + word-break: break-all; line-height: 1.5; + } + + .cid-copy { + background: none; border: 1px solid var(--border); + border-radius: 4px; color: var(--text3); + font-size: 0.7rem; padding: 2px 8px; + cursor: pointer; margin-left: auto; + font-family: var(--sans); + } + + .cid-copy:hover { color: var(--green); border-color: var(--green-dim); } + + .link-row { + display: flex; gap: 8px; align-items: center; + } + + .link-row .form-input { margin: 0; } + + .link-validate-btn { + flex-shrink: 0; + padding: 10px 14px; + border-radius: var(--radius); + background: var(--surface2); + border: 1px solid var(--border2); + color: var(--text2); + font-size: 0.8rem; font-weight: 600; + cursor: pointer; font-family: var(--sans); + white-space: nowrap; + } + + .link-validate-btn:hover { border-color: var(--green-dim); color: var(--green); } + + .link-hint { + font-size: 0.72rem; color: var(--text3); margin-top: 6px; + line-height: 1.5; + } + + .link-hint.valid { color: var(--green); } + .link-hint.invalid { color: #f87171; } + + .evidence-preview { + display: none; + margin-top: 10px; + padding: 10px 12px; + background: var(--surface2); + border: 1px solid var(--border); + border-radius: var(--radius); + font-size: 0.8rem; + } + + .evidence-preview.visible { display: flex; align-items: center; gap: 10px; } + + .evidence-preview-icon { font-size: 1.2rem; flex-shrink: 0; } + + .evidence-preview-url { + font-family: var(--mono); font-size: 0.72rem; color: var(--text2); + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; + } + + .evidence-preview-link { + font-size: 0.72rem; color: var(--green); flex-shrink: 0; + text-decoration: none; + } + + .evidence-preview-link:hover { text-decoration: underline; } + + /* submit milestone modal */ + #submit-milestone-modal .modal { width: 540px; } +
@@ -1433,10 +1643,130 @@