sm.html

   1 <html>
   2 <!--
   3 #     sm.html
   4 #     Copyright (C) 2006 - 2010 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 #about {
  49         position:absolute;
  50         width:20em;
  51         top:30px;
  52         right:30px;
  53         background-color:gray;
  54         padding:1em;
  55 }
  56
  57 </style>
  58 <script type="text/javascript">
  59 opacity = 100;
  60 function adjust() {
  61         ta = document.getElementById("textarea");
  62         test = document.getElementById("test");
  63
  64         test.innerHTML=ta.value;
  65         // Otherwise, the newline would not be counted.
  66         if (ta.value[ta.value.length-1] == "\n") {
  67                 test.innerHTML += '.';
  68         }
  69
  70         ratioX = (window.innerWidth) / test.offsetWidth;
  71         ratioY = (window.innerHeight) / test.offsetHeight;
  72         ratio = Math.min(ratioX,ratioY);
  73         fontSize = Math.floor(30 * ratio) + "px"
  74         ta.style.fontSize = fontSize;
  75         newHeight = Math.ceil(test.offsetHeight * ratio);
  76         //ta.style.height = newHeight + "px";
  77         //ta.style.top = Math.floor((window.innerHeight - newHeight)/2) + "px";
  78         ta.style.paddingTop = Math.floor((window.innerHeight - newHeight)/2) + "px";
  79         ta.style.paddingBottom = Math.floor((window.innerHeight - newHeight)/2) + "px";
  80         newWidth = Math.ceil(test.offsetWidth * ratio);
  81         //ta.style.width = newWidth + "px";
  82         ta.style.paddingLeft = Math.max(0,Math.floor((window.innerWidth - newWidth)/2)) + "px";
  83         ta.style.paddingRight = Math.max(0,Math.floor((window.innerWidth - newWidth)/2)) + "px";
  84
  85         //test.innerHTML = newHeight + " " + window.innerHeight + " " + fontSize;
  86
  87         href = window.location.hash = "#t=" + encodeURIComponent(ta.value);
  88 }
  89
  90 function showBox() {
  91         opacity = 100;
  92         window.clearTimeout(timeout);
  93         setOpacity();
  94 }
  95 function fadeOut() {
  96         opacity *= 0.985;
  97         if (opacity > 1) {
  98                 timeout = window.setTimeout("fadeOut()",20);
  99         } else {
 100                 opacity = 0;
 101         }
 102         setOpacity();
 103 }
 104 function setOpacity() {
 105         about = document.getElementById("about");
 106         about.style.opacity = opacity/100;
 107         about.style.filter = "alpha(opacity="+Math.round(opacity)+")";
 108 }
 109
 110 function init() {
 111         ta = document.getElementById("textarea");
 112         ta.focus();
 113
 114         var queryString = {};
 115         window.location.href.replace(
 116                 new RegExp("([^?=&;#]+)(=([^&;]*))", "g"),
 117                 function($0, $1, $2, $3) {queryString[$1] = decodeURIComponent($3); }
 118         );
 119         if (queryString['t']) {
 120                 ta.value = queryString['t'];
 121         }
 122         adjust();
 123         timeout = window.setTimeout("fadeOut();",1000);
 124         setOpacity();
 125
 126         if (window.navigator.mozApps) {
 127                 document.getElementById("firefox").style.display = "block";
 128         }
 129 }
 130 </script>
 131 <body onload="init()">
 132 <textarea id="textarea" onKeyUp="adjust()">:-)</textarea>
 133 <span id="test"></span>
 134 <div id="about" onMouseOver="showBox()" onMouseOut="fadeOut()">
 135 <p>
 136 This is an online-version of the program <strong>screen-message</strong> for Linux.
 137 </p>
 138 <p id="firefox" style="display:none">
 139 You can <a href="#" onclick="window.navigator.mozApps.install('http://sm.nomeata.de/sm.webapp')">install it as a FireFox app</a>.
 140 </p>
 141 <p>
 142 For more information about the original program, see what <a href="http://debaday.debian.net/2007/07/18/screen-message-use-your-screen-to-communicate/">Deb-a-Day</a> writes about it. You can download it from <a href="http://packages.debian.org/sid/sm">Debian</a> or <a href="http://darcs.nomeata.de/screen-message.upstream/">fetch the sourcecode</a>.
 143 </p>
 144 <p>
 145 <strong>screen-message</strong> was created by <a href="http://www.joachim-breitner.de/">Joachim Breitner</a>.
 146 If you like it, then <a href="http://flattr.com/thing/330186/screen-message" target="_blank">flattr this</a>.
 147 </p>
 148 </div>
 149 </body>
 150 </html>