feat: add manual photo proof capture, consensus voting, and anti-sabotage camera verification engine
This commit is contained in:
+348
@@ -2135,4 +2135,352 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
PHOTO EVIDENCE & DEMOCRATIC VERIFICATION ENGINE
|
||||
========================================================================== */
|
||||
|
||||
.hardware-proof-dialog {
|
||||
max-width: 580px;
|
||||
width: 92vw;
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(56, 189, 248, 0.25);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(6, 182, 212, 0.15);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cam-verification-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.cam-verification-badge.badge-verified {
|
||||
background: rgba(16, 185, 129, 0.15);
|
||||
border: 1px solid #10b981;
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
.cam-verification-badge.badge-unverified {
|
||||
background: rgba(245, 158, 11, 0.15);
|
||||
border: 1px solid #f59e0b;
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.cam-verification-badge.badge-contested {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
border: 1px solid #ef4444;
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
/* Proof Photo Container */
|
||||
.proof-photo-container {
|
||||
width: 100%;
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
background: rgba(8, 12, 20, 0.6);
|
||||
}
|
||||
|
||||
.proof-photo-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-height: 300px;
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(56, 189, 248, 0.3);
|
||||
}
|
||||
|
||||
.proof-photo-img {
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: transform 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.proof-photo-img:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.proof-photo-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
|
||||
padding: 12px 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
font-size: 0.78rem;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.proof-photo-author {
|
||||
font-weight: 600;
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
.proof-photo-date {
|
||||
color: #94a3b8;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
/* Empty Photo Prompt State */
|
||||
.proof-empty-box {
|
||||
padding: 24px 20px;
|
||||
text-align: center;
|
||||
border: 1px dashed rgba(148, 163, 184, 0.25);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(15, 23, 42, 0.5);
|
||||
}
|
||||
|
||||
.proof-empty-icon {
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.proof-empty-title {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
color: #f8fafc;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.proof-empty-desc {
|
||||
font-size: 0.82rem;
|
||||
color: #94a3b8;
|
||||
line-height: 1.5;
|
||||
max-width: 440px;
|
||||
margin: 0 auto 16px auto;
|
||||
}
|
||||
|
||||
.btn-proof-snap-cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: linear-gradient(135deg, #06b6d4, #0284c7);
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
padding: 12px 22px;
|
||||
border-radius: 30px;
|
||||
font-weight: 600;
|
||||
font-size: 0.88rem;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 15px rgba(6, 182, 212, 0.35);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-proof-snap-cta:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(6, 182, 212, 0.5);
|
||||
}
|
||||
|
||||
/* Specs Grid */
|
||||
.proof-specs-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.proof-spec-card {
|
||||
background: rgba(30, 41, 59, 0.5);
|
||||
border: 1px solid rgba(148, 163, 184, 0.1);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.proof-spec-card .spec-label {
|
||||
display: block;
|
||||
font-size: 0.68rem;
|
||||
color: #94a3b8;
|
||||
letter-spacing: 0.04em;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.proof-spec-card .spec-val {
|
||||
display: block;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
/* Consensus Banner */
|
||||
.proof-consensus-banner {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
margin-top: 16px;
|
||||
padding: 12px 14px;
|
||||
background: rgba(14, 116, 144, 0.12);
|
||||
border-left: 3px solid #06b6d4;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.proof-consensus-banner .consensus-icon {
|
||||
font-size: 1.3rem;
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.proof-consensus-banner .consensus-text strong {
|
||||
display: block;
|
||||
font-size: 0.82rem;
|
||||
color: #38bdf8;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.proof-consensus-banner .consensus-text p {
|
||||
font-size: 0.76rem;
|
||||
color: #94a3b8;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Action Buttons Row */
|
||||
.proof-actions-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1.4fr 1.3fr 1fr 1fr;
|
||||
gap: 8px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.btn-proof-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 10px 8px;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-confirm-vote {
|
||||
background: rgba(16, 185, 129, 0.18);
|
||||
border: 1px solid #10b981;
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
.btn-confirm-vote:hover {
|
||||
background: #10b981;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.btn-confirm-vote.voted {
|
||||
background: #10b981;
|
||||
color: #0f172a;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.btn-add-photo {
|
||||
background: rgba(6, 182, 212, 0.18);
|
||||
border: 1px solid #06b6d4;
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
.btn-add-photo:hover {
|
||||
background: #06b6d4;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.btn-contest-vote {
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
border: 1px solid rgba(239, 68, 68, 0.4);
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.btn-contest-vote:hover {
|
||||
background: rgba(239, 68, 68, 0.3);
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
.btn-nav-maps {
|
||||
background: rgba(148, 163, 184, 0.12);
|
||||
border: 1px solid rgba(148, 163, 184, 0.25);
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.btn-nav-maps:hover {
|
||||
background: rgba(148, 163, 184, 0.25);
|
||||
}
|
||||
|
||||
.photo-preview-box.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.proof-actions-row {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Photo Verified Pin & Contested Pin on Map */
|
||||
.camera-map-pin.has-photo-pin .cam-dot-center {
|
||||
background: linear-gradient(135deg, #10b981, #059669);
|
||||
box-shadow: 0 0 12px rgba(16, 185, 129, 0.7);
|
||||
}
|
||||
|
||||
.camera-map-pin.has-photo-pin .cam-pulse-wave {
|
||||
border-color: rgba(16, 185, 129, 0.6);
|
||||
}
|
||||
|
||||
.camera-map-pin.is-contested-pin .cam-dot-center {
|
||||
background: linear-gradient(135deg, #f59e0b, #d97706);
|
||||
box-shadow: 0 0 12px rgba(245, 158, 11, 0.7);
|
||||
}
|
||||
|
||||
.camera-map-pin.is-contested-pin .cam-pulse-wave {
|
||||
border-color: rgba(245, 158, 11, 0.6);
|
||||
}
|
||||
|
||||
.pin-photo-dot {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
font-size: 0.7rem;
|
||||
background: rgba(15, 23, 42, 0.9);
|
||||
border: 1px solid #10b981;
|
||||
border-radius: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.5);
|
||||
animation: pulse-photo-dot 2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes pulse-photo-dot {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.15); }
|
||||
}
|
||||
|
||||
.popup-badge.badge-verified-photo {
|
||||
background: rgba(16, 185, 129, 0.2);
|
||||
border: 1px solid #10b981;
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
.popup-badge.badge-contested-tag {
|
||||
background: rgba(245, 158, 11, 0.2);
|
||||
border: 1px solid #f59e0b;
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user