| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- <html>
- <head>
- <title>DWatch</title>
- <style type="text/css">
- body {
- background-color: #000;
- color: #fff;
- }
- #canvas{
- /* center on page */
- position: absolute;
- top:0; left:0; bottom:0; right:0;
- margin: auto;
- }
- @font-face{
- font-family: 'digital-font';
- src: url('font.ttf');
- }
- #displayText{
- font: 28px digital-font;
- }
- /* disable text selection */
- svg text {
- cursor: default;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- </style>
- </head>
- <body>
- <svg version="1.1"
- baseProfile="full"
- width="222" height="236"
- xmlns="http://www.w3.org/2000/svg"
- id="canvas">
- <image width="222" height="236" xlink:href="watch.gif"/>
- <rect id="display" x="51" y="95" width="120" height="55" rx="2" fill="#DCDCDC">
- </rect>
- <text id="displayText" x="111" y="126" dominant-baseline="middle" text-anchor="middle">12:00:00</text>
- <rect id="topLeft" x="3" y="62", width="10", height="10" fill="#fff" fill-opacity="0.2" />
- <rect id="topRight" x="209" y="60", width="10", height="10" fill="#fff" fill-opacity="0.2" />
- <rect id="bottomLeft" x="2" y="161", width="10", height="10" fill="#fff" fill-opacity="0.2" />
- <rect id="bottomRight" x="211" y="161", width="10", height="10" fill="#fff" fill-opacity="0.2" />
- <image id="note" x="54" y="96" xlink:href="noteSmall.gif"/>
- </svg>
- <p id="log">
- </p>
- <script type="text/javascript">
- function log(msg) {
- // document.getElementById("log").innerText += msg + '\n';
- }
- ["topLeft", "topRight", "bottomLeft", "bottomRight"].forEach(button => {
- document.getElementById(button).onmousedown = () => log(button + " pressed");
- document.getElementById(button).onmouseup = () => log(button + " released");
- })
- </script>
- </body>
- </html>
|
