IP-Symcon Community Forum - Einzelnen Beitrag anzeigen

Professorakiera · #7 (**permalink**) 06.06.09, 17:07

So wie du wolltest mal die beiden datein

PHP-Code:

 
<!--

<!DOCTYPE html

  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

-->

 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate">

<meta http-equiv="Pragma" content="no-cache">

<meta http-equiv="Expires" content="0">

 
<style type="text/css">@import "Waschmaschine.css";</style>

<style type="text/css">

html, body { margin: 0; padding: 0; }

</style>

 
</head><body>

 
<?php

    if(isset($_GET['action']) && $_GET['action'] == "S1") 

    {

        IPS_RunScript(31459);

        IPS_Sleep(500);

    }  

 
 
?>   

 
 
<div class="deviceContainer" style="background: transparent url(../img/icons/png/Title.png) no-repeat scroll 10px 4px;">

        <div class="deviceTitle">

           <div class="deviceTitleContent">Waschmaschine</div>

       </div>

 
<div class="variablesContainer" style="height: auto;">

 
     <div class="variableContainer" style="background: transparent url(../img/icons/png/Information.png) no-repeat scroll 10px 4px;">

         <div class="deviceTitle">

             <div class="deviceTitleContent">Status</div>

        </div>

      <div class="deviceState">

         <div class="variableDisplay">

            <div class="deviceStateContent"><?php echo substr(GetValueString(57665),0); ?></div>    

         </div>

      </div>

   </div>

 

     <div class="variableContainer" style="background: transparent url(../img/icons/png/Voreins.png) no-repeat scroll 10px 4px;">

         <div class="deviceTitle">

             <div class="deviceTitleContent">Vorwaesche 1</div>

        </div>

      <div class="deviceState">

         <div class="variableDisplay">

           <div class="deviceState"><?php if(GetValue(37374)==1)echo "<div class='SwitchBasic SwitchBasicOn'> <div class='deviceStateContent'>AN</div>"; else echo "<div class='SwitchBasic SwitchBasicOff'> <div class='deviceStateContent'>Aus</div>";?> </div> </div>

        </div>

     </div>

   </div>

   

          <div class="variableContainer" style="background: transparent url(../img/icons/png/Vorzwei.png) no-repeat scroll 10px 4px;">

         <div class="deviceTitle">

             <div class="deviceTitleContent">Vorwaesche 2</div>

        </div>

      <div class="deviceState">

         <div class="variableDisplay">

           <div class="deviceState"><?php if(GetValue(17394)==1)echo "<div class='SwitchBasic SwitchBasicOn'> <div class='deviceStateContent'>AN</div>"; else echo "<div class='SwitchBasic SwitchBasicOff'> <div class='deviceStateContent'>Aus</div>";?> </div> </div>

        </div>

     </div>

   </div>

 
     <div class="variableContainer" style="background: transparent url(../img/icons/png/Spuelen.png) no-repeat scroll 10px 4px;">

         <div class="deviceTitle">

             <div class="deviceTitleContent">Spuelen</div>

        </div>

      <div class="deviceState">

         <div class="variableDisplay">

           <div class="deviceState"><?php if(GetValue(22829)==1)echo "<div class='SwitchBasic SwitchBasicOn'> <div class='deviceStateContent'>AN</div>"; else echo "<div class='SwitchBasic SwitchBasicOff'> <div class='deviceStateContent'>Aus</div>";?> </div> </div>

        </div>

     </div>

   </div>

 
     <div class="variableContainer" style="background: transparent url(../img/icons/png/Shuffle.png) no-repeat scroll 10px 4px;">

         <div class="deviceTitle">

             <div class="deviceTitleContent">Schleudern und Abpumpen</div>

        </div>

      <div class="deviceState">

         <div class="variableDisplay">

           <div class="deviceState"><?php if(GetValue(37091)==1)echo "<div class='SwitchBasic SwitchBasicOn'> <div class='deviceStateContent'>AN</div>"; else echo "<div class='SwitchBasic SwitchBasicOff'> <div class='deviceStateContent'>Aus</div>";?> </div> </div>

        </div>

     </div>

   </div>

 
     <div class="variableContainer" style="background: transparent url(../img/icons/png/ok.png) no-repeat scroll 10px 4px;">

         <div class="deviceTitle">

             <div class="deviceTitleContent">Ende</div>

        </div>

      <div class="deviceState">

         <div class="variableDisplay">

           <div class="deviceState"><?php if(GetValue(41302)==1)echo "<div class='SwitchBasic SwitchBasicOn'> <div class='deviceStateContent'>AN</div>"; else echo "<div class='SwitchBasic SwitchBasicOff'> <div class='deviceStateContent'>Aus</div>";?> </div> </div>

        </div>

     </div>

   </div>

 
<div class="variableContainer" style="background: transparent url(/img/icons/png/ArrowRight.png) no-repeat scroll 10px 4px;">

         <div class="deviceTitle">

             <div class="deviceTitleContent">Waschmaschine</div>

                </div>                                

                <div class="deviceState"><a href="?action=S2&id=31827"><?php if(GetValue(38568)==1)echo "<div class='SwitchBasic SwitchScript'> <div class='deviceStateContent'>Start</div>"; else echo "<div class='SwitchBasic SwitchBasicOff'> <div class='deviceStateContent'>Kein Strom</div>";?></a></div>

        </div>

      </div>

 
 </div>

</div>

</div>

 
 
</body></html>

und die Css dazu

HTML-Code:

html, body
{
	font: normal 16px verdana;
	color: #ffffff;
	background: #27292b;
	border: none;
}

body
{
	-moz-user-select: none;
	-khtml-user-select: none;
	-user-select: none;
}

a:link, a:visited, a:active, a:hover
{
	color: #7faaff;
	text-decoration: none;
}

a:hover
{
	color: #4f7acf;
}


/* ===== POPUP LAYER ===== */

#popupLayerContainer
{
	display: none;
	position: absolute;
	z-index: 800;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

#popupLayerBorder
{
	display: block;
	position: absolute;
	z-index: 800;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;

	background: black;

	filter: alpha(opacity=55);
	-moz-opacity: 0.55;
	opacity: 0.55;
	#overflow: visible;
}

#popupLayer
{
	display: block;
	position: absolute;
	z-index: 801;
	top: 10%;
	#top: 15%;
	#margin-top: -40px;
	left: 10%;
	width: 80%;
	height: 80%;
	#height: 70%;
	font: normal 14px verdana;
	color: white;
	filter: alpha(opacity=85);
	-moz-opacity: 0.85;
	opacity: 0.85;
	#overflow: visible;
}

.popupLayerControls
{
	top: 0;
	right: 0;
	position: absolute;
	clear: both;
}

.popupLayerControlsItem
{
	float: right;
	color: white;
	margin: 0;
	padding: 0 25px;
	height: 41px;
	overflow: hidden;
	line-height: 45px;
	border-left: 1px dotted white;
}

.popupLayerTitle
{
	position: relative;
	font-size: 22px;
	line-height: 40px;
	height: 40px;
	background: #111122;
	background-image: url(./img/bgPopupTitle.png);
	background-repeat: repeat;
	#behavior: none;
	margin: 0;
	padding: 0px 25px;
	-moz-border-radius-topleft: 30px;
	-moz-border-radius-topright: 30px;
	-webkit-border-top-left-radius: 22px;
	-webkit-border-top-right-radius: 22px;
	border: 2px solid white;
	border-width: 2px 2px 0 2px;
}

#popupLayerScrollContainer
{
	position: absolute;
	#position: relative;
	top: 40px;
	#top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	#width: 100%;
	#height: 100%;
	background-color: black;
	border: 2px solid white;
	-moz-border-radius-bottomleft: 30px;
	-moz-border-radius-bottomright: 30px;
	-webkit-border-bottom-left-radius: 22px;
	-webkit-border-bottom-right-radius: 22px;
	overflow: auto;
}

.popupLayerContent
{
}

.popupLayerError
{
	margin: 3px 20px 3px 20px;
}

.popupLayerErrorTime
{
	position: absolute;
	left: 20px;

	font: normal 14px verdana;
	color: #aaaaee;
}

.popupLayerErrorMessage
{
	margin-left: 85px;
	font: normal 14px verdana;
	color: white;
}

.popupLayerErrorMessageDetailed
{
	font: normal 10px verdana;
	color: #bbbbbb;
	margin: 3px 3px 3px 88px;
	border: 1px #666666 dashed;
	overflow: auto;
	word-wrap: break-word;
}


/* ===== CONTAINER ===== */

#pageContainer
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#containerTop
{
	z-index: 2;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 40px;
}

#containerMiddle
{
	background-color: #3a3d40;
	padding: 10px 0;
	#padding: 10px 0 90px 0;
	z-index: 1;
	overflow: hidden;
	position: absolute;
	top: 40px;
	right: 0;
	bottom: 40px;
	#bottom: 0;
	left: 0px;
	width: 100%;
	#height: 100%;
}

#containerBottom
{
	z-index: 50;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40px;
}



/* ===== BAR TOP ===== */

#barTop
{
	font: normal 12px verdana;
	color: #ffffff;
	clear: both;

	position: relative;
	z-index: 20;

	width: 100%;
	height: 40px;
}

.barTopBackground
{
	position: absolute;
	z-index: 10;

	top: 0;
	left: 0;
	width: 100%;
	height: 40px;

	background-color: #000000;
}

.barTopItem, .barTopItemSelected
{
	font: normal 18px verdana;
	display: block;
	float: left;
	padding: 1px;
	margin-top: 1px;
	border: 0;
}

.barTopItemSelected
{
	padding: 0;
/*	#margin-bottom: 1px;*/
	border: 1px #365380 solid;
	background-image: url(./img/barTop20lightblue.png);
}

.barTopItemTitle, .barTopItemTitleIcon
{
	padding: 7px 15px 7px 15px;
}

.barTopItemTitleIcon
{
	padding-left: 54px;
}

#barTopClock
{
	font: normal 14px verdana;
	text-align: right;
	white-space: nowrap;

	position: absolute;
	right: 0;
	display: block;
	float: left;

	margin-top: 1px;
	padding: 10px 16px 9px 16px;
	#padding: 10px 16px 9px 16px;
	#margin-bottom: 1px;

	border: 1px #365380 solid;

	background-image: url("./img/barTop20darkblue.png");
}

/* ===== BAR BOTTOM ===== */

.barBottom
{
	font: normal 12px verdana;
	clear: both;

	height: 40px;

	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;

	width: 100%;

	#margin-bottom: -1px;
}

.barBottomBackground
{
	position: absolute;
	z-index: 90;

	top: 0;
	left: 0;
	width: 100%;
	height: 40px;

	background-color: #000000;
}

.barBottomCategoriesUpperLevel
{
	font: normal 14px verdana;

	display: block;
	float: left;

	white-space: nowrap;

	padding: 11px;
	#padding-top: 10px;
}

.barBottomCategoriesActLevel
{
	font: normal 18px verdana;
	display: block;
	float: left;
	white-space: nowrap;
	margin-top: 1px;
	padding: 8px 11px;
	#padding: 7px 11px 8px 11px;
}

.barBottomCategoriesActLevelSelected
{
	padding: 7px 10px;
	#padding: 6px 10px 8px 10px;
	border: 1px #365380 solid;
	background-image: url(./img/barBottom20lightblue.png);
}

.barBottomCategories
{
	float: left;
	height: 40px;
	overflow: visible;
	white-space: nowrap;
}

.barBottomCategoriesItem
{
	font: normal 14px verdana;
	display: block;
	float: left;
	white-space: nowrap;
	padding: 11px;
	#padding-top: 10px;
	margin-top: 1px;
}

.barBottomCategoriesItemSelected
{
	padding: 10px 10px 9px;
	#padding: 9px 10px 10px 10px;
	border: 1px #365380 solid;
	background-image: url(./img/barBottom20lightblue.png);
}




.webfrontMenu
{
	font: normal 14px verdana;

	display: block;
	float: left;
	z-index: 110;

	position: relative;
	display: block;
	float: left;
}

.webfrontMenuItem
{
	font: normal 14px verdana;
	color: #ffffff;

	position: relative;
	z-index: 111;

	padding: 9px 10px 10px 10px;
	#padding: 8px 10px 11px 10px;
}

.webfrontMenuItemInactive
{
	visibility: hidden;


	opacity: .85;
	filter: alpha(opacity=85);
	-moz-opacity: 0.85;

	background-color: #2d3540;
	border-top: 1px #365380 solid;
	border-left: 1px #365380 solid;
	border-right: 1px #365380 solid;
}

.webfrontMenuItemInactiveHover
{
	background-color: #3e4a59;
}

.webfrontMenuItemActive
{
	visibility: visible;

	padding: 11px;
	#padding-top: 10px;
}

.webfrontMenuItemActiveSelected
{
	visibility: visible;

	margin-top: 1px;
	padding: 9px 10px 10px 10px;
	#padding: 8px 10px 11px 10px;

	border: 1px #365380 solid;

	background-image: url(./img/barBottom20lightblue.png);
}

/* ===== CONTENT ===== */

.containerMiddleContent
{
	font: normal 16px verdana;
	clear: both;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: auto;
	background: #27292b;
}

.containerMiddleBackgroundContainer
{
	position: fixed;
	top: 0px;
	bottom: 0px;
	width: 100%;
	text-align: center;
	overflow: hidden;
	height: auto;
	#height: 100%;
	margin: 50px 0;
	#margin: 0;
	padding: 0;
}

.containerMiddleBackgroundContainer img
{
	left: 0;
	top: 0;
}

.containerMiddleContentContainer
{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: auto;
}

/* ===== DEVICE TABLE ===== */

.webfrontPageContentPane
{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	font-size: 100%;
}

.automatitionBarBottom
{
	display: none;
}

.deviceContainer
{
	position: relative;
	margin: 10px;
	padding: 0;
	min-height: 40px;
	#height: 40px;
	border: 2px solid #3b3b4d;
}

.fadeBlock { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #009000 url(./img/bgSwitchOn.png) repeat; }

.variablesContainer
{
	margin: 11px;
	#margin-top: 0;
	border: 2px solid #3b3b4d;
	#border-width: 1px 0 0 0;
}

.variableContainer
{
	position: relative;
	margin: -1px 0;
	#margin: 0;
	min-height: 40px;
	#height: 40px;
	border: 1px solid #3b3b4d;
	border-width: 2px 0;
	#border-width: 0px 1px 1px 1px;
}

.deviceTitle
{
	margin-right: 219px;
	#height: 40px;
}

.deviceTitleContent
{
	position: relative;
	font: normal 16px verdana;
	text-align: left;
	padding: 11px 0 0 52px;
	overflow: hidden;
	white-space: nowrap;
}

.deviceState, .deviceStateExtended
{
	font: normal 14px verdana;
	position: absolute;
	right: 0;
	top: 0;
	height: 40px;
	width: 199px;
	overflow: hidden;
}

.deviceStateExtended
{
	right: 40px;
	width: 159px;
}

.deviceStateContent
{
	position: relative;
	font: normal 14px verdana;
	text-align: center;
	padding: 11px 0 0 0;
	margin: 0;
}

.SwitchBasic
{
	width: 100%;
	height: 100%;

	border-left: 1px solid #3b3b4d;
	border-right: 1px solid #3b3b4d;
	margin: 0 -1px 0 1px;
}

.SwitchBasicOn
{
	background-color: #009000;
	text-align: center;
	background-image: url("./img/bgSwitchOn.png");
	background-repeat: repeat;
}

.SwitchBasicOff
{
	background-color: #27292b;
	text-align: center;
	background-image: url("./img/bgSwitchOff.png");
	background-repeat: repeat;
}


.SwitchScript
{
	background-color:#0000ff;
	text-align: center;
	background-repeat: repeat;
}

.variableDisplay, .variableDisplayExtended
{
	position: relative;
	width: 100%;
	height: 100%;

	border-left: 1px solid #3b3b4d;

	margin: 0 -1px 0 1px;
}

.variableDisplayExtended
{
	width: 159px;
}

.deviceExtender, .variableExtender
{
	font: normal 14px verdana;
	position: absolute;
	right: 0;
	top: 0;
	height: 40px;
	width: 40px;
	overflow: hidden;
	border-left: 1px solid #3B3B4D;
	background: url(img/roomsPopupRoomArrowLeft.png) no-repeat center center;
}

.deviceExtenderExtended, .variableExtenderExtended
{
	background: url(img/roomsPopupRoomArrowDown.png) no-repeat center center;
}

/***** SELECTIONBAR = ENUMBAR AND SELECTORBAR *****/
.selectionBarOuter
{
	clear: both;
	margin: 12px;
	#margin-top: 0px;
}

.selectionBar
{
	width: 100%;
	background: #222324;
	border: 1px solid #3b3b4d;
	border-collapse: collapse;
}

.selectionBarBlock
{
	height: 40px;
	background: #222324;
	color: #ffffff;
	text-align: center;
	line-height: 38px;
	border: 1px solid #3b3b4d;
}

.selectionBarBlockActive
{
	background: #334155;
	background-image: url(./img/bgSelectionBarActive.png);
	background-repeat: repeat;
}

/***** SLIDER BAR *****/
.sliderBarOuter
{
	position: relative;
	clear: both;
}

.sliderBar
{
	position: relative;
	margin: 0px 10px 10px 10px;
	min-height: 40px;
	#height: 42px;
	border: 1px solid #3b3b4d;
}

.sliderBarMin
{
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	height: 40px;

	background: #2c323a;
	color: #ffffff;
	text-align: center;
	line-height: 38px;

	border: 1px solid #3b3b4d;
	border-width: 0 1px 0 0;
}

.sliderBarState
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 40px;
}

.sliderBarStatePositionContainer
{
	position: relative;
	left: 80px;
	height: 40px;
	margin-right: 160px;

	background: #869dbf;
}

.sliderBarStatePosition
{
	height: 40px;
	background: #b3d2ff;
}

.sliderBarStateText
{
	position: absolute;
	top: 0;
	width: 100%;
	height: 40px;

	color: #2c323a;
	text-align: center;
	line-height: 38px;
}

.sliderBarMax
{
	position: absolute;
	top: 0;
	right: 0;
	width: 80px;
	height: 40px;

	background: #2c323a;
	color: #ffffff;
	text-align: center;
	line-height: 38px;

	border: 1px solid #3b3b4d;
	border-width: 0 0 0 1px;
}


/* next */
.dimmerBasicBar
{
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0;
}

.dimmerBasicBarProgress
{
	width: 50%;
	height: 40px;
	background-color: #aaaadd;
	margin: 0;
	padding: 0;
}

.dimmerBasicBarText
{
	position: relative;
	font: normal 14px verdana;
	text-align: center;
	width: 100%;
	margin-top: -40px;
	padding: 0;
}


/* ===== ROOMS POPUP =====*/
.roomsPopupTitle
{
	position: absolute;
	left: 10px;
	top: 10px;
	background-color: #004d67;
	font: normal 24px sans-serif;
	color: #ffffff;
	padding: 11px;
}

.roomsPopupClose
{
	position: absolute;
	right: 10px;
	top: 10px;
	background-color: #004d67;
	font: normal 14px sans-serif;
	color: #ffffff;
	padding: 11px;
}

.centerBlock
{
	position: absolute;
	text-align: center;
}

.vCenterOuter
{
	#position: relative;

	display: table;
	overflow: hidden;
}

.vCenterMiddle
{
	#position: absolute;
	#top: 50%;
	#width: 100%;

	display: table-cell;
	vertical-align: middle;
}

.vCenterInner
{
	#position: relative;
	#top: -50%;
}

.roomsPopupLevelUpContainer
{
	position: fixed;
	width: 100%;
	height: 100px;
	left: 50%;
	top: 20%;

	margin-left: -65px;

	#position: absolute;
	#width: 130px;
	#top: 15%;
	#padding-right: 130px;

	text-align: center;
}

.roomsPopupLevelUp
{
	height: 100px;
	width: 130px;
	text-align: left;

	background-image: url(./img/roomsPopupLevelUp.png);
	background-repeat: no-repeat;
	background-position: center center;
}

.roomsPopupLevelUpText
{
	width: 130px;
	text-align: center;
	font: normal 16px sans-serif;
	color: #ffffff;
}

.roomsPopupActLevelContainer
{
	text-align: left;
	font: normal 16px sans-serif;
	color: #ffffff;
	width: 150px;
	height: 150px;
	margin: 0 auto 0 auto;

	background-image: url(./img/roomsPopupActLevel.png);
	background-repeat: no-repeat;
	background-position: center center;
}

.roomsPopupActLevelText
{
	width: 150px;
	text-align: center;
	font: normal 16px sans-serif;
	color: #ffffff;
}

.roomsPopupSubRooms
{
	position: fixed;
	width: auto;
	height: auto;
	#margin-top: -5%;
	top: 20%;
	right: 10%;
	bottom: 10%;
	left: 10%;
}

.roomsPopupSubRoomsContainerLeft
{
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	margin-right: -75px;
}

.roomsPopupSubRoomsContainerRight
{
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	margin-left: -75px;
	text-align: left;
}

.roomsPopupSubRoomsContainerMiddle
{
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -75px;
	width: 150px;
	height: 100%;
}

.roomsPopupSubRoomsContainerLeftContent
{
	padding-right: 75px;
	text-align: right;
}

.roomsPopupSubRoomsContainerMiddleContent
{
	width: 150px;
	text-align: center;
}

.roomsPopupSubRoomsContainerRightContent
{
	padding-left: 75px;
}

.roomsPopupSubRoom
{
	height: 50px;
	clear: both;
}

.roomsPopupSubRoomCapLeft
{
	width: 25px;
	height: 50px;
	background-image: url(./img/roomPopupSubRoomCapLeft.png);
}

.roomsPopupSubRoomContent
{
	font: normal 16px sans-serif;
	padding-top: 16px;
	color: #ffffff;
	text-align: center;
	background-color: #232425;
	height: 34px;
	#height: 50px;
}

.roomsPopupSubRoomCapRight
{
	width: 25px;
	height: 50px;
	background-image: url(./img/roomPopupSubRoomCapRight.png);
}

Die icons habe ich ja schon mal gepostet.