2.2
This commit is contained in:
broncowdd
parent
bf75eb57f4
commit
fbe6e7c42a
24 changed files with 419 additions and 0 deletions
9
action_page.php
Normal file
9
action_page.php
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<?php include('auto_form2file.php'); ?>
|
||||
|
||||
|
||||
the $_POST data was converted into a php config file
|
||||
|
||||
|
||||
|
||||
|
||||
<a href='index.php'> Return to form and see the changes !</a>
|
||||
186
config_page.php
Normal file
186
config_page.php
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
<?php
|
||||
/**
|
||||
* @author bronco@warriordudimanche.com
|
||||
* @copyright open source and free to adapt (keep me aware !)
|
||||
* @version 0.1
|
||||
* auto_form.php is a little script to auto create a form and
|
||||
* its content only with an array.
|
||||
* It can create text inputs radiobuttons, select lists, passwords inputs.
|
||||
* All the generated form's elements can be reached by classes
|
||||
* and ids with css or jquery.
|
||||
*
|
||||
* It's possible to configure auto_form to add some features
|
||||
* like placeholders, labels etc.
|
||||
*/
|
||||
|
||||
|
||||
/* this is an example array
|
||||
$config=array(
|
||||
'use_a_boolean_value'=>true,
|
||||
'allow_user_to_config'=>false,
|
||||
'adresse_du_site'=>'www.warriordudimanche.net',
|
||||
'use_a_choice'=>'choice one',// current value: other values are defined below
|
||||
'use_a_radiobutton_choice'=>'choice one',// current value: other values are defined below
|
||||
'my_password'=>'password',
|
||||
'confirm_password'=>'',
|
||||
|
||||
);*/
|
||||
//then render_form($config);
|
||||
|
||||
|
||||
/* #####################################################################
|
||||
# auto_form config #
|
||||
#####################################################################
|
||||
|
||||
*/
|
||||
|
||||
// here are the basic parameters
|
||||
$autoform_config=array(
|
||||
'use_labels'=>true,
|
||||
'use_placeholder'=>true,
|
||||
'method'=>'post',
|
||||
'action'=>'config_page.php',
|
||||
'form_name'=>'autoform',
|
||||
'form_id'=>'autoform',
|
||||
'form_class'=>'autoform',
|
||||
'enctype'=>'',
|
||||
'submit_button_label'=>'Save changes',
|
||||
'reset_button_label'
|
||||
);
|
||||
|
||||
foreach (glob('design/*') as $skin){
|
||||
$skin=basename($skin);if ($skin!='index.html'){$skins[]=$skin;}
|
||||
}
|
||||
$autoform_config['skin']=$skins;
|
||||
$autoform_config['default_data_folder']=array('private','public');
|
||||
|
||||
/* #####################################################################
|
||||
# the render function #
|
||||
#####################################################################
|
||||
You can call it from anywhere in the page and render more than one form
|
||||
just call render_form($data_array)to create a brand new form with differents
|
||||
names, classes, ids etc.
|
||||
*/
|
||||
function render_form($var){
|
||||
global $autoform_config;$all_keys='';
|
||||
$id=$class=$enctype=$reset='';
|
||||
if ($autoform_config['form_id']){$id=' id="'.$autoform_config['form_id'].'" ';}
|
||||
if ($autoform_config['form_class']){$class=' class="'.$autoform_config['form_class'].'" ';}
|
||||
if ($autoform_config['enctype']){$enctype=' enctype="'.$autoform_config['enctype'].'" ';}
|
||||
if (isset($autoform_config['reset_button_label'])){$reset="<input type='reset' value='".$autoform_config['reset_button_label'].'"/>';}
|
||||
|
||||
echo '<form name="'.$autoform_config['form_name']."\" $id $class $enctype method=\"".$autoform_config['method']."\" action=\"".$autoform_config['action']."\">\n ";
|
||||
foreach($var as $key=>$value){
|
||||
$all_keys.=$key.' | ';
|
||||
$txt=str_replace('_',' ',$key);
|
||||
$label="<label class='$key' for='$key'>$txt</label>";
|
||||
$idclasname="name='$key' id='$key' class='$key'";
|
||||
//
|
||||
echo '<li>';
|
||||
if (is_bool($value)){
|
||||
// oh, a checkbox !
|
||||
if ($value==true){$checked=' checked ';}else{$checked='';}
|
||||
echo $label;
|
||||
echo "<input $idclasname type='checkbox' $checked value=true />";
|
||||
}
|
||||
else{
|
||||
if (!$autoform_config['use_labels']){$label='';}
|
||||
if (isset($autoform_config[$key])&&is_array($autoform_config[$key])){
|
||||
// lists of choices
|
||||
if (isset($autoform_config[$key]['type'])&&$autoform_config[$key]['type']=='radio'){
|
||||
unset($autoform_config[$key]['type']);
|
||||
|
||||
// oh, a radiobutton list !
|
||||
echo $txt.'<br/>';
|
||||
echo "<ul>\n";
|
||||
foreach ($autoform_config[$key] as $chkey=>$choice){
|
||||
if ($choice==$value){$checked='checked';}else{$checked='';}
|
||||
echo "<li><label for='$choice$key'> $choice </label><input name='$key' type='radio' value='$choice' $checked id='$choice$key'/></li>\n";
|
||||
}
|
||||
echo "</ul>\n";
|
||||
|
||||
}else{
|
||||
// oh, a select input !
|
||||
echo $label;
|
||||
echo "<select $idclasname text='$value'>\n";
|
||||
foreach ($autoform_config[$key] as $choice){
|
||||
if ($choice==$value){$checked='selected';}else{$checked='';}
|
||||
echo "<option $checked value='$choice'>$choice</option>\n";
|
||||
}
|
||||
echo "</select>\n";
|
||||
}
|
||||
}else if (isset($autoform_config[$key]) && $autoform_config[$key]=='pass'){
|
||||
//oh, a password input !
|
||||
echo $label;
|
||||
echo "<input type='password' $idclasname value='$value' />\n";
|
||||
|
||||
}else{
|
||||
// ok, so that's a text input...
|
||||
echo $label;
|
||||
if ($autoform_config['use_placeholder']){$placeholder=" placeholder='$txt'";}else{$placeholder='';}
|
||||
echo "<input type='text' $idclasname value='$value' $placeholder/>\n";
|
||||
}
|
||||
|
||||
}
|
||||
echo "</li>\n";
|
||||
}
|
||||
echo "<input type='hidden' name='all_keys' value='$all_keys'/>\n";// this line to prevent unchecked boxes to desapear.
|
||||
echo '<input type="submit" value="'.$autoform_config['submit_button_label']."\"/> $reset \n </form>";
|
||||
}
|
||||
include('auto_restrict.php');
|
||||
include('config.php');
|
||||
unset($GLOBAL['private_data_folder']);
|
||||
unset($GLOBAL['public_data_folder']);
|
||||
$GLOBAL['default_data_folder']=basename($GLOBAL['default_data_folder']);
|
||||
|
||||
$message='';
|
||||
if ($_POST){
|
||||
$auto_form['filename']='config.php';
|
||||
$auto_form['filecontent']="<?php \n /* The configuration generated with auto_form*/\n\n";
|
||||
$auto_form['variable_name']='$GLOBAL';
|
||||
$all_keys=explode(' | ',$_POST['all_keys']);
|
||||
unset($all_keys[count($all_keys)-1]);
|
||||
$postdata=array_map('strip_tags',$_POST);
|
||||
foreach ($all_keys as $key){
|
||||
if (!isset($postdata[$key])){$postdata[$key]=false;} // avoid unchecked boxes to desapear from config file
|
||||
if ($postdata[$key]===true){$postdata[$key]='true';} else
|
||||
if ($postdata[$key]===false){$postdata[$key]='false';}
|
||||
if ($postdata[$key]=='true'||$postdata[$key]=='false'){ //bool
|
||||
$auto_form['filecontent'].=$auto_form['variable_name']."['$key']=".$postdata[$key].";\n";
|
||||
}else{// not bool
|
||||
$auto_form['filecontent'].=$auto_form['variable_name']."['$key']='".$postdata[$key]."';\n";
|
||||
}
|
||||
|
||||
}
|
||||
$auto_form['filecontent'].="\n?>";
|
||||
|
||||
file_put_contents($auto_form['filename'],$auto_form['filecontent']);
|
||||
if ($postdata['data_folder']!=$GLOBAL['data_folder']){ rename ($GLOBAL['data_folder'],$postdata['data_folder']);}
|
||||
$message=' saved.';
|
||||
unset($postdata['all_keys']);
|
||||
$GLOBAL=$postdata;
|
||||
}
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" /></head>
|
||||
<title>Configuration</title>
|
||||
<link rel="stylesheet" type="text/css" href="design/<?php echo $GLOBAL['skin']; ?>/style.css"/>
|
||||
<link rel="shortcut icon" type="/image/png" href="design/<?php echo $GLOBAL['skin']; ?>/favicon2.png">
|
||||
<!--[if IE]><script> document.createElement("article");document.createElement("aside");document.createElement("section");document.createElement("footer");</script> <![endif]-->
|
||||
</head>
|
||||
<body class="config">
|
||||
<header><a href="index.php"><img src="design/<?php echo $GLOBAL['skin']; ?>/logo2.png"/></a>
|
||||
<nav>
|
||||
<h1>Configuration <?php echo $message;?></h1>
|
||||
</nav>
|
||||
</header>
|
||||
<aside>
|
||||
<?php
|
||||
render_form($GLOBAL);
|
||||
?>
|
||||
</aside>
|
||||
</body>
|
||||
</html>
|
||||
BIN
design/classic/actions.png
Normal file
BIN
design/classic/actions.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
design/classic/broken_noise.png
Normal file
BIN
design/classic/broken_noise.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
design/classic/favicon2.png
Normal file
BIN
design/classic/favicon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
design/classic/foil.png
Normal file
BIN
design/classic/foil.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 154 B |
0
design/classic/index.html
Normal file
0
design/classic/index.html
Normal file
BIN
design/classic/lined_paper.png
Normal file
BIN
design/classic/lined_paper.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
design/classic/logo2.png
Normal file
BIN
design/classic/logo2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
design/classic/paper.png
Normal file
BIN
design/classic/paper.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
95
design/classic/style.css
Normal file
95
design/classic/style.css
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
|
||||
body {
|
||||
background:url(paper.png) #efe;
|
||||
width: 100%;
|
||||
min-width:320px;
|
||||
margin:0;padding:0;
|
||||
font-family: Georgia, Serif;font-size : 16px; color: #050;
|
||||
}
|
||||
a:hover { color: #050;text-shadow:0 0 3px green;}
|
||||
|
||||
a { color: black; text-decoration: none;}
|
||||
.icon{font-family:arial, sans-serif;display:inline-block;border-radius: 2px;margin:1px;height:16px;width:16px;border:solid 1px;font-size:10px;line-height:16px;font-weight: bold; text-align:center;}
|
||||
.private .icon{color:rgba(200,0,0,0.6);background-color:rgba(255,0,0,0.2);border-color:rgba(255,0,0,0.4);}
|
||||
.public .icon{color:rgba(0,200,0,0.6);background-color:rgba(0,255,0,0.2);border-color:rgba(0,255,0,0.4);}
|
||||
.private .icon:hover{color:rgba(200,0,0,1);background-color:rgba(255,0,0,0.5);border-color:rgba(255,0,0,0.8);text-shadow:none;box-shadow: 0 0 1px red}
|
||||
.public .icon:hover{color:rgba(0,200,0,1);background-color:rgba(0,255,0,0.5);border-color:rgba(0,255,0,0.8);text-shadow:none;box-shadow: 0 0 1px green}
|
||||
.public .icon.suppr:hover,.private .icon.suppr:hover{color:pink;background-color:rgba(255,0,0,0.9);border-color:rgba(255,0,0,1);}
|
||||
input{font-family: times,serif;outline:none; font-size:16px;border-radius: 3px; height:25px;padding : 3px ; vertical-align: bottom; margin-top : 3px ;}
|
||||
input[type=text]{width:80%;min-width:200px; background-color:rgba(255,255,255,0.8);border:1px solid #444;border-top-color:#333;border-bottom-color:#aaa; -moz-box-shadow: inset 0 1px 3px #000000; -webkit-box-shadow: inset 0 1px 3px #000000; box-shadow: inset 0 1px 3px #000000; }
|
||||
input[type=text]:hover{background-color:rgba(200,255,200,0.8);-moz-box-shadow: inset 0 1px 3px #040; -webkit-box-shadow: inset 0 1px 3px #040; box-shadow: inset 0 1px 3px #040; }
|
||||
input[type=text]:focus{background-color:rgba(200,255,200,0.9);-moz-box-shadow: inset 0 0 3px #040; -webkit-box-shadow: inset 0 0 3px #040; box-shadow: inset 0 0 3px #040; }
|
||||
input[type=submit]{border:1px solid green;cursor: pointer; color:lightgreen; text-shadow: 0 1px 1px darkgreen; display:inline-block;border-radius:3px;padding:2px;margin:1px;background:rgba(100,255,100,0.4);}
|
||||
input[type=submit]:hover{ background-color:rgba(0,255,0,0.8);}
|
||||
input[type=submit]:active{border-color:black; background-color:rgba(0,255,0,0.8);}
|
||||
#____q{margin-top:20px;}
|
||||
header{
|
||||
|
||||
-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
|
||||
border-bottom:1px solid #222;
|
||||
-moz-box-shadow: 0 1px 3px #888; -webkit-box-shadow: 0 1px 3px #888; box-shadow: 0 1px 3px #888; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#888')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#888');
|
||||
padding : 10px ; width: 100%; height:auto;margin: 0;
|
||||
text-align: left;box-shadow: 0 1px 2px;
|
||||
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);
|
||||
}
|
||||
header nav{display:inline-block; vertical-align: top;}
|
||||
header nav .zip{width:16px;height:16px; display:inline-block;background:url(zip.png) no-repeat;}
|
||||
header nav p{color:lightgreen;text-shadow: 0 1px 1px black;font-size:20px;}
|
||||
|
||||
|
||||
|
||||
|
||||
aside{height:100%;padding-bottom : 70px;text-align:center;}
|
||||
aside iframe{height:100%;border:none;}
|
||||
aside ul{padding:0;}
|
||||
aside li{margin:5px;list-style:none;vertical-align:middle;border-radius:3px;}
|
||||
aside li .tag{font-size:10px;display:inline-block;padding:2px;border-radius:3px;}
|
||||
nav .tag_public{display:inline-block;border-radius:3px;padding:2px;margin:1px;background:rgba(100,255,100,0.4);color:green;text-shadow:0 1px 1px darkgreen;}
|
||||
aside .public li .tag{display:inline-block;border-radius:3px;padding:2px;margin:1px;background:rgba(100,255,100,0.4);color:green;}
|
||||
nav .tag_public:hover{background:green;}
|
||||
aside .public li .tag:hover{background:rgba(0,255,0,0.4);}
|
||||
nav .tag_private{display:inline-block;border-radius:3px;padding:2px;margin:1px;background:rgba(255,100,100,0.4);color:pink;text-shadow:0 1px 1px darkred;}
|
||||
aside .private li .tag{display:inline-block;border-radius:3px;padding:2px;margin:1px;background:rgba(255,100,100,0.4);color:darkred;}
|
||||
aside .private li .tag:hover{background:rgba(255,0,0,0.5);}
|
||||
nav .tag_private:hover{background:red;}
|
||||
.tag_cloud{padding:2px;}
|
||||
nav .tag_public{color:lightgreen;}
|
||||
|
||||
aside .public,.private{overflow-x:hidden;min-width:300px;text-align:left;vertical-align:top; margin-top:25px;padding:10px; border-radius:3px; border:1px solid;display:inline-block;}
|
||||
aside .public{background:rgba(100,255,100,0.2);border-color:rgba(0,255,0,0.4);}
|
||||
aside .private{background:rgba(255,100,100,0.2);border-color:rgba(255,0,0,0.3);}
|
||||
aside .private a:hover{text-shadow:0 0 5px red;color:darkred;}
|
||||
aside .private em{color:darkred;}
|
||||
aside li em {font-size:10px ;}
|
||||
aside .public li{background:rgba(100,255,100,0.2);}
|
||||
aside .private li{background:rgba(255,100,100,0.2);}
|
||||
li .infos{display:inline-block;padding:0;margin:0;}
|
||||
li .tools{display:inline-block;padding:0;margin:0;vertical-align: middle;}
|
||||
aside li img {vertical-align:middle;margin:1px;width:16px;height:16px;}
|
||||
aside li a.toprivate,aside li a.topublic{margin-right:5px;opacity:0.5;}
|
||||
aside li a.toprivate:hover,aside li a.topublic:hover{opacity:1;}
|
||||
|
||||
|
||||
footer {
|
||||
font-size:10px;text-align: right; color:lightgreen;text-shadow: 0 1px 1px black; position:fixed; line-height:15px;
|
||||
bottom:0;left:0;right:0;height:auto;min-height:15px;padding-right : 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 a {color:lightgreen;text-shadow:0 1px 1px green;}
|
||||
footer a:hover {color:white;}
|
||||
|
||||
body.iframe aside{padding-bottom:0!important;}
|
||||
body.iframe header {padding:2px;vertical-align: top;}
|
||||
body.iframe header img{width:32px;height:auto;}
|
||||
body.iframe header input{vertical-align: top;}
|
||||
body.iframe header #____q{margin-top:2px;}
|
||||
body.iframe header nav{margin-top:2px;display:inline-block; vertical-align: top;}
|
||||
body.iframe header nav p{margin:0;padding:0;}
|
||||
|
||||
body.config label{display:block;width:300px;margin:auto;}
|
||||
body.config input{display:block;width:300px;margin-bottom:30px;margin:auto;}
|
||||
body.config input[type=submit]{color:darkgreen;}
|
||||
body.config select{display:block;width:300px;margin-bottom:30px;margin:auto;}
|
||||
body.config h1{color:#5F0;}
|
||||
BIN
design/classic/zip.png
Normal file
BIN
design/classic/zip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1,014 B |
0
design/index.html
Normal file
0
design/index.html
Normal file
BIN
design/pinterest/broken_noise.png
Normal file
BIN
design/pinterest/broken_noise.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
design/pinterest/favicon2.png
Normal file
BIN
design/pinterest/favicon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
design/pinterest/foil.png
Normal file
BIN
design/pinterest/foil.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 154 B |
BIN
design/pinterest/fond.png
Normal file
BIN
design/pinterest/fond.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
0
design/pinterest/index.html
Normal file
0
design/pinterest/index.html
Normal file
BIN
design/pinterest/lined_paper.png
Normal file
BIN
design/pinterest/lined_paper.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
design/pinterest/logo2.png
Normal file
BIN
design/pinterest/logo2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
design/pinterest/paper.png
Normal file
BIN
design/pinterest/paper.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
126
design/pinterest/style.css
Normal file
126
design/pinterest/style.css
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
/* pinterest style */
|
||||
|
||||
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
|
||||
body {
|
||||
background:url(fond.png) #efe;
|
||||
width: 100%;
|
||||
min-width:320px;
|
||||
margin:0;padding:0;
|
||||
font-family: Georgia, Serif;font-size : 16px; color: #050;
|
||||
}
|
||||
a:hover { color: #050;text-shadow:0 0 3px green;}
|
||||
|
||||
a { color: black; text-decoration: none;}
|
||||
.icon{font-family:arial, sans-serif;display:inline-block;border-radius: 2px;margin:1px;height:16px;width:16px;border:solid 1px;font-size:10px;line-height:16px;font-weight: bold; text-align:center;}
|
||||
.private .icon{color:rgba(200,0,0,0.6);background-color:rgba(255,0,0,0.2);border-color:rgba(255,0,0,0.4);}
|
||||
.public .icon{color:rgba(0,200,0,0.6);background-color:rgba(0,255,0,0.2);border-color:rgba(0,255,0,0.4);}
|
||||
.private .icon:hover{color:rgba(200,0,0,1);background-color:rgba(255,0,0,0.5);border-color:rgba(255,0,0,0.8);text-shadow:none;box-shadow: 0 0 1px red}
|
||||
.public .icon:hover{color:rgba(0,200,0,1);background-color:rgba(0,255,0,0.5);border-color:rgba(0,255,0,0.8);text-shadow:none;box-shadow: 0 0 1px green}
|
||||
.public .icon.suppr:hover,.private .icon.suppr:hover{color:pink;background-color:rgba(255,0,0,0.9);border-color:rgba(255,0,0,1);}
|
||||
input{font-family: times,serif;outline:none; font-size:16px;border-radius: 3px; height:25px;padding : 3px ; vertical-align: bottom; margin-top : 3px ;}
|
||||
input[type=text]{width:80%;min-width:200px; background-color:rgba(255,255,255,0.8);border:1px solid #444;border-top-color:#333;border-bottom-color:#aaa; -moz-box-shadow: inset 0 1px 3px #000000; -webkit-box-shadow: inset 0 1px 3px #000000; box-shadow: inset 0 1px 3px #000000; }
|
||||
input[type=text]:hover{background-color:rgba(200,255,200,0.8);-moz-box-shadow: inset 0 1px 3px #040; -webkit-box-shadow: inset 0 1px 3px #040; box-shadow: inset 0 1px 3px #040; }
|
||||
input[type=text]:focus{background-color:rgba(200,255,200,0.9);-moz-box-shadow: inset 0 0 3px #040; -webkit-box-shadow: inset 0 0 3px #040; box-shadow: inset 0 0 3px #040; }
|
||||
input[type=submit]{border:1px solid green;cursor: pointer; color:lightgreen; text-shadow: 0 1px 1px darkgreen; display:inline-block;border-radius:3px;padding:2px;margin:1px;background-color:rgba(100,255,100,0.4);}
|
||||
input[type=submit]:hover{ background-color:rgba(0,255,0,0.8);}
|
||||
input[type=submit]:active{border-color:black; background-color:rgba(0,255,0,0.8);}
|
||||
#____q{margin-top:20px;}
|
||||
header{
|
||||
|
||||
-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
|
||||
border-bottom:1px solid #222;
|
||||
-moz-box-shadow: 0 1px 3px #888; -webkit-box-shadow: 0 1px 3px #888; box-shadow: 0 1px 3px #888; padding : 10px ; width: 100%; height:auto;margin: 0;
|
||||
text-align: left;
|
||||
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);
|
||||
}
|
||||
header nav{display:inline-block; vertical-align: top;}
|
||||
header nav .zip{width:16px;height:16px; display:inline-block;background:url(zip.png) no-repeat;}
|
||||
header nav p{color:lightgreen;text-shadow: 0 1px 1px black;font-size:20px;}
|
||||
|
||||
|
||||
|
||||
|
||||
aside{height:100%;padding-bottom : 70px;text-align:center;}
|
||||
aside iframe{height:100%;border:none;}
|
||||
aside ul{padding:0;}
|
||||
aside li{margin:5px;list-style:none;vertical-align:middle;border-radius:3px;}
|
||||
aside li .tag{font-size:10px;display:inline-block;padding:2px;border-radius:3px;}
|
||||
nav .tag_public{background:url(paper.png);display:inline-block;border-radius:3px;padding:2px;margin:1px;background-color:rgba(100,255,100,0.4);color:green;text-shadow:0 1px 1px darkgreen;}
|
||||
aside .public li .tag{background:url(paper.png);display:inline-block;border-radius:3px;padding:2px;margin:1px;background-color:rgba(100,255,100,0.4);color:green;}
|
||||
nav .tag_public:hover{background-color:green;}
|
||||
aside .public li .tag:hover{background-color:rgba(0,255,0,0.4);}
|
||||
nav .tag_private{background:url(paper.png);display:inline-block;border-radius:3px;padding:2px;margin:1px;background-color:rgba(255,100,100,0.4);color:pink;text-shadow:0 1px 1px darkred;}
|
||||
aside .private li .tag{background:url(paper.png);display:inline-block;border-radius:3px;padding:2px;margin:1px;background-color:rgba(255,100,100,0.4);color:darkred;}
|
||||
aside .private li .tag:hover{background-color:rgba(255,0,0,0.5);}
|
||||
nav .tag_private:hover{background-color:red;}
|
||||
.tag_cloud{padding:2px;}
|
||||
nav .tag_public{color:lightgreen;background-color:rgba(0,255,0,0.5);}
|
||||
|
||||
aside .public,aside .private{
|
||||
background:url(paper.png);
|
||||
overflow-x:hidden;
|
||||
min-width:300px;
|
||||
text-align:left;
|
||||
vertical-align:top;
|
||||
margin-top:25px;padding:10px;
|
||||
|
||||
border:none;
|
||||
display:inline-block;
|
||||
text-align:center;
|
||||
}
|
||||
aside .public{}
|
||||
aside .private{}
|
||||
|
||||
aside .private a:hover{text-shadow:0 0 5px red;color:darkred;}
|
||||
aside .private em{color:darkred;}
|
||||
aside li em {font-size:10px ;}
|
||||
|
||||
aside .public li,aside .private li{
|
||||
display:inline-block;
|
||||
width:200px;
|
||||
overflow:hidden;
|
||||
height: 200px;
|
||||
border:1px solid;
|
||||
}
|
||||
aside .public li:hover{background-color:rgba(100,255,100,0.4);}
|
||||
aside .private li:hover{background-color:rgba(255,100,100,0.4);}
|
||||
aside li .suppr{display:block;padding:0;margin:0;opacity:0;}
|
||||
aside li .title{display:block;font-size:18px;padding:0;margin:2px;height: 107px;text-align:left;overflow:hidden;}
|
||||
aside li .infos{padding:0;margin:0;height:50px;display: table-cell;
|
||||
vertical-align: bottom;}
|
||||
aside li .tools{padding:0;margin:0;opacity:0;height:20px;text-align:left;}
|
||||
aside li:hover .suppr ,aside li:hover .tools {opacity:1;height:16px;}
|
||||
aside .public li{background-color:rgba(100,255,100,0.2);border-color:rgba(0,255,0,0.4);}
|
||||
aside .private li{background-color:rgba(255,100,100,0.2);border-color:rgba(255,0,0,0.3);}
|
||||
|
||||
aside li img {vertical-align:bottom;margin:1px;width:16px;height:16px;}
|
||||
aside li a.toprivate,aside li a.topublic{margin-right:5px;opacity:0.5;}
|
||||
aside li a.toprivate:hover,aside li a.topublic:hover{opacity:1;}
|
||||
|
||||
|
||||
footer {
|
||||
font-size:10px;text-align: right; color:lightgreen;text-shadow: 0 1px 1px black; position:fixed; line-height:15px;
|
||||
bottom:0;left:0;right:0;height:auto;min-height:15px;padding-right : 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 a {color:lightgreen;text-shadow:0 1px 1px green;}
|
||||
footer a:hover {color:white;}
|
||||
|
||||
body.iframe aside{padding-bottom:0!important;}
|
||||
body.iframe header {padding:2px;vertical-align: top;}
|
||||
body.iframe header img{width:32px;height:auto;}
|
||||
body.iframe header input{vertical-align: top;}
|
||||
body.iframe header #____q{margin-top:2px;}
|
||||
body.iframe header nav{margin-top:2px;display:inline-block; vertical-align: top;}
|
||||
body.iframe header nav p{margin:0;padding:0;}
|
||||
|
||||
body *{transition:all 300ms}
|
||||
body *:hover{transition:all 300ms}
|
||||
|
||||
body.config label{display:block;width:300px;margin:auto;}
|
||||
body.config input{display:block;width:300px;margin-bottom:30px;margin:auto;}
|
||||
body.config input[type=submit]{color:darkgreen;}
|
||||
body.config select{display:block;width:300px;margin-bottom:30px;margin:auto;}
|
||||
body.config h1{color:#5F0;}
|
||||
BIN
design/pinterest/zip.png
Normal file
BIN
design/pinterest/zip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1,014 B |
3
readme.txt
Normal file
3
readme.txt
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
zip : les noms de fichiers sont plus explicites
|
||||
un bouton déconnect
|
||||
retrait du bouton supprimer pour la page publique
|
||||
Reference in a new issue