cynic
/
0x40-web
mirror of https://github.com/kurisufriend/0x40-web
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Cleaner CSS and initial Halloween UI

Browse Source
alternate-visualiser
William Toohey 10 years ago
parent df8bec1f02
commit 54ef88b7f6
12 changed files with 273 additions and 86 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 149
      css/hues-h.css
  2. 19
      css/hues-m.css
  3. 49
      css/hues-x.css
  4. BIN
      img/bones.png
  5. BIN
      img/tombstone.png
  6. BIN
      img/web-bottomright.png
  7. BIN
      img/web-topleft.png
  8. BIN
      img/web-topright.png
  9. 8
      index.html
  10. 8
      js/HuesCore.js
  11. 2
      js/HuesSettings.js
  12. 124
      js/HuesUI.js

149
css/hues-h.css
Unescape View File

@ -0,0 +1,149 @@
.HalloweenUI {
font-family: 'PetMe64Web';
}
.hues-h-text {
color: #ff3300;
}
.hues-h-textfade {
color: rgba(255, 51, 0, 0.6);
}
.hues-m-beatbar.hues-h-beatbar {
border-style: none;
background: none;
}
.hues-m-controls.hues-h-controls {
background: none;
border-style: none;
padding-top: 8px;
z-index: 1;
}
.hues-m-songtitle.hues-h-text, .hues-m-imagename.hues-h-text {
padding: 4px 0px;
margin: 0px 5px;
background: none;
border-style: solid;
border-width: 0px 19px 0px 18px;
-moz-border-image: url(../img/bones.png) 0 19 0 18 repeat stretch;
-webkit-border-image: url(../img/bones.png) 0 19 0 18 repeat stretch;
-o-border-image: url(../img/bones.png) 0 19 0 18 repeat stretch;
border-image: url(../img/bones.png) 0 19 0 18 fill repeat stretch;
}
.hues-m-huename.hues-h-text {
border: none;
background: none;
left: 38px;
right: 38px;
bottom: 2px;
}
.hues-m-vol-bar.hues-h-vol-bar {
bottom: 13px;
}
.hues-m-vol-label.hues-h-text {
bottom: 12px;
}
.hues-m-hide.hues-h-text {
top: 40px;
}
.hues-m-cog.hues-h-text {
top: 20px;
}
.hues-m-question.hues-h-text {
top: 25px;
}
.hues-m-songbutton.hues-h-text, .hues-m-imagebutton.hues-h-text {
margin-top: 17px;
}
.hues-m-songbutton.hues-h-text + div, .hues-m-imagebutton.hues-h-text + div{
top: -8px;
}
.hues-m-prevbutton.hues-h-text, .hues-m-nextbutton.hues-h-text, .hues-m-actbutton.hues-h-text {
background: none;
}
.hues-h-controls > .hues-m-leftinfo, .hues-h-controls > .hues-m-rightinfo {
margin-bottom: 5px;
}
.hues-h-tombstone {
border-style: solid;
border-width: 22px 40px 0px 42px;
-moz-border-image: url(../img/tombstone.png) 22 42 0 42 repeat;
-webkit-border-image: url(../img/tombstone.png) 22 42 0 42 repeat;
-o-border-image: url(../img/tombstone.png) 22 42 0 42 repeat;
border-image: url(../img/tombstone.png) 22 42 0 42 fill repeat;
height: 36px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: -10;
}
.hues-h-text + input[type=range]::-webkit-slider-runnable-track {
background: #ff3300;
}
.hues-h-text + input[type=range]::-webkit-slider-thumb {
background: #ff3300;
}
.hues-h-text + input[type=range]::-moz-range-track {
background: #ff3300;
}
.hues-h-text + input[type=range]::-moz-range-thumb {
background: #ff3300;
}
.hues-h-text + input[type=range]::-ms-fill-lower {
background: #ff3300;
}
.hues-h-text + input[type=range]::-ms-thumb {
background: #ff3300;
}
.hues-h-topleft, .hues-h-topright, .hues-h-bottomright {
position: absolute;
background-repeat: no-repeat;
}
.hues-h-topleft, .hues-h-topright {
top: 0px;
}
.hues-h-bottomright, .hues-h-topright {
right: 0px;
}
.hues-h-topleft {
background-image: url("../img/web-topleft.png");
width: 269px;
height: 237px;
}
.hues-h-topright {
background-image: url("../img/web-topright.png");
width: 215px;
height: 220px;
}
.hues-h-bottomright {
background-image: url("../img/web-bottomright.png");
bottom: 0px;
width:358px;
height: 284px;
}

19
css/hues-m.css
Unescape View File

@ -61,7 +61,7 @@
font-size: 10px;
text-align: center;
color: rgba(255,255,255, 0.7);
bottom: 29px;
bottom: 79px;
width: 100px;
}
@ -184,10 +184,10 @@
right: 8px;
}
.hues-m-songtitle {
bottom: 5px;
bottom: 55px;
}
.hues-m-imagename {
bottom: 29px;
bottom: 79px;
left: 108px;
right: 108px;
}
@ -207,7 +207,7 @@
.hues-m-leftbox {
position: absolute;
bottom: 50px;
bottom: 0;
left: 0;
right: 50%;
height: 54px;
@ -215,7 +215,7 @@
.hues-m-rightbox {
position: absolute;
bottom: 50px;
bottom: 0;
left: 50%;
right: 0;
height: 54px;
@ -231,8 +231,10 @@
user-select: none;
font-size: 12px;
width: 50%;
height: 100%;
margin: 3px auto;
float: left;
position: relative;
}
.hues-m-controlbuttons {
@ -463,10 +465,12 @@ input[type=range]::-ms-thumb {
.hues-m-imagename {
left: 300px;
right: 300px;
bottom: 29px;
}
.hues-m-songtitle {
left: 192px;
right: 192px;
bottom: 5px;
}
.hues-m-leftinfo {
left: 200px;
@ -474,15 +478,16 @@ input[type=range]::-ms-thumb {
.hues-m-rightinfo {
right: 200px;
}
.hues-m-leftinfo, .hues-m-rightinfo {
bottom: 29px;
}
.hues-m-leftbox {
bottom: 0;
left: 0;
right: auto;
width: 192px;
height: 54px;
}
.hues-m-rightbox {
bottom: 0;
left: auto;
right: 0;
width: 192px;

49
css/hues-x.css
Unescape View File

@ -2,53 +2,24 @@
font-family: 'PetMe64Web';
}
.hues-x-controls {
position: absolute;
bottom: 0;
max-width: 992px;
.hues-m-controls.hues-x-controls {
height: 50px;
margin: 0 auto;
overflow: hidden;
left: 8px;
right: 8px;
color: rgba(255,255,255,0.7);
z-index: 1;
background: none;
border-style: none;
}
.hues-x-beatbar {
position: absolute;
top: 0;
max-width: 992px;
height: 30px;
margin: 0 auto;
overflow: hidden;
left: 8px;
right: 8px;
color: white;
}
.hues-x-beatbar{
transform: translateY(0px);
-webkit-transform: translateY(0px);
transition: transform 1s ease-out;
-webkit-transition: -webkit-transform 1s ease-out;
}
.hues-x-controls {
transform: translateY(0px);
-webkit-transform: translateY(0px);
transition: transform 1s ease-out;
-webkit-transition: -webkit-transform 1s ease-out;
.hues-x-controls > .hues-m-songtitle {
bottom: 5px;
}
.hues-x-beatbar.hidden{
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
.hues-x-controls > .hues-m-imagename {
bottom: 29px;
}
.hues-x-controls.hidden {
transform: translateY(104px);
-webkit-transform: translateY(104px);
.hues-m-beatbar.hues-x-beatbar {
background: none;
border-style: none;
}
.hues-x-light {

BIN
img/bones.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
img/tombstone.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
img/web-bottomright.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
img/web-topleft.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
img/web-topright.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

8
index.html
Unescape View File

@ -8,6 +8,7 @@
<link rel="stylesheet" href="css/hues-m.css">
<link rel="stylesheet" href="css/hues-r.css">
<link rel="stylesheet" href="css/hues-w.css">
<link rel="stylesheet" href="css/hues-h.css">
<link rel="stylesheet" href="css/hues-res.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<script type="text/javascript" src="js/HuesCore.js"></script>
@ -24,9 +25,10 @@
zip.workerScriptsPath = "js/lib/";
var defaults = {
respacks : [//"./respacks/Defaults_v5.0.zip",
"./respacks/CharPackagev0.03.zip",
"./respacks/HuesMixB.zip",
"./respacks/PackShit.zip"
//"./respacks/CharPackagev0.03.zip",
//"./respacks/HuesMixB.zip",
//"./respacks/PackShit.zip"
"./respacks/Halloween+Hues+v0.98.zip"
],
//load : false, //debug
autoplay : false, // debug

8
js/HuesCore.js
Unescape View File

@ -63,7 +63,7 @@ function HuesCore(defaults) {
}
this.renderer = new HuesCanvas("waifu", this.soundManager.context, this);
this.uiArray.push(new RetroUI(), new WeedUI(), new ModernUI(), new XmasUI());
this.uiArray.push(new RetroUI(), new WeedUI(), new ModernUI(), new XmasUI(), new HalloweenUI());
this.settings.connectCore(this);
// Update with merged
defaults = this.settings.defaults;
@ -539,6 +539,9 @@ HuesCore.prototype.settingsUpdated = function() {
case "xmas":
this.changeUI(3);
break;
case "hlwn":
this.changeUI(4);
break;
}
switch (localStorage["colourSet"]) {
case "normal":
@ -655,6 +658,9 @@ HuesCore.prototype.keyHandler = function(key) {
case 52: // NUMBER_4
this.settings.set("currentUI", "xmas");
break;
case 53: // NUMBER_5
this.settings.set("currentUI", "hlwn");
break;
case 67: // C
this.toggleImageList();
break;

2
js/HuesSettings.js
Unescape View File

@ -99,7 +99,7 @@ HuesSettings.prototype.settingsOptions = {
},
currentUI : {
name : "User Interface",
options : ["retro", "v4.20", "modern", "xmas"]
options : ["retro", "v4.20", "modern", "xmas", "hlwn"]
},
colourSet : {
name : "Colour Set",

124
js/HuesUI.js
Unescape View File

@ -541,6 +541,7 @@ ModernUI.prototype.initUI = function() {
var volBar = document.createElement("div");
volBar.className = "hues-m-vol-bar";
this.volBar = volBar;
volCluster.appendChild(volBar);
var label = document.createElement("div");
@ -552,13 +553,13 @@ ModernUI.prototype.initUI = function() {
volBar.appendChild(label);
this.volLabel = label;
var infoToggle = document.createElement("div");
infoToggle.innerHTML = '?';
infoToggle.className = "hues-m-question";
infoToggle.onclick = function() {
this.infoToggle = document.createElement("div");
this.infoToggle.innerHTML = '?';
this.infoToggle.className = "hues-m-question";
this.infoToggle.onclick = function() {
that.core.settings.showInfo();
};
volCluster.appendChild(infoToggle);
volCluster.appendChild(this.infoToggle);
var input = document.createElement("input");
input.type = "range";
@ -579,19 +580,20 @@ ModernUI.prototype.initUI = function() {
//Song/image controls
var songs = document.createElement("div");
songs.className = "hues-m-controlblock";
this.songBlock = songs;
this.songList.className = "hues-m-songbutton";
var songControls = document.createElement("div");
songControls.className = "hues-m-controlbuttons";
this.songPrev.className = "hues-m-prevbutton";
this.songNext.className = "hues-m-nextbutton";
var songShuffle = document.createElement("div");
songShuffle.innerHTML = '<i class="fa fa-random"></i>';
songShuffle.className = "hues-m-actbutton";
songShuffle.onclick = function() {that.core.randomSong();};
this.songShuffle = document.createElement("div");
this.songShuffle.innerHTML = '<i class="fa fa-random"></i>';
this.songShuffle.className = "hues-m-actbutton";
this.songShuffle.onclick = function() {that.core.randomSong();};
songs.appendChild(this.songList);
songControls.appendChild(this.songPrev);
songControls.appendChild(songShuffle);
songControls.appendChild(this.songShuffle);
songControls.appendChild(this.songNext);
songs.appendChild(songControls);
rightBox.appendChild(songs);
@ -599,6 +601,7 @@ ModernUI.prototype.initUI = function() {
var images = document.createElement("div");
images.className = "hues-m-controlblock";
this.imageList.className = "hues-m-songbutton";
this.imageBlock = images;
var imageControls = document.createElement("div");
imageControls.className = "hues-m-controlbuttons";
@ -661,18 +664,19 @@ ModernUI.prototype.initUI = function() {
};
ModernUI.prototype.toggleHide = function() {
this.beatBar.className = "hues-m-beatbar";
this.beatCenter.className = "hues-m-beatcenter";
this.controls.className = "hues-m-controls";
this.hideRestore.className = "hues-m-hiderestore";
// classList is new-ish, but if you have web audio you'll have this
this.beatBar.classList.remove("hidden");
this.beatCenter.classList.remove("hidden");
this.controls.classList.remove("hidden");
this.hideRestore.classList.remove("hidden");
switch(this.hidden) {
case 1:
this.beatBar.className = "hues-m-beatbar hidden";
this.beatCenter.className = "hues-m-beatcenter hidden";
this.beatBar.classList.add("hidden");
this.beatCenter.classList.add("hidden");
/* falls through */
case 0:
this.controls.className = "hues-m-controls hidden";
this.hideRestore.className = "hues-m-hiderestore hidden";
this.controls.classList.add("hidden");
this.hideRestore.classList.add("hidden");
}
this.hidden = (this.hidden+1) % 3;
};
@ -773,8 +777,8 @@ function XmasUI() {
this.yBlur = null;
this.timer = null;
this.controls.className = "hues-x-controls";
this.beatBar.className = "hues-x-beatbar";
this.controls.className += " hues-x-controls";
this.beatBar.className += " hues-x-beatbar";
this.lights = [];
@ -901,25 +905,75 @@ XmasUI.prototype.beat = function() {
}
};
XmasUI.prototype.toggleHide = function() {
this.beatBar.className = "hues-x-beatbar";
this.beatCenter.className = "hues-m-beatcenter";
this.controls.className = "hues-x-controls";
switch(this.hidden) {
case 1:
this.beatBar.className = "hues-x-beatbar hidden";
this.beatCenter.className = "hues-m-beatcenter hidden";
/* falls through */
case 0:
this.controls.className = "hues-x-controls hidden";
}
this.hidden = (this.hidden+1) % 3;
};
XmasUI.prototype.setColourText = function(colour) {};
XmasUI.prototype.blurUpdated = function(x, y) {};
XmasUI.prototype.updateTime = function(time) {};
function HalloweenUI() {
ModernUI.call(this);
}
HalloweenUI.prototype = Object.create(ModernUI.prototype);
HalloweenUI.prototype.constructor = HalloweenUI;
HalloweenUI.prototype.initUI = function() {
ModernUI.prototype.initUI.call(this);
this.controls.className += " hues-h-controls";
this.beatBar.className += " hues-h-beatbar";
this.leftBox.className += " hues-h-leftbox";
this.rightBox.className += " hues-h-rightbox";
this.volBar.className += " hues-h-vol-bar";
this.beatLeft.className += " hues-h-text";
this.beatRight.className += " hues-h-text";
this.beatCenter.className += " hues-h-text";
this.songShuffle.className += " hues-h-text";
this.songNext.className += " hues-h-text";
this.songPrev.className += " hues-h-text";
this.songList.className += " hues-h-text";
this.songName.className += " hues-h-text";
this.imageMode.className += " hues-h-text";
this.imageNext.className += " hues-h-text";
this.imagePrev.className += " hues-h-text";
this.imageList.className += " hues-h-text";
this.imageName.className += " hues-h-text";
this.hueName.className += " hues-h-text";
this.settingsToggle.className += " hues-h-text";
this.hideToggle.className += " hues-h-text";
this.infoToggle.className += " hues-h-text";
this.volLabel.className += " hues-h-text";
this.timer.className = "hues-h-textfade";
this.beatCount.className = "hues-h-textfade";
this.xBlur.className = "hues-h-textfade";
this.yBlur.className = "hues-h-textfade";
var leftBoxTomb = document.createElement("div");
leftBoxTomb.className = "hues-h-tombstone";
this.leftBox.appendChild(leftBoxTomb);
var songTomb = document.createElement("div");
songTomb.className = "hues-h-tombstone";
this.songBlock.insertBefore(songTomb,this.songBlock.firstChild);
var imageTomb = document.createElement("div");
imageTomb.className = "hues-h-tombstone";
this.imageBlock.insertBefore(imageTomb,this.imageBlock.firstChild);
var topLeft = document.createElement("div");
topLeft.className = "hues-h-topleft";
var topRight = document.createElement("div");
topRight.className = "hues-h-topright";
var bottomRight = document.createElement("div");
bottomRight.className = "hues-h-bottomright";
this.root.appendChild(topLeft);
this.root.appendChild(topRight);
this.root.appendChild(bottomRight);
}
// Positions and angles for the Xmas lights
var xleft = [
{"angle": 122.529582194, "x": 19.4, "y": -19.35},

Write Preview
Loading…
Cancel
Save