Import Vector lab project
This commit is contained in:
root
@@ -0,0 +1,398 @@
|
||||
.analysis-result {
|
||||
min-height: 100vh;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.result-header {
|
||||
background: linear-gradient(135deg, rgba(255, 77, 0, 0.1) 0%, rgba(255, 77, 0, 0.05) 100%);
|
||||
border-bottom: 2px solid rgba(255, 77, 0, 0.3);
|
||||
padding: 32px 24px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.result-header h1 {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 16px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
color: var(--accent);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.case-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
font-size: 16px;
|
||||
color: var(--text-secondary);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.separator {
|
||||
color: rgba(255, 77, 0, 0.5);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.result-content {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px 48px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
/* Urgency Block */
|
||||
.urgency-block {
|
||||
padding: 24px;
|
||||
border-radius: 12px;
|
||||
border: 2px solid;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.urgency-block.urgency-высокий {
|
||||
background: rgba(255, 77, 0, 0.15);
|
||||
border-color: #ff4d00;
|
||||
}
|
||||
|
||||
.urgency-block.urgency-средний {
|
||||
background: rgba(255, 159, 26, 0.15);
|
||||
border-color: #ff9f1a;
|
||||
}
|
||||
|
||||
.urgency-block.urgency-стандартный {
|
||||
background: rgba(255, 209, 102, 0.15);
|
||||
border-color: #ffd166;
|
||||
}
|
||||
|
||||
.urgency-level {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.urgency-block.urgency-высокий .urgency-level {
|
||||
color: #ff4d00;
|
||||
}
|
||||
|
||||
.urgency-block.urgency-средний .urgency-level {
|
||||
color: #ff9f1a;
|
||||
}
|
||||
|
||||
.urgency-block.urgency-стандартный .urgency-level {
|
||||
color: #ffd166;
|
||||
}
|
||||
|
||||
.urgency-reason {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Info Cards */
|
||||
.info-card {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid rgba(255, 77, 0, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.info-card h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 20px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.info-card p {
|
||||
margin: 12px 0;
|
||||
line-height: 1.8;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.info-card p strong {
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info-card hr {
|
||||
margin: 16px 0;
|
||||
border: none;
|
||||
border-top: 1px solid rgba(255, 77, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Distance Info */
|
||||
.distance-info {
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.distance-value {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
background: rgba(255, 77, 0, 0.1);
|
||||
border-radius: 12px;
|
||||
border: 2px solid rgba(255, 77, 0, 0.3);
|
||||
}
|
||||
|
||||
.distance-details {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.distance-details p {
|
||||
padding: 12px 16px;
|
||||
background: rgba(255, 77, 0, 0.05);
|
||||
border-radius: 8px;
|
||||
border-left: 3px solid var(--accent);
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* Zones Section */
|
||||
.zones-section {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid rgba(255, 77, 0, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.zones-section h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 24px 0;
|
||||
}
|
||||
|
||||
.zones-list {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.zone-card {
|
||||
background: rgba(255, 77, 0, 0.05);
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
border-left: 4px solid;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.zone-card:hover {
|
||||
background: rgba(255, 77, 0, 0.08);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.zone-card.priority-1 {
|
||||
border-left-color: #ff4d00;
|
||||
background: rgba(255, 77, 0, 0.1);
|
||||
}
|
||||
|
||||
.zone-card.priority-2 {
|
||||
border-left-color: #ff9f1a;
|
||||
}
|
||||
|
||||
.zone-card.priority-3 {
|
||||
border-left-color: #ffd166;
|
||||
}
|
||||
|
||||
.zone-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.zone-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.zone-priority {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: var(--accent);
|
||||
color: var(--bg-primary);
|
||||
border-radius: 50%;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.zone-name {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.zone-score {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.zone-details {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.zone-details .separator {
|
||||
color: rgba(255, 77, 0, 0.5);
|
||||
}
|
||||
|
||||
.zone-reasoning {
|
||||
padding: 12px 16px;
|
||||
background: rgba(255, 77, 0, 0.08);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Map Section */
|
||||
.map-section {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid rgba(255, 77, 0, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.map-section h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.map-info {
|
||||
margin-top: 16px;
|
||||
padding: 16px;
|
||||
background: rgba(255, 77, 0, 0.05);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.map-info p {
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
/* Loading & Error States */
|
||||
.loading-state,
|
||||
.error-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
gap: 24px;
|
||||
padding: 48px 24px;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 4px solid rgba(255, 77, 0, 0.2);
|
||||
border-top-color: var(--accent);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.error-state h2 {
|
||||
font-size: 24px;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.error-state p {
|
||||
font-size: 16px;
|
||||
color: var(--text-secondary);
|
||||
margin: 8px 0 24px;
|
||||
}
|
||||
|
||||
.error-state button {
|
||||
padding: 12px 24px;
|
||||
background: var(--accent);
|
||||
color: var(--bg-primary);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.error-state button:hover {
|
||||
background: #ff6a1a;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.result-header {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.result-header h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.result-content {
|
||||
padding: 0 16px 32px;
|
||||
}
|
||||
|
||||
.distance-value {
|
||||
font-size: 36px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.zone-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.zone-score {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.case-info {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.separator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user