Browse Source

🎉 Initial Commit

main
Nichole Mattera 11 months ago
commit
1e933a5de9
  1. 1
      .gitignore
  2. 13
      LICENSE
  3. 2
      ThirdParty.txt
  4. BIN
      assets/Background.png
  5. BIN
      assets/Taskbar.psd
  6. BIN
      assets/Window.psd
  7. BIN
      modules/taskbar/fonts/ds-digib-webfont.ttf
  8. BIN
      modules/taskbar/fonts/ds-digib-webfont.woff
  9. BIN
      modules/taskbar/fonts/ds-digib-webfont.woff2
  10. BIN
      modules/taskbar/images/clock.png
  11. BIN
      modules/taskbar/images/divider.png
  12. BIN
      modules/taskbar/images/go.png
  13. BIN
      modules/taskbar/images/minimize.png
  14. 168
      modules/taskbar/index.html
  15. BIN
      modules/window/images/B.png
  16. BIN
      modules/window/images/BL.png
  17. BIN
      modules/window/images/BR.png
  18. BIN
      modules/window/images/L1.png
  19. BIN
      modules/window/images/L2.png
  20. BIN
      modules/window/images/R.png
  21. BIN
      modules/window/images/T1.png
  22. BIN
      modules/window/images/T2.png
  23. BIN
      modules/window/images/TL.png
  24. BIN
      modules/window/images/TR.png
  25. BIN
      modules/window/images/snes.png
  26. 155
      modules/window/index.html

1
.gitignore

@ -0,0 +1 @@
.DS_Store

13
LICENSE

@ -0,0 +1,13 @@
Copyright (c) 2020 Nichole Mattera
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

2
ThirdParty.txt

@ -0,0 +1,2 @@
Background https://star-plasma.tumblr.com/post/163483334147/trans-pride-3
KDE Go Icon https://store.kde.org/p/1120707/show/page/3

BIN
assets/Background.png

After

Width: 1920  |  Height: 1080  |  Size: 1.2 MiB

BIN
assets/Taskbar.psd

BIN
assets/Window.psd

BIN
modules/taskbar/fonts/ds-digib-webfont.ttf

BIN
modules/taskbar/fonts/ds-digib-webfont.woff

BIN
modules/taskbar/fonts/ds-digib-webfont.woff2

BIN
modules/taskbar/images/clock.png

After

Width: 1  |  Height: 4  |  Size: 934 B

BIN
modules/taskbar/images/divider.png

After

Width: 12  |  Height: 74  |  Size: 998 B

BIN
modules/taskbar/images/go.png

After

Width: 68  |  Height: 68  |  Size: 2.9 KiB

BIN
modules/taskbar/images/minimize.png

After

Width: 10  |  Height: 16  |  Size: 978 B

168
modules/taskbar/index.html

@ -0,0 +1,168 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Taskbar</title>
<style>
@font-face {
font-family: 'ds-digitalbold';
src: url('./fonts/ds-digib-webfont.woff2') format('woff2'),
url('./fonts/ds-digib-webfont.woff') format('woff'),
url('./fonts/ds-digib-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
* {
box-sizing: border-box;
}
html, body {
background: transparent;
height: 100vh;
margin: 0;
padding: 0;
width: 100vw;
}
.panel {
display: flex;
height: 92px;
width: 100vw;
}
.minimize {
background: #E9C1ED;
border-top: 4px solid #FFF;
border-right: 4px solid #655367;
border-bottom: 4px solid #655367;
border-left: 4px solid #FFF;
padding: 34px 4px;
width: 28px;
}
.taskbar {
align-items: center;
background: #E9C1ED;
border-top: 2px solid #FFF;
border-right: 2px solid #655367;
border-bottom: 2px solid #655367;
border-left: 2px solid #FFF;
display: flex;
flex: 1 1 auto;
padding: 2px;
}
.spacer {
flex: 1 1 auto;
}
.item {
padding: 0 12px;
line-height: 78px;
}
.item > img {
vertical-align: middle;
}
.item.selected {
border-top: 2px solid #655367;
border-right: 2px solid #FFF;
border-bottom: 2px solid #FFF;
border-left: 2px solid #655367;
}
.divider {
margin-right: 2px;
}
.clock {
background: #E9C1ED url('./images/clock.png') repeat top left;
border-top: 2px solid #655367;
border-right: 2px solid #FFF;
border-bottom: 2px solid #FFF;
border-left: 2px solid #655367;
color: black;
font-family: 'ds-digitalbold';
font-size: 48px;
line-height: 78px;
margin: 0;
text-align: center;
text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
width: 130px;
}
</style>
</head>
<body>
<div class="panel">
<div class="minimize">
<img src="./images/minimize.png" width="10" height="16" />
</div>
<div class="taskbar" id="taskbar">
<div class="spacer" id="spacer"></div>
<img class="divider" src="./images/divider.png" width="12" height="74" />
<div class="clock" id="clock"></div>
</div>
</div>
<script>
const getQueryVariable = (variable, defaultValue) => {
const query = window.location.search.substring(1)
const vars = query.split('&')
for (let i = 0; i < vars.length; i++) {
const pair = vars[i].split('=')
if (decodeURIComponent(pair[0]) == variable) {
return decodeURIComponent(pair[1])
}
}
return defaultValue
}
const taskbar = document.querySelector('#taskbar')
const spacer = document.querySelector('#spacer')
const items = getQueryVariable('items', '').split(',')
items.unshift('./images/go.png')
items.forEach(item => {
const div = document.createElement('div')
div.classList.add('item')
const img = document.createElement('img')
img.src = item
img.width = 68
img.height = 68
div.appendChild(img)
taskbar.insertBefore(div, spacer)
});
const selected = parseInt(getQueryVariable('selected', '-1'))
if (selected >= 0) {
document.querySelectorAll('.item')[selected].classList.add('selected')
}
const clock = document.querySelector('#clock')
const updateClock = () => {
const now = new Date()
let text = '';
if (now.getHours() < 10) {
text += '0'
}
text += `${now.getHours()}:`
if (now.getMinutes() < 10) {
text += '0'
}
text += now.getMinutes()
if (text !== clock.innerText)
clock.innerText = text
}
updateClock();
setInterval(updateClock, 1000);
</script>
</body>
</html>

BIN
modules/window/images/B.png

After

Width: 1  |  Height: 16  |  Size: 962 B

BIN
modules/window/images/BL.png

After

Width: 68  |  Height: 16  |  Size: 1021 B

BIN
modules/window/images/BR.png

After

Width: 140  |  Height: 16  |  Size: 1.0 KiB

BIN
modules/window/images/L1.png

After

Width: 8  |  Height: 46  |  Size: 972 B

BIN
modules/window/images/L2.png

After

Width: 8  |  Height: 1  |  Size: 954 B

BIN
modules/window/images/R.png

After

Width: 8  |  Height: 1  |  Size: 954 B

BIN
modules/window/images/T1.png

After

Width: 1  |  Height: 40  |  Size: 957 B

BIN
modules/window/images/T2.png

After

Width: 6  |  Height: 40  |  Size: 977 B

BIN
modules/window/images/TL.png

After

Width: 68  |  Height: 40  |  Size: 1.0 KiB

BIN
modules/window/images/TR.png

After

Width: 140  |  Height: 40  |  Size: 1.5 KiB

BIN
modules/window/images/snes.png

After

Width: 32  |  Height: 32  |  Size: 1.0 KiB

155
modules/window/index.html

@ -0,0 +1,155 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Window</title>
<style>
html, body {
background: transparent;
height: 100vh;
margin: 0;
padding: 0;
width: 100vw;
}
.window {
display: grid;
height: 100vh;
left: 0;
position: absolute;
top: 0;
width: 100vw;
grid-template-columns: 8px 60px min-content auto 132px 8px;
grid-template-rows: 40px 46px auto 16px;
grid-template-areas:
'top-left top-left title handle top-right top-right'
'left-fade center center center center right'
'left center center center center right'
'bottom-left bottom-left bottom-center bottom-center bottom-right bottom-right';
}
.top-left {
background: transparent url('./images/TL.png') no-repeat top left;
grid-area: top-left;
position: relative;
}
.top-left > img {
left: 4px;
position: absolute;
top: 4px;
}
.top-title {
background: transparent url('./images/T1.png') repeat-x top left;
grid-area: title;
}
.top-title > h1 {
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-smooth: never;
font-weight: normal;
line-height: 40px;
margin: 0;
padding: 0 8px 0 4px;
text-rendering: optimizeSpeed;
-webkit-font-smoothing: none;
white-space: nowrap;
}
.top-handle {
background: transparent url('./images/T2.png') repeat-x top left;
grid-area: handle;
}
.top-right {
background: transparent url('./images/TR.png') no-repeat top right;
grid-area: top-right;
}
.left-fade {
background: transparent url('./images/L1.png') no-repeat top left;
grid-area: left-fade;
}
.center {
grid-area: center;
}
.right {
background: transparent url('./images/R.png') repeat-y top right;
grid-area: right;
}
.left {
background: transparent url('./images/L2.png') repeat-y top left;
grid-area: left;
}
.bottom-left {
background: transparent url('./images/BL.png') no-repeat bottom left;
grid-area: bottom-left;
}
.bottom {
background: transparent url('./images/B.png') repeat-x bottom left;
grid-area: bottom-center;
}
.bottom-right {
background: transparent url('./images/BR.png') no-repeat bottom right;
grid-area: bottom-right;
}
</style>
</head>
<body>
<div class="window">
<div class="top-left">
<img width="32" height="32" id="icon" />
</div>
<div class="top-title">
<h1 id="title"></h1>
</div>
<div class="top-handle"></div>
<div class="top-right"></div>
<div class="left-fade"></div>
<div class="center" id="center"></div>
<div class="right"></div>
<div class="left"></div>
<div class="bottom-left"></div>
<div class="bottom"></div>
<div class="bottom-right"></div>
</div>
<script>
const getQueryVariable = (variable, defaultValue) => {
const query = window.location.search.substring(1)
const vars = query.split('&')
for (let i = 0; i < vars.length; i++) {
const pair = vars[i].split('=')
if (decodeURIComponent(pair[0]) == variable) {
return decodeURIComponent(pair[1])
}
}
return defaultValue
}
const center = document.querySelector('#center')
center.style.backgroundColor = `#${getQueryVariable('background', '000')}`
const title = document.querySelector('#title')
title.innerText = getQueryVariable('title', '')
const icon = document.querySelector('#icon')
icon.src = getQueryVariable('icon', '')
</script>
</body>
</html>
Loading…
Cancel
Save