Crowdsourced Mapping for Autonomous Vehicles Road Test

css/cyberpunk.css

@@ -0,0 +1,228 @@
+:root {
+    --neon-blue: #00FFFF;
+    --neon-purple: #FF00FF;
+    --neon-green: #00FF00;
+    --dark-bg: #0B1A2F;
+    --glow: 0 0 10px var(--neon-blue);
+    --glow-purple: 0 0 10px var(--neon-purple);
+    --glow-strong: 0 0 20px var(--neon-blue);
+    }
+
+    @keyframes neonGlow {
+    0% { box-shadow: 0 0 5px var(--neon-blue); }
+    50% { box-shadow: 0 0 20px var(--neon-blue); }
+    100% { box-shadow: 0 0 5px var(--neon-blue); }
+    }
+
+    @keyframes textGlow {
+    0% { text-shadow: 0 0 5px var(--neon-blue); }
+    50% { text-shadow: 0 0 20px var(--neon-blue); }
+    100% { text-shadow: 0 0 5px var(--neon-blue); }
+    }
+
+    .cyberpunk-button {
+    background: transparent;
+    border: 1px solid var(--neon-blue);
+    color: var(--neon-blue);
+    padding: 10px 20px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-transform: uppercase;
+    font-size: 14px;
+    letter-spacing: 2px;
+    position: relative;
+    overflow: hidden;
+    margin: 5px;
+    border-radius: 3px;
+    }
+
+    .cyberpunk-button:hover {
+    background: var(--neon-blue);
+    color: var(--dark-bg);
+    box-shadow: var(--glow-strong);
+    transform: translateY(-2px);
+    }
+
+    .cyberpunk-button:active {
+    transform: translateY(1px);
+    }
+
+    .cyberpunk-button.cancel {
+    border-color: var(--neon-purple);
+    color: var(--neon-purple);
+    }
+
+    .cyberpunk-button.cancel:hover {
+    background: var(--neon-purple);
+    color: var(--dark-bg);
+    box-shadow: var(--glow-purple);
+    }
+
+
+    .cyberpunk-panel {
+    box-shadow: var(--glow);
+    backdrop-filter: blur(5px);
+    animation: neonGlow 2s infinite;
+    }
+
+    .cyberpunk-form {
+    box-shadow: var(--glow);
+    backdrop-filter: blur(10px);
+    }
+
+    .cyberpunk-form h2 {
+    color: var(--neon-blue);
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    text-align: center;
+    margin-bottom: 20px;
+    animation: textGlow 2s infinite;
+    font-size: 24px;
+    }
+
+
+    .cyberpunk-select {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background: rgba(0, 0, 0, 0.7);
+    border: 1px solid var(--neon-blue);
+    border-radius: 4px;
+    padding: 10px 35px 10px 10px;
+    color: #fff;
+    width: 100%;
+    cursor: pointer;
+    font-size: 14px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2300FFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+    background-size: 16px;
+    transition: all 0.3s ease;
+    }
+
+    .cyberpunk-select:hover {
+    border-color: var(--neon-blue);
+    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
+    }
+
+    .cyberpunk-select:focus {
+    outline: none;
+    border-color: var(--neon-purple);
+    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
+    }
+
+    /* Description textarea styles */
+    .cyberpunk-textarea {
+    background: rgba(0, 0, 0, 0.7) !important;
+    color: #fff !important;
+    transition: all 0.3s ease;
+    border: 1px solid var(--neon-blue);
+    padding: 10px;
+    border-radius: 4px;
+    width: 100%;
+    min-height: 100px;
+    resize: vertical;
+    font-family: 'Arial', sans-serif;
+    }
+
+    .cyberpunk-textarea[readonly] {
+    cursor: not-allowed;
+    opacity: 0.7;
+    border-color: rgba(0, 255, 255, 0.3);
+    }
+
+    .cyberpunk-textarea:not([readonly]) {
+    cursor: text;
+    opacity: 1;
+    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
+    }
+
+    .cyberpunk-textarea:focus {
+    outline: none;
+    border-color: var(--neon-purple);
+    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
+    }
+
+    .cyberpunk-textarea::placeholder {
+    color: rgba(0, 255, 255, 0.5);
+    }
+
+    .cyberpunk-textarea[readonly]::placeholder {
+    color: rgba(0, 255, 255, 0.3);
+    }
+
+    .cyberpunk-select option {
+    background-color: rgba(11, 26, 47, 0.95);
+    color: #fff;
+    padding: 10px;
+    }
+
+
+    .marker-item {
+    border: 1px solid var(--neon-blue);
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+    }
+
+    .marker-item:hover {
+    box-shadow: var(--glow);
+    transform: translateX(5px);
+    }
+
+    .marker-item::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, var(--neon-blue));
+    animation: animate 2s linear infinite;
+    }
+
+
+    @keyframes animate {
+    0% { left: -100%; }
+    50%, 100% { left: 100%; }
+    }
+
+
+    .notification-container {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 9999;
+    }
+
+    .notification {
+    background: rgba(11, 26, 47, 0.95);
+    border-left: 4px solid var(--neon-blue);
+    color: #fff;
+    padding: 15px 20px;
+    margin-bottom: 10px;
+    border-radius: 4px;
+    box-shadow: var(--glow);
+    transform: translateX(120%);
+    transition: transform 0.3s ease;
+    min-width: 300px;
+    }
+
+    .notification.show {
+    transform: translateX(0);
+    }
+
+    .notification.error {
+    border-left-color: var(--neon-purple);
+    }
+
+
+    .marker-icon.temporary {
+    animation: pulseGlow 1s infinite alternate;
+    }
+
+    @keyframes pulseGlow {
+    0% { box-shadow: 0 0 5px rgba(0, 255, 255, 0.5); }
+    100% { box-shadow: 0 0 20px rgba(0, 255, 255, 0.8); }
+    }
+