+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Art, graphisme, audio (https://jeuweb.org/forumdisplay.php?fid=50)
+--- Sujet : Fantasy Slash (/showthread.php?tid=5621)
Pages :
1
2
Fantasy Slash - Viciousity - 03-08-2011
Voilà une l'interface de connexion-inscription que je suis en train de réaliser pour un futur jeu de stratégie du type heroic fantasy.
http://www.youtube.com/watch?v=XJKYGZg2p7M
Si vous avez des remarques, je suis preneur.
RE: Fantasy Slash - Akira777 - 03-08-2011
Pas particulièrement de remarque, mais je trouve ça rudement sympa !
RE: Fantasy Slash - Sephi-Chan - 03-08-2011
La fenêtre du navigateur aurait suffit. Même Quicktime sur Lion permet de le faire ! :p
Côté design, c'est agréable à l'œil, même si je ne suis pas fan des textes énormes dans les formulaires.
D'ailleurs, quelle tronche ont les messages d'erreur des formulaires ?
Good job !
RE: Fantasy Slash - Hideaki - 03-08-2011
J'aime bien le design mais l'enregistrement je trouve cela dommage de devoir jouer de la molette.
@Sephi-chan: je pense que le message d'erreur doit-être encore plus gros XD
RE: Fantasy Slash - Viciousity - 03-08-2011
Voila pour toi Sephi.
http://www.youtube.com/watch?v=cohkAKpwfs0
Au programme :
- revisite des input.
- ajout des messages d'erreurs.
RE: Fantasy Slash - Sephi-Chan - 03-08-2011
Impec ! C'est bien mieux sans le gros Dock, quand même !
RE: Fantasy Slash - Akira777 - 03-08-2011
Et mais c'est super ça ! Tu voudrais pas filer le code source
RE: Fantasy Slash - Viciousity - 03-08-2011
Bah sa me dérange pas du tout de vous filer le code source hein
A condition de vous en inspirer mais pas de le copier ;P
Je vous poste sa ce soir
Pour ce qui est du css :
/* GENERAL
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
* {
margin: 0;
padding: 0;
}
html {
background-color: #FFF;
color: #444;
font: 16px/1.4em Helvetica,sans-serif;
font-weight: lighter;
}
body {
margin: 0 auto;
width: 480px;
}
/* HEADER
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
#header {
margin-top: 40px;
margin-bottom: 40px;
}
#header img a {
border: none;
}
/* NAVIGATION
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
#nav {
margin-bottom: 50px;
}
#nav a {
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
background-repeat: no-repeat;
background-position: left top;
display: block;
width: 480px;
}
#nav a:hover {
background-position: left bottom;
}
#nav a.signup.active,
#nav a.signin.active {
background-position: left bottom;
}
#nav a.signup {
background-image: url('layout/nav_signup.png');
height: 85px;
}
#nav a.signin {
background-image: url('layout/nav_signin.png');
height: 41px;
}
/* CONTENT
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
#content {
margin-bottom: 40px;
}
/* FOOTER
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
#footer {
background-color: #222;
color: #AAA;
font-size: .7em;
font-weight: normal;
padding: 8px 16px;
text-align: right;
text-transform: uppercase;
word-spacing: 2px;
}
#footer a {
color: #CCC;
font-weight: bold;
text-decoration: none;
}
#footer a:hover {
color: #FFF;
text-decoration: underline;
}
/* GAME DESCRIPTION
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
#game_desc .img {
cursor: pointer;
margin-bottom: 10px;
position: relative;
}
#game_desc .img img {
border: 10px solid #DDD;
width: 460px;
min-height: 100px;
}
#game_desc .img span {
background-color: rgba(0,0,0,0.6);
color: rgba(255,255,255,0.8);
font-size: .8em;
padding: 10px 20px;
position: absolute;
bottom: 15px;
left: 10px;
width: 420px;
}
/* COMMON ELEMENTS
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
hr {
border: none;
border-bottom: 12px solid #E0E0E0;
margin-bottom: 10px;
padding-top: 10px;
}
/* MESSAGE BOXES
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
p.message {
border-radius: 6px;
background-color: #000;
background-position: 9px center;
background-repeat: no-repeat;
color: rgba(255,255,255,0.9);
margin-bottom: 10px;
padding: 12px 8px 12px 50px;
}
p.message.notice {
background-color: #09C;
background-image: url('layout/icons_notice.png');
}
p.message.alert {
background-color: #C00;
background-image: url('layout/icons_alert.png');
}
/* FORMS
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
fieldset {
border: none;
}
.field,.check {
border-bottom: 1px dashed #AAA;
margin-bottom: 20px;
padding-bottom: 20px;
}
.submit {
margin-bottom: 10px;
}
.field label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.field label:after {
content: ' :'
}
.field input {
border-radius: 6px;
border: 2px solid #BBB;
color: #AAA;
font-size: 1.4em;
font-weight: normal;
margin-bottom: 10px;
padding: 8px 13px;
width: 448px;
}
.field input:focus {
background: url('layout/icons_edit.png') no-repeat 431px center;
border: 4px solid #888;
color: #777;
outline: none;
padding: 6px 50px 6px 11px;
width: 409px;
}
.submit input {
border-radius: 6px;
background-color: #222;
border: none;
color: #CCC;
cursor: pointer;
font-size: 1.2em;
padding: 10px 15px;
text-transform: uppercase;
width: 480px;
}
ul.errors {
border-radius: 6px;
background: #C30 url('layout/icons_alert.png') no-repeat 9px center;
color: rgba(255,255,255,0.9);
font-size: .9em;
list-style: none;
margin-bottom: 10px;
padding: 7px 18px 7px 50px;
width: 410px;
}
ul.errors li {
background: url('layout/border.png') repeat-x left bottom;
padding: 5px 0;
}
ul.errors li:last-child {
background: none;
}
La page d'accueil :
<!DOCTYPE html>
<html>
<head>
<title>Fantasy Slash</title>
<link href="/assets/application.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/application.js" type="text/javascript"></script>
</head>
<body>
<div id='header'>
<a href="/"><img alt="Header_logo" src="/assets/layout/header_logo.png" /></a>
</div>
<div id='nav'>
<a href="/account/inscription" class="signup"></a>
<hr>
<a href="/account/connexion" class="signin"></a>
</div>
<div id='content'>
<div id='game_desc'>
<div class='img'>
<img alt="01" src="/assets/game_desc/01.jpg" />
<span>Rentrez dans un univers où magie et technologie cohabitent en harmonie et où seulement les plus braves survivront.</span>
</div>
<div class='img'>
<img alt="02" src="/assets/game_desc/02.jpg" />
<span>Apprenez de nouvelles compétences, maitrisez de nouvelles armes, battez-vous pour devenir le meilleur.</span>
</div>
<div class='img'>
<img alt="03" src="/assets/game_desc/03.jpg" />
<span>Prenez part à la communauté pour acheter et revendre vos équipements ou simplement afin de rencontrer de nouveaux alliés.</span>
</div>
</div>
</div>
<div id='footer'>
Ce site est développé par <a href="">D2F</a>,
propulsé par <a href="http://rubyonrails.org/">Ruby on Rails</a>
</div>
</body>
</html>
Un formulaire :
<form accept-charset="UTF-8" action="/account/inscription" class="new_player" id="new_player" method="post">
<fieldset>
<div class='field'>
<label for="player_email">Adresse mail</label>
<input id="player_email" name="player[email]" placeholder="Adresse mail valide." size="30" type="text" value="error" />
<ul class='errors'>
<li>Vous devez renseigner une adresse valide.</li>
</ul>
</div>
<div class='field'>
<label for="player_alias">Nom du Héro</label>
<input id="player_alias" name="player[alias]" placeholder="2-20 caractères." size="30" type="text" value="" />
<ul class='errors'>
<li>Doit commencer par une majuscule suivie de minuscule(s) (Exemple, Exemple-Composé)</li>
<li>Le nom doit être composé d'au moins 2 caractères.</li>
</ul>
</div>
<div class='field'>
<label for="player_password">Mot de passe</label>
<input id="player_password" name="player[password]" placeholder="5-20 caractères." size="30" type="password" />
<ul class='errors'>
<li>Votre mot de passe doit être composé d'au moins 5 caractères.</li>
</ul>
</div>
<div class='submit'>
<input name="commit" type="submit" value="Créer mon compte" />
</div>
</fieldset>
</form>RE: Fantasy Slash - Sephi-Chan - 04-08-2011
Balance le SCSS et le Haml, ça fera des vocations !
RE: Fantasy Slash - Akira777 - 04-08-2011
Oh oui carrément xD