Browse Source

🎉 Initial Commit

main
Nichole Mattera 2 months ago
commit
1e933a5de9
26 changed files with 339 additions and 0 deletions
  1. +1
    -0
      .gitignore
  2. +13
    -0
      LICENSE
  3. +2
    -0
      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
    -0
      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
    -0
      modules/window/index.html

+ 1
- 0
.gitignore View File

@@ -0,0 +1 @@
.DS_Store

+ 13
- 0
LICENSE View File

@@ -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
- 0
ThirdParty.txt View File

@@ -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 View File

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

BIN
assets/Taskbar.psd View File


BIN
assets/Window.psd View File


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


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


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


BIN
modules/taskbar/images/clock.png View File

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

BIN
modules/taskbar/images/divider.png View File

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

BIN
modules/taskbar/images/go.png View File

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

BIN
modules/taskbar/images/minimize.png View File

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

+ 168
- 0
modules/taskbar/index.html View File

@@ -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 View File

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

BIN
modules/window/images/BL.png View File

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

BIN
modules/window/images/BR.png View File

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

BIN
modules/window/images/L1.png View File

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

BIN
modules/window/images/L2.png View File

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

BIN
modules/window/images/R.png View File

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

BIN
modules/window/images/T1.png View File

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

BIN
modules/window/images/T2.png View File

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

BIN
modules/window/images/TL.png View File

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

BIN
modules/window/images/TR.png View File

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

BIN
modules/window/images/snes.png View File

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

+ 155
- 0
modules/window/index.html View File

@@ -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