Skip to content

Instantly share code, notes, and snippets.

@bitwit
Last active December 12, 2015 03:08
Show Gist options
  • Save bitwit/4704465 to your computer and use it in GitHub Desktop.
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/
<!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>
$(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 + '" />' );
}
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