Zobrazují se příspěvky se štítkemcss. Zobrazit všechny příspěvky
Zobrazují se příspěvky se štítkemcss. Zobrazit všechny příspěvky

neděle 14. října 2012

Automatická webkamera

Již dlouho jsem se snažil udělat nějakým způsobem automatické fotítko z v4l2 (video for linux 2), to mi bude samo fotit obrázky na web a budu se na to moct koukat i třeba někde jinde přes internet.

Musím se přiznat, že jsem nečekal něco takového, jakože by to fungovalo asi tak, jak to teď funguje. :)

Celá věc je vlastně založena na svou scriptech, primárním (shotnupload.sh) a zálohovacím (math.sh). Ano, celé to valí v bashi.

shotnupload.sh je vlastně ten jednodušší script, ale ať si nikdo nemyslí, že byl hotov dřív, než ten zálohovací. Právě, že ne.

#!/bin/bash

export DISPLAY=:0; #timto vlastne docilime spusteni okna na nasem displeji, proto musime pouzit cvlc

cvlc -V dummy v4l2:///dev/video0 --v4l2-contrast -2 --v4l2-saturation -2 --video-filter scene --no-audio --scene-path /home/zatnaktel/Obrázky/Webcam/live --scene-prefix image_prefix --scene-format jpg vlc://quit --run-time=1 #prednastavim slozku, format, typ vstupu atp.

cd /home/zatnaktel/Obrázky/Webcam/live/

echo Pripojuji k FTP a odesilam na URL http://zatnaktel.unas.cz/image_prefix00001.jpg ... #to jen pro prehled v prikazovem radku

HOST='zatnaktel.unas.cz'
USER='zatnaktel.unas.cz'
PASSWD='moje_heslo'
FILE='image_prefix00001.jpg'
date > date_prefix00001.inc #cas snimku
FILE2='date_prefix00001.inc'

ftp -n $HOST <<END_SCRIPT #pomoci programu ftp odeslu obrazek na server spolu s casem
quote USER $USER
quote PASS $PASSWD
put $FILE
put $FILE2
quit

END_SCRIPT
echo Uspech!
exit 0


Script se spouští každou minutu, obrázek se ale přepisuje, aby nedošlo k zahlcování serveru skoro duplicitním materiálem. Není to bezpečnostní, takže tak.

math.sh - názvu se divit nebudeme, vpodstatě vznikl při experimentech a pak už jsem to nezměnil. Jde ale o funkci.


#!/bin/bash

cd /home/zatnaktel/Obrázky/Webcam/live/

puvodni_cislo=$(cat ./snaps/math.txt) #math.txt je soubor obashujici cislo

cp ./image_prefix00001.jpg ./snaps/snap-`echo "$puvodni_cislo+1" | bc -q`.jpg #kopirujeme aktualni obrazek na napr. "snap-05.jpg", cislo se zvysuje umerne poctem spusteni scriptu (x+1)

cp ./date_prefix00001.inc ./snaps/`echo "$puvodni_cislo+1" | bc -q`.txt

cislo_nove=$(echo "$puvodni_cislo+1" | bc -q)

echo $cislo_nove > ./snaps/math.txt

echo Pripojuji k FTP a odesilam na URL http://zatnaktel.unas.cz/webcam/snaps/snap-"$cislo_nove".jpg ... #vse posleme na server, jak pocet fotek (kvuli galerii), tak fotku a datum vyfoceni

cd ./snaps/

HOST='zatnaktel.unas.cz'
USER='zatnaktel.unas.cz'
PASSWD='moje_heslo'
FILE='snap-'$cislo_nove'.jpg'
FILE2='math.txt'
FILE3=''$cislo_nove'.txt'

ftp -n $HOST <<END_SCRIPT
quote USER $USER
quote PASS $PASSWD
cd /webcam/snaps/
put $FILE
cd ./date
put $FILE3
cd ../../
put $FILE2
quit

END_SCRIPT
echo Uspech!
exit 0


No není ten bash úžasný? :)

Dále tu máme galerii gallery.php, kterou jsem vlastně použil z webu achatinka, mám dojem, že jsem to tu i posílal s kódem. Tuhle jsem musel trochu upravit, aby byla vůbec kompatibilní se soubory a funkcemi scriptů.


<?php
$id=$_GET["obrazek"];
?>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel='stylesheet' type='text/css' href='./page.css'>
<title>Gallery of snaps</title>
<body id="gal">
<?php
echo $head;
if(file_exists("./snaps/snap-".$id.".jpg")){
$komentar=file_get_contents("./snaps/date/".$id.".txt");
$first_thumb=($id-2);
$second_thumb=($id-1);
$third_thumb=($id);
$fourth_thumb=($id+1);
$fifth_thumb=($id+2);
$posledni=file_get_contents("./math.txt");
echo'
<div id="map"><img src="./snaps/snap-'.$id.'.jpg" id="image" alt="IMAGE"></div>
<div id="komentar">'.$komentar.'</div>
<div id="list">';
if($id!="1"){echo'<a href="gallery.php?obrazek=1" class="gal"><img src="http://achatinka.mysteria.cz/data/nazacatek.png" class="thumb"></a>';}
if(file_exists("./snaps/snap-".$first_thumb.".jpg")){echo"<a href='gallery.php?obrazek=".$first_thumb."'><img src='./snaps/snap-".$first_thumb.".jpg' class='thumb'></a>";}else{echo"<img src='http://achatinka.mysteria.cz/data/upload/thumb.png' class='thumbp'>";}
if(file_exists("./snaps/snap-".$second_thumb.".jpg")){echo"<a href='gallery.php?obrazek=".$second_thumb."'><img src='./snaps/snap-".$second_thumb.".jpg' class='thumb'></a>";}else{echo"<img src='http://achatinka.mysteria.cz/data/upload/thumb.png' class='thumbp'>";}
if(file_exists("./snaps/snap-".$third_thumb.".jpg")){echo"<a href='gallery.php?obrazek=".$third_thumb."'><img src='./snaps/snap-".$third_thumb.".jpg' class='thumb' id='this'></a>";}else{echo"<img src='http://achatinka.mysteria.cz/data/upload/thumb.png' class='thumbp'>";}
if(file_exists("./snaps/snap-".$fourth_thumb.".jpg")){echo"<a href='gallery.php?obrazek=".$fourth_thumb."'><img src='./snaps/snap-".$fourth_thumb.".jpg' class='thumb'></a>";}else{echo"<img src='http://achatinka.mysteria.cz/data/upload/thumb.png' class='thumbp'>";}
if(file_exists("./snaps/snap-".$fifth_thumb.".jpg")){echo"<a href='gallery.php?obrazek=".$fifth_thumb."'><img src='./snaps/snap-".$fifth_thumb.".jpg' class='thumb'></a>";}else{echo"<img src='http://achatinka.mysteria.cz/data/upload/thumb.png' class='thumbp'>";}
if($id!=$posledni){echo'<a href="gallery.php?obrazek='.$posledni.'" class="gal"><img src="http://achatinka.mysteria.cz/data/nakonec.png" class="thumb"></a>';}
echo'</div>';
if(file_exists("./snaps/snap-".$second_thumb.".jpg")){echo'<a href="gallery.php?obrazek='.$second_thumb.'" id="Previous">&lt;</a>';}
if(file_exists("./snaps/snap-".$fourth_thumb.".jpg")){echo'<a href="gallery.php?obrazek='.$fourth_thumb.'" id="Next">&gt;</a>';}
echo'
</body>
</html>
';}
else{
echo'  
<div id="map"><img src="http://achatinka.mysteria.cz/data/warning.png" id="image"></div>
<div id="nazev">ERROR: Image with ID '.$id.' do not exist!</div>
<div id="list"></div>
</body>
</html>  
    ';
    };
?>


K tomu snad není co dodat. Styl je přesně stejný, jako u původní. Chybět by nic nemělo, až na hlavní index.php, jež nás uvádí u kamery.
Kód je hnusný, za to se omlouvám, ale psal jsem ho na rychlo a to vpreparované php je hnuus. Vím to.

<!DOCOTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Zatnaktel WebCam output</title>
<style>
body
{
padding: 20px;
background: #111;
color: #000;
font-family: Arial;
font-size: 14px;
}
div#page
{
width: 100%;
min-height: 600px;
max-height: 700px;
background-color: #fff;
text-align: center;
padding: 10px 0px;
}
<?php
$mod=date ("H", filemtime("./../image_prefix00001.jpg"));
$mod2=date ("m", filemtime("./../image_prefix00001.jpg"));
$time=date("H",time());
$time2=date("m",time());
if($mod==$time&&$mod2==$time2)
{$bc="background: url('../image_prefix00001.jpg') #fff no-repeat;";}
else {$bc="background: url('./off.png') #fff no-repeat;";$link="<u style=\"font-size:15px;font-weight:bold;cursor:pointer;\" onclick=\"document.getElementById('image').className='image_original';\">Show last image</u>";}
echo'
div.image
{
width: 640px;
height: 480px;
border: 1px solid #000;
margin: 2px auto 10px auto;
position:relative;';
echo $bc;
?>
}

div.image_original
{
width: 640px;
height: 480px;
border: 1px solid #000;
margin: 2px auto 10px auto;
position:relative;
background: url('../image_prefix00001.jpg') #fff no-repeat;
}

span
{
display:block;
width: 100%;
color: #fff;
font-size: 12px;
font-family: Courier;
position: absolute;
bottom: 4px;
left: 5px;
text-align: left;
font-weight: bold;
}

a
{
color: #fff;
decoration: none;
}
</style>

</head>
<body>
<div id="page"><br><h2>Zatnaktel WebCam</h2>
<meta http-equiv="refresh" content="60;url=./">
<b>Image autoupdate every 1 minute.</b><br><br>
<div style="width: 80%;height:0px;border-bottom:1px solid #000;margin: 2px auto;"></div>
<br><a href="gallery.php?obrazek=<?php include'math.txt'; ?>" style="font-weight:bold;color: #000;">Go to gallery</a>
<div id="image" class="image">
<img src="logo.png" alt="Image">
<span>Last taken: <?php include"../date_prefix00001.inc"; ?>, <a href="http://zatnaktel.unas.cz" target="_blank">http://zatnaktel.unas.cz</a>, © Zatnaktel 2012</span>
</div>
<?php echo $link; ?>


</div>

</body>
</html>


Zálohovací script do galerie se spouští každé dvě hodiny a jak už jsem řekl, primární každou minutu.

zatnaktel@Toaster ~ $ crontab -l
# m h  dom mon dow   command
*/1 * * * * /home/zatnaktel/Obrázky/Webcam/live/shotnupload.sh
0 0,2,4,6,8,10,12,14,16,18,20,22 * * * /home/zatnaktel/Obrázky/Webcam/live/math.sh


Tímto bych chtěl taky poděkovat chytrým hlavám na ubuntu fóru, které mi pomohly v momentech, kdy jsem netušil. A že jich bylo. Samozřejmě pak taky kamarádovi z twitteru, který mi hodně poradil u zálohovacího scriptu.

Stránka s aktuální fotkou (index): http://zatnaktel.unas.cz/webcam/
Galerie: http://zatnaktel.unas.cz/webcam/gallery.php?obrazek=1

úterý 10. července 2012

gallery.php - Pěkná galerie plná tykadel...

Vytvářím galerii k webu achatinka.mysteria.cz a celkem jsem si s tím php na celém webu zarochnil...

Nyní jsem dokončil galerii.

gallery.php

<?php
$id=$_GET["obrazek"];
?>
<?php
$head=file_get_contents("./data/include/head.inc");
$head=str_replace("<title>Achatinka Web</title>", "<title>Galerie - Achatinka Web</title>", $head);
$head=str_replace("<body>", "<body id='gal'>", $head);
echo $head;
if(file_exists("./data/upload/".$id.".jpg")){
$nazev=file_get_contents("./data/upload/nazev/".$id.".inc");
$komentar=file_get_contents("./data/upload/komentar/".$id.".inc");
$first_thumb=($id-2);
$second_thumb=($id-1);
$third_thumb=($id);
$fourth_thumb=($id+1);
$fifth_thumb=($id+2);
$posledni=file_get_contents("./admin/log/foto_id.inc");
echo'
<div id="map"><img src="http://achatinka.mysteria.cz/data/upload/'.$id.'.jpg" id="image"></div>
<div id="nazev">'.$nazev.'</div>
<div id="komentar">'.$komentar.'</div>
<div id="list">';
if($id!="1"){echo'<a href="gallery.php?obrazek=1" class="gal"><img src="./data/nazacatek.png" class="thumb"></a>';}
if(file_exists("./data/upload/".$first_thumb.".jpg")){echo"<a href='gallery.php?obrazek=".$first_thumb."'><img src='./data/upload/".$first_thumb.".jpg' class='thumb'></a>";}else{echo"<img src='./data/upload/thumb.png' class='thumbp'>";}
if(file_exists("./data/upload/".$second_thumb.".jpg")){echo"<a href='gallery.php?obrazek=".$second_thumb."'><img src='./data/upload/".$second_thumb.".jpg' class='thumb'></a>";}else{echo"<img src='./data/upload/thumb.png' class='thumbp'>";}
if(file_exists("./data/upload/".$third_thumb.".jpg")){echo"<a href='gallery.php?obrazek=".$third_thumb."'><img src='./data/upload/".$third_thumb.".jpg' class='thumb' id='this'></a>";}else{echo"<img src='./data/upload/thumb.png' class='thumbp'>";}
if(file_exists("./data/upload/".$fourth_thumb.".jpg")){echo"<a href='gallery.php?obrazek=".$fourth_thumb."'><img src='./data/upload/".$fourth_thumb.".jpg' class='thumb'></a>";}else{echo"<img src='./data/upload/thumb.png' class='thumbp'>";}
if(file_exists("./data/upload/".$fifth_thumb.".jpg")){echo"<a href='gallery.php?obrazek=".$fifth_thumb."'><img src='./data/upload/".$fifth_thumb.".jpg' class='thumb'></a>";}else{echo"<img src='./data/upload/thumb.png' class='thumbp'>";}
if($id!=$posledni){echo'<a href="gallery.php?obrazek='.$posledni.'" class="gal"><img src="./data/nakonec.png" class="thumb"></a>';}
echo'</div>';
if(file_exists("./data/upload/".$second_thumb.".jpg")){echo'<a href="gallery.php?obrazek='.$second_thumb.'" id="predchozi">&lt;</a>';}
if(file_exists("./data/upload/".$fourth_thumb.".jpg")){echo'<a href="gallery.php?obrazek='.$fourth_thumb.'" id="dalsi">&gt;</a>';}
echo'
</body>
</html>
';}
else{
echo'  
<div id="map"><img src="http://achatinka.mysteria.cz/data/warning.png" id="image"></div>
<div id="nazev">CHYBA: Obrázek s ID '.$id.' neexistuje!</div>
<div id="list"></div>
</body>
</html>  
    ';
    };
?>



V souboru head.inc includovaném na začátku stránky je <link který obsahuje page.css a v něm určenou část pro galerii...

page.css > gallery

/* obrazkova galerie */

body#gal
{
background: #222;
color: #BBB;
overflow: hidden;
}

div#map
{
width: 100%;
height: 77%;
text-align: center;
}

div#list
{
background: url("shadebg.png") bottom #444 repeat-x;
width: 100%;
height: 22%;
margin-top: 10px;
text-align: center;
}

img#image
{
max-width: 100%;
max-height: 100%;  
-moz-box-shadow: -1px 0px 20px 5px #000;
-webkit-box-shadow: -1px 0px 20px 5px #000;
box-shadow: -1px 0px 20px 5px #000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
}

div#nazev
{
position: absolute;
top: 20px;
left: 20px;
min-width: 100px;
font-size: 18px;
font-weight: bold;
color: #fff;
background: url("shadebg.png") #444 bottom repeat-x;
height: 23px;
font-family: arial;
padding: 2.5px 5px 2.5px 5px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border: 1px solid #111;
}

div#komentar
{
position: absolute;
top: 70%;
left: 20px;
min-width: 100px;
font-size: 18px;
font-weight: bold;
color: #fff;
background: url("shadebg.png") #444 bottom repeat-x;
height: 23px;
font-family: arial;
padding: 2.5px 5px 2.5px 5px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border: 2px solid #111;
}

a#predchozi
{
position: absolute;
top: 35%;
left: 2px;
font-size: 100px;
color: #888;
text-decoration: none;
font-style: normal;
text-shadow: 0px 0px 20px #0F0;
}

a#dalsi
{
position: absolute;
top: 35%;
right: 2px;
font-size: 100px;
color: #888;
text-decoration: none;
font-style: normal;
text-shadow: 0px 0px 20px #0F0;
}
a#dalsi:hover , a#predchozi:hover
{text-shadow: 0px 0px 20px #F00;}



img.thumb , img.thumbp
{
max-height: 95%;
-moz-box-shadow: -1px 0px 10px 2.5px #000;
-webkit-box-shadow: -1px 0px 10px 2.5px #000;
box-shadow: -1px 0px 10px 2.5px #000;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
margin: 0px 5px 0px 5px;
border: 1px solid #000;
opacity: 0.8;
}

img#this
{
opacity: 0.5;
border: 1px solid #0F0;
}

img#this:hover , img.thumb:hover
{
opacity: 1;
border: 1px solid #F00;
}


Tyhle věci bastlím poslední dobou zásadně v noci. Líp mi to myslí a mám na to čas. :)

úterý 26. června 2012

ZMB - Mobile CSS styles


body
{
padding: 5px;
background-color: #fff;
}

div#layout , div#menicqo, div#news
{
width: 100%;
background-color: #F1F1F1;
border: 1px solid #aaa;
text-align: center;
color: 222;
font-family: arial;
font-size: 12px;
margin-bottom: 5px;
}

span.one
{color: #0B0;}

span.two
{color: #BC0;}

span.three
{color: #B20;}

h2
{
text-align: center;
}

div.line
{
width: 100%;
height: 0px;
border-bottom: 1px solid #222;
margin-bottom: 3px;
}


input , textarea
{
width: 100%;
background-color: #fff;
border: 1px solid #222;
color: #333;
font-family: arial;
font-size: 13px;
}


span.id
{
font-size: 20px;
font-family: courier;
color: CCC;
float:left;
margin: 2px 5px 6px 0px;
font-style: normal;
}


a
{
color: #333;
}

big
{
font-size: 11px;
}

sobota 23. června 2012

Zatnaktel MicroBlogger - Shitnotes for free times [source]

Celý projekt funguje pomocí 9 souborů a jedné složce s datovými soubory. Vše funguje bez DB, protože jsem se ji ještě nenaučil. :D
Takže teď sem hodím náhledy scriptů. Upozorňuju předem, že to bylo psáno na koleni a tak je to strašná sračka, ale funguje.

index.php

<!DOCTYPE HTML>
<html>
<head>
<title>Microblogger</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<link rel="stylesheet" href="page.css">
</head>
<body>
<div id="menicqo"><a href="post.php">Odeslat novou</a></div>
<div id="layout">
<h2><span class="one">Zatnaktel</span> <span class="two">Micro</span><span class="three">Blogger</span></h2>
<div class="line"></div>
<?php
$cteni=file_get_contents("zmbdata.zmb");
if($cteni==""){echo"Doposud nebyly odeslány žádné příspěvky.<br><br><br><br>";}
else{
 include"zmbdata.zmb";} ?>
<div class="line"></div>
<?php include"pata.zmb"; ?>
</div>


</body>
</html>

Tohle je náhled souboru zmbpost.php, tato stránka slouží k odeslání celé zprávy na síť.


<?php
$zprava = $_POST["zprava"];
$heslo = $_POST["pass"];
$time = date("d.m.Y H:i", time())
?>
<?php
if($heslo=="MOJE_HESLO")
{
$cteniid=file_get_contents("id.zmb");
$upravaid=($cteniid+1);
$zapisid=fopen("id.zmb","w");
fwrite($zapisid, $upravaid);
fclose($zapisid);
$zprava=htmlspecialchars($zprava);
$zprava = str_replace("\n", "<br>", $zprava);
$zprava = str_replace("(link=", "<a href='", $zprava);
$zprava = str_replace("=link)", "' target='_blank'>", $zprava);
$zprava = str_replace("=(/link)", "</a>", $zprava);
$zprava = str_replace("(i)", "<i>", $zprava);
$zprava = str_replace("(/i)", "</i>", $zprava);
$zprava = str_replace("(textinfo=", "<u title='", $zprava);
$zprava = str_replace("=textinfo)", "'>", $zprava);
$zprava = str_replace("(/textinfo)", "</u>", $zprava);

$zaloha=file_get_contents("zmbdata.zmb");
$vytvarim = fopen("zmbdata.zmb","w");
fwrite($vytvarim, "<span class='id'><a href='http://zatnaktel.unas.cz/microblogger/zprava.php?id=".$upravaid."'>#".$upravaid."</a></span><div><h3>".$time."</h3><p>".$zprava."<div class='line'></div></div>");
fwrite($vytvarim, "\n\r");
fwrite($vytvarim, $zaloha);
$zprsoubor = fopen("zpr/".$upravaid.".zmb","w");
fwrite($zprsoubor, "<span class='id'><a href='http://zatnaktel.unas.cz/microblogger/zprava.php?id=".$upravaid."'>#".$upravaid."</a></span><div><h3>".$time."</h3><p>".$zprava."<div class='line'></div></div>");
fclose($zprsoubor);
$comlist=fopen("zpr/".$upravaid."-comment-list.zmb","w");
fwrite($comlist, "");
fclose($comlist);
$echo = "Zpráva odeslána...<meta http-equiv=\"refresh\" content=\"3;url=index.php\">";
}
else{$echo="<b style='color:#f00;'>Nastala chyba.</b><meta http-equiv=\"refresh\" content=\"3;url=javascript:history.go(-1)\">";}
 ?>

<!DOCTYPE HTML>
<html>
<head>
<title>[POST] - Microblogger</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<link rel="stylesheet" href="page.css">
</head>
<body>
<div id="layout">
<?php echo $echo; ?>
</div>


</body>
</html>

Je to opravdu zněť všech možných habaďůr.

Tohle je zdroj stránky zprava.php, která vypisuje zprávu s aktuálním ID.


<?php
$id=$_GET["id"];
?>
<!DOCTYPE HTML>
<html>
<head>
<title><?php echo $id; ?> - Microblogger</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<link rel="stylesheet" href="page.css">
</head>
<body>
<div id="menicqo" style="height: 100px;"><a href="index.php">Vrátit se na stream</a><br><br>
<?php
$tw=file_get_contents("./zpr/".$id.".zmb");
$tw=str_replace("#", "ZMB: Zpráva č. ", $tw);
$tw=str_replace("</span>", " - ", $tw);
$tw=str_replace("</h3>", " - ", $tw);
$tw=strip_tags($tw);
$tw=substr($tw,0,120);
$tw=htmlspecialchars($tw);
$tw=($tw."... http://zatnaktel.unas.cz/microblogger/zprava.php?id=".$id);

echo'<a href="https://twitter.com/intent/tweet?text='.$tw.'">Sdílet na twitter</a>';?>
</div>
<div id="layout">
<h2><span class="one">Zatnaktel</span> <span class="two">Micro</span><span class="three">Blogger</span></h2>
<div class="line"></div>
<?php
if(file_exists("./zpr/".$id.".zmb")){include"./zpr/".$id.".zmb";echo"<br><br><br><h2>Komentáře</h2>";if(file_get_contents("./zpr/".$id."-comment-list.zmb")==""){echo"Buď první, kdo okomentuje tento přípěvek!<br>";}else{include"./zpr/".$id."-comment-list.zmb";}echo"<br><br><br><br><h2>Vložit komentář</h2><br><form action='postcomment.php?id=".$id."' method='post'><input type='text' value='Jméno' name='jmeno'><br><textarea name='komentar'>Váš komentář</textarea><br>Nejlepší přítel člověka je ...<input type='text' name='antispam'> (vše malým písmem)<br><input type='submit' value='Odeslat'></form>"; }
else{echo"Zpráva s tímto ID neexistuje.";}
?>
<div class="line"></div>
<?php include"pata.zmb"; ?>
</div>


</body>
</html>


No a na konec sem ještě přidám CSS webu, ať vidíte, na čem to běhá,
page.css


body
{
padding: 10px 150px 20px 120px;
background-color: #fff;
}

div#layout
{
width: 100%;
min-height: 220px;
background-color: #F1F1F1;
border: 1px solid #aaa;
padding: 5px 10px 5px 10px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
color: 222;
font-family: arial;
font-size: 12px;
}

span.one
{color: #0B0;}

span.two
{color: #BC0;}

span.three
{color: #B20;}

h2
{
margin-bottom: -5px;
font-size: 22px;
text-align: center;
}

div.line
{
width: 100%;
border-bottom: 1px solid #222;
margin: 10px 0px 15px 0px;
}

textarea
{
width:100%;
background-color: #fff;
border: 1px solid #222;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
color: #333;
font-size: 14px;
font-family: arial;
height: 130px;
}

input
{
background-color: #fff;
border: 1px solid #222;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
color: #333;
font-size: 14px;
height: 20px;
font-family: arial;
}

div#menicqo
{
width: 80px;
height: 35px;
background-color: #F1F1F1;
border: 1px solid #aaa;
padding: 5px 10px 5px 10px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
color: 222;
font-family: arial;
font-size: 12px;
position: absolute;
top: 18px;
left: 12px;
}

span.id
{
font-size: 35px;
font-family: courier;
color: CCC;
float:left;
margin: 2px 15px 25px 0px;
font-style: normal;
}


a
{
color: #333;
}