Last active
December 12, 2015 03:08
-
-
Save bitwit/4704465 to your computer and use it in GitHub Desktop.
The HTML, CSS and JS from my blog entry An iOS5 Ready Native Web App Template
http://www.bitwit.ca/blog/an-ios5-ready-native-web-app-template/
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
| <!doctype html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="jquery-1.6.2.min.js"></script> | |
| <script defer src="script.js"></script> | |
| </head> | |
| <body id="body"> | |
| <div id="container"> | |
| <div id="iphone"> | |
| <a href="/" class="js">jQuery Alert</a><br /> | |
| <label for="username">Enter your name:</label> | |
| <input type="text" id="username" /> | |
| <a href="javascript:objcMessage();">Objective-C Alert</a><br /> | |
| <a href="objc://takeCameraImage">Take a camera image</a><br /> | |
| <a href="objc://takeLibraryImage">Image from library</a><br /> | |
| </div> | |
| <img id="testImage" src="iphonebattery.jpeg" /> | |
| </div><!-- #container --> | |
| </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
| $(document).ready(function(){ | |
| $("a.js").click( | |
| function(e){ | |
| e.preventDefault(); | |
| alert("You clicked on a link that activates javascript"); | |
| } | |
| ); | |
| }); | |
| function objcMessage() | |
| { | |
| var name = "empty"; | |
| if( $("#username").val() != "" ) | |
| name = $("#username").val(); | |
| window.location = "objc://message/" + name; | |
| } | |
| function processImage( img ) | |
| { | |
| $('#testImage').remove(); | |
| $('#body').append( '<img id="testImage" src="' + img + '" />' ); | |
| } |
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
| body{ | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #container { | |
| padding: 10px; | |
| font-family: "helvetica neue", helvetica, arial, sans-serif; | |
| background-image: -webkit-gradient( | |
| linear, | |
| left bottom, | |
| left top, | |
| color-stop(0.14, rgb(138,138,138)), | |
| color-stop(1, rgb(199,191,199)) | |
| ); | |
| } | |
| #iphone a{ | |
| display: block; | |
| width: 300px; | |
| -webkit-touch-callout: none; | |
| /* -webkit-user-select: none; */ | |
| background-color: #8C9CBF; | |
| background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8C9CBF), color-stop(50%, #546A9E), color-stop(50%, #36518F), color-stop(100%, #3D5691)); | |
| background-image: -webkit-linear-gradient(top, #8C9CBF 0%, #546A9E 50%, #36518F 50%, #3D5691 100%); | |
| border: 1px solid #172D6E; | |
| border-bottom: 1px solid #0E1D45; | |
| -webkit-border-radius: 5px; | |
| -webkit-box-shadow: inset 0 1px 0 0 #b1b9cb; | |
| color: white; | |
| font: bold 16px "helvetica neue", helvetica, arial, sans-serif; | |
| padding: 7px 0 8px 0; | |
| margin: 0 auto; | |
| text-decoration: none; | |
| text-align: center; | |
| text-shadow: 0 -1px 1px #000F4D; | |
| } | |
| label{ | |
| width: 300px; | |
| text-align: center; | |
| padding: 10px; | |
| font-size: 18px; | |
| } | |
| input#username{ | |
| width: 300px; | |
| border-radius: 5px; | |
| text-align: center; | |
| padding: 5px 0; | |
| font-size: 24px; | |
| margin: 0 0 10px 0; | |
| } | |
| #testImage{ | |
| border: 1px solid #CCC; | |
| width: 100%; | |
| height: 66%; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment