103 lines
2.2 KiB
HTML
103 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AutoCAD Block Timeline</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<style>
|
|
.connection-bar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: #f5f5f5;
|
|
padding: 8px 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid #ddd;
|
|
z-index: 100;
|
|
}
|
|
|
|
.status-indicator {
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
margin-right: 10px;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-indicator.connected {
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
}
|
|
|
|
.status-indicator.connecting {
|
|
background-color: #2196F3;
|
|
color: white;
|
|
}
|
|
|
|
.status-indicator.disconnected {
|
|
background-color: #F44336;
|
|
color: white;
|
|
}
|
|
|
|
.status-indicator.waiting {
|
|
background-color: #FF9800;
|
|
color: white;
|
|
}
|
|
|
|
.status-indicator.failed {
|
|
background-color: #9E9E9E;
|
|
color: white;
|
|
}
|
|
|
|
#reconnect-button {
|
|
border: none;
|
|
background-color: #2196F3;
|
|
color: white;
|
|
padding: 5px 10px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin-left: 10px;
|
|
display: none;
|
|
}
|
|
|
|
#reconnect-button:hover {
|
|
background-color: #0b7dda;
|
|
}
|
|
|
|
/* Add padding to body to make room for the connection bar */
|
|
body {
|
|
padding-top: 40px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="connection-bar">
|
|
<div id="connection-status" class="status-indicator">Not connected</div>
|
|
<button id="reconnect-button">Reconnect</button>
|
|
</div>
|
|
|
|
<h1>AutoCAD Block Timeline</h1>
|
|
|
|
<div class="container">
|
|
<div class="block-list">
|
|
<h2>Blocks</h2>
|
|
<div id="blocks"></div>
|
|
</div>
|
|
|
|
<div class="timeline-view">
|
|
<div id="blockInfo" class="block-info"></div>
|
|
<div id="blockTimeline" class="timeline-container"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="notification" class="notification">
|
|
<span id="notification-message"></span>
|
|
</div>
|
|
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html> |