Add CSS and Forms #10
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| *HTML5 as a platform |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset='utf-8'> | ||
| <title>HTML5 Photo</title> | ||
|
|
||
| </head> | ||
| <body> | ||
| <main> | ||
|
|
||
| <header> | ||
| <h1>HTML5 Photo</h1> | ||
| </header> | ||
|
|
||
| <video id="video" width="640" height="480" autoplay></video> | ||
| <button id="snap">Snap Photo</button> | ||
| <canvas id="canvas" width="640" height="480"></canvas> | ||
|
|
||
| </main> | ||
|
|
||
| <script type="text/javascript" src="media.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| </head> | ||
| <body> | ||
| <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.</p> | ||
| </video> | ||
| </video> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| }); |
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Video Master</title> | ||
| <meta name="description" content=""> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
|
|
||
| <link rel="stylesheet" href="main.css"> | ||
| <script src="#"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="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.</p> | ||
| </video> | ||
|
|
||
| </div> | ||
| <header> | ||
| <h1> Sign up to get started!</h1> | ||
| </header> | ||
| <form action="#" method="post"> | ||
| <main> | ||
|
|
||
| <header> | ||
| <h1>HTML5 Photo</h1> | ||
| </header> | ||
|
|
||
| <video id="video" width="250" height="250" autoplay></video> | ||
| <button id="snap">Snap Photo</button> | ||
|
|
||
| </main> | ||
| <fieldset> | ||
| <div> | ||
|
There was a problem hiding this comment. This is a div heavy document. Could we have made it more semantic? |
||
| <canvas id="canvas" width="150" height="150"></canvas> | ||
|
|
||
| </div> | ||
| <div> | ||
| <label for="name" class="mid">Username or Email:</label> | ||
|
|
||
| <input type="text" name="name" id="name" value="" tabindex="1" | ||
| placeholder="[email protected]"> | ||
| </div> | ||
|
|
||
| <div> | ||
| <label for="password" class="mid">Password:</label> | ||
|
|
||
| <input type="password" name="password" id="password" value="" tabindex="2" placeholder="password"> | ||
| </div> | ||
|
|
||
| <div> | ||
| <label for="radio-choice-1">Male:</label> | ||
| <input type="radio" name="radio-choice" id="radio-choice-1" class="radio" tabindex="5" value="choice-1"> | ||
| </div> | ||
|
|
||
| <div> | ||
| <label for="radio-choice-2">Female:</label> | ||
| <input type="radio" name="radio-choice" id="radio-choice-2" class="radio" tabindex="6" value="choice-2"> | ||
| </div> | ||
|
|
||
| <div> | ||
| <label for="select-choice-2" class="mid">Country:</label> | ||
| <select name="extraoptions" id="select-choice-2"> | ||
| <optgroup label="1"> | ||
| <option value="Choice 1">United States</option> | ||
| <option value="Choice 2">Canada</option> | ||
| <option value="Choice 3">United Kingdome</option> | ||
| </optgroup> | ||
| <optgroup label="2"> | ||
| <option value="Choice 1">Country 1</option> | ||
| <option value="Choice 2">Country 2</option> | ||
| <option value="Choice 3">Country 3</option> | ||
| </optgroup> | ||
| </select> | ||
| </div> | ||
|
|
||
| <div> | ||
| <label for="textarea">Bio:</label> | ||
| <textarea cols="40" rows="10" name="textarea" id="textarea" placeholder="tell us about yourself!"></textarea> | ||
| </div> | ||
|
|
||
| <div> | ||
| <label for="check">Click the box if you agree to our termas and conditions:</label> | ||
| <input type="checkbox" name="check" class="checkbox" id="check"> | ||
| </div> | ||
|
|
||
| <div> | ||
| <input type="submit" value="Sign Up" class="submit"> | ||
| </div> | ||
|
|
||
| </fieldset> | ||
|
|
||
| </form> | ||
|
|
||
| <script type="text/javascript" src="camera.js"></script> | ||
| </body> | ||
|
|
||
| </html> | ||
|
There was a problem hiding this comment. There needs to be an addition empty line at the end of this document. Add this to your use preferences in Sublime: |
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
|
|
||
|
There was a problem hiding this comment. Remove empty line. |
||
| } | ||
| 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; | ||
| } | ||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remove empty line.