Files
beekeeper-studio/apps/studio/index.html
2025-09-26 18:24:33 +03:00

129 lines
3.7 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Beekeeper-Studio</title>
<script src="./src-commercial/entrypoints/renderer.ts" type="module"></script>
<!-- <link rel="stylesheet" href="./main.css"> -->
</head>
<body id="body">
<noscript>
<strong>We're sorry but beekeeper-studio doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app" class="app-loading">
<style>
body, .app-loading {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: 0;
padding: 0;
background: transparent;
overflow: hidden;
}
.app-loading {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
display: table;
width: 100%;
height: 100%;
-webkit-app-region: drag;
}
.preloader-wrap {
font-family: system-ui,
-apple-system, BlinkMacSystemFont,
"Segoe UI",
"Roboto",
"Oxygen",
"Ubuntu",
"Cantarell",
"Fira Sans",
"Droid Sans",
"Helvetica Neue",
Arial, sans-serif;
display: table-cell;
text-align: center;
vertical-align: middle;
color:#999;
font-size: 14px;
}
.preloader {
height: 100px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 6px;
}
.preloader .layer {
display: block;
position: absolute;
height: 50px;
width: 50px;
border-radius: 50%;
box-shadow: 1px 1px #fad83b,
1px 2px rgba(0, 0, 0 , 0.25);
transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg);
}
.preloader .layer:nth-of-type(1) {
background: rgba(250, 216, 59, 0.65);
margin-top: 36px;
animation: movedown 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.4s infinite normal;
}
.preloader .layer:nth-of-type(2) {
background: rgba(250, 216, 59, 0.65);
margin-top: 18px;
}
.preloader .layer:nth-of-type(3) {
background: rgba(250, 216, 59, 0.75);
animation: moveup 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal;
}
@keyframes moveup {
0%, 60%, 100% {
transform:
rotateX(50deg)
rotateY(0deg)
rotateZ(45deg)
translateZ(0);
}
25% {
transform:
rotateX(50deg)
rotateY(0deg)
rotateZ(45deg)
translateZ(5px);
}
}
@keyframes movedown {
0%, 60%, 100% {
transform:
rotateX(50deg)
rotateY(0deg)
rotateZ(45deg)
translateZ(0);
}
25% {
transform:
rotateX(50deg)
rotateY(0deg)
rotateZ(45deg)
translateZ(-5px);
}
}
</style>
<div class="preloader-wrap">
<div class="preloader"><i class="layer"></i><i class="layer"></i><i class="layer"></i></div>
<span>Loading</span>
</div>
</div>
<!-- built files will be auto injected -->
</body>
</html>