diff --git a/Shane-Casey-Kate/README.md b/Shane-Casey-Kate/README.md new file mode 100644 index 0000000..2c28b9e --- /dev/null +++ b/Shane-Casey-Kate/README.md @@ -0,0 +1 @@ +*HTML5 as a platform diff --git a/Shane-Casey-Kate/index.html b/Shane-Casey-Kate/index.html new file mode 100644 index 0000000..f5a582a --- /dev/null +++ b/Shane-Casey-Kate/index.html @@ -0,0 +1,23 @@ + + + + + HTML5 Photo + + + +
+ +
+

HTML5 Photo

+
+ + + + + +
+ + + + diff --git a/Shane-Casey-Kate/media.js b/Shane-Casey-Kate/media.js new file mode 100644 index 0000000..faf8f20 --- /dev/null +++ b/Shane-Casey-Kate/media.js @@ -0,0 +1,33 @@ +window.addEventListener("DOMContentLoaded", function() { + var canvas = document.getElementById("canvas"), + context = canvas.getContext("2d"), + video = document.getElementById("video"), + videoObj = { "video" : true }, + errBack = function(error) { + console.log("Video capture error: ", error.code); + }; + + document.getElementById("snap").addEventListener("click", function() { + context.drawImage(video, 0, 0, 640, 480); + }); + + if(navigator.getUserMedia) { + navigator.getUserMedia(videoObj, function(stream) { + video.src = stream; + video.play(); + }, errBack); + } else if(navigator.webkitGetUserMedia) { + navigator.webkitGetUserMedia(videoObj, function(stream){ + video.src = window.webkitURL.createObjectURL(stream); + video.play(); + }, errBack); + } + else if(navigator.mozGetUserMedia) { + navigator.mozGetUserMedia(videoObj, function(stream){ + video.src = window.URL.createObjectURL(stream); + video.play(); + }, errBack); + } + +}, false); + diff --git a/Shane-Casey-Kate/video.html b/Shane-Casey-Kate/video.html new file mode 100644 index 0000000..ddec93f --- /dev/null +++ b/Shane-Casey-Kate/video.html @@ -0,0 +1,13 @@ + + + + + + + + + diff --git a/camera.js b/camera.js new file mode 100644 index 0000000..11a70f6 --- /dev/null +++ b/camera.js @@ -0,0 +1,36 @@ +// Put event listeners into place +window.addEventListener("DOMContentLoaded", function() { + // Grab elements, create settings, etc. + var canvas = document.getElementById("canvas"), + context = canvas.getContext("2d"), + video = document.getElementById("video"), + videoObj = { "video": true }, + errBack = function(error) { + console.log("Video capture error: ", error.code); + }; + + // Put video listeners into place + if(navigator.getUserMedia) { // Standard + navigator.getUserMedia(videoObj, function(stream) { + video.src = stream; + video.play(); + }, errBack); + } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed + navigator.webkitGetUserMedia(videoObj, function(stream){ + video.src = window.webkitURL.createObjectURL(stream); + video.play(); + }, errBack); + } + else if(navigator.mozGetUserMedia) { // Firefox-prefixed + navigator.mozGetUserMedia(videoObj, function(stream){ + video.src = window.URL.createObjectURL(stream); + video.play(); + }, errBack); + } + +}, false); + +// Trigger photo take +document.getElementById("snap").addEventListener("click", function() { + context.drawImage(video, 0, 0, 640, 480); +}); \ No newline at end of file diff --git a/form.js b/form.js new file mode 100644 index 0000000..e69de29 diff --git a/index2.html b/index2.html new file mode 100644 index 0000000..c8f4f80 --- /dev/null +++ b/index2.html @@ -0,0 +1,102 @@ + + + + + + Video Master + + + + + + + + +
+ + +
+
+

Sign up to get started!

+
+
+
+ +
+

HTML5 Photo

+
+ + + + +
+
+
+ + +
+
+ + + +
+ +
+ + + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ +
+ +
+ + + + + \ No newline at end of file diff --git a/main.css b/main.css new file mode 100644 index 0000000..5b39341 --- /dev/null +++ b/main.css @@ -0,0 +1,143 @@ +@import url(http://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700); + body { + background-color:white; + color: white; + font-size: 100%; + font-family: 'PT Sans Caption', sans-serif; + font-weight: 100; +} +h1 { + color:slategray; + font-weight:100; + text-align: center; + padding-bottom: 0.2em; + border-bottom: 1px solid silver; + +} +form { +/* border-top: 1px solid coral;*/ + width: 552px; + margin: 40px auto; +/* background-color: grey;*/ +} +fieldset { + margin: auto; + width: 470px; + height: auto; + border: 1px solid #e5e5e5; + border-top: 0px solid #e5e5e5; + background: #fdfdfd; + padding: 40px; + background-color: lightgray;; +} +form div { + padding: 0 0 40px 0; +} +form label { + float: left; + width: 200px; + font-size: 1em; + color: slategray; +} +form label.mid { + line-height: 40px; +} +form input, +form select { + background: coral; + border: 2px solid #fff; + color: #fff; + font-family: 'PT Sans Caption', sans-serif; + font-size: 1em; + font-weight: 400; + height: 40px; + margin: 0; + padding: 0 10px; + width: 240px; + vertical-align: middle; +} +form input:hover, +form select:hover, +form textarea:hover { + border: 2px solid grey; +} +form input:focus, +form select:focus, +form textarea:focus { + border-color: silver; + outline: none; +} +form select { + float: left; + margin-bottom: 40px; + appearance: none; + width: 260px; + border-radius: 0; +} +form input.checkbox, +form input.radio { + margin: 0; + padding: 2px 0; + width: auto; + height: auto; +} +form input.button { + width: 270px; + height: 40px; + border: 0px solid #fff; +} +form textarea { + width: 240px; + height: 200px; + padding: 10px; + background: coral; + border: 2px solid #fff; + color: #fff; +} +form input.submit { + float: left; + margin-left: 200px; + width: 100px; + height: 40px; + color: #fff; +} +form input.submit:hover { + background: silver; + background: -webkit-linear-gradient(#1d9676, #01caa7); + background: -moz-linear-gradient(#1d9676, #01caa7); + background: -o-linear-gradient(#1d9676, #01caa7); + background: -ms-linear-gradient(#1d9676, #01caa7); + background: linear-gradient(#1d9676, #01caa7); +} +::-webkit-input-placeholder { /* WebKit browsers */ + color:white; +} +:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ + color:white; + opacity: 1; +} +::-moz-placeholder { /* Mozilla Firefox 19+ */ + color:white; + opacity: 1; +} +:-ms-input-placeholder { /* Internet Explorer 10+ */ + color:white; +} +.welcome { + background-color: slategray; + margin-top:1em; + margin-bottom:2em; +} +video { + margin-left:20%; + +} +.site, h2 { + color:slategray; + text-size:0.2em; + font-weight: 100; +} +.canvas { + border 1px solid red; + float:left; +} \ No newline at end of file diff --git a/welcome-neon-sign.jpg b/welcome-neon-sign.jpg new file mode 100644 index 0000000..39e4d9c Binary files /dev/null and b/welcome-neon-sign.jpg differ