pruebas de integracion css, js
This commit is contained in:
jp.dev
parent
02ed61699c
commit
9ebb31a208
85
home/404.css
Normal file
85
home/404.css
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
.fundo{
|
||||||
|
animation: scales 3s alternate infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
.pao-baixo{
|
||||||
|
animation: rotatepao 14s cubic-bezier(.1,.49,.41,.97) infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
.pao-cima{
|
||||||
|
animation: rotatepao 7s 1s cubic-bezier(.1,.49,.41,.97) infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
.olhos{animation: olhos 2s alternate infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-sparks{animation: left-sparks 4s alternate infinite;
|
||||||
|
transform-origin: 150px 156px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-sparks{animation: left-sparks 4s alternate infinite;
|
||||||
|
transform-origin: 310px 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.olhos{animation: olhos 2s alternate infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
@keyframes scales{
|
||||||
|
from { transform: scale(0.98)}
|
||||||
|
to{ transform: scale(1)}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotatepao{
|
||||||
|
0% { transform: rotate(0deg)}
|
||||||
|
50% , 60%{ transform: rotate(-20deg)}
|
||||||
|
100%{ transform: rotate(0deg) }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes olhos{
|
||||||
|
0%{
|
||||||
|
transform: rotateX(0deg);
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
transform: rotateX(30deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes left-sparks{
|
||||||
|
0%{
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.main{
|
||||||
|
|
||||||
|
min-height: 600px;
|
||||||
|
margin: 0px auto;
|
||||||
|
width: auto;
|
||||||
|
max-width: 460px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.path {
|
||||||
|
stroke-dasharray: 300;
|
||||||
|
stroke-dashoffset: 300;
|
||||||
|
animation: dash 4s alternate infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dash{
|
||||||
|
0%, 30%{
|
||||||
|
fill: 4B4B62;
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
}
|
||||||
|
80%,100%{
|
||||||
|
fill: transparent;
|
||||||
|
stroke-dashoffset: -200;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
53
home/404.html
Normal file
53
home/404.html
Normal file
File diff suppressed because one or more lines are too long
85
home/b-side/404.css
Normal file
85
home/b-side/404.css
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
.fundo{
|
||||||
|
animation: scales 3s alternate infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
.pao-baixo{
|
||||||
|
animation: rotatepao 14s cubic-bezier(.1,.49,.41,.97) infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
.pao-cima{
|
||||||
|
animation: rotatepao 7s 1s cubic-bezier(.1,.49,.41,.97) infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
.olhos{animation: olhos 2s alternate infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-sparks{animation: left-sparks 4s alternate infinite;
|
||||||
|
transform-origin: 150px 156px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-sparks{animation: left-sparks 4s alternate infinite;
|
||||||
|
transform-origin: 310px 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.olhos{animation: olhos 2s alternate infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
@keyframes scales{
|
||||||
|
from { transform: scale(0.98)}
|
||||||
|
to{ transform: scale(1)}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotatepao{
|
||||||
|
0% { transform: rotate(0deg)}
|
||||||
|
50% , 60%{ transform: rotate(-20deg)}
|
||||||
|
100%{ transform: rotate(0deg) }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes olhos{
|
||||||
|
0%{
|
||||||
|
transform: rotateX(0deg);
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
transform: rotateX(30deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes left-sparks{
|
||||||
|
0%{
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.main{
|
||||||
|
|
||||||
|
min-height: 600px;
|
||||||
|
margin: 0px auto;
|
||||||
|
width: auto;
|
||||||
|
max-width: 460px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.path {
|
||||||
|
stroke-dasharray: 300;
|
||||||
|
stroke-dashoffset: 300;
|
||||||
|
animation: dash 4s alternate infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dash{
|
||||||
|
0%, 30%{
|
||||||
|
fill: 4B4B62;
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
}
|
||||||
|
80%,100%{
|
||||||
|
fill: transparent;
|
||||||
|
stroke-dashoffset: -200;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
53
home/b-side/404.html
Normal file
53
home/b-side/404.html
Normal file
File diff suppressed because one or more lines are too long
26
home/b-side/c.css
Normal file
26
home/b-side/c.css
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
body {
|
||||||
|
background-color: #111;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
position: absolute;
|
||||||
|
top: calc( 50% - 200px );
|
||||||
|
left: calc( 50% - 200px );
|
||||||
|
}
|
||||||
|
/* temporary */
|
||||||
|
/*
|
||||||
|
img {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -6px;
|
||||||
|
right: -12px;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
color: #eee;
|
||||||
|
}
|
||||||
|
.debug-canvas {
|
||||||
|
position: absolute;
|
||||||
|
top: auto;
|
||||||
|
left: auto;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
}*/
|
||||||
239
home/b-side/c.js
Normal file
239
home/b-side/c.js
Normal file
@ -0,0 +1,239 @@
|
|||||||
|
var s = c.width = c.height = 400,
|
||||||
|
ctx = c.getContext( '2d' ),
|
||||||
|
|
||||||
|
opts = {
|
||||||
|
globeRadius: 150,
|
||||||
|
depth: 300,
|
||||||
|
focalLength: 300,
|
||||||
|
center: s / 2,
|
||||||
|
|
||||||
|
rotYVel: .01,
|
||||||
|
baseXRot: -0.41, // 23.5 deg
|
||||||
|
afterYRot: -2,//Math.PI / 2,
|
||||||
|
},
|
||||||
|
|
||||||
|
rot = {
|
||||||
|
y: {
|
||||||
|
cos: Math.cos( opts.rotYVel ),
|
||||||
|
sin: Math.sin( opts.rotYVel )
|
||||||
|
},
|
||||||
|
z: {
|
||||||
|
cos: Math.cos( opts.baseXRot ),
|
||||||
|
sin: Math.sin( opts.baseXRot )
|
||||||
|
},
|
||||||
|
ay: {
|
||||||
|
cos: Math.cos( opts.afterYRot ),
|
||||||
|
sin: Math.sin( opts.afterYRot )
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function anim(){
|
||||||
|
|
||||||
|
window.requestAnimationFrame( anim );
|
||||||
|
|
||||||
|
ctx.fillStyle = '#111';
|
||||||
|
ctx.fillRect( 0, 0, s, s );
|
||||||
|
|
||||||
|
ctx.strokeStyle = '#2b2';
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
|
||||||
|
for( var i = 0; i < lines.length; ++i ){
|
||||||
|
|
||||||
|
var points = lines[ i ];
|
||||||
|
|
||||||
|
for( var j = 0; j < points.length; ++j ){
|
||||||
|
|
||||||
|
var point = points[ j ],
|
||||||
|
x = point.x,
|
||||||
|
y = point.y,
|
||||||
|
z = point.z;
|
||||||
|
|
||||||
|
var X = x;
|
||||||
|
x = x * rot.y.cos - z * rot.y.sin;
|
||||||
|
z = z * rot.y.cos + X * rot.y.sin;
|
||||||
|
|
||||||
|
point.x = x;
|
||||||
|
point.z = z;
|
||||||
|
|
||||||
|
var Y = y;
|
||||||
|
y = y * rot.z.cos - x * rot.z.sin;
|
||||||
|
x = x * rot.z.cos + Y * rot.z.sin;
|
||||||
|
|
||||||
|
X = x;
|
||||||
|
x = x * rot.ay.cos - z * rot.ay.sin;
|
||||||
|
z = z * rot.ay.cos + X * rot.ay.sin;
|
||||||
|
|
||||||
|
z += opts.depth;
|
||||||
|
|
||||||
|
var scale = opts.focalLength / z,
|
||||||
|
sx = opts.center + scale * x,
|
||||||
|
sy = opts.center + scale * y;
|
||||||
|
|
||||||
|
point.sx = sx;
|
||||||
|
point.sy = sy;
|
||||||
|
|
||||||
|
//if( z < opts.depth )
|
||||||
|
ctx[ j === 0 ? 'moveTo' : 'lineTo' ]( sx, sy );
|
||||||
|
}
|
||||||
|
|
||||||
|
// to prevent it from recalculating position of starting point twice but still closing the path
|
||||||
|
//if( points[ 0 ].z < opts.depth )
|
||||||
|
ctx.lineTo( points[ 0 ].sx, points[ 0 ].sy );
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
//ctx.fillStyle = 'green';
|
||||||
|
//ctx.fill();
|
||||||
|
|
||||||
|
};
|
||||||
|
function reparseLines(){
|
||||||
|
|
||||||
|
// the lines will just have indications for angles
|
||||||
|
|
||||||
|
for( var i = 0; i < lines.length; ++i ){
|
||||||
|
|
||||||
|
var points = [];
|
||||||
|
for( var j = 0; j < lines[ i ].length; j += 2 ){
|
||||||
|
|
||||||
|
var sinA = Math.sin( lines[ i ][ j ] * Math.PI ),
|
||||||
|
cosA = Math.cos( lines[ i ][ j ] * Math.PI ),
|
||||||
|
sinB = Math.sin( lines[ i ][ j + 1 ] * Math.PI / 2 ),
|
||||||
|
cosB = Math.cos( lines[ i ][ j + 1 ] * Math.PI / 2 );
|
||||||
|
|
||||||
|
points.push({
|
||||||
|
x: opts.globeRadius * cosA * cosB,
|
||||||
|
y: opts.globeRadius * sinB,
|
||||||
|
z: opts.globeRadius * sinA * cosB
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
lines[ i ] = points;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// each point is 2 angles in half turns
|
||||||
|
// a, x[-1,1] = vertical circle
|
||||||
|
// x[-1,1], .5 = equator
|
||||||
|
// x[-1,1], a = parallel cirles at a
|
||||||
|
var lines = [
|
||||||
|
// africa main continent
|
||||||
|
[
|
||||||
|
-.04, -.05,
|
||||||
|
.01, -.05,
|
||||||
|
.02, -.07,
|
||||||
|
.06, -.03,
|
||||||
|
.05, .03,
|
||||||
|
.08, .12,
|
||||||
|
.06, .18,
|
||||||
|
.08, .25,
|
||||||
|
.10, .35,
|
||||||
|
.10, .39,
|
||||||
|
.15, .37,
|
||||||
|
.18, .33,
|
||||||
|
.17, .28,
|
||||||
|
.19, .28,
|
||||||
|
.19, .23,
|
||||||
|
.22, .19,
|
||||||
|
.22, .06,
|
||||||
|
.27, -.033,
|
||||||
|
.29, -.15,
|
||||||
|
.23, -.13,
|
||||||
|
.175, -.33,
|
||||||
|
.12, -.36,
|
||||||
|
.1, -.32,
|
||||||
|
.06, -.36,
|
||||||
|
.06, -.405,
|
||||||
|
.01, -.39,
|
||||||
|
-.03, -.38,
|
||||||
|
-.05, -.35,
|
||||||
|
-.08, -.28,
|
||||||
|
-.08, -.205,
|
||||||
|
-.088, -.15,
|
||||||
|
],
|
||||||
|
// madagascar
|
||||||
|
[0.245, 0.192, 0.245, 0.233, 0.241, 0.267, 0.249, 0.3, 0.266, 0.275, 0.287, 0.175, 0.274, 0.142],
|
||||||
|
// antarctica
|
||||||
|
[-0.984, 0.892, -0.918, 0.875, -0.748, 0.825, -0.662, 0.817, -0.559, 0.842, -0.559, 0.792, -0.46, 0.825, -0.402, 0.825, -0.414, 0.775, -0.311, 0.692, -0.328, 0.75, -0.324, 0.808, -0.34, 0.825, -0.233, 0.883, -0.023, 0.783, 0.196, 0.783, 0.237, 0.75, 0.254, 0.758, 0.287, 0.725, 0.414, 0.767, 0.464, 0.733, 0.48, 0.733, 0.489, 0.783, 0.505, 0.717, 0.551, 0.725, 0.6, 0.742, 0.625, 0.717, 0.645, 0.758, 0.72, 0.758, 0.79, 0.742, 0.934, 0.783, 0.909, 0.833, 0.922, 0.867],
|
||||||
|
// south america
|
||||||
|
[-0.427, -0.067, -0.39, -0.142, -0.373, -0.108, -0.373, -0.083, -0.332, -0.125, -0.291, -0.067, -0.282, -0.008, -0.188, 0.075, -0.192, 0.108, -0.212, 0.133, -0.208, 0.217, -0.229, 0.258, -0.254, 0.258, -0.262, 0.283, -0.262, 0.333, -0.287, 0.383, -0.303, 0.383, -0.303, 0.425, -0.336, 0.433, -0.348, 0.458, -0.344, 0.475, -0.369, 0.5, -0.361, 0.525, -0.373, 0.55, -0.357, 0.6, -0.394, 0.6, -0.402, 0.542, -0.394, 0.492, -0.41, 0.433, -0.394, 0.392, -0.406, 0.35, -0.39, 0.308, -0.39, 0.25, -0.381, 0.225, -0.419, 0.15, -0.419, 0.1, -0.456, 0.058, -0.435, 0.025, -0.435, -0.008, -0.427, -0.008, -0.427, -0.058],
|
||||||
|
// that south american island in the south
|
||||||
|
[-0.336, 0.575, -0.307, 0.575, -0.311, 0.6, -0.328, 0.6],
|
||||||
|
// north 'murica
|
||||||
|
[-0.435, -0.067, -0.456, -0.075, -0.493, -0.15, -0.505, -0.15, -0.526, -0.192, -0.571, -0.192, -0.629, -0.358, -0.604, -0.258, -0.641, -0.308, -0.641, -0.333, -0.687, -0.45, -0.674, -0.533, -0.707, -0.6, -0.72, -0.575, -0.736, -0.617, -0.814, -0.692, -0.847, -0.625, -0.889, -0.608, -0.893, -0.658, -0.905, -0.675, -0.905, -0.717, -0.88, -0.733, -0.909, -0.742, -0.946, -0.742, -0.975, -0.775, -0.955, -0.792, -0.926, -0.758, -0.893, -0.792, -0.703, -0.792, -0.654, -0.808, -0.621, -0.75, -0.522, -0.758, -0.497, -0.792, -0.456, -0.775, -0.39, -0.725, -0.472, -0.75, -0.431, -0.708, -0.476, -0.708, -0.513, -0.667, -0.456, -0.625, -0.435, -0.55, -0.435, -0.617, -0.414, -0.617, -0.435, -0.7, -0.406, -0.7, -0.377, -0.642, -0.353, -0.675, -0.307, -0.592, -0.307, -0.558, -0.373, -0.567, -0.291, -0.55, -0.282, -0.525, -0.344, -0.492, -0.353, -0.517, -0.402, -0.45, -0.419, -0.392, -0.435, -0.35, -0.427, -0.275, -0.447, -0.283, -0.472, -0.333, -0.48, -0.325, -0.526, -0.325, -0.53, -0.233, -0.493, -0.2, -0.485, -0.225, -0.468, -0.225, -0.48, -0.2, -0.468, -0.167, -0.452, -0.167, -0.452, -0.108],
|
||||||
|
// cuba
|
||||||
|
[-0.464, -0.242, -0.443, -0.25, -0.41, -0.233, -0.414, -0.2, -0.435, -0.242],
|
||||||
|
// greenland
|
||||||
|
[-0.373, -0.883, -0.365, -0.833, -0.32, -0.85, -0.282, -0.783, -0.295, -0.758, -0.262, -0.667, -0.229, -0.667, -0.229, -0.708, -0.208, -0.742, -0.163, -0.767, -0.113, -0.8, -0.105, -0.825, -0.093, -0.883, -0.064, -0.917, -0.13, -0.917, -0.204, -0.942, -0.282, -0.917, -0.353, -0.917],
|
||||||
|
// iceland
|
||||||
|
[-0.134, -0.742, -0.093, -0.733, -0.08, -0.7, -0.089, -0.683, -0.118, -0.683, -0.13, -0.708],
|
||||||
|
// eurasia
|
||||||
|
[-0.006, -0.492, -0.043, -0.475, -0.047, -0.408, -0.035, -0.408, -0.023, -0.4, -0.006, -0.425, 0.014, -0.458, 0.014, -0.475, 0.052, -0.483, 0.072, -0.458, 0.093, -0.442, 0.093, -0.417, 0.101, -0.425, 0.105, -0.425, 0.085, -0.467, 0.072, -0.492, 0.072, -0.5, 0.08, -0.5, 0.113, -0.458, 0.113, -0.442, 0.126, -0.4, 0.134, -0.433, 0.134, -0.45, 0.155, -0.45, 0.159, -0.4, 0.171, -0.4, 0.184, -0.417, 0.188, -0.375, 0.2, -0.408, 0.204, -0.4, 0.2, -0.367, 0.188, -0.342, 0.221, -0.225, 0.241, -0.183, 0.237, -0.15, 0.266, -0.158, 0.311, -0.2, 0.332, -0.242, 0.311, -0.275, 0.299, -0.258, 0.278, -0.308, 0.278, -0.325, 0.299, -0.292, 0.32, -0.292, 0.324, -0.275, 0.369, -0.283, 0.39, -0.225, 0.41, -0.25, 0.41, -0.2, 0.427, -0.083, 0.443, -0.117, 0.443, -0.167, 0.48, -0.225, 0.505, -0.242, 0.526, -0.15, 0.538, -0.175, 0.542, -0.108, 0.567, -0.15, 0.592, -0.1, 0.608, -0.117, 0.608, -0.175, 0.584, -0.192, 0.596, -0.233, 0.604, -0.192, 0.621, -0.233, 0.654, -0.267, 0.678, -0.342, 0.666, -0.392, 0.678, -0.442, 0.695, -0.4, 0.724, -0.425, 0.711, -0.442, 0.724, -0.475, 0.748, -0.475, 0.773, -0.542, 0.753, -0.617, 0.781, -0.65, 0.847, -0.667, 0.864, -0.692, 0.885, -0.692, 0.864, -0.633, 0.864, -0.55, 0.897, -0.608, 0.901, -0.65, 0.897, -0.683, 0.951, -0.683, 0.984, -0.708, 0.975, -0.733, 0.988, -0.783, 0.897, -0.783, 0.885, -0.783, 0.827, -0.783, 0.794, -0.817, 0.753, -0.792, 0.728, -0.8, 0.707, -0.825, 0.67, -0.8, 0.592, -0.792, 0.633, -0.85, 0.592, -0.85, 0.534, -0.917, 0.509, -0.883, 0.551, -0.867, 0.464, -0.833, 0.439, -0.817, 0.406, -0.8, 0.369, -0.783, 0.398, -0.792, 0.402, -0.75, 0.39, -0.75, 0.332, -0.783, 0.32, -0.8, 0.39, -0.858, 0.315, -0.867, 0.291, -0.808, 0.328, -0.775, 0.266, -0.75, 0.237, -0.733, 0.208, -0.692, 0.188, -0.733, 0.221, -0.733, 0.212, -0.767, 0.192, -0.767, 0.151, -0.808, 0.093, -0.767, 0.068, -0.708, 0.035, -0.708, 0.035, -0.65, 0.06, -0.65, 0.072, -0.633, 0.093, -0.633, 0.105, -0.692, 0.134, -0.725, 0.122, -0.683, 0.159, -0.675, 0.126, -0.65, 0.109, -0.583, 0.064, -0.6, 0.064, -0.642, 0.047, -0.642, 0.052, -0.6, 0.023, -0.567, -0.019, -0.567],
|
||||||
|
// japan
|
||||||
|
[0.72, -0.383, 0.769, -0.408, 0.777, -0.467, 0.786, -0.517, 0.777, -0.567, 0.798, -0.583, 0.786, -0.542, 0.81, -0.458, 0.786, -0.458, 0.786, -0.408, 0.748, -0.358, 0.736, -0.358, 0.724, -0.325],
|
||||||
|
// ailarts'
|
||||||
|
[0.781, 0.2, 0.753, 0.183, 0.757, 0.142, 0.736, 0.142, 0.715, 0.183, 0.707, 0.158, 0.687, 0.2, 0.637, 0.25, 0.625, 0.308, 0.641, 0.35, 0.637, 0.4, 0.67, 0.383, 0.687, 0.375, 0.728, 0.342, 0.753, 0.392, 0.765, 0.367, 0.777, 0.417, 0.806, 0.425, 0.827, 0.425, 0.847, 0.317, 0.806, 0.2, 0.802, 0.158, 0.786, 0.133],
|
||||||
|
// philippines, papua new guinea and other islands
|
||||||
|
[0.555, -0.075, 0.571, -0.05, 0.571, 0, 0.596, 0.025, 0.596, 0.058, 0.645, 0.092, 0.703, 0.092, 0.592, 0.092, 0.555, 0.025, 0.555, -0.008, 0.53, -0.05, 0.559, -0.033],
|
||||||
|
[0.649, -0.067, 0.654, -0.033, 0.662, -0.017, 0.645, 0.05, 0.625, 0.033, 0.604, -0.008, 0.645, -0.067],
|
||||||
|
[0.67, -0.2, 0.658, -0.175, 0.666, -0.125, 0.649, -0.083, 0.678, -0.117, 0.678, -0.083, 0.695, -0.05, 0.695, -0.117, 0.678, -0.158],
|
||||||
|
[0.695, 0.05, 0.724, 0.042, 0.753, 0.05, 0.761, 0.092, 0.781, 0.092, 0.81, 0.092, 0.831, 0.125, 0.814, 0.083, 0.843, 0.025, 0.81, 0.058, 0.773, 0.025, 0.748, 0.042],
|
||||||
|
[0.81, 0.467, 0.802, 0.483, 0.814, 0.517, 0.827, 0.475],
|
||||||
|
[0.951, 0.4, 0.963, 0.45, 0.922, 0.5, 0.942, 0.533, 0.942, 0.5, 0.959, 0.492, 0.979, 0.433],
|
||||||
|
[0.909, 0.242, 0.926, 0.267],
|
||||||
|
[0.975, 0.192, 0.992, 0.208],
|
||||||
|
[0.06, -0.875, 0.101, -0.842, 0.134, -0.842, 0.155, -0.9],
|
||||||
|
// "great" britain
|
||||||
|
[-0.019, -0.65, 0.002, -0.608, -0.014, -0.608, -0.039, -0.633],
|
||||||
|
[-0.043, -0.583, -0.043, -0.575, -0.023, -0.567],
|
||||||
|
// isle of the easter heads
|
||||||
|
[-0.86, -0.208, -0.847, -0.183]
|
||||||
|
];
|
||||||
|
|
||||||
|
// debugging purposes
|
||||||
|
/* var deCanvas = document.createElement( 'canvas' ),
|
||||||
|
deCtx = deCanvas.getContext( '2d' ),
|
||||||
|
|
||||||
|
deW = deCanvas.width = 485,
|
||||||
|
deH = deCanvas.height = 240;
|
||||||
|
|
||||||
|
deCanvas.className = 'debug-canvas';
|
||||||
|
|
||||||
|
document.body.appendChild( deCanvas );
|
||||||
|
|
||||||
|
deCtx.strokeStyle = 'green';
|
||||||
|
deCtx.lineWidth = 3;
|
||||||
|
deCtx.beginPath();
|
||||||
|
|
||||||
|
for( var i = 0; i < lines.length; ++i ){
|
||||||
|
|
||||||
|
for( var j = 0; j < lines[ i ].length; j += 2 ){
|
||||||
|
|
||||||
|
var x = deW / 2 * ( 1 + lines[ i ][ j ] ),
|
||||||
|
y = deH / 2 * ( 1 + lines[ i ][ j + 1 ] );
|
||||||
|
|
||||||
|
deCtx[ j === 0 ? 'moveTo' : 'lineTo' ]( x, y );
|
||||||
|
}
|
||||||
|
|
||||||
|
var x = deW / 2 * ( 1 + lines[ i ][ 0 ] ),
|
||||||
|
y = deH / 2 * ( 1 + lines[ i ][ 1 ] );
|
||||||
|
|
||||||
|
//deCtx.lineTo( x, y );
|
||||||
|
}
|
||||||
|
|
||||||
|
deCtx.stroke();
|
||||||
|
|
||||||
|
var clicks = []
|
||||||
|
|
||||||
|
deCanvas.addEventListener( 'click', function( e ){
|
||||||
|
var rect = deCanvas.getBoundingClientRect();
|
||||||
|
|
||||||
|
clicks.push( parseFloat( ( ( e.clientX - rect.left ) / deW * 2 - 1 ).toFixed(3) ), parseFloat( ( ( e.clientY - rect.top ) / deH * 2 - 1 ).toFixed(3) ) );
|
||||||
|
|
||||||
|
console.clear();
|
||||||
|
console.log( clicks );
|
||||||
|
}) */
|
||||||
|
|
||||||
|
reparseLines();
|
||||||
|
anim();
|
||||||
16
home/b-side/index.html
Normal file
16
home/b-side/index.html
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head><meta charset="UTF-8"></head>
|
||||||
|
<body>|
|
||||||
|
<canvas id=c></canvas>
|
||||||
|
<link rel="stylesheet" href="c.css">
|
||||||
|
<script src="c.js"></script>
|
||||||
|
<meta http-equiv="refresh" content="10; url=http://jpdev.kickto.net/">
|
||||||
|
<!-- temporary -->
|
||||||
|
<footer>
|
||||||
|
<div class="mifooter">
|
||||||
|
<p style="text-align:right;"><small>Git <a href="https://gitea.kickto.net/" target="_blank" title="Gitea">Git</a></small></p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
881
home/estilo.css
Normal file
881
home/estilo.css
Normal file
@ -0,0 +1,881 @@
|
|||||||
|
/* tutorials on https://fossheim.io/writing/ */
|
||||||
|
|
||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #333335;
|
||||||
|
background-color: #E996AF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.casio {
|
||||||
|
display: block;
|
||||||
|
width: 960px;
|
||||||
|
height: 260px;
|
||||||
|
margin: 100px auto 0 auto;
|
||||||
|
margin: calc(50vh - 150px) auto 0 auto;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #EFEFE7;
|
||||||
|
background-image: linear-gradient(90deg, #EFEFE7, #F4F3EE);
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0 -2px 2px -0.5px #D0CCC1 inset,
|
||||||
|
2px 0 2px -0.5px #E1DFE0 inset,
|
||||||
|
0 3px 1px #FBFAF8 inset,
|
||||||
|
0 45px 10px -25px rgba(0,0,0,0.1),
|
||||||
|
0 65px 50px -10px rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker {
|
||||||
|
display: block;
|
||||||
|
width: 180px;
|
||||||
|
height: 200px;
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
left: 14px;
|
||||||
|
border-radius: 0.5px;
|
||||||
|
background-color: #D6C6A2;
|
||||||
|
background-image: linear-gradient(transparent 40%, #EFEFE7 60%),
|
||||||
|
linear-gradient(90deg, #BFA58D, transparent 2% 96%, #C9B59A),
|
||||||
|
linear-gradient(#D1BBA3 20%, transparent 65%),
|
||||||
|
linear-gradient(90deg, #D6C6A2, #E2D9CA),
|
||||||
|
linear-gradient(90deg, #D6C6A2, #E2D9CA),
|
||||||
|
radial-gradient(#897866 60%, transparent 61%);
|
||||||
|
background-size: 100% 8px,
|
||||||
|
100% 100%,
|
||||||
|
100% 8px,
|
||||||
|
6px 100%,
|
||||||
|
6px 100%,
|
||||||
|
190px 190px;
|
||||||
|
background-repeat: repeat,
|
||||||
|
no-repeat,
|
||||||
|
repeat,
|
||||||
|
no-repeat,
|
||||||
|
no-repeat,
|
||||||
|
no-repeat;
|
||||||
|
background-position: 0 0,
|
||||||
|
0 0,
|
||||||
|
0 0,
|
||||||
|
50px 0,
|
||||||
|
120px 0,
|
||||||
|
-7px 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
display: block;
|
||||||
|
width: 745px;
|
||||||
|
height: 80px;
|
||||||
|
background-color: transparent;
|
||||||
|
position: absolute;
|
||||||
|
top: 7px;
|
||||||
|
right: 15px;
|
||||||
|
box-shadow: 0 2px 0.75px -0.8px #543F44 inset, 0 -2.5px 0.75px -0.8px #543F44 inset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls-labels {
|
||||||
|
display: block;
|
||||||
|
width: 745px;
|
||||||
|
height: 30px;
|
||||||
|
font-family: sans-serif;
|
||||||
|
color: #4F4949;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls-labels p {
|
||||||
|
font-size: 0.5rem;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
display: inline-block;
|
||||||
|
border: 1px solid #7A7174;
|
||||||
|
padding: 0px 8px;
|
||||||
|
border-radius: 2px;
|
||||||
|
position: absolute;
|
||||||
|
top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls-labels p:nth-child(1) {
|
||||||
|
left: 55px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls-labels p:nth-child(2) {
|
||||||
|
left: 130px;
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls-labels p:nth-child(3) {
|
||||||
|
left: 265px;
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls-labels p:nth-child(4) {
|
||||||
|
left: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls-labels p:nth-child(5) {
|
||||||
|
left: 645px;
|
||||||
|
padding: 0 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls-bar {
|
||||||
|
display: block;
|
||||||
|
width: 745px;
|
||||||
|
height: 30px;
|
||||||
|
position: absolute;
|
||||||
|
top: 30px;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent 0% 2.5%, #DCDCD0 2.5% 5%,
|
||||||
|
transparent 5% 7.5%, #E1DFD3 7.5% 10%,
|
||||||
|
transparent 10% 12.5%, #D5D5CD 12.5% 15%,
|
||||||
|
transparent 15% 17.5%, #DCDCD0 17.5% 20%,
|
||||||
|
transparent 20% 22.5%, #E1DFD3 22.5% 25%,
|
||||||
|
transparent 25% 27.5%, #D5D5CD 27.5% 30%,
|
||||||
|
transparent 30% 32.5%, #DCDCD0 32.5% 35%,
|
||||||
|
transparent 35% 37.5%, #E1DFD3 37.5% 40%,
|
||||||
|
transparent 40% 42.5%, #D5D5CD 42.5% 45%,
|
||||||
|
transparent 45% 47.5%, #DCDCD0 47.5% 50%,
|
||||||
|
transparent 50% 52.5%, #E1DFD3 52.5% 55%,
|
||||||
|
transparent 55% 57.5%, #D5D5CD 57.5% 60%,
|
||||||
|
transparent 60% 62.5%, #DCDCD0 62.5% 65%,
|
||||||
|
transparent 65% 67.5%, #E1DFD3 67.5% 70%,
|
||||||
|
transparent 70% 72.5%, #D5D5CD 72.5% 75%,
|
||||||
|
transparent 75% 77.5%, #DCDCD0 77.5% 80%,
|
||||||
|
transparent 80% 82.5%, #E1DFD3 82.5% 85%,
|
||||||
|
transparent 85% 87.5%, #D5D5CD 87.5% 90%,
|
||||||
|
transparent 90% 92.5%, #DCDCD0 92.5% 95%,
|
||||||
|
transparent 95% 97.5%, #E1DFD3 97.5% 100%
|
||||||
|
), linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent 0% 7%, #DCDCD0 7% 14%,
|
||||||
|
transparent 14% 21%, #E1DFD3 21% 28%,
|
||||||
|
transparent 28% 35%, #D5D5CD 35% 42%,
|
||||||
|
transparent 42% 49%, #DCDCD0 49% 56%,
|
||||||
|
transparent 56% 63%, #E1DFD3 63% 70%,
|
||||||
|
transparent 70% 77%, #D5D5CD 77% 84%,
|
||||||
|
transparent 84% 91%, #DCDCD0 91% 98%,
|
||||||
|
transparent 98%
|
||||||
|
), linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent 0% 2.5%, #E0DED1 2.5% 5%,
|
||||||
|
transparent 5% 7.5%, #DDDBCE 7.5% 10%,
|
||||||
|
transparent 10% 12.5%, #DEDCCF 12.5% 15%,
|
||||||
|
transparent 15% 17.5%, #E0DED1 17.5% 20%,
|
||||||
|
transparent 20% 22.5%, #E1DFD3 22.5% 25%,
|
||||||
|
transparent 25% 27.5%, #DDDBCE 27.5% 30%,
|
||||||
|
transparent 30% 32.5%, #DEDCCF 32.5% 35%,
|
||||||
|
transparent 35% 37.5%, #E0DED1 37.5% 40%,
|
||||||
|
transparent 40% 42.5%, #D5D5CD 42.5% 45%,
|
||||||
|
transparent 45% 47.5%, #DDDBCE 47.5% 50%,
|
||||||
|
transparent 50% 52.5%, #E4E2D6 52.5% 55%,
|
||||||
|
transparent 55% 57.5%, #E0DED1 57.5% 60%,
|
||||||
|
transparent 60% 62.5%, #DCDCD0 62.5% 65%,
|
||||||
|
transparent 65% 67.5%, #DDDBCE 67.5% 70%,
|
||||||
|
transparent 70% 72.5%, #DEDCCF 72.5% 75%,
|
||||||
|
transparent 75% 77.5%, #E0DED1 77.5% 80%,
|
||||||
|
transparent 80% 82.5%, #E1DFD3 82.5% 85%,
|
||||||
|
transparent 85% 87.5%, #E4E2D6 87.5% 90%,
|
||||||
|
transparent 90% 92.5%, #E0DED1 92.5% 95%,
|
||||||
|
transparent 95% 97.5%, #E1DFD3 97.5% 100%
|
||||||
|
), linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent 0% 7%, #CAC8BC 7% 14%,
|
||||||
|
transparent 14% 21%, #DBD9CD 21% 28%,
|
||||||
|
transparent 28% 35%, #D0CEC2 35% 42%,
|
||||||
|
transparent 42% 49%, #CAC8BC 49% 56%,
|
||||||
|
transparent 56% 63%, #DBD9CD 63% 70%,
|
||||||
|
transparent 70% 77%, #D0CEC2 77% 84%,
|
||||||
|
transparent 84% 91%, #CAC8BC 91% 98%,
|
||||||
|
transparent 98%
|
||||||
|
), linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent 0% 2.5%, #E0DED1 2.5% 5%,
|
||||||
|
transparent 5% 7.5%, #DDDBCE 7.5% 10%,
|
||||||
|
transparent 10% 12.5%, #DEDCCF 12.5% 15%,
|
||||||
|
transparent 15% 17.5%, #E0DED1 17.5% 20%,
|
||||||
|
transparent 20% 22.5%, #E1DFD3 22.5% 25%,
|
||||||
|
transparent 25% 27.5%, #DDDBCE 27.5% 30%,
|
||||||
|
transparent 30% 32.5%, #DEDCCF 32.5% 35%,
|
||||||
|
transparent 35% 37.5%, #E0DED1 37.5% 40%,
|
||||||
|
transparent 40% 42.5%, #D5D5CD 42.5% 45%,
|
||||||
|
transparent 45% 47.5%, #DDDBCE 47.5% 50%,
|
||||||
|
transparent 50% 52.5%, #E4E2D6 52.5% 55%,
|
||||||
|
transparent 55% 57.5%, #E0DED1 57.5% 60%,
|
||||||
|
transparent 60% 62.5%, #DCDCD0 62.5% 65%,
|
||||||
|
transparent 65% 67.5%, #DDDBCE 67.5% 70%,
|
||||||
|
transparent 70% 72.5%, #DEDCCF 72.5% 75%,
|
||||||
|
transparent 75% 77.5%, #E0DED1 77.5% 80%,
|
||||||
|
transparent 80% 82.5%, #E1DFD3 82.5% 85%,
|
||||||
|
transparent 85% 87.5%, #D5D5CD 87.5% 90%,
|
||||||
|
transparent 90% 92.5%, #DCDCD0 92.5% 95%,
|
||||||
|
transparent 95% 97.5%, #E1DFD3 97.5% 100%
|
||||||
|
), linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent 0% 2.5%, #DCDCD0 2.5% 5%,
|
||||||
|
transparent 5% 7.5%, #E1DFD3 7.5% 10%,
|
||||||
|
transparent 10% 12.5%, #D5D5CD 12.5% 15%,
|
||||||
|
transparent 15% 17.5%, #DCDCD0 17.5% 20%,
|
||||||
|
transparent 20% 22.5%, #E1DFD3 22.5% 25%,
|
||||||
|
transparent 25% 27.5%, #D5D5CD 27.5% 30%,
|
||||||
|
transparent 30% 32.5%, #DCDCD0 32.5% 35%,
|
||||||
|
transparent 35% 37.5%, #E1DFD3 37.5% 40%,
|
||||||
|
transparent 40% 42.5%, #D5D5CD 42.5% 45%,
|
||||||
|
transparent 45% 47.5%, #DCDCD0 47.5% 50%,
|
||||||
|
transparent 50% 52.5%, #E1DFD3 52.5% 55%,
|
||||||
|
transparent 55% 57.5%, #D5D5CD 57.5% 60%,
|
||||||
|
transparent 60% 62.5%, #DCDCD0 62.5% 65%,
|
||||||
|
transparent 65% 67.5%, #DDDBCE 67.5% 70%,
|
||||||
|
transparent 70% 72.5%, #DEDCCF 72.5% 75%,
|
||||||
|
transparent 75% 77.5%, #E0DED1 77.5% 80%,
|
||||||
|
transparent 80% 82.5%, #E1DFD3 82.5% 85%,
|
||||||
|
transparent 85% 87.5%, #E4E2D6 87.5% 90%,
|
||||||
|
transparent 90% 92.5%, #E0DED1 92.5% 95%,
|
||||||
|
transparent 95% 97.5%, #E1DFD3 97.5% 100%
|
||||||
|
), linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent 0% 7%, #CAC8BC 7% 14%,
|
||||||
|
transparent 14% 21%, #DBD9CD 21% 28%,
|
||||||
|
transparent 28% 35%, #D0CEC2 35% 42%,
|
||||||
|
transparent 42% 49%, #CAC8BC 49% 56%,
|
||||||
|
transparent 56% 63%, #DBD9CD 63% 70%,
|
||||||
|
transparent 70% 77%, #D0CEC2 77% 84%,
|
||||||
|
transparent 84% 91%, #CAC8BC 91% 98%,
|
||||||
|
transparent 98%
|
||||||
|
), linear-gradient(90deg, #F1EEE7, #EDE8E2, #EBE8E1);
|
||||||
|
background-size: 52px 20px,
|
||||||
|
16px 20px,
|
||||||
|
52px 20px,
|
||||||
|
16px 20px,
|
||||||
|
52px 20px,
|
||||||
|
52px 20px,
|
||||||
|
16px 20px,
|
||||||
|
100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 1px 5px,
|
||||||
|
107px 5px,
|
||||||
|
203px 5px,
|
||||||
|
325px 5px,
|
||||||
|
537px 5px,
|
||||||
|
589px 5px,
|
||||||
|
730px 5px,
|
||||||
|
top left;
|
||||||
|
box-shadow: 0 2px 1px -1px #C1BEB5 inset, 0 -2px 1px -1px #FCFCFA inset, 1px 0 0.5px -0.5px #DFDFD7 inset, -2.5px 0 1px -1px #D4CDC5 inset;
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-container {
|
||||||
|
display: block;
|
||||||
|
width: 45px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 2px;
|
||||||
|
background-image: linear-gradient(90deg,#E6E4D7, #EAE7DE);
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
left: 55px;
|
||||||
|
box-shadow: 0 4.5px 1px -2px #837363 inset,
|
||||||
|
4px 0 3px -2px #BEB8A8 inset,
|
||||||
|
-3px 0 2px -2px #DBDBD3 inset,
|
||||||
|
0 -0.5px 1px #DBD8CF inset,
|
||||||
|
0 1px 0.5px -0.75px #FFFCF5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-bar {
|
||||||
|
display: block;
|
||||||
|
width: 35px;
|
||||||
|
height: 8px;
|
||||||
|
background-color: black;
|
||||||
|
position: absolute;
|
||||||
|
left: 5px;
|
||||||
|
top: 7px;
|
||||||
|
background-image: linear-gradient(#1E1E23 45%, #3D3D3D 55%);
|
||||||
|
border-radius: 1px;
|
||||||
|
box-shadow: 0 -0.5px 0.5px 0 #D6DBDE, 0 0 1px 0.5px #F7F4ED, 0 -1.25px 2px -1px #2A2925 inset, 0 1.25px 2px -1px black inset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-handle {
|
||||||
|
display: block;
|
||||||
|
width: 14px;
|
||||||
|
height: 7px;
|
||||||
|
border-radius: 3px;
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
left: 7px;
|
||||||
|
background-image: radial-gradient(transparent 40%, #1A1C1D 70%),
|
||||||
|
linear-gradient(#23272A 60%, #484852 70%);
|
||||||
|
box-shadow: 0 1.5px 1px -1px #676B6E inset,
|
||||||
|
1px 3px 2px -2px #6B685F,
|
||||||
|
3px 5px 5px rgba(110, 106, 94, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-container {
|
||||||
|
display: block;
|
||||||
|
width: 65px;
|
||||||
|
height: 20px;
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
left: 130px;
|
||||||
|
border-radius: 2px;
|
||||||
|
background-image: linear-gradient(90deg, #E5E0DA, #F0EEE1);
|
||||||
|
box-shadow: 0 1px 0.5px -0.75px #FFFCF5,
|
||||||
|
0 3.5px 1.5px -1.5px #807060 inset,
|
||||||
|
0 -1.75px 2px -2px #ECE9E0 inset,
|
||||||
|
3.5px 0 2px -2px #C7BFB2 inset,
|
||||||
|
-1.5px 0 0.5px -0.75px #DBD8D1 inset,
|
||||||
|
0 -0.5px 1px #D2D1CF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-bar {
|
||||||
|
display: block;
|
||||||
|
width: 55px;
|
||||||
|
height: 10px;
|
||||||
|
position: absolute;
|
||||||
|
top: 6px;
|
||||||
|
left: 5px;
|
||||||
|
border-radius: 1px;
|
||||||
|
background-image: linear-gradient(#1D1E23 45%, #3F3D40 55%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-handle {
|
||||||
|
display: block;
|
||||||
|
width: 19px;
|
||||||
|
height: 19px;
|
||||||
|
border-radius: 2px;
|
||||||
|
position: absolute;
|
||||||
|
left: 14px;
|
||||||
|
top: 1px;
|
||||||
|
background-color: #6A6964;
|
||||||
|
background-image: radial-gradient(#262626 50%, #3E3D39 80%),
|
||||||
|
radial-gradient(#353537, #3E3E40 80%, #323031 90%),
|
||||||
|
linear-gradient(#4C4942, #676860 10% 25%, #282C2C 30% 70%, #777370 75%),
|
||||||
|
linear-gradient(#4C4942, #676860 10% 25%, #282C2C 30% 70%, #777370 75%);
|
||||||
|
background-size: 17px 4px,
|
||||||
|
15px 15px,
|
||||||
|
3px 20px,
|
||||||
|
3px 20px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: bottom left,
|
||||||
|
2px 0,
|
||||||
|
top right,
|
||||||
|
top left;
|
||||||
|
box-shadow: 0 1.5px 0.75px -0.5px #454442 inset,
|
||||||
|
0 2px 1px -0.5px #797876 inset,
|
||||||
|
-0.5px 0 0.5px rgba(30,32,36,0.5) inset,
|
||||||
|
5px 0 6px -2px rgba(24,23,28,0.3),
|
||||||
|
0 5px 4px rgba(76,74,72,0.3),
|
||||||
|
0 6px 2px -3px rgba(76,74,72,0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tone-container {
|
||||||
|
display: block;
|
||||||
|
width: 52px;
|
||||||
|
height: 20px;
|
||||||
|
position: absolute;
|
||||||
|
left: 265px;
|
||||||
|
top: 5px;
|
||||||
|
border-radius: 2px;
|
||||||
|
box-shadow: 0 3.5px 1.5px -1.5px #6B5E4B inset,
|
||||||
|
4px 0 3px -2px #A9A79B inset,
|
||||||
|
-3px 0 2px -2px #D1CAB7 inset,
|
||||||
|
0 -0.5px 1px #DEDCD0 inset,
|
||||||
|
0 1px 0.5px -0.75px #FFFCF5;
|
||||||
|
background-image: linear-gradient(90deg, rgba(207,202,196,0.5), rgba(246,243,226,0.5));
|
||||||
|
}
|
||||||
|
|
||||||
|
.tone-bar {
|
||||||
|
display: block;
|
||||||
|
width: 45px;
|
||||||
|
height: 9px;
|
||||||
|
position: absolute;
|
||||||
|
left: 3px;
|
||||||
|
top: 6px;
|
||||||
|
background-image: linear-gradient(#282C2D 25%, #3C3D3F 35%, #373739);
|
||||||
|
border-radius: 1px;
|
||||||
|
box-shadow: 0 0.5px 0.5px #F8F5EC,
|
||||||
|
-1px 0 0.5px #CBC8C1,
|
||||||
|
1px 0 0.5px #E9EBDD,
|
||||||
|
0 -1px 0.5px #E2E2E2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tone-handle {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
width: 19px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 2px;
|
||||||
|
left: 5px;
|
||||||
|
top: 1px;
|
||||||
|
background-color: #6A6964;
|
||||||
|
background-image: radial-gradient(#272729, #22211C 60%, #5F5C55),
|
||||||
|
radial-gradient(#3E3F41, #363638 80%, #272729 90%),
|
||||||
|
linear-gradient(#4C4942, #676860 10% 25%, #282C2C 30% 70%, #777370 75%),
|
||||||
|
linear-gradient(#4F4A46, #65645F);
|
||||||
|
background-size: 18px 4px,
|
||||||
|
15px 15px,
|
||||||
|
2px 20px,
|
||||||
|
3px 20px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: bottom left,
|
||||||
|
2.25px 0,
|
||||||
|
top right,
|
||||||
|
top left;
|
||||||
|
box-shadow: 0 1.5px 0.75px -0.5px #494846 inset,
|
||||||
|
0 2.5px 1px -0.75px #313131 inset,
|
||||||
|
-0.75px 0 0.5px -0.25px #454545 inset,
|
||||||
|
0.5px 0 0.5px #3D3A35 inset,
|
||||||
|
0 5px 4px 1px rgba(76,74,72,0.4),
|
||||||
|
0 6px 2px -3px rgba(76,74,72,0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: block;
|
||||||
|
width: 9px;
|
||||||
|
height: 20px;
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear.btn {
|
||||||
|
left: 350px;
|
||||||
|
background-color: #7C99DB;
|
||||||
|
box-shadow: 0 -1px 1px -0.5px #2F3B43 inset,
|
||||||
|
0 -2px 0.5px -0.5px #474D67 inset,
|
||||||
|
0 0 1px 1.25px #93A6D1 inset,
|
||||||
|
0 0 1px 0.5px #889FBF inset,
|
||||||
|
0 3px 3px -1px #59524C,
|
||||||
|
0 4px 4px -1px #9D998E,
|
||||||
|
-0.5px 0 0.5px #707E9A,
|
||||||
|
0 2px 4px #D6D4C5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.del.btn {
|
||||||
|
left: 375px;
|
||||||
|
background-color: #EB8372;
|
||||||
|
box-shadow: 0.5px 0 0.5px #945C4E inset,
|
||||||
|
0 -1px 1px -0.5px #6A331E inset,
|
||||||
|
0 -2px 0.5px -0.5px #A65F50 inset,
|
||||||
|
0 0 1px 1.25px #D38671 inset,
|
||||||
|
0 0 1px 0.5px #EF8C7F inset,
|
||||||
|
0 3px 3px -1px #966C51,
|
||||||
|
0 4px 4px -1px #C9A99A,
|
||||||
|
-0.5px 0 0.5px #D5AEA2,
|
||||||
|
0 2px 4px #DBBBB0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.down.btn {
|
||||||
|
left: 400px;
|
||||||
|
background-color: #EE8273;
|
||||||
|
box-shadow: 0.5px 0 0.5px #C07C69 inset,
|
||||||
|
0 -1px 1px -0.5px #6A331E inset,
|
||||||
|
0 -2px 0.5px -0.5px #A65F50 inset,
|
||||||
|
0 0 1.25px 1px #EC8775 inset,
|
||||||
|
0 0 1px 0.5px #EF8C7F inset,
|
||||||
|
0 3px 3px -1px #966C51,
|
||||||
|
0 4px 4px -1px #C9A99A,
|
||||||
|
-0.5px 0 0.5px #D5AEA2,
|
||||||
|
0 2px 4px #DBBBB0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.up.btn {
|
||||||
|
left: 425px;
|
||||||
|
background-color: #EB8372;
|
||||||
|
box-shadow: 0.5px 0 0.5px #945C4E inset,
|
||||||
|
0 -1px 1px -0.5px #6A331E inset,
|
||||||
|
0 -2px 0.5px -0.5px #A65F50 inset,
|
||||||
|
0 0 1.25px 1px #D38671 inset,
|
||||||
|
0 0 1px 1px #EF8C7F inset,
|
||||||
|
0 3px 3px -1px #966C51,
|
||||||
|
0 4px 4px -1px #C9A99A,
|
||||||
|
-0.5px 0 0.5px #D5AEA2,
|
||||||
|
0 2px 4px #DBBBB0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select.btn {
|
||||||
|
left: 450px;
|
||||||
|
background-color: #EE8273;
|
||||||
|
box-shadow: 0.5px 0 0.5px #945C4E inset,
|
||||||
|
0 -1px 1px -0.5px #6A331E inset,
|
||||||
|
0 -2px 0.5px -0.5px #A65F50 inset,
|
||||||
|
0 0 1.25px 1px #D38671 inset,
|
||||||
|
0 0 1px 1px #EF8C7F inset,
|
||||||
|
0 3px 3px -1px #966C51,
|
||||||
|
0 4px 4px -1px #C9A99A,
|
||||||
|
-0.5px 0 0.5px #D5AEA2,
|
||||||
|
0 2px 4px #DBBBB0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset.btn {
|
||||||
|
left: 475px;
|
||||||
|
background-color: #EDAF5D;
|
||||||
|
box-shadow: 0.75px 0 0.5px #AE8059 inset,
|
||||||
|
0 -0.75px 0.5px #975A2B inset,
|
||||||
|
0 0 1px 1.5px #E3AC75 inset,
|
||||||
|
0 0 1px 3px #E6AE60 inset,
|
||||||
|
0 3px 3px -1px #966C51,
|
||||||
|
0 4px 4px -1px #C9A99A,
|
||||||
|
1px 0 3px #F8CD94,
|
||||||
|
-1px 0 5px -2px #D1A78E,
|
||||||
|
0 0 4px 1px #EAD4B4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo.btn {
|
||||||
|
left: 500px;
|
||||||
|
background-color: #8ED8C5;
|
||||||
|
box-shadow: 1.25px 0 0.5px #729883 inset,
|
||||||
|
0.5px 0 1px 2px #9AD4BE inset,
|
||||||
|
-3px 0 4px -2px #B4BFAF,
|
||||||
|
0 3px 3px -1px #464F3E,
|
||||||
|
0 0 5px #D6E4DA,
|
||||||
|
0 0 7px #D1D1C7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.memory.btn {
|
||||||
|
left: 525px;
|
||||||
|
background-color: #92A5C3;
|
||||||
|
box-shadow: 0 -1px 1px -0.5px #2F3B43 inset,
|
||||||
|
0 -2px 0.5px -0.5px #474D67 inset,
|
||||||
|
0 0 1px 1.25px #93A6D1 inset,
|
||||||
|
0 0 1px 0.5px #889FBF inset,
|
||||||
|
0 3px 3px -1px #59524C,
|
||||||
|
0 4px 4px -1px #9D998E,
|
||||||
|
-0.5px 0 0.5px #707E9A,
|
||||||
|
0 2px 4px #D6D4C5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bigbtn {
|
||||||
|
display: block;
|
||||||
|
width: 35px;
|
||||||
|
height: 20px;
|
||||||
|
background-color: red;
|
||||||
|
border-radius: 3px;
|
||||||
|
position: absolute;
|
||||||
|
top: 4px;
|
||||||
|
background-color: #759ADE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bigbtn.onekey-1 {
|
||||||
|
right: 65px;
|
||||||
|
|
||||||
|
background-image: linear-gradient(
|
||||||
|
transparent 25%,
|
||||||
|
|
||||||
|
#405E94 28%,
|
||||||
|
#A4BFF6 31%,
|
||||||
|
#8398D1 34%,
|
||||||
|
|
||||||
|
#405E94 37%,
|
||||||
|
#A4BFF6 40%,
|
||||||
|
#8398D1 43%,
|
||||||
|
|
||||||
|
#405E94 46%,
|
||||||
|
#A4BFF6 49%,
|
||||||
|
#8398D1 52%,
|
||||||
|
|
||||||
|
#405E94 55%,
|
||||||
|
#A4BFF6 58%,
|
||||||
|
#8398D1 61%,
|
||||||
|
|
||||||
|
#405E94 64%,
|
||||||
|
#A4BFF6 67%,
|
||||||
|
#8398D1 70%,
|
||||||
|
|
||||||
|
#405E94 73%,
|
||||||
|
#A4BFF6 76%,
|
||||||
|
#8398D1 79%,
|
||||||
|
|
||||||
|
transparent 80%
|
||||||
|
);
|
||||||
|
box-shadow: 0 -0.5px 1px #15172C inset,
|
||||||
|
1.25px 0 0.5px -0.5px #3B3B47 inset,
|
||||||
|
2.5px 0 1px #65748B inset,
|
||||||
|
3.5px 0 1px #98AED3 inset,
|
||||||
|
0 1px 1px #D4E0FA inset,
|
||||||
|
0 -1.5px 1px #8DA3D4 inset,
|
||||||
|
-0.5px 0 0.5px #9AAED1 inset,
|
||||||
|
-0.75px 0.25px 0.5px #2C2C38,
|
||||||
|
-1.25px -0.1px 0.1px #EDEEF3,
|
||||||
|
0 5px 3px -2.5px #4F4B40,
|
||||||
|
0 3px 4px -1px #ACA59D,
|
||||||
|
0 4px 5px #CFCBCA;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bigbtn.onekey-2 {
|
||||||
|
right: 20px;
|
||||||
|
|
||||||
|
background-image: linear-gradient(
|
||||||
|
transparent 25%,
|
||||||
|
|
||||||
|
#405E94 28%,
|
||||||
|
#A4BFF6 31%,
|
||||||
|
#8398D1 34%,
|
||||||
|
|
||||||
|
#405E94 37%,
|
||||||
|
#A4BFF6 40%,
|
||||||
|
#8398D1 43%,
|
||||||
|
|
||||||
|
#47659B 46%,
|
||||||
|
#A4BFF6 49%,
|
||||||
|
#8398D1 52%,
|
||||||
|
|
||||||
|
#5871A7 55%,
|
||||||
|
#A4BFF6 58%,
|
||||||
|
#8398D1 61%,
|
||||||
|
|
||||||
|
#405E94 64%,
|
||||||
|
#A4BFF6 67%,
|
||||||
|
#8398D1 70%,
|
||||||
|
|
||||||
|
#5871A7 73%,
|
||||||
|
#A4BFF6 76%,
|
||||||
|
#8398D1 79%,
|
||||||
|
|
||||||
|
transparent 80%
|
||||||
|
);
|
||||||
|
box-shadow: 0 -0.5px 1px #535E70 inset,
|
||||||
|
1.25px 0 0.5px -0.5px #3B3B47 inset,
|
||||||
|
2.5px 0 1px #65748B inset,
|
||||||
|
3.5px 0 1px #98AED3 inset,
|
||||||
|
0 1px 1px #D4E0FA inset,
|
||||||
|
0 -1.5px 1px #8DA3D4 inset,
|
||||||
|
-0.5px 0 0.5px #9AAED1 inset,
|
||||||
|
-0.75px 0.25px 0.5px #454F59,
|
||||||
|
-1.25px -0.1px 0.1px #EDEEF3,
|
||||||
|
0 5px 3px -2.5px #433E38,
|
||||||
|
0 3px 4px -1px #C0B9B1,
|
||||||
|
0 4px 5px #CFCBCA;
|
||||||
|
}
|
||||||
|
|
||||||
|
.keys-container {
|
||||||
|
display: block;
|
||||||
|
width: 720px;
|
||||||
|
height: 150px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 35px;
|
||||||
|
background-color: #E3DFDA;
|
||||||
|
background-image: linear-gradient(90deg, #E3DFDA, #DFDCD3);
|
||||||
|
border-radius: 0.5px;
|
||||||
|
box-shadow: 0 3px 1.25px -0.75px #282421 inset,
|
||||||
|
5px 0 2px #AFA896 inset,
|
||||||
|
-2px 0 4px #9F9684 inset,
|
||||||
|
-6px 0 2px #BFB3A5 inset,
|
||||||
|
0 -1.5px 1px 1px #F1F6EF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.white {
|
||||||
|
width: 710px;
|
||||||
|
height: 135px;
|
||||||
|
background-color: #141312;
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
left: 5px;
|
||||||
|
box-shadow: -1px 0 2px -1px rgba(40,36,33,0.35),
|
||||||
|
3px 0 2px -1px rgba(40,36,33,0.5),
|
||||||
|
-2px 0 3px -2px #574E45,
|
||||||
|
0 8px 6px -3px #CBC8B9;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||||
|
-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||||
|
grid-gap: 2px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.white .key {
|
||||||
|
height: 133px;
|
||||||
|
background-color: #E9E7D8;
|
||||||
|
border-radius: 3px;
|
||||||
|
background-image: linear-gradient(#E9E7D8, #F4F2E3);
|
||||||
|
box-shadow: 1px 0 1px -0.5px #F6EDDC inset,
|
||||||
|
-1.25px 0 0.5px -0.5px #9D9885 inset,
|
||||||
|
0 0 1px 2px #F7F5E8 inset,
|
||||||
|
0 10px 5px -5px rgba(34,33,28,0.75),
|
||||||
|
0 10px 7px -3px rgba(40,36,33,0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.black {
|
||||||
|
display: grid;
|
||||||
|
width: 665px;
|
||||||
|
height: 72px;
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
left: 35px;
|
||||||
|
grid-template-columns: 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px;
|
||||||
|
-ms-grid-columns: 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px 21px;
|
||||||
|
grid-gap: 21px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.black .key {
|
||||||
|
background-color: #000;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
#B5BDD2 15%,
|
||||||
|
#556478 17%,
|
||||||
|
#3C4759 30%,
|
||||||
|
#262E31 90%,
|
||||||
|
#192026 92%
|
||||||
|
);
|
||||||
|
box-shadow: 1px 0 1px #1D212D inset,
|
||||||
|
2px 0 1px #252D3A inset,
|
||||||
|
-2px 0 0.75px #252D3A inset,
|
||||||
|
0 -2px 0.5px #22252A inset,
|
||||||
|
0 -6px 0.5px #3B3F42 inset,
|
||||||
|
0 0 0.5px 1px #181913,
|
||||||
|
7px 7px 1px -5px #FAFBF3,
|
||||||
|
-7.25px 7px 1px -5px #FAFBF3;
|
||||||
|
border-radius: 1.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.black .key:nth-child(1) {
|
||||||
|
background-image: linear-gradient(
|
||||||
|
#B5BDD2 4%,
|
||||||
|
#556478 7%,
|
||||||
|
#3C4759 50%,
|
||||||
|
#262E31 90%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.black .key:nth-child(4) {
|
||||||
|
background-image: linear-gradient(
|
||||||
|
176deg,
|
||||||
|
#B5BDD2 4%,
|
||||||
|
#556478 8%,
|
||||||
|
#3C4759 30%,
|
||||||
|
#262E31 90%,
|
||||||
|
#192026 92%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.black .key:nth-child(5) {
|
||||||
|
background-image: linear-gradient(
|
||||||
|
178deg,
|
||||||
|
#B5BDD2 2%,
|
||||||
|
#556478 3%,
|
||||||
|
#3C4759 30%,
|
||||||
|
#262E31 90%,
|
||||||
|
#192026 92%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.black .key:nth-child(7) {
|
||||||
|
background-image: linear-gradient(
|
||||||
|
#B5BDD2 12%,
|
||||||
|
#556478 15%,
|
||||||
|
#3C4759 30%,
|
||||||
|
#262E31 90%,
|
||||||
|
#192026 92%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.black .key:nth-child(8) {
|
||||||
|
background-image: linear-gradient(
|
||||||
|
182deg,
|
||||||
|
#B5BDD2 2%,
|
||||||
|
#556478 3% 10%,
|
||||||
|
#3C4759 30%,
|
||||||
|
#262E31 90%,
|
||||||
|
#192026 92%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.black .key:nth-child(9) {
|
||||||
|
background-image: linear-gradient(
|
||||||
|
#B5BDD2 7%,
|
||||||
|
#556478 10% 20%,
|
||||||
|
#3C4759 30%,
|
||||||
|
#262E31 90%,
|
||||||
|
#192026 92%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.black .key:nth-child(11) {
|
||||||
|
background-image: linear-gradient(
|
||||||
|
182deg,
|
||||||
|
#B5BDD2 7%,
|
||||||
|
#556478 10% 20%,
|
||||||
|
#3C4759 30%,
|
||||||
|
#262E31 90%,
|
||||||
|
#192026 92%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.black .key:nth-child(12) {
|
||||||
|
background-image: linear-gradient(
|
||||||
|
181deg,
|
||||||
|
#B5BDD2 5%,
|
||||||
|
#556478 8%,
|
||||||
|
#3C4759 30%,
|
||||||
|
#262E31 90%,
|
||||||
|
#192026 92%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.black .key:nth-child(14) {
|
||||||
|
background-image: linear-gradient(
|
||||||
|
#B5BDD2 2%,
|
||||||
|
#556478 8%,
|
||||||
|
#3C4759 30%,
|
||||||
|
#262E31 90%,
|
||||||
|
#192026 92%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.black .key:nth-child(15) {
|
||||||
|
background-image: linear-gradient(
|
||||||
|
175deg,
|
||||||
|
#B5BDD2 3%,
|
||||||
|
#556478 8% 15%,
|
||||||
|
#3C4759 30%,
|
||||||
|
#262E31 90%,
|
||||||
|
#192026 92%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.black .key:nth-child(16) {
|
||||||
|
background-image: linear-gradient(
|
||||||
|
179deg,
|
||||||
|
#B5BDD2 5%,
|
||||||
|
#556478 7%,
|
||||||
|
#3C4759 30%,
|
||||||
|
#262E31 90%,
|
||||||
|
#192026 92%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
position: absolute;
|
||||||
|
top: 225px;
|
||||||
|
left: 15px;
|
||||||
|
display: block;
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo h1 {
|
||||||
|
font-family: "Montserrat", sans-serif;
|
||||||
|
font-size: 12px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo h1 span:first-child {
|
||||||
|
color: #6C4351;
|
||||||
|
text-shadow: 0 0 1px #C3A9B2, 0 0 2px #EEDFE2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo h1 span:last-child {
|
||||||
|
color: #ECE8E5;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-shadow: 0px 0.5px 0.75px #BCBBB7,
|
||||||
|
0.5px 0.5px 0.75px #BCBBB7,
|
||||||
|
0.5px 0px 0.75px #BCBBB7,
|
||||||
|
0.5px -0.5px 0.75px #BCBBB7,
|
||||||
|
0 -0.5px 0.75px #BCBBB7,
|
||||||
|
-0.5px -0.5px 0.75px #BCBBB7,
|
||||||
|
-0.5px 0.5px 0.75px #BCBBB7,
|
||||||
|
-0.5px 0 0.75px #BCBBB7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
If you like my work:
|
||||||
|
https://www.buymeacoffee.com/fossheim
|
||||||
|
https://www.patreon.com/fossheim
|
||||||
|
*/
|
||||||
106
home/index.html
Normal file
106
home/index.html
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="stylesheet" href="estilo.css">
|
||||||
|
<title>Test Page</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="wrapper" aria-label="Casio PT-1 Keyboard illustration made with HTML and CSS">
|
||||||
|
<div class="casio" aria-hidden="true">
|
||||||
|
<div class="speaker"></div>
|
||||||
|
<div class="logo">
|
||||||
|
<h1><span>Casio</span> <span>PT-1</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="controls">
|
||||||
|
<div class="controls-labels">
|
||||||
|
<p>mode</p>
|
||||||
|
<p>volume</p>
|
||||||
|
<p>tone</p>
|
||||||
|
<p>tempo</p>
|
||||||
|
<p>one key play</p>
|
||||||
|
</div>
|
||||||
|
<div class="controls-bar">
|
||||||
|
<div class="mode-container">
|
||||||
|
<div class="mode-bar"></div>
|
||||||
|
<div class="mode-handle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="volume-container">
|
||||||
|
<div class="volume-bar"></div>
|
||||||
|
<div class="volume-handle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="tone-container">
|
||||||
|
<div class="tone-bar"></div>
|
||||||
|
<div class="tone-handle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="clear btn"></div>
|
||||||
|
<div class="del btn"></div>
|
||||||
|
<div class="down btn"></div>
|
||||||
|
<div class="up btn"></div>
|
||||||
|
<div class="select btn"></div>
|
||||||
|
<div class="reset btn"></div>
|
||||||
|
<div class="demo btn"></div>
|
||||||
|
<div class="memory btn"></div>
|
||||||
|
<div class="onekey-1 bigbtn"></div>
|
||||||
|
<div class="onekey-2 bigbtn"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="keys-container">
|
||||||
|
<div class="white">
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
</div>
|
||||||
|
<div class="black">
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class=""></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class=""></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class=""></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class=""></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
<div class="key"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<style>
|
||||||
|
.mifooter {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
bottom:0;
|
||||||
|
width: 100%;
|
||||||
|
background-color: magenta;
|
||||||
|
color: white;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="mifooter">
|
||||||
|
<p style="text-align:right; background-color:340847;"><small>thanks <a href="https://fossheim.io/" target="_blank" title="design">Fossheim</a></small></p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user