1 
<html><head><title>Box of Marbles</title>
2 
<meta name="apple-mobile-web-app-capable" content="yes">
3 
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
4 
<style>
5 
body {
6 
  margin: 0;
7 
  padding: 0;
8 
  overflow: hidden;
9 
  background-color: #444;
10 
  font-family: Helvetica, Arial;
11 
}
12 





13

* {





14

  -webkit-touch-callout: none;





15

  -webkit-tap-highlight-color: transparent;





16

  -webkit-user-select: none;





17

  -webkit-text-size-adjust: none;





18

}





19






20

#text {





21

  position: absolute;





22

  left: 0px;





23

  top: 0px;





24

  border: none;





25

  text-align: center;





26

  color: white;





27

  width: 100%;





28

  height: 100%;





29

}





30






31

.tap {





32

  position: absolute;





33

  left: 300px;





34

  top: 300px;





35

  width: 200px;





36

  height: 200px;





37

  border-radius: 100px;





38

  border: 3px solid yellow;





39

  -webkit-transform: translate(-100px, -100px) scale(0.7,0.7);





40

  -webkit-transition: -webkit-transform 200ms ease-out;





41

  -moz-transform: scale(0,0);





42

  -o-transform: scale(0,0);





43

}





44






45

#hint {





46

  position: absolute;





47

  left: 0px;





48

  top: 100px;





49

  width: 100%;





50

  color: #999;





51

  text-align: center;





52

  font-size: 1em;





53

  -webkit-transition: all 3s ease-out;





54

  -moz-transition: all 3s ease-out;





55

  -o-transition: all 3s ease-out;





56

}





57






58

#hint img {





59

  vertical-align: middle;





60

  width: 5em;





61

}





62






63

</style>





64

</head>





65

<body>





66

<div id='text'>Box of Marbles (by Ariya Hidayat)</div>





67

<script src="protoclass.js"></script>





68

<script src="box2d.js"></script>





69

<script src="marblebox.js"></script>





70

<!-- http://www.openclipart.org/detail/89947 -->





71

<div id='hint'><img src='pointing_finger_01.png'>Tap to add some marbles!</div>





72

</body>





73

</html>