Code source dashboard :
À coller dans un fichier "index.html".
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex">
<title>Dashboard - X.X.X.X.X.</title> <!-- a modifier selon votre configuration -->
<link rel="icon" type="img" href="favicon.png"> <!-- a modifier selon votre configuration -->
<link rel="stylesheet" type="text/css" href="style.css"> <!-- a modifier selon votre configuration -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<div id="logotop"></div>
<section class="wrapper">
<section class="page">
<header>
Dashboard
<nav class="backlink">
<a href=""><span class="entypo-left-thin"></span></a>
</nav>
</header>
<section class="content">
<a class="item" href="https://votre-domaine.fr"> <!-- a modifier selon votre configuration -->
<span class="fa fa-download"></span><br /> <!-- a modifier selon votre configuration -->
<h2>ruTorrent</h2> <!-- a modifier selon votre configuration -->
</a>
<a class="item" href="http://votre-domaine.fr">
<span class="fa fa-play-circle-o"></span><br />
<h2>Plex</h2>
</a>
<a class="item" href="https://votre-domaine.fr">
<span class="fa fa-user"></span><br />
<h2>Manager</h2>
</a>
<a class="item" href="https://votre-domaine.fr">
<span class="fa fa-upload"></span><br />
<h2>Fileup</h2>
</a>
<a class="item" href="https://votre-domaine.fr">
<span class="fa fa-file-image-o"></span><br />
<h2>Pixup</h2>
</a>
<a class="item" href="https://votre-domaine.fr">
<span class="fa fa-file-text"></span><br />
<h2>Paste</h2>
</a>
</section>
</section>
</section>
</body>
</html>
À coller dans un fichier "style.css".
@import url(https://fonts.googleapis.com/css?family=Roboto);
* {
border: 0;
margin: 0;
padding: 0;
}
html, body {
min-height: 100%;
}
body {
background: #FFFFFF;
font-size: 15px;
padding: 1.333em;
font-family: 'Roboto', sans-serif;
color: #FFFFFF;
background-image: url(/votre_image.jpg); /* image de fond, choisir une grande image */
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-position: center center;
}
#logotop {
margin: 0 auto;
background-image : url('/votre_logo.png'); /* logo, pensez à adapter les valeurs en dessous */
background-size: 491px 181px;
width : 491px;
height : 181px;
margin-top:50px;
}
a {
text-decoration: none;
color: #3A3A3C; /* couleur des icones et liens */
}
a:hover {
text-decoration: none;
color: white; /* couleur des icones et des liens survolés */
}
h2 {
font-size:14px;
margin-top:12px;
}
.wrapper {
border-radius: 1em;
width: 35%;
height: 100%;
min-height: 100%;
overflow: hidden;
margin: 0 auto;
margin-top:25px;
}
.wrapper .page {
float: right;
width: 100%;
box-shadow: 0px 0px 20px #222222;
}
.wrapper .page header {
background: #3A3A3C; /* couleur de la barre de titre */
height: 3em;
line-height: 3em;
font-size: 1.333em;
text-align: center;
position: relative;
color: #88B399; /* couleur du titre */
}
.wrapper .page .content {
box-shadow: inset 0 5px 5px -5px #222222;
background: #A1B5A9; /* couleur de fond du dashboard */
}
.wrapper .page .content .item {
float: left;
display: block;
width: 33%;
text-align: center;
height: auto;
font-size: 1.5em;
padding: 1em 0em;
text-transform: uppercase;
margin-top: 15px;
margin-bottom: 15px;
}
.wrapper .page .content .item span {
font-size: 3em;
}
.wrapper .page .content:after {
content: "";
display: block;
clear: both;
}
Pour personnaliser les icônes, rendez-vous sur ce site :
https://fortawesome.github.io/Font-Awesome/icons/
Choisissez l'icone qui vous intéresse et insérer son nom à cet endroit du code :
<a class="item" href="https://votre-domaine.fr">
<span class="fa fa-nom-icone"></span><br />
<h2>Fileup</h2>
</a>
Par exemple, pour l'icone "code", cela donne :
<a class="item" href="https://votre-domaine.fr">
<span class="fa fa-code"></span><br />
<h2>Fileup</h2>
</a>
Vous pouvez ajouter ce bloc de code autant de fois que vous le souhaitez.
