sm.html

   1 <html>
   2 <style type="text/css">
   3 #textarea {
   4         position:absolute;
   5         top:0px;
   6         left:0px;
   7         width:100%;
   8         height:100%;
   9         white-space:nowrap;
  10         font-family: sans;
  11         padding:0px;
  12         margin:0px;
  13         border:0px;
  14         text-align:center;
  15         overflow:hidden;
  16 }
  17
  18 #test {
  19         position:absolute;
  20         visibility:hidden;
  21         top:0px;
  22         left:0px;
  23         font-size:30px;
  24         white-space:pre;
  25         font-family: sans;
  26         border:0px;
  27         padding:0.1em;
  28         margin:0px;
  29 }
  30 #about {
  31         position:absolute;
  32         width:20em;
  33         top:30px;
  34         right:30px;
  35         background-color:gray;
  36         padding:1em;
  37 }
  38
  39 </style>
  40 <script type="text/javascript">
  41 opacity = 100;
  42 function adjust() {
  43         ta = document.getElementById("textarea");
  44         test = document.getElementById("test");
  45
  46         test.innerHTML=ta.value;
  47         // Otherwise, the newline would not be counted.
  48         if (ta.value[ta.value.length-1] == "\n") {
  49                 test.innerHTML += '.';
  50         }
  51
  52         ratioX = (window.innerWidth) / test.offsetWidth;
  53         ratioY = (window.innerHeight) / test.offsetHeight;
  54         ratio = Math.min(ratioX,ratioY);
  55         fontSize = Math.floor(30 * ratio) + "px"
  56         ta.style.fontSize = fontSize;
  57         newHeight = Math.ceil(test.offsetHeight * ratio);
  58         //ta.style.height = newHeight + "px";
  59         //ta.style.top = Math.floor((window.innerHeight - newHeight)/2) + "px";
  60         ta.style.paddingTop = Math.floor((window.innerHeight - newHeight)/2) + "px";
  61         ta.style.paddingBottom = Math.floor((window.innerHeight - newHeight)/2) + "px";
  62         newWidth = Math.ceil(test.offsetWidth * ratio);
  63         //ta.style.width = newWidth + "px";
  64         ta.style.paddingLeft = Math.max(0,Math.floor((window.innerWidth - newWidth)/2)) + "px";
  65         ta.style.paddingRight = Math.max(0,Math.floor((window.innerWidth - newWidth)/2)) + "px";
  66
  67         //test.innerHTML = newHeight + " " + window.innerHeight + " " + fontSize;
  68
  69         link = document.getElementById("permlink");
  70         href = window.location.href.replace(/\#.*/,"");
  71         link.href = href + "#t=" + encodeURIComponent(ta.value);
  72 }
  73
  74 function showBox() {
  75         opacity = 100;
  76         window.clearTimeout(timeout);
  77         setOpacity();
  78 }
  79 function fadeOut() {
  80         opacity *= 0.985;
  81         if (opacity > 1) {
  82                 timeout = window.setTimeout("fadeOut()",20);
  83         } else {
  84                 opacity = 0;
  85         }
  86         setOpacity();
  87 }
  88 function setOpacity() {
  89         about = document.getElementById("about");
  90         about.style.opacity = opacity/100;
  91         about.style.filter = "alpha(opacity="+Math.round(opacity)+")";
  92 }
  93
  94 function init() {
  95         ta = document.getElementById("textarea");
  96         ta.focus();
  97
  98         var queryString = {};
  99         window.location.href.replace(
 100                 new RegExp("([^?=&;#]+)(=([^&;]*))", "g"),
 101                 function($0, $1, $2, $3) {queryString[$1] = decodeURIComponent($3); }
 102         );
 103         if (queryString['t']) {
 104                 ta.value = queryString['t'];
 105         }
 106         adjust();
 107         timeout = window.setTimeout("fadeOut();",1000);
 108         setOpacity();
 109
 110 }
 111 </script>
 112 <body onload="init()">
 113 <textarea id="textarea" onKeyUp="adjust()">:-)</textarea>
 114 <span id="test"></span>
 115 <div id="about" onMouseOver="showBox()" onMouseOut="fadeOut()">
 116 <p>
 117 This is an online-version of the program <strong>screen-message</strong> for Linux.
 118 </p>
 119 <p>
 120 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>.
 121 </p>
 122 <p>
 123 <strong>screen-message</strong> was created by <a href="http://www.joachim-breitner.de/">Joachim Breitner</a>.
 124 </p>
 125 <p>
 126 Use <a id="permlink">this link</a> to share your current text.
 127 </p>
 128 </div>
 129 </body>
 130 </html>