huge touchscreen-optimized designupdate

webroot/config.php

 <?php
 	$widget_unit_width = 180;
-	$widget_unit_height = 180;
+	$widget_unit_height = 190;
 
 	$widget_spacing_x = 4;
 	$widget_spacing_y = 4;
@@ -9,12 +9,15 @@
 		//array("widget_name", "style_name", position_x, position_y, size_x, size_y);
 		array("Logo",				"widget",			0,0,	2,1),
 		array("ZoneOffen",			"widget_dark",		4,0,	2,1),
-		array("RSSFeed",			"widget_light",		0,1,	3,2),
-		array("Wettervorhersage",		"widget_light",		3,1,	1,2),
-		array("TwitterWall",			"widget_light",		0,3,	2,3),
-		array("Prepaid",			"widget_light",		4,1,	2,5),
-		array("Jukezone",			"widget_dark",		2,3,	2,3),
-		array("Abfahrtsmonitor",		"widget_light",		0,6,	2,5),
-		//array("Marvin",				"widget_light",		0,6,	6,5)
+
+		array("Prepaid",			"widget_light",		0,1,	2,7),
+		array("Jukezone",			"widget_dark",		4,1,	2,5),
+		array("Abfahrtsmonitor",	"widget_light",		2,1,	2,3),
+
+		array("RSSFeed",			"widget_light",		0,8,	3,2),
+		array("Wettervorhersage",	"widget_light",		3,8,	1,2),
+		array("TwitterWall",		"widget_light",		2,4,	2,4),
+
+		array("Marvin",				"widget_light",		4,6,	2,4)
 	);
 ?>

webroot/css/marvin.css

@@ -3,5 +3,12 @@ body
 	background-color:#261C13;
 	font-family:Lucida Grande, Lucida Sans Unicode, Calibri, Arial, Helvetica, Sans, FreeSans, Jamrul, Garuda, Kalimati;
 	font-size:15pt;
-	cursor:default;
+}
+
+*
+{
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+	cursor:none;
 }

webroot/css/widget.css

 .widget, .widget td, .widget div {
 	font-family: inherit;
 	color:#000000;
-	cursor:default;
 }

webroot/css/widget_dark.css

@@ -3,19 +3,16 @@
 	background-color:#362C23;
 	font-family: inherit;
 	color:#ffffff;
-	cursor:default;
 }
 .widget_dark td, .widget_dark div {
 	font-family: inherit;
 	color:#ffffff;
-	cursor:default;
 }
 
 .widget_dark .invisiblebox {
 	font-family: inherit;
 	margin: 10;
 	padding: 0;
-	cursor:default;
 }
 
 .widget_dark .table {
@@ -24,7 +21,6 @@
 	font-family: inherit;
 	margin: 0;
 	padding: 2;
-	cursor:default;
 }
 
 .widget_dark .box {
@@ -34,7 +30,6 @@
 	color:#ffffff;
 	margin: 10;
 	position:relative;
-	cursor:default;
 }
 
 .widget_dark h1 {
@@ -44,7 +39,6 @@
 	padding: 0;
 	font-family: inherit;
 	font-size: 1.0em;
-	cursor:default;
 }
 .widget_dark h2 {
 	margin: 0;
@@ -52,7 +46,6 @@
 	font-family: inherit;
 	font-size: 0.8em;
 	color: #dddddd;
-	cursor:default;
 }
 .widget_dark h3 {
 	margin: 0;
@@ -60,7 +53,6 @@
 	font-family: inherit;
 	font-size: 0.6em;
 	color: #bbbbbb;
-	cursor:default;
 }
 
 .widget_dark ul {
@@ -71,7 +63,6 @@
 	overflow:hidden;
 	position:relative;
 	height:auto;
-	cursor:default;
 }
 .widget_dark li {
 	background-color:#261C13;
@@ -79,11 +70,9 @@
 	border-bottom: 1px dashed #F2EFE5;
 	width: 100%;
 	color: #999999;
-	cursor:default;
 }
 .widget_dark li img {
 	padding: 4;
-	cursor:default;
 }
 
 .widget_dark a, .widget_dark a:hover, .widget_dark a:visited, .widget_dark a:active {
@@ -92,11 +81,23 @@
 	font-size: 1em;
 	font-style: normal;
 	color: #aaaaaa;
-	cursor:default;
 }
 
 .widget_dark img
 {
 	float:left;
-	cursor:default;
 }
+
+.widget_dark .button
+{
+	display: inline;
+	border: 1px dashed #F2EFE5;
+	background-color:#2E241B;
+	margin: 0;
+	padding: 10;
+	text-align: center;
+	vertical-align: middle;
+	font-size: 1.4em;
+}
+
+

webroot/css/widget_light.css

@@ -4,21 +4,18 @@
 	font-family: inherit;
 	color:#000000;
 	overflow:hidden;
-	cursor:default;
 }
 
 .widget_light td, .widget_light div {
 	font-family: inherit;
 	margin: 0;
 	position:relative;
-	cursor:default;
 }
 
 .widget_light .invisiblebox {
 	font-family: inherit;
 	margin: 10;
 	padding: 0;
-	cursor:default;
 }
 
 .widget_light .table {
@@ -27,7 +24,6 @@
 	font-family: inherit;
 	margin: 0;
 	padding: 2;
-	cursor:default;
 }
 
 .widget_light .box {
@@ -37,7 +33,6 @@
 	color:#000000;
 	margin: 10;
 	position:relative;
-	cursor:default;
 }
 
 .widget_light h1 {
@@ -47,7 +42,6 @@
 	padding: 0;
 	font-family: inherit;
 	font-size: 1.0em;
-	cursor:default;
 }
 .widget_light h2 {
 	margin: 0;
@@ -55,7 +49,6 @@
 	font-family: inherit;
 	font-size: 0.8em;
 	color: #111111;
-	cursor:default;
 }
 .widget_light h3 {
 	margin: 0;
@@ -63,7 +56,6 @@
 	font-family: inherit;
 	font-size: 0.6em;
 	color: #222222;
-	cursor:default;
 }
 
 .widget_light ul {
@@ -74,7 +66,6 @@
 	overflow:hidden;
 	position:relative;
 	height:auto;
-	cursor:default;
 }
 .widget_light li {
 	background-color:#95897E;
@@ -82,11 +73,9 @@
 	border-bottom: 1px dashed #F2EFE5;
 	width: 100%;
 	color: #333333;
-	cursor:default;
 }
 .widget_light li img {
 	padding: 4;
-	cursor:default;
 }
 
 .widget_light a, .widget_light a:hover, .widget_light a:visited, .widget_light a:active {
@@ -95,11 +84,22 @@
 	font-size: 1em;
 	font-style: normal;
 	color: #333333;
-	cursor:default;
 }
 
 .widget_light img
 {
 	float:left;
-	cursor:default;
 }
+
+.widget_light .button
+{
+	display: inline;
+	border: 1px dashed #F2EFE5;
+	background-color: #A5998E;
+	margin: 0;
+	padding: 10;
+	text-align: center;
+	vertical-align: middle;
+	font-size: 1.4em;
+}
+

webroot/index.php

@@ -4,12 +4,14 @@
 	<link rel="stylesheet" type="text/css" href="css/widget.css" />
 	<link rel="stylesheet" type="text/css" href="css/widget_light.css" />
 	<link rel="stylesheet" type="text/css" href="css/widget_dark.css" />
+	<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
 	<script src="js/jquery-1.4.4.js" type="text/javascript"></script>
+	<script src="js/jquery-ui.min.js" type="text/javascript"></script>
 	<script src="js/marvin.js" type="text/javascript"></script>
 </head>
 <body>
 	<?php require_once "config.php"; ?>
-	<div style="overflow:hidden;width:1078;height:1918;position:absolute;left:<?php print($widget_spacing_x/2); ?>px;top:<?php print($widget_spacing_y/2); ?>px;">
+	<div style="overflow:hidden;width:1078;height:1916;position:absolute;left:<?php print($widget_spacing_x/2); ?>px;top:<?php print($widget_spacing_y); ?>px;">
 		<?php
 			foreach ($widgets as $widgetconfig)
 			{

webroot/js/marvin.js

@@ -17,4 +17,4 @@ function executeMinuteTimer()
 $(document).ready(function()
 {
   minuteTimer = setInterval(executeMinuteTimer, 60*1000);
-});
\ No newline at end of file
+});

webroot/widgets/Abfahrtsmonitor/ajax.php

@@ -7,6 +7,7 @@
   list($content,$dummy) = split( '<table>' , $content , 2 );
   $content = str_replace('<img src="images/means/nf_bus.gif" alt="MOTs/bus" />','Bus',$content);
   $content = str_replace('width="100%"','width="336"',$content);
+  $content = str_replace('width="100"','width="240"',$content);
   $content = str_replace('bgcolor="#FFFFFF"','class="box"',$content);
   $content = str_replace('bgcolor="#E6F2F8"','class="invisiblebox"',$content);
   $content = str_replace('<hr style="background:#000000;width:100%;" align="left" />','',$content);

webroot/widgets/Jukezone/Jukezone.js

 function fillJukezone(response) {
-  var content = '<table class="box" align="center" width="95%">';
-  content += '<tr><td width="30%"><h2>Status:</h2></td><td style="color:00aa00">Online</td></tr>';
-
-  content += '<tr><td width="30%"><h2>Volume:</h2></td><td>';
-  content += '<table cellspacing="0" cellpadding="0"><tr>';
-  content += '<td>[</td>';
-  for(var i=0;i<response['volume'];i+=2)
-    content += '<td onclick="setVolume('+i+')">:</td>';
-  content += '<td><b>||</b></td>';
-  for(var i=response['volume']+2;i<=100;i+=2)
-    content += '<td onclick="setVolume('+i+')">:</td>';
-  content += '<td>]</td>';
-  content += '</tr></table>';
-  content += '</td></tr>';
+  if($("#volume").slider( "option", "value" ) != response['volume'])
+  {
+    $("#volume").slider( "option", "value", response['volume'] );
+  }
 
-  content += '<tr><td width="30%" valign="top"><h2>Streams:</h2></td><td><table>';
+  var content = '<table style="width:100%">';
   var i=0;
   $.each(response['streams'], function(k,v) {
     if(response['nowplaying']==i)
-      content += '<tr><td><h2>[</h2></td><td><h2 onclick="playStream(\''+v+'\')">'+k+'</h2></td><td><h2>]</h2></td></tr>';
+      content += '<tr><td class="button" onclick="playStream(\''+v+'\')"><b><u>'+k+'</u></b></td></tr>';
     else
-      content += '<tr><td></td><td><h2 onclick="playStream(\''+v+'\')">'+k+'</h2></td><td></td></tr>';
+      content += '<tr><td class="button" onclick="playStream(\''+v+'\')">'+k+'</td></tr>';
     i++;
   });
-  content += '</table></td></tr>';
-
   content += '</table>';
+
   $("#Jukezone").html(content);
 }
 
@@ -62,6 +51,16 @@ $(document).ready(function()
     addFunctionToMinuteTimer(updateJukezone);
     resetJukezone();
     updateJukezone();
+    $("#volume").slider();
+    $("#volume").slider( "option", "animate", true );
+    $("#volume").slider( "option", "max", 0 );
+    $("#volume").slider( "option", "max", 100 );
+    $("#volume").slider( "option", "range", "min" );
+    $("#volume").slider( "option", "step", 1 );
+    $("#volume").slider( "option", "value", 0 );
+    $("#volume").bind( "slidechange", function(event, ui) {
+      setVolume($("#volume").slider( "option", "value"));
+    });
   }
 );
 

webroot/widgets/Jukezone/Jukezone.php

@@ -13,7 +13,10 @@ class Jukezone implements iWidget
   {
     $widgetOutput = '<h1>Jukezone</h1>'."\n";
     $widgetOutput .= '<script src="widgets/Jukezone/Jukezone.js" type="text/javascript"></script>'."\n";
-    $widgetOutput .= '<span id="Jukezone"></span>'."\n";
+    $widgetOutput .= '<div class="box">'."\n";
+    $widgetOutput .= '<h2 class="invisiblebox">Volume:</h2><div class="invisiblebox"><div id="volume"></div></div>'."\n";
+    $widgetOutput .= '<h2 class="invisiblebox">Streams:</h2><div class="invisiblebox"><div id="Jukezone"></div></div>'."\n";
+    $widgetOutput .= '</div>'."\n";
     return $widgetOutput;
   }
 }

webroot/widgets/Prepaid/Prepaid.js

 function fillPrepaid(response) {
-  var content = '<h1>Warpzone Prepaid</h1>';
+  var content = '';
   jQuery.each(response, function(k,v) {
-    content += '<table class="invisiblebox" style="margin-top:0;margin-bottom:0;">';
-    content += '<tr><td colspan="7"><h2>'+k+':</h2></td><td colspan="3" align="right"><h2 onclick="setPrepaid(\''+k+'\',0)">Neue Karte</h2></td></tr>';
-    content += '<tr>';
+    content += '<div class="invisiblebox">';
+    content += '<div style="width:99%;padding: 1 1;margin-left:0;margin-bottom:0;" class="box title">'+k+'</div>';
+    content += '<div style="width:99%;padding: 1 1;margin:-1 0 0 0;" class="box"><div class="invisiblebox" style="margin:7;">';
+
+    content += '<table><tr>';
     for(var i=0; i<v; i++) {
-      content += '<td class="table" style="background-image:url(widgets/Prepaid/img/cross.png);background-position:center center;">50c</td>';
+      if(i == 5) content += '</tr><tr>';
+      content += '<td class="button" style="background-image:url(widgets/Prepaid/img/cross.png);background-position:center center;">50c</td>';
     }
     for(var i=v; i<10; i++) {
+      if(i == 5) content += '</tr><tr>';
       var value = i;
       value++;
-      content += '<td class="table" onclick="setPrepaid(\''+k+'\','+value+')">50c</td>';
+      content += '<td class="button" onclick="setPrepaid(\''+k+'\','+value+')">50c</td>';
     }
-    content += '</tr>';
-    content += '</table>';
+    content += '</tr></table>';
+    content += '<center><div class="invisiblebox" style="margin:20;"><div class="button" style="font-size:1.0em;" onclick="setPrepaid(\''+k+'\',0)">Neue Karte</div></div></center>';
+    content += '</div></div>';
+    content += '</div>';
   });
+  var active = $("#Prepaid").accordion( "option", "active" );
+  $("#Prepaid").accordion("destroy");
   $("#Prepaid").html(content);
+  $("#Prepaid").accordion({
+    header: 'div.title', 
+    alwaysOpen: false, 
+    animated: false
+  });
+  $("#Prepaid").accordion( "option", "active", active );
+  $("#Prepaid").accordion( "option", "animated", true );
 }
 
 function setPrepaid(k,v) {

webroot/widgets/Prepaid/Prepaid.php

@@ -12,6 +12,7 @@ class Prepaid implements iWidget
   public function giveOutput() 
   {
     $widgetOutput = '<script src="widgets/Prepaid/Prepaid.js" type="text/javascript"></script>'."\n";
+    $widgetOutput .= '<h1>Warpzone Prepaid</h1>'."\n";
     $widgetOutput .= '<span id="Prepaid"></span>'."\n";
     return $widgetOutput;
   }

webroot/widgets/Prepaid/karten.txt

 SuperVirus
 2
 crnf
-4
-da1l6
 8
-Philipp
+da1l6
 10
+Philipp
+3
 Commander1024
-2
+6
 ElliotDenk
-3
+0
 ands
-5
+8
 StuC
-5
+0
 Deaddy
-4
+0
 phryk
-3
+0
 fenkt
-4
+0
 shell
-8
+0
 Mitch
-4
+0
 Cpt.Charisma
-5
+0
 blueling
-1
+0
 Fusselkater
-3
+0
 MrFischer
-6
+0