Change color using cairo instead of deprecated gdk functions
[darcs-mirror-screen-message.git] / webapp.html
1 <html>
2 <!--
3 #     sm.html
4 #     Copyright (C) 2006 - 2012 Joachim Breitner
5 #
6 #     This program is free software; you can redistribute it and/or modify
7 #     it under the terms of the GNU General Public License as published by
8 #     the Free Software Foundation; either version 2 of the License, or
9 #     (at your option) any later version.
10 #
11 #     This program is distributed in the hope that it will be useful,
12 #     but WITHOUT ANY WARRANTY; without even the implied warranty of
13 #     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
14 #     GNU General Public License for more details.
15 #
16 #     You should have received a copy of the GNU General Public License
17 #     along with this program; if not, write to the Free Software
18 #     Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301 USA
19 -->
20 <style type="text/css">
21 #textarea {
22         position:absolute;
23         top:0px;
24         left:0px;
25         width:100%;
26         height:100%;
27         white-space:nowrap;
28         font-family: sans;
29         padding:0px;
30         margin:0px;
31         border:0px;
32         text-align:center;
33         overflow:hidden;
34 }
35
36 #test {
37         position:absolute;
38         visibility:hidden;
39         top:0px;
40         left:0px;
41         font-size:30px;
42         white-space:pre;
43         font-family: sans;
44         border:0px;
45         padding:0.1em;
46         margin:0px;
47 }
48 a {
49         text-decoration:none;
50         color:black;
51 }
52
53 #focusdummy {
54         position:absolute;
55         width:100%;
56         top:0px;
57         left:0px;
58         background-color:aqua;
59 }
60 #focusdummy td {
61         font-family: sans;
62         font-size:20px;
63         opacity:.5;
64         padding:4px;
65 }
66
67 </style>
68 <script type="text/javascript">
69 opacity = 100;
70 timeout = null;
71 function adjust() {
72         ta = document.getElementById("textarea");
73         test = document.getElementById("test");
74         
75         test.innerHTML=ta.value;
76         // Otherwise, the newline would not be counted.
77         if (ta.value[ta.value.length-1] == "\n") {
78                 test.innerHTML += '.';
79         }
80
81         ratioX = (window.innerWidth) / test.offsetWidth;
82         ratioY = (window.innerHeight) / test.offsetHeight;
83         ratio = Math.min(ratioX,ratioY);
84         fontSize = Math.floor(30 * ratio) + "px"
85         ta.style.fontSize = fontSize;
86         newHeight = Math.ceil(test.offsetHeight * ratio);
87         //ta.style.height = newHeight + "px";
88         //ta.style.top = Math.floor((window.innerHeight - newHeight)/2) + "px";
89         ta.style.paddingTop = Math.floor((window.innerHeight - newHeight)/2) + "px";
90         ta.style.paddingBottom = Math.floor((window.innerHeight - newHeight)/2) + "px";
91         newWidth = Math.ceil(test.offsetWidth * ratio);
92         //ta.style.width = newWidth + "px";
93         ta.style.paddingLeft = Math.max(0,Math.floor((window.innerWidth - newWidth)/2)) + "px";
94         ta.style.paddingRight = Math.max(0,Math.floor((window.innerWidth - newWidth)/2)) + "px";
95          
96         //test.innerHTML = newHeight + " " + window.innerHeight + " " + fontSize;
97         
98         href = window.location.hash = "#t=" + encodeURIComponent(ta.value);
99 }
100
101 function init() {
102         ta = document.getElementById("textarea");
103         ta.focus();
104
105         var queryString = {};
106         window.location.href.replace(
107                 new RegExp("([^?=&;#]+)(=([^&;]*))", "g"),
108                 function($0, $1, $2, $3) {queryString[$1] = decodeURIComponent($3); }
109         );
110         if (queryString['t']) {
111                 ta.value = queryString['t'];
112         }
113         adjust();
114 }
115 function showFocusDummy() {
116         window.clearTimeout(timeout);
117         document.getElementById("focusdummy").style.display = "block";
118 }
119 function hideFocusDummy() {
120         timeout = window.setTimeout(function () {
121                 document.getElementById("focusdummy").style.display = "none";
122         }, 200);
123 }
124 function clearText() {
125         ta = document.getElementById("textarea");
126         ta.value = '';
127         ta.focus();
128 }
129
130 </script>
131 <body onload="init()" onresize="adjust()">
132 <textarea id="textarea" onfocus="showFocusDummy()" onblur="hideFocusDummy()" onKeyUp="adjust()" onpaste="adjust()" oninput="adjust()">:-)</textarea>
133 <span id="test"></span>
134 <div id="focusdummy" >
135 <table width="100%">
136 <tr><td align="left" width="30%" align="left">
137 <a href="http://sm.nomeata.de/" target="blank">screen message<br/>on the web</a>
138 </td><td width="40%" align="center">
139 <a href="#" onclick="return false">Hide Keyboard</a>
140 </td><td width="30%" align="right">
141 <a href="#" onclick="clearText(); return false;">Clear Text</a>
142 </td></tr>
143 </table>
144 </div>
145 </body>
146 </html>