Traceroute Visualizer
.tool-header {
margin-bottom: 30px;
padding: 25px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
color: white;
}
.tool-header h2 {
margin-top: 0;
color: white;
font-size: 28px;
margin-bottom: 10px;
}
.tool-header p {
margin: 10px 0;
opacity: 0.95;
font-size: 15px;
}
.input-section {
background: white;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.input-section label {
display: block;
font-weight: bold;
color: #333;
margin-bottom: 10px;
font-size: 16px;
}
#tracerouteInput {
width: 100%;
min-height: 200px;
padding: 15px;
font-family: 'Courier New', monospace;
font-size: 13px;
border: 2px solid #ddd;
border-radius: 6px;
resize: vertical;
background: #f9f9f9;
transition: all 0.3s ease;
}
#tracerouteInput:focus {
outline: none;
border-color: #667eea;
background: white;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.button-group {
display: flex;
gap: 10px;
margin-top: 15px;
}
.btn {
padding: 12px 30px;
font-size: 16px;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.btn-primary {
background: #4CAF50;
color: white;
}
.btn-primary:hover {
background: #45a049;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.btn-secondary {
background: #f44336;
color: white;
}
.btn-secondary:hover {
background: #da190b;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.btn:disabled {
background: #ccc;
cursor: not-allowed;
transform: none;
}
.status-message {
margin-top: 15px;
padding: 12px 20px;
border-radius: 6px;
font-size: 14px;
display: none;
}
.status-message.info {
background: #e3f2fd;
color: #1976d2;
border: 1px solid #90caf9;
display: block;
}
.status-message.success {
background: #e8f5e9;
color: #2e7d32;
border: 1px solid #81c784;
display: block;
}
.status-message.error {
background: #ffebee;
color: #c62828;
border: 1px solid #ef9a9a;
display: block;
}
.stats-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
.stat-card {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
text-align: center;
}
.stat-card .stat-value {
font-size: 32px;
font-weight: bold;
color: #667eea;
margin-bottom: 5px;
}
.stat-card .stat-label {
font-size: 14px;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.visualization-section {
background: white;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
display: none;
}
.visualization-section.show {
display: block;
}
.viz-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.viz-header h3 {
margin: 0;
}
.view-toggle {
display: flex;
gap: 5px;
background: #f0f0f0;
padding: 4px;
border-radius: 8px;
}
.view-toggle button {
padding: 8px 20px;
border: none;
background: transparent;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
color: #666;
}
.view-toggle button.active {
background: white;
color: #667eea;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.view-toggle button:hover:not(.active) {
color: #333;
}
#mapView, #graphView {
display: none;
}
#mapView.active, #graphView.active {
display: block;
}
#map {
width: 100%;
height: 600px;
border-radius: 6px;
z-index: 1;
}
#graphVisualization {
width: 100%;
height: 600px;
border: 1px solid #e0e0e0;
border-radius: 6px;
background: #fafafa;
}
.map-legend {
background: white;
padding: 15px;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
font-size: 13px;
line-height: 1.8;
}
.map-legend h4 {
margin: 0 0 10px 0;
font-size: 14px;
color: #333;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.legend-color {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid white;
box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}
.legend-color.public { background: #4CAF50; }
.legend-color.timeout { background: #ef9a9a; }
.legend-line {
width: 30px;
height: 3px;
background: #667eea;
border-radius: 2px;
}
.info-note {
margin-top: 10px;
padding: 8px;
background: #fff3cd;
border: 1px solid #ffc107;
border-radius: 4px;
font-size: 12px;
color: #856404;
}
.hop-table-section {
background: white;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
display: none;
}
.hop-table-section.show {
display: block;
}
.hop-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.hop-table th {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 12px;
text-align: left;
font-weight: bold;
position: sticky;
top: 0;
}
.hop-table td {
padding: 12px;
border-bottom: 1px solid #e0e0e0;
}
.hop-table tr:hover {
background: #f5f5f5;
}
.hop-table .hop-num {
font-weight: bold;
color: #667eea;
width: 60px;
}
.hop-table .ip-address {
font-family: 'Courier New', monospace;
color: #333;
}
.hop-table .latency {
color: #4CAF50;
font-family: 'Courier New', monospace;
}
.hop-table .location {
color: #666;
}
.badge {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: bold;
margin-left: 5px;
}
.badge-private {
background: #ffd54f;
color: #f57f17;
}
.badge-timeout {
background: #ef9a9a;
color: #c62828;
}
.node {
cursor: pointer;
}
.node circle {
stroke: #fff;
stroke-width: 2px;
}
.node.private circle {
fill: #ffd54f;
}
.node.public circle {
fill: #4CAF50;
}
.node.timeout circle {
fill: #ef9a9a;
}
.node text {
font-size: 12px;
font-weight: bold;
pointer-events: none;
}
.link {
fill: none;
stroke: #999;
stroke-width: 2px;
stroke-opacity: 0.6;
}
.link.highlight {
stroke: #667eea;
stroke-width: 3px;
stroke-opacity: 1;
}
.tooltip {
position: absolute;
background: rgba(0, 0, 0, 0.9);
color: white;
padding: 12px 16px;
border-radius: 6px;
font-size: 13px;
pointer-events: none;
z-index: 10000;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
max-width: 300px;
display: none;
}
.tooltip .tooltip-hop {
font-size: 18px;
font-weight: bold;
color: #667eea;
margin-bottom: 8px;
}
.tooltip .tooltip-row {
margin: 4px 0;
display: flex;
justify-content: space-between;
gap: 10px;
}
.tooltip .tooltip-label {
color: #aaa;
}
.tooltip .tooltip-value {
color: white;
font-family: 'Courier New', monospace;
}
/* Leaflet popup customization */
.leaflet-popup-content-wrapper {
border-radius: 8px;
}
.hop-popup {
min-width: 200px;
}
.hop-popup h4 {
margin: 0 0 10px 0;
color: #667eea;
font-size: 16px;
}
.hop-popup .info-row {
margin: 6px 0;
font-size: 13px;
}
.hop-popup .info-label {
font-weight: bold;
color: #666;
display: inline-block;
min-width: 80px;
}
.hop-popup .info-value {
color: #333;
font-family: 'Courier New', monospace;
}
/* Pulsing animation for source marker */
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
}
}
.pulse-marker {
animation: pulse 2s infinite;
}
@media (max-width: 768px) {
.stats-section {
grid-template-columns: 1fr 1fr;
}
.hop-table {
font-size: 12px;
}
#map, #graphVisualization {
height: 400px;
}
.viz-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
Traceroute Visualizer
Klistra in din traceroute-utgång för att visualisera nätverksvägen med geografisk information, ISP-detaljer och latensanalys.
Stöds:traceroute (macOS/Linux/Windows), tracert (Windows), tracepath
Visualisering av nätverksvägar
Hoppdetaljer
| Hoppa | IP-adress | Värdnamn | Plats | ISP/organisation | Latens |
|---|