mirror of
https://github.com/NohamR/Pocket-Bird.git
synced 2026-05-25 04:07:23 +00:00
178 lines
5.8 KiB
HTML
178 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Birb Sandbox</title>
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #363636;
|
|
}
|
|
|
|
#spacer {
|
|
height: 100vh;
|
|
}
|
|
|
|
:root {
|
|
--border-size: 2px;
|
|
--neg-border-size: calc(var(--border-size) * -1);
|
|
--double-border-size: calc(var(--border-size) * 2);
|
|
--neg-double-border-size: calc(var(--neg-border-size) * 2);
|
|
--border-color: #000000;
|
|
}
|
|
|
|
.window {
|
|
font-family: "Monocraft";
|
|
z-index: 1000;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
/* transform: scale(0.8); */
|
|
/* width: 200px; */
|
|
/* height: 200px; */
|
|
background-color: #ffecda;
|
|
box-shadow:
|
|
var(--border-size) 0 var(--border-color),
|
|
var(--neg-border-size) 0 var(--border-color),
|
|
0 var(--neg-border-size) var(--border-color),
|
|
0 var(--border-size) var(--border-color),
|
|
var(--double-border-size) 0 var(--border-color),
|
|
var(--neg-double-border-size) 0 var(--border-color),
|
|
0 var(--neg-double-border-size) var(--border-color),
|
|
0 var(--double-border-size) var(--border-color),
|
|
0 0 0 var(--border-size) var(--border-color),
|
|
0 0 0 var(--double-border-size) white,
|
|
var(--double-border-size) 0 0 var(--border-size) white,
|
|
var(--neg-double-border-size) 0 0 var(--border-size) white,
|
|
0 var(--neg-double-border-size) 0 var(--border-size) white,
|
|
0 var(--double-border-size) 0 var(--border-size) white;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.window-header {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 7px;
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
background-color: #ffa3cb;
|
|
box-shadow:
|
|
var(--border-size) 0 #ffa3cb,
|
|
var(--neg-border-size) 0 #ffa3cb,
|
|
0 var(--neg-border-size) #ffa3cb,
|
|
var(--neg-border-size) var(--border-size) var(--border-color),
|
|
var(--border-size) var(--border-size) var(--border-color);
|
|
color: var(--border-color);
|
|
}
|
|
|
|
.window-title {
|
|
text-align: center;
|
|
flex-grow: 1;
|
|
user-select: none;
|
|
color: #ffecda;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.window-close {
|
|
position: absolute;
|
|
top: 0;
|
|
right: var(--double-border-size);
|
|
opacity: 0.35;
|
|
user-select: none;
|
|
}
|
|
|
|
.window-close:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.window-content {
|
|
box-sizing: border-box;
|
|
background-color: #ffecda;
|
|
margin-top: var(--border-size);
|
|
width: 100%;
|
|
flex-grow: 1;
|
|
box-shadow:
|
|
var(--border-size) 0 #ffecda,
|
|
var(--neg-border-size) 0 #ffecda,
|
|
0 var(--border-size) #ffecda,
|
|
0 var(--neg-border-size) var(--border-color),
|
|
0 var(--border-size) var(--border-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.window-close {
|
|
cursor: pointer;
|
|
padding: none;
|
|
}
|
|
|
|
.window-list-item {
|
|
font-size: 14px;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.window-list-item:hover {
|
|
opacity: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.window-separator {
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: #000000;
|
|
box-sizing: border-box;
|
|
margin-top: 6px;
|
|
margin-bottom: 6px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div style="text-align: center; padding: 20px;">
|
|
<h1>This is an example header</h1>
|
|
<p>This is an example paragraph</p>
|
|
<img src="./images/bird-1.jpg" alt="Bird 1" style="width: 300px; height: auto; margin: 10px;">
|
|
<img src="./images/bird-2.jpg" alt="Bird 2" style="width: 300px; height: auto; margin: 10px;">
|
|
<img src="./images/bird-3.jpg" alt="Bird 3" style="width: 300px; height: auto; margin: 10px;">
|
|
</div>
|
|
<!-- <div class="window">
|
|
<div class="window-header">
|
|
<div class="window-title">settings</div>
|
|
<div class="window-close">x</div>
|
|
</div>
|
|
<div class="window-content">
|
|
<div class="birb"></div>
|
|
</div>
|
|
</div> -->
|
|
<div class="window">
|
|
<div class="window-header">
|
|
<div class="window-title">birbOS</div>
|
|
</div>
|
|
<div class="window-content">
|
|
<div class="window-list-item">Field Guide</div>
|
|
<div class="window-list-item">Decorations</div>
|
|
<div class="window-list-item">Programs</div>
|
|
<!-- <div class="window-list-item">Decorations</div> -->
|
|
<div class="window-separator"></div>
|
|
<div class="window-list-item">Settings</div>
|
|
</div>
|
|
</div>
|
|
<div id="spacer"></div>
|
|
<script src="birb.js"></script>
|
|
</body>
|
|
</html> |