noham/Pocket-Bird
1
0
Fork 0
mirror of https://github.com/NohamR/Pocket-Bird.git synced 2026-05-25 19:59:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add heart animation and window

Browse Source
This commit is contained in:
Idrees Hassan
2024-12-20 20:45:27 -05:00
parent 931c55567f
commit c0850fb1a4
2 changed files with 268 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
index.html
View File

@@ -14,6 +14,83 @@
#spacer {
height: 100vh;
}
:root {
--border-size: 3px;
--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);
}
.window {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* transform: scale(3); */
width: 200px;
height: 200px;
background-color: #ffecda;
box-shadow:
var(--border-size) 0 black,
var(--neg-border-size) 0 black,
0 var(--neg-border-size) black,
0 var(--border-size) black,
var(--double-border-size) 0 black,
var(--neg-double-border-size) 0 black,
0 var(--neg-double-border-size) black,
0 var(--double-border-size) black,
0 0 0 var(--border-size) black,
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 {
font-family: "Monocraft";
box-sizing: border-box;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 7px;
padding-top: 1px;
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) black,
var(--border-size) var(--border-size) black;
color: black;
}
.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(--neg-border-size) black,
0 var(--border-size) black;
}
.window-close {
cursor: pointer;
padding: none;
}
</style>
</head>
<body>
@@ -24,6 +101,15 @@
<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">Birb Sandbox</div>
<div class="window-close">x</div>
</div>
<div class="window-content">
<div class="birb"></div>
</div>
</div>
<div id="spacer"></div>
<script src="birb.js"></script>
</body>