5
0
mirror of https://github.com/wailsapp/wails.git synced 2025-05-03 05:30:52 +08:00
wails/v3/examples/screen/assets/index.html
2023-02-15 18:56:52 +11:00

66 lines
1.8 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Screens Demo</title>
<style>
body {
padding-top: 75px;
margin: 0 auto;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
text-align: -webkit-center;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
}
article {
padding: 1em;
}
.monitor {
width: 300px;
height: 150px;
overflow-y: scroll;
border: solid 1em #333;
border-radius: .5em;
background: lightblue;
}
.monitor::-webkit-scrollbar {
width: 15px;
}
.monitor::-webkit-scrollbar-thumb {
background: #666;
}
::-webkit-scrollbar-track {
background-color: #888;
}
.center {
text-align: -webkit-center;
}
</style>
</head>
<body>
<script>
let monitors = wails.Screens.GetAll();
monitors.then((result) => {
console.log({result})
let html = "";
for (let i = 0; i < result.length; i++) {
html += "<article class='center'><div class='monitor'><div style='padding:5px;'>";
let hidpi = result[i].scale === 2 ? " (HiDPI)" : "";
html += "<h3 class='center'>"+result[i].name+"</h3>";
html += "<h4 class='center'>"+hidpi+"</h4>";
html += "<h4 class='center'>"+result[i].size.width+"x"+result[i].size.height+"</h4>";
html += "</div></div></article>";
}
document.body.innerHTML = html;
})
</script>
</body>
</html>