premières retouches

some changes:
css more responsive
html structure without echo
Next step, appli Timo's enhancements & add some features
This commit is contained in:
Bronco 2013-06-21 09:24:00 +02:00
parent b77bdd3da1
commit c3cbc0dbab
2 changed files with 93 additions and 102 deletions

View file

@ -2,6 +2,7 @@
body { body {
background:url(paper.png) #efe; background:url(paper.png) #efe;
width: 100%; width: 100%;
min-width:320px;
margin:0;padding:0; margin:0;padding:0;
font-family: Georgia, Serif;font-size : 16px; color: #050; font-family: Georgia, Serif;font-size : 16px; color: #050;
} }
@ -28,12 +29,15 @@ header{
background-image: -o-linear-gradient( top, #555, #333); background-image: -webkit-gradient(linear, center top, center bottom, from(#555), to(#333)); background-image: -webkit-linear-gradient( top, #555, #333); background-image: linear-gradient( top, #555, #333); background-image: -o-linear-gradient( top, #555, #333); background-image: -webkit-gradient(linear, center top, center bottom, from(#555), to(#333)); background-image: -webkit-linear-gradient( top, #555, #333); background-image: linear-gradient( top, #555, #333);
} }
header nav{display:inline-block; vertical-align: top;} header nav{display:inline-block; vertical-align: top;}
header nav p{color:lightgreen;text-shadow: 0 1px 1px black;font-size:20px;}
aside{height:100%;padding-bottom : 70px;text-align:center;} aside{height:100%;padding-bottom : 70px;text-align:center;}
aside ul{padding:0;} aside ul{padding:0;}
aside li{margin:5px;list-style:none;vertical-align:middle;border-radius:3px;} aside li{margin:5px;list-style:none;vertical-align:middle;border-radius:3px;}
aside .public li{background:rgba(100,255,100,0.2);} aside .public li{background:rgba(100,255,100,0.2);}
aside .private li{background:rgba(255,100,100,0.2);} aside .private li{background:rgba(255,100,100,0.2);}
aside .public {background:rgba(100,255,100,0.2);}
aside .private {background:rgba(255,100,100,0.2);}
aside li em {font-size:10px ; color:#484;} aside li em {font-size:10px ; color:#484;}
aside li img {vertical-align:bottom;margin:1px;width:16px;height:16px;} aside li img {vertical-align:bottom;margin:1px;width:16px;height:16px;}
aside li a.suppr, aside li a.origine{opacity:0.5;width:16px;height:16px;display:inline-block;background:url(actions.png) no-repeat 0 -159px ;} aside li a.suppr, aside li a.origine{opacity:0.5;width:16px;height:16px;display:inline-block;background:url(actions.png) no-repeat 0 -159px ;}
@ -42,7 +46,7 @@ aside li a.suppr:hover,aside li a.origine:hover{opacity:1;}
aside li a.toprivate,aside li a.topublic{float:right;margin-right:5px;opacity:0.5;} aside li a.toprivate,aside li a.topublic{float:right;margin-right:5px;opacity:0.5;}
aside li a.toprivate:hover,aside li a.topublic:hover{opacity:1;} aside li a.toprivate:hover,aside li a.topublic:hover{opacity:1;}
aside .public,.private{text-align:left;vertical-align:top; margin-top:25px;padding:10px; border-radius:5px; border:1px dashed;display:inline-block;width:45%;} aside .public,.private{min-width:300px;text-align:left;vertical-align:top; margin-top:25px;padding:10px; border-radius:5px; border:1px dashed;display:inline-block;}
aside .public{border-color:green;} aside .public{border-color:green;}
aside .private{border-color:red;} aside .private{border-color:red;}
footer {text-align: right; color:#F80;text-shadow: 0 1px 1px black; position:fixed;bottom:0;left:0;right:0;height:auto;min-height:20px;padding : 5px ; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-top:1px solid #888;-moz-box-shadow: 0 0px 9px #000; -webkit-box-shadow: 0 0px 9px #000; box-shadow: 0 0px 9px #000; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=135, Color='#000')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=135, Color='#000'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #555, endColorstr = #333); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #555, endColorstr = #333)"; background-image: -moz-linear-gradient( top, #555, #333); background-image: -ms-linear-gradient( top, #555, #333); background-image: -o-linear-gradient( top, #555, #333); background-image: -webkit-gradient(linear, center top, center bottom, from(#555), to(#333)); background-image: -webkit-linear-gradient( top, #555, #333); background-image: linear-gradient( top, #555, #333); } footer {text-align: right; color:#F80;text-shadow: 0 1px 1px black; position:fixed;bottom:0;left:0;right:0;height:auto;min-height:20px;padding : 5px ; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-top:1px solid #888;-moz-box-shadow: 0 0px 9px #000; -webkit-box-shadow: 0 0px 9px #000; box-shadow: 0 0px 9px #000; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=135, Color='#000')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=135, Color='#000'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #555, endColorstr = #333); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #555, endColorstr = #333)"; background-image: -moz-linear-gradient( top, #555, #333); background-image: -ms-linear-gradient( top, #555, #333); background-image: -o-linear-gradient( top, #555, #333); background-image: -webkit-gradient(linear, center top, center bottom, from(#555), to(#333)); background-image: -webkit-linear-gradient( top, #555, #333); background-image: linear-gradient( top, #555, #333); }

103
index.php
View file

@ -31,8 +31,10 @@ $GLOBALS['public_data_folder'] = $GLOBALS['data_folder'].'/public';
$GLOBALS['default_data_folder'] = $GLOBALS['public_data_folder']; $GLOBALS['default_data_folder'] = $GLOBALS['public_data_folder'];
$GLOBAL['version']='1.0'; $GLOBAL['version']='1.0';
$GLOBALS['message'] = 'Votre webliothèque perso'; $GLOBALS['message'] = 'Votre webliothèque perso';
$GLOBALS['public_title'] = 'Voici la webliothèque publique de Bronco';
$bookmarklet='<a title="Drag this link to your shortcut bar" href=\'javascript:javascript:(function(){var url = location.href;window.open("http://'.$_SERVER['SERVER_NAME'].$_SERVER['PHP_SELF'].'?q="+ encodeURIComponent(url),"_blank","menubar=yes,height=600,width=1000,toolbar=yes,scrollbars=yes,status=yes");})();\' >Bookmarklet</a>'; $bookmarklet='<a title="Drag this link to your shortcut bar" href=\'javascript:javascript:(function(){var url = location.href;window.open("http://'.$_SERVER['SERVER_NAME'].$_SERVER['PHP_SELF'].'?q="+ encodeURIComponent(url),"_blank","menubar=yes,height=600,width=1000,toolbar=yes,scrollbars=yes,status=yes");})();\' >Bookmarklet</a>';
if ($public){$bookmarklet='';} $column_width='width:47%';
if ($public){$bookmarklet='';$column_width='width:97%';}
if (!creer_dossier($GLOBALS['data_folder'], TRUE)) { die('Cant create '.$GLOBALS['data_folder'].' folder.'); } if (!creer_dossier($GLOBALS['data_folder'], TRUE)) { die('Cant create '.$GLOBALS['data_folder'].' folder.'); }
if (!creer_dossier($GLOBALS['private_data_folder'], TRUE)) { die('Cant create '.$GLOBALS['private_data_folder'].' folder.'); } if (!creer_dossier($GLOBALS['private_data_folder'], TRUE)) { die('Cant create '.$GLOBALS['private_data_folder'].' folder.'); }
if (!creer_dossier($GLOBALS['public_data_folder'], TRUE)) { die('Cant create '.$GLOBALS['public_data_folder'].' folder.'); } if (!creer_dossier($GLOBALS['public_data_folder'], TRUE)) { die('Cant create '.$GLOBALS['public_data_folder'].' folder.'); }
@ -429,29 +431,19 @@ function add_table_and_replace(&$data, $retrievable, &$match1, $match, $url_p, $
// the files in CSS are relative to the CSS ! // the files in CSS are relative to the CSS !
if (preg_match('#^https?://#', $match)) { // url if (preg_match('#^https?://#', $match)) { // url
$url_fichier = $match; $url_fichier = $match;
//echo "u ";
} }
elseif (preg_match('#^//#', $match)) { // absolute path w/o HTTP elseif (preg_match('#^//#', $match)) { // absolute path w/o HTTP
$url_fichier = $url_p['s'].':'.$match; $url_fichier = $url_p['s'].':'.$match;
//echo "h ";
} }
elseif (preg_match('#^/#', $match)) { // absolute local path elseif (preg_match('#^/#', $match)) { // absolute local path
$url_fichier = $url_p['s'].'://'.$url_p['h'].$match; $url_fichier = $url_p['s'].'://'.$url_p['h'].$match;
//echo "l ";
} }
else { // relative local path else { // relative local path
//echo "r ";
// echo '<pre>';print_r($url_p);
$uuu = (strlen($url_p['file']) == 0 or preg_match('#/$#', $url_p['pat'])) ? $GLOBALS['url'] : substr($GLOBALS['url'], 0, -strlen($url_p['file'])) ; $uuu = (strlen($url_p['file']) == 0 or preg_match('#/$#', $url_p['pat'])) ? $GLOBALS['url'] : substr($GLOBALS['url'], 0, -strlen($url_p['file'])) ;
// echo '<pre>'; echo $uuu;
$url_fichier = $uuu . substr($match, 0, -strlen($nom_fichier)).$nom_fichier; $url_fichier = $uuu . substr($match, 0, -strlen($nom_fichier)).$nom_fichier;
} }
$url_fichier = html_entity_decode(urldecode($url_fichier)); $url_fichier = html_entity_decode(urldecode($url_fichier));
//echo $url_fichier."<br/>\n";
// new rand name, for local storage. // new rand name, for local storage.
$nouveau_nom = rand_new_name($nom_fichier); $nouveau_nom = rand_new_name($nom_fichier);
if ($type == 'css') { if ($type == 'css') {
@ -478,7 +470,6 @@ function add_table_and_replace(&$data, $retrievable, &$match1, $match, $url_p, $
'type' => $type 'type' => $type
); );
} }
// replace the URL with the new filename in the &data. // replace the URL with the new filename in the &data.
$new_match = str_replace($match, $nouveau_nom, $match1); $new_match = str_replace($match, $nouveau_nom, $match1);
$data = str_replace($match1, $new_match, $data); $data = str_replace($match1, $new_match, $data);
@ -486,59 +477,50 @@ function add_table_and_replace(&$data, $retrievable, &$match1, $match, $url_p, $
return $retrievable; return $retrievable;
} }
function rand_new_name($name) {return 'f_'.str_shuffle('abcd').mt_rand(100, 999).'--'.preg_replace('#[^\w.]#', '_', $name);}
function rand_new_name($name) {
// return 'f_'.str_shuffle('abcd').mt_rand(100, 999).'--'.''.$name;
return 'f_'.str_shuffle('abcd').mt_rand(100, 999).'--'.preg_replace('#[^\w.]#', '_', $name);
}
if ($GLOBALS['done']['d'] !== FALSE) { if ($GLOBALS['done']['d'] !== FALSE) {
switch($GLOBALS['done']['d']) { switch($GLOBALS['done']['d']) {
case 'ajout' : case 'ajout' :
header('Location: index.php?done='.$GLOBALS['done']['d'].'&lien='.urlencode($GLOBALS['url']).'&loclink='.urlencode($GLOBALS['done']['lien'])); header('Location: index.php?done='.$GLOBALS['done']['d'].'&lien='.urlencode($GLOBALS['url']).'&loclink='.urlencode($GLOBALS['done']['lien']));
break; break;
case 'remove' : case 'remove' :
header('Location: index.php?done='.$GLOBALS['done']['d']); header('Location: index.php?done='.$GLOBALS['done']['d']);
break; break;
} }
echo '</div>'."\n"; echo '</div>'."\n";
} }
/* /*
* Displays main form (page to retrieve) * Displays main form (page to retrieve)
* *
*/ */
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /></head>
<title>Respawn a PHP WebPage Saver</title>
<link rel="stylesheet" type="text/css" href="design/style.css"/>
<link rel="shortcut icon" type="/image/png" href="design/favicon2.png">
<!--[if IE]><script> document.createElement("article");document.createElement("aside");document.createElement("section");document.createElement("footer");</script> <![endif]-->
echo '<!DOCTYPE html>'."\n"; </head>
echo '<html>'."\n"; <body>
echo "\t".'<head>'."\n"; <header><a href="<?php echo $_SERVER['PHP_SELF'];?>"><img src="design/logo2.png"/></a>
echo "\t".'<meta charset="utf-8" /></head>'."\n"; <nav id="orpx_nav-bar">
echo "\t".'<title>Respawn a PHP WebPage Saver</title>'."\n"; <?php
echo "\t".'<link rel="stylesheet" type="text/css" href="design/style.css"/>'."\n"; if (!$public){
echo "\t".'<link rel="shortcut icon" type="/image/png" href="design/favicon2.png">'."\n";
echo "\t".'<!--[if IE]><script> document.createElement("article");document.createElement("aside");document.createElement("section");document.createElement("footer");</script> <![endif]-->
'."\n";
echo '</head>'."\n";
echo '<body>'."\n";
echo "\t<header>".'<a href="'.$_SERVER['PHP_SELF'].'"><img src="design/logo2.png"/></a>'."\n";
if (!$public){
echo '<nav id="orpx_nav-bar">'."\n";
echo "\t".'<form method="get" action="'.$_SERVER['PHP_SELF'].'" style="text-align:center">'."\n"; echo "\t".'<form method="get" action="'.$_SERVER['PHP_SELF'].'" style="text-align:center">'."\n";
echo "\t\t".'<input id="____q" type="text" size="70" name="q" value="" placeholder="URL from the page to download" />'."\n"; echo "\t\t".'<input id="____q" type="text" size="70" name="q" value="" placeholder="URL from the page to download" />'."\n";
echo "\t\t".'<input type="submit" value="Retrieve"/>'."\n"; echo "\t\t".'<input type="submit" value="Retrieve"/>'."\n";
echo "\t".'</form>'."\n"; echo "\t".'</form>'."\n";
} } else{echo '<p>'.$GLOBALS['message'].'</p>';}
echo '</nav></header>'."\n"; ?>
echo '<aside>'."\n"; </nav>
</header>
if (!$public){ <aside>
<?php
if (!$public){
if (isset($_GET['done']) and $_GET['done'] !== FALSE) { if (isset($_GET['done']) and $_GET['done'] !== FALSE) {
echo '<div id="new-link">'."\n"; echo '<div id="new-link">'."\n";
switch($_GET['done']) { switch($_GET['done']) {
@ -553,10 +535,11 @@ if (!$public){
echo '</div>'."\n"; echo '</div>'."\n";
} }
} }
echo '<div class="public">'."\n"; // public pages
$liste_pages = scandir($GLOBALS['public_data_folder']); echo '<div class="public" style="'.$column_width.'">'."\n";
if ( ($nb = count($liste_pages)) != 0 ) { $liste_pages = scandir($GLOBALS['public_data_folder']);
if ( ($nb = count($liste_pages)) != 0 ) {
echo '<ul id="liste-pages-sauvees">'."\n"; echo '<ul id="liste-pages-sauvees">'."\n";
for ($i = 0 ; $i < $nb ; $i++) { for ($i = 0 ; $i < $nb ; $i++) {
@ -580,10 +563,12 @@ if ( ($nb = count($liste_pages)) != 0 ) {
} }
} }
echo '</ul>'."\n"; echo '</ul>'."\n";
} }
echo '</div>'."\n"; echo '</div>'."\n";
if (!$public){ // don't list private pages
echo '<div class="private">'."\n"; if (!$public){ // don't list private pages
echo '<div class="private" style="'.$column_width.'">'."\n";
$liste_pages = scandir($GLOBALS['private_data_folder']); $liste_pages = scandir($GLOBALS['private_data_folder']);
if ( ($nb = count($liste_pages)) != 0 ) { if ( ($nb = count($liste_pages)) != 0 ) {
echo '<ul id="liste-pages-sauvees">'."\n"; echo '<ul id="liste-pages-sauvees">'."\n";
@ -611,9 +596,11 @@ if (!$public){ // don't list private pages
echo '</ul>'."\n"; echo '</ul>'."\n";
} }
echo '</div>'."\n"; echo '</div>'."\n";
} }
echo '</aside>'."\n"; ?>
echo '<footer>'."\n"; </aside>
echo "\t<p style='float:left'>$bookmarklet</p><p><a title='from TiMo' href='http://lehollandaisvolant.net/index.php?mode=links&id=20121211195941'>Respawn</a> (bronco edition v".$GLOBAL['version'].") - ".$GLOBALS['message']." - <a href='?public'>Public page link</a></p>\n"; <footer>
echo '</body>'."\n"; <p style='float:left'><?php echo $bookmarklet; ?></p><p><a title='from TiMo' href='http://lehollandaisvolant.net/index.php?mode=links&id=20121211195941'>Respawn</a> (bronco edition v<?php echo $GLOBAL['version'];?>) - <?php $GLOBALS['message'];?> - <a href='?public'>Public page link</a></p>
echo '</html>'."\n"; </footer>
</body>
</html>