diff --git a/css/styles.css b/css/styles.css index c7eb603..f7e70f4 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1277,6 +1277,202 @@ body { color: var(--text-main); } +/* Directory Specific Camera Nodes & Hardware Images Grid */ +.directory-cameras-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + gap: 20px; + margin-bottom: 24px; +} + +.dir-cam-card { + background: rgba(15, 23, 42, 0.85); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(56, 189, 248, 0.25); + border-radius: var(--radius-lg); + overflow: hidden; + display: flex; + flex-direction: column; + transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; + position: relative; +} + +.dir-cam-card:hover { + transform: translateY(-4px); + border-color: #38bdf8; + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(6, 182, 212, 0.2); +} + +.dir-cam-image-container { + width: 100%; + height: 180px; + background: #090d16; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +.dir-cam-img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s ease; + cursor: pointer; +} + +.dir-cam-card:hover .dir-cam-img { + transform: scale(1.04); +} + +.dir-cam-placeholder { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 8px; + background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.9)); + color: #94a3b8; + padding: 16px; + text-align: center; +} + +.dir-cam-placeholder-icon { + font-size: 2.2rem; + opacity: 0.8; +} + +.dir-cam-badge { + position: absolute; + top: 10px; + left: 10px; + font-size: 0.72rem; + font-weight: 700; + padding: 4px 10px; + border-radius: 9999px; + backdrop-filter: blur(8px); + z-index: 2; +} + +.dir-cam-badge.verified { + background: rgba(16, 185, 129, 0.85); + color: #fff; + border: 1px solid #34d399; +} + +.dir-cam-badge.unverified { + background: rgba(245, 158, 11, 0.85); + color: #fff; + border: 1px solid #fcd34d; +} + +.dir-cam-body { + padding: 18px 20px; + display: flex; + flex-direction: column; + flex-grow: 1; + justify-content: space-between; +} + +.dir-cam-intersection { + font-family: var(--font-heading); + font-size: 1.05rem; + font-weight: 700; + color: #ffffff; + margin-bottom: 6px; + line-height: 1.35; +} + +.dir-cam-agency-meta { + font-size: 0.82rem; + color: #38bdf8; + margin-bottom: 12px; + display: flex; + align-items: center; + gap: 6px; +} + +.dir-cam-specs-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: 8px; + padding: 10px 12px; + margin-bottom: 16px; +} + +.dir-cam-spec-item { + display: flex; + flex-direction: column; +} + +.dir-cam-spec-label { + font-size: 0.65rem; + color: #94a3b8; + font-family: var(--font-mono); + letter-spacing: 0.05em; +} + +.dir-cam-spec-val { + font-size: 0.82rem; + font-weight: 700; + color: #f1f5f9; +} + +.dir-cam-actions { + display: grid; + grid-template-columns: 1.2fr 1fr; + gap: 8px; +} + +.btn-dir-cam-jump { + background: linear-gradient(135deg, #06b6d4, #0284c7); + color: #ffffff; + border: none; + border-radius: 8px; + padding: 9px 12px; + font-size: 0.82rem; + font-weight: 700; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + transition: all 0.2s ease; +} + +.btn-dir-cam-jump:hover { + background: linear-gradient(135deg, #0891b2, #0369a1); + box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4); +} + +.btn-dir-cam-details { + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(255, 255, 255, 0.15); + color: #e2e8f0; + border-radius: 8px; + padding: 9px 12px; + font-size: 0.82rem; + font-weight: 600; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + transition: all 0.2s ease; +} + +.btn-dir-cam-details:hover { + background: rgba(255, 255, 255, 0.12); +} + /* Portals Grid */ .portals-grid { display: grid; diff --git a/index.html b/index.html index 13c291e..f45c38f 100644 --- a/index.html +++ b/index.html @@ -28,7 +28,7 @@ - +
@@ -487,6 +487,30 @@ + + + @@ -1031,10 +1055,10 @@ - - - - + + + +