| <!DOCTYPE html> |
| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| --> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="target-densitydpi=device-dpi, width=480, user-scalable=no"> |
| <title>Butterfly</title> |
| <style type="text/css"><!-- |
| * { |
| margin: 0; |
| } |
| html, body{ |
| height: 100%; |
| padding:0px; |
| cursor:url(images/brush.png),auto; |
| } |
| #wrapper { |
| min-height: 100%; |
| height: auto !important; |
| height: 100%; |
| margin: 0 auto -60px; |
| background: url(images/background.jpg) center; |
| } |
| #canvas-wrapper { |
| padding-top: 20px; |
| width: 400px; |
| margin: auto; |
| } |
| #imageView { |
| border: 0; |
| cursor:url(images/brush.png),auto; |
| } |
| #push { |
| height: 60px; |
| clear: both; |
| } |
| #toolbox{ |
| background: black; |
| width: 100%; |
| text-align:center; |
| height: 60px; |
| margin: auto; |
| cursor: pointer; |
| } |
| button { |
| border-radius: 3px; |
| width: 38px; |
| border: 2px solid black; |
| height: 50px; |
| box-shadow:inset 0 0 10px #ffffff; |
| } |
| /* |
| * Make the buttons smaller when we have a shorter screen (e.g. small widget space) |
| * By default the buttons are quite tall to make them easier for touch interfaces |
| */ |
| @media all and (max-height: 400px){ |
| button{ |
| height:20px; |
| } |
| #push, #toolbox{ |
| height: 26px; |
| } |
| #wrapper{ |
| margin: 0 auto -26px; |
| } |
| } |
| /* |
| * Make the buttons thinner when short on horizontal space |
| * |
| */ |
| @media all and (max-width: 470px){ |
| button{ |
| width:32px; |
| } |
| } |
| /* |
| * Make the buttons even thinner when short on horizontal space |
| * |
| */ |
| @media all and (max-width: 400px){ |
| button{ |
| width:20px; |
| } |
| } |
| |
| --></style> |
| <!--[if lt IE 9]><script type="text/javascript" src="scripts/flashcanvas.js"></script><![endif]--> |
| <script type="text/javascript" src="scripts/butterfly.js"></script> |
| </head> |
| <body onload="Controller.init();"> |
| <div id="wrapper"> |
| <div id="canvas-wrapper"> |
| <canvas id="imageView" width="400" height="300"> |
| <p>Unfortunately, your browser is currently unsupported by this widget. |
| We are sorry for the inconvenience. Please use one of the |
| supported browsers listed below:</p> |
| <p>Supported browsers: <a href="http://www.opera.com">Opera</a>, <a |
| href="http://www.mozilla.com">Firefox</a>, <a |
| href="http://www.apple.com/safari">Safari</a>, and <a |
| href="http://www.konqueror.org">Konqueror</a>.</p> |
| </canvas> |
| </div> |
| <div id="push"></div> |
| </div> |
| <div id="toolbox"> |
| <button style="background-color: #F66" onclick="Controller.setRGB(255,64,64);Controller.push(this);"></button> |
| <button style="background-color: #66F" onclick="Controller.setRGB(64,64,255);Controller.push(this);"></button> |
| <button style="background-color: #6F6" onclick="Controller.setRGB(64,255,64);Controller.push(this);"></button> |
| <button style="background-color: #F96" onclick="Controller.setRGB(255,128,64);Controller.push(this);"></button> |
| <button style="background-color: #FF6" onclick="Controller.setRGB(255,255,64);Controller.push(this);"></button> |
| <button style="background-color: #F6F" onclick="Controller.setRGB(255,64,255);Controller.push(this);"></button> |
| <button style="background-color: #909" onclick="Controller.setRGB(128,0,128);Controller.push(this);"></button> |
| <button style="background-color: #9CF" onclick="Controller.setRGB(128,192,255);Controller.push(this);"></button> |
| <button style="background-color: black" onclick="Controller.setRGB(0,0,0);Controller.push(this);"></button> |
| <button style="background-color: white" onclick="Controller.setRGB(255,255,255);Controller.push(this);"></button> |
| <button style="background: url(images/splat.png) no-repeat" onclick="Controller.fill()"></button> |
| </div> |
| </body> |
| </html> |