CGxp1

From e1af5e214c389aea2b55daf82bdec92472db3f19 Mon Sep 17 00:00:00 2001 From: Chris Xiong Date: Sat, 9 Feb 2019 00:00:53 +0800 Subject: Moving shitty stuff sitting around in the www folder here. --- xp/cgxp/1.html | 14 ++ xp/cgxp/2.html | 14 ++ xp/cgxp/main1.js | 320 ++++++++++++++++++++++++++++++ xp/cgxp/main2.js | 280 +++++++++++++++++++++++++++ xp/cgxp/wglmath.js | 102 ++++++++++ xp/vco/.htaccess | 5 + xp/vco/LICENSE | 116 +++++++++++ xp/vco/README.md | 4 + xp/vco/app-icons/icon-128.png | Bin 0 -> 3953 bytes xp/vco/app-icons/icon-16.png | Bin 0 -> 48386 bytes xp/vco/app-icons/icon-60.png | Bin 0 -> 1843 bytes xp/vco/favicon.ico | Bin 0 -> 1150 bytes xp/vco/index.html | 23 +++ xp/vco/manifest.webapp | 18 ++ xp/vco/scripts/app.js | 129 +++++++++++++ xp/vco/scripts/install.js | 37 ++++ xp/vco/scripts/respond.js | 6 + xp/vco/styles/app.css | 205 ++++++++++++++++++++ xp/vco/styles/install-button.css | 20 ++ xp/vco/styles/normalize.css | 406 +++++++++++++++++++++++++++++++++++++++ 20 files changed, 1699 insertions(+) create mode 100644 xp/cgxp/1.html create mode 100644 xp/cgxp/2.html create mode 100644 xp/cgxp/main1.js create mode 100644 xp/cgxp/main2.js create mode 100644 xp/cgxp/wglmath.js create mode 100644 xp/vco/.htaccess create mode 100644 xp/vco/LICENSE create mode 100644 xp/vco/README.md create mode 100644 xp/vco/app-icons/icon-128.png create mode 100644 xp/vco/app-icons/icon-16.png create mode 100644 xp/vco/app-icons/icon-60.png create mode 100644 xp/vco/favicon.ico create mode 100644 xp/vco/index.html create mode 100644 xp/vco/manifest.webapp create mode 100644 xp/vco/scripts/app.js create mode 100644 xp/vco/scripts/install.js create mode 100644 xp/vco/scripts/respond.js create mode 100644 xp/vco/styles/app.css create mode 100644 xp/vco/styles/install-button.css create mode 100644 xp/vco/styles/normalize.css (limited to 'xp') diff --git a/xp/cgxp/1.html b/xp/cgxp/1.html new file mode 100644 index 0000000..b05e78f --- /dev/null +++ b/xp/cgxp/1.html @@ -0,0 +1,14 @@ + + + + +CGxp1 + + + + + + +

+ + diff --git a/xp/cgxp/2.html b/xp/cgxp/2.html new file mode 100644 index 0000000..880c0cb --- /dev/null +++ b/xp/cgxp/2.html @@ -0,0 +1,14 @@ + + + + +CGxp2 + + + + + + +

+ + diff --git a/xp/cgxp/main1.js b/xp/cgxp/main1.js new file mode 100644 index 0000000..bd52e13 --- /dev/null +++ b/xp/cgxp/main1.js @@ -0,0 +1,320 @@ +//Copyright Chris Xiong 2018 +//License: Expat (MIT) +var cvs,WGL,vpw,vph,hdiv; +var fsh=` +varying lowp vec4 vC; +void main(void) +{ + gl_FragColor=vC; +}`; +var vsh=` +attribute vec3 vp; +attribute vec4 vc; +uniform mat4 mmodelview; +uniform mat4 mprojection; +varying lowp vec4 vC; +void main(void) +{ + gl_Position=mprojection*mmodelview*vec4(vp,1.); + vC=vc; +}`; +var shp; +var vbufsize=4096; +var vbo,ibo; +var vb=new Float32Array(vbufsize*7); +var ib=new Uint16Array(vbufsize*6/4); +var Mprojection,Mmodelview; +var primc; +var kst=[]; +var dbc,mbtn,mup,mdn,mx,my,mox,moy; +var shapes=[]; +var curshape=null; +var dragging=false,drg; + +var Shape=function(t) +{ + this.type=t; + this.vert=[]; +} +function copyshape(s) +{ + var r=new Shape(s.type); + for(var i=0;iab.l())pp=new v3d(1e9,1e9,1e9); + return Math.min(p.subtract(pp).l(),p.subtract(a).l(),p.subtract(b).l()); + } + if(this.type=='segment') + { + var d=dp2s(x,y,this.vert[0].x,this.vert[0].y, + this.vert[1].x,this.vert[1].y); + if(d<5)return true; + } + if(this.type=='segstrip'||this.type=="segloop") + { + for(var i=0;i=vbufsize/4)batchGL(); + for(var i=0;i<4;++i) + for(var j=0;j<7;++j)vb[primc*7*4+i*7+j]=a[i*7+j]; + ++primc; +} + +function init() +{ + cvs=document.getElementById("glCvs"); + if(!window.devicePixelRatio)window.devicePixelRatio=1; + cvs.width=window.innerWidth; + cvs.height=window.innerHeight; + cvs.style.width=cvs.width+"px"; + cvs.style.height=cvs.height+"px"; + cvs.width=cvs.width*window.devicePixelRatio; + cvs.height=cvs.height*window.devicePixelRatio; + vpw=cvs.width;vph=cvs.height; + try + {WGL=cvs.getContext("webgl")||cvs.getContext("experimental-webgl");} + catch(e){WGL=null;} + if(!WGL){alert("WebGL is not supported by your browser...");return;} + + WGL.clearColor(0.5,0.5,0.5,1.0); + WGL.clearDepth(1); + WGL.enable(WGL.DEPTH_TEST); + WGL.depthFunc(WGL.LESS); + WGL.enable(WGL.BLEND); + WGL.blendFunc(WGL.SRC_ALPHA,WGL.ONE_MINUS_SRC_ALPHA); + WGL.clear(WGL.COLOR_BUFFER_BIT|WGL.DEPTH_BUFFER_BIT); + WGL.viewport(0,0,cvs.width,cvs.height); + + shp=WGL.createProgram(); + var fshs=createShader(fsh,WGL.FRAGMENT_SHADER); + var vshs=createShader(vsh,WGL.VERTEX_SHADER); + WGL.attachShader(shp,vshs);WGL.attachShader(shp,fshs); + WGL.linkProgram(shp); + if(!WGL.getProgramParameter(shp,WGL.LINK_STATUS)) + { + alert("shader link error..."); + } + WGL.useProgram(shp); + + vbo=WGL.createBuffer(); + WGL.bindBuffer(WGL.ARRAY_BUFFER,vbo); + WGL.bufferData(WGL.ARRAY_BUFFER,vb,WGL.STATIC_DRAW); + var vpp=WGL.getAttribLocation(shp,"vp"); + var vcp=WGL.getAttribLocation(shp,"vc"); + WGL.enableVertexAttribArray(vpp); + WGL.enableVertexAttribArray(vcp); + WGL.bindBuffer(WGL.ARRAY_BUFFER,vbo); + WGL.vertexAttribPointer(vpp,3,WGL.FLOAT,false,7*4,0); + WGL.vertexAttribPointer(vcp,4,WGL.FLOAT,false,7*4,3*4); + + for(var i=0,n=0,p=0;i0&&state===0) + { + ++this.timer;health+=0.01; + this.r+=0.02;if(health>1)health=1; + } + if(this.timer>25)this.timer=-1; +} +Sphere.prototype.draw=function(x,y,a) +{ + if(this.timer!==-1)pushSphere(x,y,0,this.r,[0,1,0,a*(0.6-this.timer*0.6/25)]); +} + +function createShader(sh,t) +{ + var shader=WGL.createShader(t); + WGL.shaderSource(shader,sh); + WGL.compileShader(shader); + if(!WGL.getShaderParameter(shader,WGL.COMPILE_STATUS)) + { + alert("shader error..."+WGL.getShaderInfoLog(shader)); + return null; + } + return shader; +} +function pushQuad(a) +{ + if(primc>=vbufsize/4)batchGL(); + for(var i=0;i<4;++i) + for(var j=0;j<7;++j)vb[primc*7*4+i*7+j]=a[i*7+j]; + ++primc; +} +function cube(x,y,z,l,r,g,b,a) +{ + var L=x-l/2,R=x+l/2; + var B=y-l/2,T=y+l/2; + var N=z-l/2,F=z+l/2; + pushQuad([ + L,B,N,r,g,b,a, + L,T,N,r,g,b,a, + R,T,N,r,g,b,a, + R,B,N,r,g,b,a + ]); + pushQuad([ + L,B,F,r,g,b,a, + L,T,F,r,g,b,a, + R,T,F,r,g,b,a, + R,B,F,r,g,b,a + ]); + pushQuad([ + L,B,N,r,g,b,a, + L,T,N,r,g,b,a, + L,T,F,r,g,b,a, + L,B,F,r,g,b,a + ]); + pushQuad([ + R,B,N,r,g,b,a, + R,T,N,r,g,b,a, + R,T,F,r,g,b,a, + R,B,F,r,g,b,a + ]); + pushQuad([ + L,B,N,r,g,b,a, + R,B,N,r,g,b,a, + R,B,F,r,g,b,a, + L,B,F,r,g,b,a + ]); + pushQuad([ + L,T,N,r,g,b,a, + R,T,N,r,g,b,a, + R,T,F,r,g,b,a, + L,T,F,r,g,b,a + ]); +} +function pushSphere(x,y,z,r,col) +{ + for(var i=0;i<12;++i) + for(var j=0;j<12;++j) + { + var r1=r*Math.sin(i*Math.PI/12); + var a=new v3d(x+r1*Math.cos(j*Math.PI/12*2),y+r1*Math.sin(j*Math.PI/12*2),z+r*Math.cos(i*Math.PI/12)); + var b=new v3d(x+r1*Math.cos((j+1)*Math.PI/12*2),y+r1*Math.sin((j+1)*Math.PI/12*2),z+r*Math.cos(i*Math.PI/12)); + r1=r*Math.sin((i+1)*Math.PI/12); + var c=new v3d(x+r1*Math.cos(j*Math.PI/12*2),y+r1*Math.sin(j*Math.PI/12*2),z+r*Math.cos((i+1)*Math.PI/12)); + var d=new v3d(x+r1*Math.cos((j+1)*Math.PI/12*2),y+r1*Math.sin((j+1)*Math.PI/12*2),z+r*Math.cos((i+1)*Math.PI/12)); + pushQuad([ + a.x,a.y,a.z,col[0],col[1],col[2],col[3], + b.x,b.y,b.z,col[0],col[1],col[2],col[3], + d.x,d.y,d.z,col[0],col[1],col[2],col[3], + c.x,c.y,c.z,col[0],col[1],col[2],col[3] + ]); + } +} +function randint(c) +{return Math.floor(Math.random()*c);} +function genmaze() +{ + for(var i=0;i=0&&cy>=0&&cx=0&&maz[ppx-1][ppy])--ppx;} + if(e.code=='KeyW'){if(ppy+1=0&&maz[ppx][ppy-1])--ppy;} + }); + genmaze(); + requestAnimationFrame(mainloop); +} + +function mainloop() +{ + const ofx=-9,ofy=-11; + WGL.clearColor(0.5,0.5,0.5,1.0); + WGL.clearDepth(1); + WGL.clear(WGL.COLOR_BUFFER_BIT|WGL.DEPTH_BUFFER_BIT); + primc=0; + Mmodelview=buildIdentityMatrix(); + + Mmodelview=buildLookAtMatrix(pos,[15,10,0],[0,0,1]); + for(var i=0;i diff --git a/xp/vco/README.md b/xp/vco/README.md new file mode 100644 index 0000000..080808e --- /dev/null +++ b/xp/vco/README.md @@ -0,0 +1,4 @@ +#Voice-change-o-matic +A Web Audio API-powered voice changer and visualizer. + +[Run the demo live](https://mdn.github.io/voice-change-o-matic/) diff --git a/xp/vco/app-icons/icon-128.png b/xp/vco/app-icons/icon-128.png new file mode 100644 index 0000000..5223c0d Binary files /dev/null and b/xp/vco/app-icons/icon-128.png differ diff --git a/xp/vco/app-icons/icon-16.png b/xp/vco/app-icons/icon-16.png new file mode 100644 index 0000000..4f4f56e Binary files /dev/null and b/xp/vco/app-icons/icon-16.png differ diff --git a/xp/vco/app-icons/icon-60.png b/xp/vco/app-icons/icon-60.png new file mode 100644 index 0000000..fc048ff Binary files /dev/null and b/xp/vco/app-icons/icon-60.png differ diff --git a/xp/vco/favicon.ico b/xp/vco/favicon.ico new file mode 100644 index 0000000..f6a62e7 Binary files /dev/null and b/xp/vco/favicon.ico differ diff --git a/xp/vco/index.html b/xp/vco/index.html new file mode 100644 index 0000000..6438bd3 --- /dev/null +++ b/xp/vco/index.html @@ -0,0 +1,23 @@ + + + + + + VCO + + + + + + + +

+

+

+ + + diff --git a/xp/vco/manifest.webapp b/xp/vco/manifest.webapp new file mode 100644 index 0000000..3636263 --- /dev/null +++ b/xp/vco/manifest.webapp @@ -0,0 +1,18 @@ +{ + "version": "0.1", + "name": "VCO", + "description": "A sample app that uses getUserMedia to grab an audio stream, which is then passed to the Web Audio API to apply effects to the audio and create visualizations.", + "launch_path": "/index.html", + "icons": { + "60": "app-icons/icon-60.png", + "128": "app-icons/icon-128.png" + }, + "default_locale": "en", + "permissions": { + "audio-capture": { + "description": "Required to capture audio via getUserMedia" + } + }, + "orientation" : "portrait", + "display" : "fullscreen" +} diff --git a/xp/vco/scripts/app.js b/xp/vco/scripts/app.js new file mode 100644 index 0000000..cec78be --- /dev/null +++ b/xp/vco/scripts/app.js @@ -0,0 +1,129 @@ +// fork getUserMedia for multiple browser versions, for those +// that need prefixes + +navigator.getUserMedia = (navigator.getUserMedia || + navigator.webkitGetUserMedia || + navigator.mozGetUserMedia || + navigator.msGetUserMedia); + +// set up forked web audio context, for multiple browsers +// window. is needed otherwise Safari explodes + +var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +var source; +var stream; + +// grab the mute button to use below + +var mute = document.querySelector('.mute'); + +//set up the different audio nodes we will use for the app + +var analyser = audioCtx.createAnalyser(); +analyser.minDecibels = -90; +analyser.maxDecibels = -10; +analyser.smoothingTimeConstant = 0.85; + +var distortion = audioCtx.createWaveShaper(); +var gainNode = audioCtx.createGain(); +var biquadFilter = audioCtx.createBiquadFilter(); +var convolver = audioCtx.createConvolver(); + +// set up canvas context for visualizer + +var canvas = document.querySelector('.visualizer'); +var canvasCtx = canvas.getContext("2d"); +var bar = document.getElementById("bar"); +var intendedWidth = document.querySelector('.wrapper').clientWidth; + +canvas.setAttribute('width',intendedWidth*2); +canvas.style.width=intendedWidth+'px'; + + +var drawVisual; + +//main block for doing the audio recording + +if (navigator.getUserMedia) { +console.log('getUserMedia supported.'); +navigator.getUserMedia ( + // constraints - only audio needed for this app + { + audio: true + }, + + // Success callback + function(stream) { + source = audioCtx.createMediaStreamSource(stream); + source.connect(analyser); + analyser.connect(distortion); + distortion.connect(biquadFilter); + biquadFilter.connect(convolver); + convolver.connect(gainNode); + gainNode.connect(audioCtx.destination); + + visualize(); + + }, + + // Error callback + function(err) { + console.log('The following gUM error occured: ' + err); + } +); +} else { +console.log('getUserMedia not supported on your browser!'); +} + +function visualize() { + WIDTH = canvas.width; + HEIGHT = canvas.height; + analyser.fftSize = 2048; + var bufferLength = analyser.fftSize; + console.log(bufferLength); + var dataArray = new Uint8Array(bufferLength); + + canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + + var draw = function() { + + drawVisual = requestAnimationFrame(draw); + + analyser.getByteTimeDomainData(dataArray); + + canvasCtx.fillStyle = 'rgb(200, 200, 200)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + canvasCtx.lineWidth = 2; + canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; + + canvasCtx.beginPath(); + + var sliceWidth = WIDTH * 1.0 / bufferLength; + var x = 0, s = 0; + + for(var i = 0; i < bufferLength; i++) { + + var v = dataArray[i] / 128.0; + var t=Math.abs(dataArray[i]-128.)/128.0; + s+=t*t; + var y = v * HEIGHT/2; + + if(i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } + + x += sliceWidth; + } + s/=bufferLength;s=Math.sqrt(s);s=1-s; + bar.style.width=100*s+'%'; + + canvasCtx.lineTo(canvas.width, canvas.height/2); + canvasCtx.stroke(); + }; + + draw(); + +} diff --git a/xp/vco/scripts/install.js b/xp/vco/scripts/install.js new file mode 100644 index 0000000..d44f1bb --- /dev/null +++ b/xp/vco/scripts/install.js @@ -0,0 +1,37 @@ +// get a reference to the install button +var button = document.getElementById('install-btn'); + +if(navigator.mozApps) { + +var manifest_url = location.href + 'manifest.webapp'; + +function install(ev) { + ev.preventDefault(); + // define the manifest URL + // install the app + var installLocFind = navigator.mozApps.install(manifest_url); + installLocFind.onsuccess = function(data) { + // App is installed, do something + }; + installLocFind.onerror = function() { + // App wasn't installed, info is in + // installapp.error.name + alert(installLocFind.error.name); + }; +}; + +//call install() on click if the app isn't already installed. If it is, hide the button. + +var installCheck = navigator.mozApps.checkInstalled(manifest_url); + +installCheck.onsuccess = function() { + if(installCheck.result) { + button.style.display = "none"; + } else { + button.addEventListener('click', install, false); + }; +}; + +} else { + button.style.display = "none"; +} diff --git a/xp/vco/scripts/respond.js b/xp/vco/scripts/respond.js new file mode 100644 index 0000000..e3dc2c0 --- /dev/null +++ b/xp/vco/scripts/respond.js @@ -0,0 +1,6 @@ +/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */ +/*! NOTE: If you're already including a window.matchMedia polyfill via Modernizr or otherwise, you don't need this part */ +window.matchMedia=window.matchMedia||function(a){"use strict";var c,d=a.documentElement,e=d.firstElementChild||d.firstChild,f=a.createElement("body"),g=a.createElement("div");return g.id="mq-test-1",g.style.cssText="position:absolute;top:-100em",f.style.background="none",f.appendChild(g),function(a){return g.innerHTML='',d.insertBefore(f,e),c=42===g.offsetWidth,d.removeChild(f),{matches:c,media:a}}}(document); + +/*! Respond.js v1.3.0: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */ +(function(a){"use strict";function x(){u(!0)}var b={};if(a.respond=b,b.update=function(){},b.mediaQueriesSupported=a.matchMedia&&a.matchMedia("only all").matches,!b.mediaQueriesSupported){var q,r,t,c=a.document,d=c.documentElement,e=[],f=[],g=[],h={},i=30,j=c.getElementsByTagName("head")[0]||d,k=c.getElementsByTagName("base")[0],l=j.getElementsByTagName("link"),m=[],n=function(){for(var b=0;l.length>b;b++){var c=l[b],d=c.href,e=c.media,f=c.rel&&"stylesheet"===c.rel.toLowerCase();d&&f&&!h[d]&&(c.styleSheet&&c.styleSheet.rawCssText?(p(c.styleSheet.rawCssText,d,e),h[d]=!0):(!/^([a-zA-Z:]*\/\/)/.test(d)&&!k||d.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&m.push({href:d,media:e}))}o()},o=function(){if(m.length){var b=m.shift();v(b.href,function(c){p(c,b.href,b.media),h[b.href]=!0,a.setTimeout(function(){o()},0)})}},p=function(a,b,c){var d=a.match(/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi),g=d&&d.length||0;b=b.substring(0,b.lastIndexOf("/"));var h=function(a){return a.replace(/(url$)['"]?([^\/$'"][^:\)'"]+)['"]?(\))/g,"$1"+b+"$2$3")},i=!g&&c;b.length&&(b+="/"),i&&(g=1);for(var j=0;g>j;j++){var k,l,m,n;i?(k=c,f.push(h(a))):(k=d[j].match(/@media *([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1,f.push(RegExp.$2&&h(RegExp.$2))),m=k.split(","),n=m.length;for(var o=0;n>o;o++)l=m[o],e.push({media:l.split("(")[0].match(/(only\s+)?([a-zA-Z]+)\s?/)&&RegExp.$2||"all",rules:f.length-1,hasquery:l.indexOf("(")>-1,minw:l.match(/$\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*$/)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:l.match(/$\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*$/)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},s=function(){var a,b=c.createElement("div"),e=c.body,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",e||(e=f=c.createElement("body"),e.style.background="none"),e.appendChild(b),d.insertBefore(e,d.firstChild),a=b.offsetWidth,f?d.removeChild(e):e.removeChild(b),a=t=parseFloat(a)},u=function(b){var h="clientWidth",k=d[h],m="CSS1Compat"===c.compatMode&&k||c.body[h]||k,n={},o=l[l.length-1],p=(new Date).getTime();if(b&&q&&i>p-q)return a.clearTimeout(r),r=a.setTimeout(u,i),void 0;q=p;for(var v in e)if(e.hasOwnProperty(v)){var w=e[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?t||s():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?t||s():1)),w.hasquery&&(z&&A||!(z||m>=x)||!(A||y>=m))||(n[w.media]||(n[w.media]=[]),n[w.media].push(f[w.rules]))}for(var C in g)g.hasOwnProperty(C)&&g[C]&&g[C].parentNode===j&&j.removeChild(g[C]);for(var D in n)if(n.hasOwnProperty(D)){var E=c.createElement("style"),F=n[D].join("\n");E.type="text/css",E.media=D,j.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(c.createTextNode(F)),g.push(E)}},v=function(a,b){var c=w();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))},w=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}();n(),b.update=n,a.addEventListener?a.addEventListener("resize",x,!1):a.attachEvent&&a.attachEvent("onresize",x)}})(this); diff --git a/xp/vco/styles/app.css b/xp/vco/styles/app.css new file mode 100644 index 0000000..5020353 --- /dev/null +++ b/xp/vco/styles/app.css @@ -0,0 +1,205 @@ +/* || General layout rules for narrow screens */ + +html { + font-family: 'Righteous', cursive; + font-size: 10px; + background-color: black; +} + +body { + width: 100%; + background-color: #999; + /*background-image: url(../images/pattern.png);*/ +} + +h1, h2, label { + font-size: 3rem; + font-family: 'Nova Square', cursive; + text-align: center; + color: black; + text-shadow: -1px -1px 1px #aaa, + 0px 1px 1px rgba(255,255,255,0.5), + 1px 1px 2px rgba(255,255,255,0.7), + 0px 0px 2px rgba(255,255,255,0.4); + margin: 0; +} + +h1 { + font-size: 3.5rem; + padding-top: 1.2rem; +} + +.wrapper { + height: 100%; + max-width: 800px; + margin: 0 auto; +} + +/* || main UI sections */ + +header { + height: 120px; +} + +canvas { + /*border-top: 1px solid black; + border-bottom: 1px solid black; + margin-bottom: -3px; + box-shadow: 0 -2px 4px rgba(0,0,0,0.7), + 0 3px 4px rgba(0,0,0,0.7);*/ +} + +.controls { + background-color: rgba(0,0,0,0.1); + height: calc(100% - 225px); +} + +/* || select element styling */ + +.controls div { + width: 100%; + padding-top: 1rem; +} + +.controls label, .controls select { + display: block; + margin: 0 auto; +} + +.controls label { + width: 100%; + text-align: center; + line-height: 3rem; + padding: 1rem 0; +} + +.controls select { + width: 80%; + font-size: 2rem; +} + +/* || button styling */ + +button, form a { + background-color: #0088cc; + background-image: linear-gradient(to bottom, #0088cc 0%,#0055cc 100%); + text-shadow: 1px 1px 1px black; + text-align: center; + color: white; + border: none; + width: 90%; + margin: 1rem auto 0.5rem; + max-width: 80%; + font-size: 1.6rem; + line-height: 3rem; + padding: .5rem; + display: block; +} + +button:hover, button:focus, form a:hover, form a:focus { + box-shadow: inset 1px 1px 2px rgba(0,0,0,0.7); +} + +button:active, form a:active { + box-shadow: inset 2px 2px 3px rgba(0,0,0,0.7); +} + +a#activated { + background-color: #fff; + background-image: linear-gradient(to bottom, #f00 0%,#a06 100%); +} + +/* || Checkbox hack to control information box display */ + +label[for="toggle"] { + font-family: 'NotoColorEmoji'; + font-size: 3rem; + position: absolute; + top: 4px; + right: 5px; + z-index: 5; + cursor: pointer; +} + +input[type=checkbox] { + position: absolute; + top: -100px; +} + +aside { + position: fixed; + top: 0; + left: 0; + padding-top: 1.5rem; + text-shadow: 1px 1px 1px black; + width: 100%; + height: 100%; + transform: translateX(100%); + transition: 0.6s all; + background-color: #999; + background-image: linear-gradient(to top right, rgba(0,0,0,0), rgba(0,0,0,0.5)); +} + +aside p, aside li { + font-size: 1.6rem; + line-height: 1.3; + padding: 0rem 2rem 1rem; + color: white; +} + +aside li { + padding-left: 10px; +} + + +/* Toggled State of information box */ + +input[type=checkbox]:checked ~ aside { + transform: translateX(0); +} + +/* || Link styles */ + +a { + color: #aaa; +} + +a:hover, a:focus { + text-decoration: none; +} + +@media (min-width: 481px) { + /*CSS for medium width screens*/ + + /* || Basic layout changes for the main control buttons */ + +} + +@media all and (min-width: 800px) { + /*CSS for wide screens*/ + + h1 { + font-size: 5rem; + padding-top: 2.5rem; + } + + aside { + top: 0; + left: 100%; + text-shadow: 1px 1px 1px black; + width: 480px; + transform: translateX(0); + border-left: 2px solid black; + } + + /* Toggled State of information box */ + + input[type=checkbox]:checked ~ aside { + transform: translateX(-480px); + } + +} + +@media (min-width: 1100px) { + /*CSS for really wide screens*/ +} diff --git a/xp/vco/styles/install-button.css b/xp/vco/styles/install-button.css new file mode 100644 index 0000000..ed0d408 --- /dev/null +++ b/xp/vco/styles/install-button.css @@ -0,0 +1,20 @@ +#install-btn { + background: #0088cc; /* Old browsers */ + background: -moz-linear-gradient(top, #0088cc 0%, #0055cc 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0088cc), color-stop(100%,#0055cc)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #0088cc 0%,#0055cc 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #0088cc 0%,#0055cc 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #0088cc 0%,#0055cc 100%); /* IE10+ */ + background: linear-gradient(to bottom, #0088cc 0%,#0055cc 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0088cc', endColorstr='#0055cc',GradientType=0 ); /* IE6-9 */ + + text-align: center; + font-size: 200%; + margin: 1em auto; + display: block; + padding: .5em; + color: white; + width: 10em; + max-width: 80%; + line-height: 1.2em; +} \ No newline at end of file diff --git a/xp/vco/styles/normalize.css b/xp/vco/styles/normalize.css new file mode 100644 index 0000000..c2de8df --- /dev/null +++ b/xp/vco/styles/normalize.css @@ -0,0 +1,406 @@ +/*! normalize.css v2.1.3 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined in IE 8/9. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * Correct `inline-block` display not defined in IE 8/9. + */ + +audio, +canvas, +video { + display: inline-block; +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9. + * Hide the `template` element in IE, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background: transparent; +} + +/** + * Address `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari 5, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Correct font family set oddly in Safari 5 and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} + +/** + * Improve readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre-wrap; +} + +/** + * Set consistent quote types. + */ + +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9. + */ + +img { + border: 0; +} + +/** + * Correct overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari 5. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Correct font family not being inherited in all browsers. + * 2. Correct font size not being inherited in all browsers. + * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. + */ + +button, +input, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} -- cgit v1.2.3