diff --git a/Shane-Casey-Kate/Jade-CSS-Conversion b/Shane-Casey-Kate/Jade-CSS-Conversion new file mode 100644 index 0000000..c545f40 --- /dev/null +++ b/Shane-Casey-Kate/Jade-CSS-Conversion @@ -0,0 +1,141 @@ +| @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; +| } diff --git a/Shane-Casey-Kate/Jade-HTML Conversion b/Shane-Casey-Kate/Jade-HTML Conversion new file mode 100644 index 0000000..a6e72f1 --- /dev/null +++ b/Shane-Casey-Kate/Jade-HTML Conversion @@ -0,0 +1,47 @@ +!!! 5 +header + h1 Give Us Your Info +main + section.welcome + video(poster='welcome-neon-sign.jpg', controls='') + source(src='https://developers.google.com/web/fundamentals/documentation/introduction-to-media/video/video/chrome.webm', type='video/webm') + source(src='https://developers.google.com/web/fundamentals/documentation/introduction-to-media/video/video/chrome.mp4', type='video/mp4') + p This browser does not support the video element. + form + fieldset + video#video(width='150', height='', autoplay='') + button#snap Add a Profile Picture + canvas#canvas(width='150', height='150') + div + label.mid(for='name') Username or Email: + input#name(type='text', name='name', value='', tabindex='1', placeholder='youremail@email.com') + div + label.mid(for='password') Password: + input#password(type='password', name='password', value='', tabindex='2', placeholder='password') + div + label(for='radio-choice-1') Male: + input#radio-choice-1.radio(type='radio', name='radio-choice', tabindex='5', value='choice-1') + div + label(for='radio-choice-2') Female: + input#radio-choice-2.radio(type='radio', name='radio-choice', tabindex='6', value='choice-2') + div + label.mid(for='select-choice-2') Country: + select#select-choice-2(name='extraoptions') + optgroup(label='1') + option(value='Choice 1') United States + option(value='Choice 2') Canada + option(value='Choice 3') United Kingdome + optgroup(label='2') + option(value='Choice 1') Country 1 + option(value='Choice 2') Country 2 + option(value='Choice 3') Country 3 + div + label(for='textarea') Bio: + textarea#textarea(cols='40', rows='10', name='textarea', placeholder='tell us about yourself!') + div + label(for='check') Click the box if you agree to our termas and conditions: + input#check.checkbox(type='checkbox', name='check') + div + input.submit(type='submit', value='Sign Up') + audio#page_audio(src='Yakety_Sax_-_Benny_Hill.mp3', preload='auto') +script(type='text/javascript', src='media.js') diff --git a/Shane-Casey-Kate/Jade-HTML-Video Conversion b/Shane-Casey-Kate/Jade-HTML-Video Conversion new file mode 100644 index 0000000..b644098 --- /dev/null +++ b/Shane-Casey-Kate/Jade-HTML-Video Conversion @@ -0,0 +1,7 @@ +!!! 5 +p Here is the audio +p Here is the video +video(poster='poster.jpg', controls='') + source(src='https://developers.google.com/web/fundamentals/documentation/introduction-to-media/video/video/chrome.webm', type='video/webm') + source(src='https://developers.google.com/web/fundamentals/documentation/introduction-to-media/video/video/chrome.mp4', type='video/mp4') + p This browser does not support the video element. diff --git a/Shane-Casey-Kate/Jade-JS-Camera-Conversion b/Shane-Casey-Kate/Jade-JS-Camera-Conversion new file mode 100644 index 0000000..6d909d9 --- /dev/null +++ b/Shane-Casey-Kate/Jade-JS-Camera-Conversion @@ -0,0 +1,33 @@ +| // 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); +| }); diff --git a/Shane-Casey-Kate/Jade-JS-Media-Conversion b/Shane-Casey-Kate/Jade-JS-Media-Conversion new file mode 100644 index 0000000..1396b57 --- /dev/null +++ b/Shane-Casey-Kate/Jade-JS-Media-Conversion @@ -0,0 +1,73 @@ +| 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, 150, 150); +| }); +| 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); +| window.onload = function(){ +| name.value = localStorage.getItem(name.id); +| password.value = localStorage.getItem(password.id); +| radio1.value = localStorage.getItem(radio1.id); +| radio2.value = localStorage.getItem(radio2.id); +| select2.value = localStorage.getItem(select2.id); +| textarea.value = localStorage.getItem(textarea.id); +| check.value = localStorage.getItem(check.id); +| }; +| var fname = document.getElementById("name"); +| var password = document.getElementById("password"); +| var radio1 = document.getElementById("radio-choice-1"); +| var radio2 = document.getElementById("radio-choice-2"); +| var select2 = document.getElementById("select-choice-2"); +| var textarea = document.getElementById("textarea"); +| var check = document.getElementById("check"); +| name.onblur = function(){ +| storeData(this.id, this.value); +| }; +| password.onblur = function(){ +| storeData(this.id, this.value); +| }; +| radio1.onblur = function(){ +| storeData(this.id, this.value); +| }; +| radio2.onblur = function(){ +| storeData(this.id, this.value); +| }; +| select2.onblur = function(){ +| storeData(this.id, this.value); +| }; +| textarea.onblur = function(){ +| storeData(this.id, this.value); +| }; +| check.onblur = function(){ +| storeData(this.id, this.value); +| }; +| function storeData(name, value){ +| localStorage.setItem(name, value); +| }; +| var audio = document.getElementById("page_audio"); +| audio.onClick = function(){ +| audio.play(); +| }; diff --git a/Shane-Casey-Kate/README.md b/Shane-Casey-Kate/README.md new file mode 100644 index 0000000..8ef8440 --- /dev/null +++ b/Shane-Casey-Kate/README.md @@ -0,0 +1,17 @@ ++### A project for Code Fellows B25 by Kate Fleming, Casey Holly, and Shane Kalles. ++ ++Our build of HTML5-as-a-platform. ++ ++Capturing photos with the camera access was pretty simple, but being able to capture video is really difficult, since the new file would need to be stored somewhere and local storage doesn't work for this type of information. ++ ++Our form layout is simple and we made sure to include local storage. Found that you need to write different JavaScript code for local storage of text items vs. radio checkboxes. Another obstical we came across is that if a button is inside a form is takes on "submit" function which if used to trigger an event you need to change its default to not reload the page. ++ ++Adding the video element is very simple and the controls available to you in HTML5 make for an easy addition to any page with the playback results that you want. We didn't add any custom controls but this process seems fairly easy. ++ ++Resources: ++* [UX Design](http://www.anotheruiguy.com/ux-design-dev/_book/html5/audio.html) ++* [Custom Video Control](http://www.creativebloq.com/html5/build-custom-html5-video-player-9134473) ++* ++*[Video & Audio Elements](http://www.sitepoint.com/essential-audio-and-video-events-for-html5/) ++*[Radio Local Storage](http://stackoverflow.com/questions/19451862/localstorage-not-saving-changed-radio-button-values-if-checked-is-used) + diff --git a/Shane-Casey-Kate/Yakety_Sax_-_Benny_Hill.mp3 b/Shane-Casey-Kate/Yakety_Sax_-_Benny_Hill.mp3 new file mode 100644 index 0000000..bf7e83c Binary files /dev/null and b/Shane-Casey-Kate/Yakety_Sax_-_Benny_Hill.mp3 differ diff --git a/Shane-Casey-Kate/camera.js b/Shane-Casey-Kate/camera.js new file mode 100644 index 0000000..11a70f6 --- /dev/null +++ b/Shane-Casey-Kate/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/Shane-Casey-Kate/index.html b/Shane-Casey-Kate/index.html new file mode 100644 index 0000000..0299081 --- /dev/null +++ b/Shane-Casey-Kate/index.html @@ -0,0 +1,75 @@ + + + + + Video Master + + + + + +
+

Give Us Your Info

+
+
+
+ +
+ + +
+
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+ +
+ + + diff --git a/Shane-Casey-Kate/main.css b/Shane-Casey-Kate/main.css new file mode 100644 index 0000000..6cf7978 --- /dev/null +++ b/Shane-Casey-Kate/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; +} diff --git a/Shane-Casey-Kate/media.js b/Shane-Casey-Kate/media.js new file mode 100644 index 0000000..66c9f6f --- /dev/null +++ b/Shane-Casey-Kate/media.js @@ -0,0 +1,81 @@ +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, 440, 280); + }); + + 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); + +window.onload = function(){ + email.value = localStorage.getItem(email.id); + password.value = localStorage.getItem(password.id); + // radio1.value = localStorage.getItem(radio1.id); + // radio2.value = localStorage.getItem(radio2.id); + select2.value = localStorage.getItem(select2.id); + textarea.value = localStorage.getItem(textarea.id); + check.value = localStorage.getItem(check.id); +}; + +var email = document.getElementById("email"); +var password = document.getElementById("password"); +// var radio1 = document.getElementById("radio-choice-1"); +// var radio2 = document.getElementById("radio-choice-2"); +var select2 = document.getElementById("select-choice-2"); +var textarea = document.getElementById("textarea"); +var check = document.getElementById("check"); + +email.onblur = function(){ + storeData(this.id, this.value); +}; +password.onblur = function(){ + storeData(this.id, this.value); +}; +// radio1.onblur = function(){ +// storeData(this.id, this.value); +// }; +// radio2.onblur = function(){ +// storeData(this.id, this.value); +// }; +select2.onblur = function(){ + storeData(this.id, this.value); +}; +textarea.onblur = function(){ + storeData(this.id, this.value); +}; +check.onblur = function(){ + storeData(this.id, this.value); +}; + +function storeData(name, value){ + localStorage.setItem(name, value); +}; + +// var tempGender = $("input:checked + label").text(); +// window.localStorage.setItem("tempGender",$("input:checked + label").text()); + + diff --git a/Shane-Casey-Kate/video.html b/Shane-Casey-Kate/video.html new file mode 100644 index 0000000..e518fa5 --- /dev/null +++ b/Shane-Casey-Kate/video.html @@ -0,0 +1,18 @@ + + + + + +

Here is the audio

+ + +

Here is the video

+ + + + + diff --git a/Shane-Casey-Kate/welcome-neon-sign.jpg b/Shane-Casey-Kate/welcome-neon-sign.jpg new file mode 100644 index 0000000..39e4d9c Binary files /dev/null and b/Shane-Casey-Kate/welcome-neon-sign.jpg differ