6823676e14
Introduced a new tool for visualizing UI dumps, enabling users to upload XML and image files for inspection. The implementation includes an HTML structure, styled with CSS, and JavaScript for processing files and rendering elements dynamically onto a canvas. This provides a lightweight and functional interface for visual analysis.
73 lines
1.2 KiB
CSS
73 lines
1.2 KiB
CSS
body, html {
|
|
margin: 0;
|
|
height: 100%;
|
|
font-family: sans-serif;
|
|
background-color: #f4f4f4; /* вернули светлый фон */
|
|
color: #333;
|
|
}
|
|
|
|
#layout {
|
|
display: flex;
|
|
height: 100vh;
|
|
}
|
|
|
|
#sidebar {
|
|
width: 250px;
|
|
padding: 20px;
|
|
background: #ffffff; /* светлая боковая панель */
|
|
border-right: 1px solid #ccc;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#sidebar h3, label {
|
|
color: #333;
|
|
}
|
|
|
|
#sidebar input[type="file"] {
|
|
background: #fff;
|
|
color: #000;
|
|
border: 1px solid #ccc;
|
|
padding: 6px;
|
|
margin-top: 4px;
|
|
width: 100%;
|
|
}
|
|
|
|
#content {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
overflow: auto;
|
|
padding: 50px 20px;
|
|
box-sizing: border-box;
|
|
gap: 20px;
|
|
background-color: #f4f4f4;
|
|
}
|
|
|
|
#canvas {
|
|
position: relative;
|
|
background: #2a2a2a; /* серый фон области дампа */
|
|
border: 1px solid #444;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#screenshot-container {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#screenshot {
|
|
max-height: calc(100vh - 100px);
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
.rect {
|
|
position: absolute;
|
|
border: 1px dashed #ff9800;
|
|
background: transparent;
|
|
color: #ff9800;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
|