page web de présentation
This commit is contained in:
nojhan
parent
3ec9283f77
commit
35c9725a1f
5 changed files with 326 additions and 0 deletions
191
www/blue_shadow.css
Normal file
191
www/blue_shadow.css
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
html {
|
||||
}
|
||||
|
||||
body {
|
||||
background-color:#bebfc1;
|
||||
margin:0px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
#navbar {
|
||||
text-align:center;
|
||||
background-color:#1f6cd0;
|
||||
background-image:url("gradient.png");
|
||||
background-repeat:repeat-x;
|
||||
background-position:top left;
|
||||
height:94px;
|
||||
border-bottom:thin solid black;
|
||||
color:white;
|
||||
}
|
||||
|
||||
#navbar a {
|
||||
color:#ddf;
|
||||
}
|
||||
|
||||
#navbar a:hover {
|
||||
color:white;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-size:large;
|
||||
padding:5px;
|
||||
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
#stripbar {
|
||||
text-align:center;
|
||||
margin-top:2em;
|
||||
}
|
||||
|
||||
|
||||
#strip {
|
||||
border:1px solid black;
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
#infobar {
|
||||
color:white;
|
||||
padding:5px;
|
||||
text-align:center;
|
||||
background-color:#1f6cd0;
|
||||
border:thin solid black;
|
||||
background-image:url("gradient2.png");
|
||||
background-repeat:repeat-x;
|
||||
background-position:top left;
|
||||
height:70px;
|
||||
}
|
||||
|
||||
#infos {
|
||||
font-size:small;
|
||||
padding:5px;
|
||||
}
|
||||
|
||||
#infoblock {
|
||||
margin-top:1em;
|
||||
}
|
||||
|
||||
#navfirst {
|
||||
font-size:small;
|
||||
|
||||
padding-bottom:35px;
|
||||
background-image:url("bouton_etoile_petit_gauche.png");
|
||||
background-repeat:no-repeat;
|
||||
background-position:bottom center;
|
||||
}
|
||||
|
||||
#navfirst:hover {
|
||||
background-image:url("bouton_etoile_petit_gauche_over.png");
|
||||
}
|
||||
|
||||
|
||||
#navlast {
|
||||
font-size:small;
|
||||
padding-bottom:35px;
|
||||
background-image:url("bouton_etoile_petit_droite.png");
|
||||
background-repeat:no-repeat;
|
||||
background-position:bottom center;
|
||||
}
|
||||
|
||||
#navlast:hover {
|
||||
background-image:url("bouton_etoile_petit_droite_over.png");
|
||||
}
|
||||
|
||||
#navprev {
|
||||
font-size:small;
|
||||
padding-bottom:49px;
|
||||
background-image:url("bouton_fleche_grand_gauche.png");
|
||||
background-repeat:no-repeat;
|
||||
background-position:bottom center;
|
||||
}
|
||||
|
||||
#navprev:hover {
|
||||
background-image:url("bouton_fleche_grand_gauche_over.png");
|
||||
}
|
||||
|
||||
#navnext {
|
||||
font-size:small;
|
||||
padding-bottom:49px;
|
||||
background-image:url("bouton_fleche_grand_droite.png");
|
||||
background-repeat:no-repeat;
|
||||
background-position:bottom center;
|
||||
}
|
||||
|
||||
#navnext:hover {
|
||||
background-image:url("bouton_fleche_grand_droite_over.png");
|
||||
}
|
||||
|
||||
.shadow, .content {
|
||||
position: relative;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
background-color: #9e9fa1; /*couleur de l'ombre */
|
||||
border:1px solid #aeafb1;
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.shadow_simple {
|
||||
padding-bottom:3px;
|
||||
background-color: #9e9fa1; /*couleur de l'ombre */
|
||||
border-bottom:1px solid #aeafb1;
|
||||
}
|
||||
|
||||
.centering {
|
||||
display : table;
|
||||
margin : 0 auto;
|
||||
}
|
||||
|
||||
#site_title {
|
||||
position:absolute;
|
||||
top:1px;
|
||||
left:1px;
|
||||
text-align:left;
|
||||
margin-top:5px;
|
||||
}
|
||||
|
||||
#site_title > p {
|
||||
margin:0px;
|
||||
}
|
||||
|
||||
#site_head {
|
||||
font-weight:bold;
|
||||
font-size:large;
|
||||
font-variant:small-caps;
|
||||
}
|
||||
|
||||
#site_desc {
|
||||
font-size:x-small;
|
||||
}
|
||||
|
||||
#feed {
|
||||
padding-right:18px;
|
||||
background-image:url("feed-icon-16x16.png");
|
||||
background-repeat:no-repeat;
|
||||
background-position:center right;
|
||||
}
|
||||
|
||||
|
||||
#linkbar {
|
||||
color:white;
|
||||
font-size:x-small;
|
||||
margin-top:2em;
|
||||
}
|
||||
|
||||
#main {
|
||||
float:right;
|
||||
}
|
||||
|
||||
.page {
|
||||
margin-top:2em;
|
||||
margin-left:10%;
|
||||
margin-right:10%;
|
||||
padding:1em;
|
||||
border:thin solid black;
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
BIN
www/gradient.png
Normal file
BIN
www/gradient.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 215 B |
1
www/index.html
Symbolic link
1
www/index.html
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
/home/nojhan/perso/dev/stripit/trunk/www/index_en.html
|
||||
67
www/index_en.html
Normal file
67
www/index_en.html
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<title>Strip-It</title>
|
||||
|
||||
<meta http-equiv="Content-Language" content="en" />
|
||||
<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
|
||||
<meta name=" robot" content="follow, index, all" />
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.php" />
|
||||
<link rel="stylesheet" type="text/css" href="blue_shadow.css" title="Flat" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="shadow_simple">
|
||||
<div id="navbar">
|
||||
<div id="site_title"><h1 id="site_head">Strip-It</h1><p id="site_desc">SVG web-comic web-gallery</p></div>
|
||||
|
||||
<div id="main">
|
||||
<a href="..">Project</a> <br/>
|
||||
<a id="feed" href="http://sourceforge.net/export/rss2_project.php?group_id=209475">News RSS</a> <br/>
|
||||
<a href="mailto:nojhan(at)gmail(dot)com">Contact</a> <br />
|
||||
<a href="index.html">Cette page en français</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="page">
|
||||
<h2>Strip-It</h2>
|
||||
<p>Strip-It is a (web) software that permits to dynamically generate a (web) gallery for (web) comic-strips draw in SVG (web, thus).</p>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<div id="stripbar">
|
||||
<div class="centering">
|
||||
<div class="shadow">
|
||||
<img id="strip" class="content" src="http://www.nojhan.net/geekscottes/strips/geekscottes_068.png" alt="geekscottes strip" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div class="page">
|
||||
<h2>Features</h2>
|
||||
<p>Strips are ordered chronologically, with images in the <a href="http://fr.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a> format. Metadata are automatically extracted from a source file in <a href="http://fr.wikipedia.org/wiki/SVG">SVG</a> (author, title, license, ...). Adding a new image is as simple as upload it with a <a href="http://fr.wikipedia.org/wiki/File_Transfer_Protocol">FTP</a> client.</p>
|
||||
<p>The gallery is reachable through a web page or a <a href="http://fr.wikipedia.org/wiki/RSS_%28format%29">RSS</a> feed.</p>
|
||||
<p>A thumbnail gallery view, the possibility of creating your own design and traductions and a caching system complete the whole thing.</p>
|
||||
|
||||
<h2>Demo</h2>
|
||||
<p>Strip-It has been coded for publishing the <a href="http://www.nojhan.net/geekscottes">Geekscottes</a>, some small strips in french, trying to transcribe the demanding humor of free softwares enthusiasts.</p>
|
||||
|
||||
<h2>Code</h2>
|
||||
<p>Strip-It is programmed in <a href="http://fr.wikipedia.org/wiki/PHP">PHP</a>, uses the <a href="http://pear.php.net/package/HTML_Template_Flexy">Flexy</a> template system (from <a href="http://pear.php.net">PEAR</a>) and no database.</p>
|
||||
<p>The software is distributed under the terms of the <a href="http://fr.wikipedia.org/wiki/Licence_publique_g%C3%A9n%C3%A9rale_GNU">GPL</a></p>
|
||||
|
||||
<p>For more informations, see the <a href="http://sourceforge.net/projects/stripit/">project page on sourceforge</a>.</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
67
www/index_fr.html
Normal file
67
www/index_fr.html
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
|
||||
|
||||
<head>
|
||||
|
||||
<title>Strip-It</title>
|
||||
|
||||
<meta http-equiv="Content-Language" content="fr" />
|
||||
<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
|
||||
<meta name=" robot" content="follow, index, all" />
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.php" />
|
||||
<link rel="stylesheet" type="text/css" href="blue_shadow.css" title="Flat" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="shadow_simple">
|
||||
<div id="navbar">
|
||||
<div id="site_title"><h1 id="site_head">Strip-It</h1><p id="site_desc">SVG web-comic web-gallery</p></div>
|
||||
|
||||
<div id="main">
|
||||
<a href="..">Projet</a> <br/>
|
||||
<a id="feed" href="http://sourceforge.net/export/rss2_project.php?group_id=209475">News RSS</a> <br/>
|
||||
<a href="mailto:nojhan(at)gmail(dot)com">Contact</a> <br />
|
||||
<a href="index_en.html">This page in english</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="page">
|
||||
<h2>Strip-It</h2>
|
||||
<p>Strip-It est un logiciel (web) permettant de créer dynamiquement une galerie (web) pour comic-strips (web) dessinés en SVG (web, donc).</p>
|
||||
</div>
|
||||
|
||||
<div id="stripbar">
|
||||
<div class="centering">
|
||||
<div class="shadow">
|
||||
<img id="strip" class="content" src="http://www.nojhan.net/geekscottes/strips/geekscottes_068.png" alt="geekscottes strip" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="page">
|
||||
<h2>Fonctionnalités</h2>
|
||||
<p>Les strips sont présentés chronologiquement via des images au format <a href="http://fr.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a>, des métadonnées sont extraites automatiquement du fichier source au format <a href="http://fr.wikipedia.org/wiki/SVG">SVG</a> (auteur, titre, licence, etc.). Pour ajouter une nouvelle image, il suffit de la télécharger via <a href="http://fr.wikipedia.org/wiki/File_Transfer_Protocol">FTP</a>.</p>
|
||||
<p>La galerie est accessible via une page web ou un flux <a href="http://fr.wikipedia.org/wiki/RSS_%28format%29">RSS</a>.</p>
|
||||
<p>Une vue en galerie de vignette, un système de cache, la possibilité de concevoir ses propres mises en pages et traductions et un système de mise en cache complètent le tout.</p>
|
||||
|
||||
<h2>Démo</h2>
|
||||
<p>Strip-It a été codé pour mettre en ligne les <a href="http://www.nojhan.net/geekscottes">Geekscottes</a>, des petits bouts de bandes dessinées, tentant de retranscrire l'humour exigeant des amateurs d'informatique libre.</p>
|
||||
|
||||
<h2>Code</h2>
|
||||
<p>Strip-It est programmé en <a href="http://fr.wikipedia.org/wiki/PHP">PHP</a>, utilise le système de template <a href="http://pear.php.net/package/HTML_Template_Flexy">Flexy</a> (de chez <a href="http://pear.php.net">PEAR</a>) et aucune base de donnée.</p>
|
||||
<p>Le logiciel est distribué selon les termes de la <a href="http://fr.wikipedia.org/wiki/Licence_publique_g%C3%A9n%C3%A9rale_GNU">licence GPL</a>.</p>
|
||||
<p>Pour plus d'informations, voir la <a href="http://sourceforge.net/projects/stripit/">page du projet sur sourceforge</a>.</p>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue