add rich KML support, mitigate KML vulnerabilities

2026-01-11 22:48:50 -07:00
parent eaea2c4edb
commit f985d3433d
8 changed files with 705 additions and 34 deletions
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -793,6 +793,7 @@ body {
    border-color: #ef4444;
    color: #ef4444;
 }
+
 /* Secondary Links (Privacy, etc) */
 .privacy-link-container {
    margin-top: 1.5rem;
@@ -811,3 +812,168 @@ body {
 .secondary-link:hover {
    color: var(--primary);
 }
+
+/* KML Details Overlay Styles */
+.kml-details-card {
+    background: var(--bg-card);
+    border-radius: 16px;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
+    max-width: 900px;
+    width: 95%;
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--border);
+}
+
+.kml-details-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1.5rem 2rem;
+    border-bottom: 2px solid var(--border);
+}
+
+.kml-details-header h2 {
+    font-size: 1.5rem;
+    background: linear-gradient(135deg, var(--primary), var(--secondary));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin: 0;
+}
+
+.kml-details-content {
+    flex: 1;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: row;
+    /* Side by side on desktop */
+}
+
+.kml-preview-map {
+    flex: 1;
+    min-height: 400px;
+    background: #000;
+    border-right: 2px solid var(--border);
+}
+
+.kml-metadata-section {
+    flex: 1;
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    overflow-y: auto;
+    min-width: 300px;
+}
+
+.metadata-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.meta-tag {
+    background: rgba(15, 23, 42, 0.6);
+    padding: 0.5rem 1rem;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    border: 1px solid var(--border);
+    color: var(--text-primary);
+}
+
+.description-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: rgba(15, 23, 42, 0.4);
+    border-radius: 12px;
+    border: 1px solid var(--border);
+    padding: 1rem;
+}
+
+.description-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    border-bottom: 1px solid var(--border);
+    padding-bottom: 0.5rem;
+}
+
+.description-header h3 {
+    font-size: 1.1rem;
+    margin: 0;
+}
+
+.description-text {
+    flex: 1;
+    white-space: pre-wrap;
+    line-height: 1.6;
+    color: var(--text-secondary);
+    font-size: 0.95rem;
+    overflow-y: auto;
+    max-height: 300px;
+}
+
+.description-editor {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.description-editor textarea {
+    width: 100%;
+    height: 200px;
+    background: var(--bg-dark);
+    border: 1px solid var(--border);
+    padding: 1rem;
+    color: var(--text-primary);
+    border-radius: 8px;
+    resize: vertical;
+    font-family: inherit;
+}
+
+.editor-actions {
+    display: flex;
+    gap: 1rem;
+    justify-content: flex-end;
+}
+
+.kml-details-footer {
+    padding: 1.5rem 2rem;
+    border-top: 2px solid var(--border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--bg-card);
+}
+
+.primary-btn.small {
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+}
+
+.primary-btn.large {
+    font-size: 1.2rem;
+    padding: 1rem 3rem;
+    width: auto;
+}
+
+.hidden {
+    display: none !important;
+}
+
+@media (max-width: 900px) {
+    .kml-details-content {
+        flex-direction: column;
+    }
+
+    .kml-preview-map {
+        min-height: 300px;
+        border-right: none;
+        border-bottom: 2px solid var(--border);
+    }
+}