bag_recorder_frontend
1.7 KB•HTML
index.html
1.7 KB • 66 lines • xml
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>ROS2 Bag Recorder</title>
8 <meta name="description" content="Web interface for recording ROS2 bag files" />
9 <style>
10 /* Basic reset and loading styles */
11 * {
12 margin: 0;
13 padding: 0;
14 box-sizing: border-box;
15 }
16
17 body {
18 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
19 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
20 sans-serif;
21 -webkit-font-smoothing: antialiased;
22 -moz-osx-font-smoothing: grayscale;
23 background-color: #f5f5f5;
24 color: #333;
25 }
26
27 #root {
28 min-height: 100vh;
29 }
30
31 /* Loading spinner */
32 .loading {
33 display: flex;
34 justify-content: center;
35 align-items: center;
36 height: 100vh;
37 font-size: 18px;
38 color: #666;
39 }
40
41 .spinner {
42 border: 4px solid #f3f3f3;
43 border-top: 4px solid #3498db;
44 border-radius: 50%;
45 width: 40px;
46 height: 40px;
47 animation: spin 1s linear infinite;
48 margin-right: 16px;
49 }
50
51 @keyframes spin {
52 0% { transform: rotate(0deg); }
53 100% { transform: rotate(360deg); }
54 }
55 </style>
56 </head>
57 <body>
58 <div id="root">
59 <div class="loading">
60 <div class="spinner"></div>
61 Loading ROS2 Bag Recorder...
62 </div>
63 </div>
64 <script type="module" src="/src/main.tsx"></script>
65 </body>
66</html>