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/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..63e84c2 --- /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..4cd04ab --- /dev/null +++ b/Shane-Casey-Kate/main.css @@ -0,0 +1,142 @@ +@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 { + width: 552px; + margin: 40px auto; +} +fieldset { + margin: auto; + width: 470px; + height: auto; + border: 1px solid #e5e5e5; + border-top: 0px solid #e5e5e5; + background: #fdfdfd; + padding: 40px; + background-color: lightgray; +} +div { + padding: 0 0 40px 0; +} +label { + float: left; + width: 200px; + font-size: 1em; + color: slategray; +} +label.mid { + line-height: 40px; +} +input, +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; +} +input:hover, +select:hover, +textarea:hover { + border: 2px solid grey; +} +input:focus, +select:focus, +textarea:focus { + border-color: silver; + outline: none; +} +select { + float: left; + margin-bottom: 40px; + appearance: none; + width: 260px; + border-radius: 0; +} +input.checkbox, +input.radio { + margin: 0; + padding: 2px 0; + width: auto; + height: auto; +} +input.button { + width: 270px; + height: 40px; + border: 0px solid #fff; +} +textarea { + width: 240px; + height: 200px; + padding: 10px; + background: coral; + border: 2px solid #fff; + color: #fff; +} +input.submit { + float: left; + margin-left: 200px; + width: 100px; + height: 40px; + color: #fff; +} +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..0f63e7a --- /dev/null +++ b/Shane-Casey-Kate/media.js @@ -0,0 +1,66 @@ +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); + 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 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); +}; +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); +}; 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