Créer un générateur de commande

[Zeste]

Bonjour,

Je voudrais utiliser sur mon forum un générateur de commande graphique un peu comme ceci ci : https://forum.forumactif.com/h2-generateur Avez-vous une idée de la chose?

Merci d'avance et bonne soirée

[Zeste]

UP

[Zeste]

UP

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 8 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou à faire un UP régulièrement ! Ce sujet est corbeillé (rappel de pourquoi), merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum. A bientôt sur ForumActif

[Chacha]

Bonjour, Le topic est replacé à la demande de l'auteur du sujet. A bientôt sur ForumActif

[Zeste]

UP

[Zeste]

UP

[Zeste]

UP

[Zeste]

UP

[Scoubifitz]

Bonjour,

Je voudrais utiliser sur mon forum un générateur de commande graphique un peu comme ceci ci : https://forum.forumactif.com/h2-generateur Avez-vous une idée de la chose?

Merci d'avance et bonne soirée

Bonsoir,

Comme il n'est pas possible de recopier intégralement le codage du générateur , je vous suggère de lire ce sujet :

forum.forumactif.com/t280246-

... pour vous familiariser avec les formulaires , puis de faire des recherches sur les formulaires dans la section "problème avec un code" , puis de présenter un codage de ce que vous souhaitez faire ...

" un peu comme ceci " étant très vague , personne ne pourra vous fournir de l'aide .

Cette section est une section d'aide aux codages qui ne fonctionnent pas , ce n'est pas une section de commande ...

Amicalement .

[Zeste]

Pourtant ma demande est claire, je cherche un code similaire à celui qui est présent dans mon lien du début.

[Scoubifitz]

Bonjour,

Ma réponse est tout aussi claire . Relisez le tout premier message de Sen Hime ...

Le "générateur de commande" n'est ni plus ni moins qu'un formulaire .

Il comporte des listes d'options , des champs de saisie à une ligne et un champ de saisie à plusieurs lignes . Un bouton d'envoi et un script de mise en forme du message d'envoi .

Vous cherchez un code similaire , vous en avez déjà un : https://forum.forumactif.com/t346564-generation-de-formulaire

C'est le même principe . Que ce soit sous forme de tableau , de liste de questions , de fiche de présentation , de fiche de lecture , de démission , de pokedex ou que sais-je encore , ça reste un formulaire .

Donc , pour répondre à votre question , oui , des codes similaires existent , puisque ce sont des formulaires .

[Zeste]

UP

[Scoubifitz]

Bonjour,

Je voudrais utiliser sur mon forum un générateur de commande graphique un peu comme ceci ci : https://forum.forumactif.com/h2-generateur Avez-vous une idée de la chose?

Merci d'avance et bonne soirée

Bonsoir,

Comme il n'est pas possible de recopier intégralement le codage du générateur , je vous suggère de lire ce sujet :

forum.forumactif.com/t280246-

... pour vous familiariser avec les formulaires , puis de faire des recherches sur les formulaires dans la section "problème avec un code" , puis de présenter un codage de ce que vous souhaitez faire ...

" un peu comme ceci " étant très vague , personne ne pourra vous fournir de l'aide .

Cette section est une section d'aide aux codages qui ne fonctionnent pas , ce n'est pas une section de commande ...

Amicalement .

Bonjour,

Ma réponse est tout aussi claire . Relisez le tout premier message de Sen Hime ...

Le "générateur de commande" n'est ni plus ni moins qu'un formulaire .

Il comporte des listes d'options , des champs de saisie à une ligne et un champ de saisie à plusieurs lignes . Un bouton d'envoi et un script de mise en forme du message d'envoi .

Vous cherchez un code similaire , vous en avez déjà un : https://forum.forumactif.com/t346564-generation-de-formulaire

C'est le même principe . Que ce soit sous forme de tableau , de liste de questions , de fiche de présentation , de fiche de lecture , de démission , de pokedex ou que sais-je encore , ça reste un formulaire .

Donc , pour répondre à votre question , oui , des codes similaires existent , puisque ce sont des formulaires .

Bonsoir,

Merci de nous dire à quel moment du tuto de Sen Hime vous bloquez ?

Avez-vous un début de code sur lequel nous pouvons commencer à travailler ? Une structure ? Une liste ?
(bref , avez-vous fait un effort de votre coté ?)

Chaque codage de formulaire est différent , et comme je suppose que le votre va différer du générateur de commande du forum des forums , il serait bon de préciser les modifications pour qu'on puisse partir sur une structure de base .

[Zeste]

et comme je suppose que le votre va différer du générateur de commande du forum des forums

Au contraire, je veux quelque chose d'identique en fait. Avec la même structure. Pour le moment je n'ai pas de début de code car je ne m'y suis pas encore penché par faute de temps.  

[Scoubifitz]

Comme il n'est pas possible de recopier intégralement le codage du générateur .../...

Merci de vérifier au bas de la page du générateur de commande si vous voyez la même chose que moi :

© 2012 Forumactif.com (?)

Votre demande n'est donc pas réalisable tel quel ...

Pour le moment je n'ai pas de début de code car je ne m'y suis pas encore penché par faute de temps.

Je pense que vous n'aurez pas trop de difficultés à faire une structure de base , puisque vous avez déjà travaillé avec des formulaires .

Il comporte des listes d'options , des champs de saisie à une ligne et un champ de saisie à plusieurs lignes . Un bouton d'envoi et un script de mise en forme du message d'envoi .

[Zeste]

Techniquement, que voulez-vous que je vous fournisse comme informations?

[Scoubifitz]

Un début de code , une description détaillée du contenu , de la structure , voire même du style ...

Si le codage vous semble trop compliqué , faites un croquis , ou une liste de ce que doit contenir le formulaire ...

Comprenez que je ne fais pas ça pour vous embêter , mais par respect pour ceux qui ont codé le générateur de commande .

[Zeste]

Alors quelque chose de cette forme : https://i.servimg.com/u/f55/15/75/02/96/2013-114.png

[Chacha]

Bonjour, Je rappelle que Le Forum des Forums de Forumactif n'a absolument pas vocation à devenir un forum de commandes. Il est avant tout un lieu où une réponse donnée dans un sujet doit pouvoir aider plusieurs personnes. Si vous souhaitez apprendre et réaliser vous-même votre présentation ou si vous avez un problème avec une partie de votre codage, vous êtes sur le bon forum. En revanche si vous voulez une présentation "prêt à installer", merci de vous orienter vers les forums spécialisés en codage. Je vous invite à lire : - Règles générales du forum - Charte de ce forum A bientôt sur ForumActif

[Chacha]

Bonjour,

Le sujet est replacé, à vous de montrer une partie du codage déjà effectué avant d'obtenir de l'aide.


Cordialement.

[Zeste]

Bonjour,

Merci Chacha.
Voici un morceau de code :

Code:

<h3>Générateur de commande</h3>
<form name="post" enctype="multipart/form-data">
<label for="nom">Nature de la création: </label><input type="text" size="30" name="nom" id="nom" />

<label for="taille">Taille de la création </label><input type="text" size="30" name="taille" id="ptaille" />

<label for="blink">Texte clignotant? </label><select name="blink" id="blink"><option>Oui</option><option>Non</option></select>

<label for="supplement">Informations supplémentaires: </label>

<textarea id="plus" name="plus"></textarea>

<input type="submit" name="post" value="Envoyer" />
</form>

Bonne journée

[Scoubifitz]

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>commande</title>
<style type="text/css">
<!--
#post {
width:500px;
}
#post h3,#post p{
text-align:center;
}
#post label {
float:left;
text-align:right;
width:250px;
padding-right:10px
}
-->
</style>
<script type="text/javascript">
function envoiMessage(form)
{
var txt_message =  "Bonjour cher admin,\n\n"
+ "Voici ma commande :\n\n"
+ "[b]Nature de la création : [/b]" + form.creation.value + "\n"
+ "[b]Taille de la création : [/b]" + form.taille.value + "\n"
+ "[b]Texte clignotant : [/b]" + form.blink.value + "\n"
+ "[b]Informations supplémentaires : [/b]" + form.plus.value + "\n\n"
+ " Merci pour les propositions qui seront faites .";
form.message.value = txt_message;

form.subject.value = "Commande de " + form.creation.value;
}
</script>
</head>
<body>
<form action="/post" method="post" id="post" name="post" enctype="multipart/form-data" onSubmit="envoiMessage(this)">
<input type="hidden" name="lt" value="0" />
<input type="hidden" name="mode" value="newtopic" />
<input type="hidden" name="topictype" value="0" checked="checked" />
<input type="hidden" name="message" value="" />
<input type="hidden" name="subject" value="" />
<input type="hidden" name="f" value="1" />
<h3>Générateur de commande</h3>

<label for="creation">Nature de la création: </label>
<input type="text" size="30" name="creation" id="creation" /><br /><br />

<label for="taille">Taille de la création </label>
<input type="text" size="30" name="taille" id="taille" /><br /><br />

<label for="blink">Texte clignotant? </label>
<select name="blink" id="blink">
<option>Oui</option>
<option>Non</option>
</select><br /><br />

<label for="plus">Informations supplémentaires: </label>
<textarea id="plus" name="plus"></textarea>

<p><input type="submit" name="post" value="Envoyer" /></p>
</form>
</body>
</html>

[Zeste]

Bonsoir,

Sauf qu'il manque les autres composants que je ne sais pas trop comment mettre (comme la palette de couleur par exemple, l'insertion des liens...)

Cordialement

[Zeste]

UP

[Scoubifitz]

Bien , puisque vous ne voulez pas donner de précisions , je vais vous poser quelques questions :

1. A quoi est destiné le générateur ?
   
2. La page du générateur est-elle avec ou sans le haut/bas du forum ?
   
3. Quel genre de palette de couleurs voulez-vous ?
   (palette simple (liste de couleurs) ? palette classique ? palette complète ? )
   
4. Le message sera-t-il un nouveau sujet ? un message à la suite d'un sujet ?
   
5. A quoi doit ressembler l'envoi du message ? avez-vous un modèle ?
   
6. Les liens supplémentaires seront-ils sous forme de liens ? d''images ? des 2 ? sous spoiler ?
   
7. Le pseudo du demandeur doit-il apparaitre dans le générateur ? dans le message ?
   
8. De quelle nature est le titre du message ? (automatique ? personnalisé ? )
   si personnalisé : son contenu ?
   
9. Merci de compléter le code du formulaire , pour avoir une idée précise de ce que vous souhaitez .
   Même si vous ne connaissez pas le code couleur , un simple champ texte suffira :
   

   Code:

   <input name="couleur" type="text" value="couleur" />

10. 
    Même si vous ne connaissez pas le code des liens supplémentaires, des champs texte suffiront :
    

    Code:

    <input name="lien1" type="text" value="lien1" />
<input name="lien2" type="text" value="lien2" />
<input name="lien3" type="text" value="lien3" />
<input name="lien4" type="text" value="lien4" />

11. Merci de donner le plus de détails possibles(CSS , structure , emplacement des champs ...)
    

[Zeste]

Bien , puisque vous ne voulez pas donner de précisions , je vais vous poser quelques questions :

1. A quoi est destiné le générateur ?
   
2. La page du générateur est-elle avec ou sans le haut/bas du forum ?
   
3. Quel genre de palette de couleurs voulez-vous ?
   (palette simple (liste de couleurs) ? palette classique ? palette complète ? )
   
4. Le message sera-t-il un nouveau sujet ? un message à la suite d'un sujet ?
   
5. A quoi doit ressembler l'envoi du message ? avez-vous un modèle ?
   
6. Les liens supplémentaires seront-ils sous forme de liens ? d''images ? des 2 ? sous spoiler ?
   
7. Le pseudo du demandeur doit-il apparaitre dans le générateur ? dans le message ?
   
8. De quelle nature est le titre du message ? (automatique ? personnalisé ? )
   si personnalisé : son contenu ?
   
9. Merci de compléter le code du formulaire , pour avoir une idée précise de ce que vous souhaitez .
   Même si vous ne connaissez pas le code couleur , un simple champ texte suffira :
   

   Code:

   <input name="couleur" type="text" value="couleur" />

10. 
    Même si vous ne connaissez pas le code des liens supplémentaires, des champs texte suffiront :
    

    Code:

    <input name="lien1" type="text" value="lien1" />
<input name="lien2" type="text" value="lien2" />
<input name="lien3" type="text" value="lien3" />
<input name="lien4" type="text" value="lien4" />

11. Merci de donner le plus de détails possibles(CSS , structure , emplacement des champs ...)
    

1/ Il est destiné pour mon forum.
2/ Elle est intégrée avec le haut et bas du forum.
3/ Une palette de couleur complète.
4/ Le message se générera dans un nouveau sujet. Pas à la suite d'un autre post.
5/ Et bien...il serait sous forme de BBCode.
6/ Ils seront sous forme de liens uniquement. Et pas en spoiler.
7/ Le pseudo doit apparaitre dans le générateur et dans le message. Dans le message, cela devra donner ceci : "Pseudo a fait une commande, la voici:"
8/ Le titre du message est personnalisé. En fin de commande, il faudrait rajouter un espace texte qui permette au membre de saisir le titre qu'il veut mettre à son topic.

9/10/ Voici le code modifié :

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>commande</title>
<style type="text/css">
<!--
#post {
width:500px;
}
#post h3,#post p{
text-align:center;
}
#post label {
float:left;
text-align:right;
width:250px;
padding-right:10px
}
-->
</style>
<script type="text/javascript">
function envoiMessage(form)
{
var txt_message =  "Bonjour cher admin,\n\n"
+ "Voici ma commande :\n\n"
+ "[b]Nature de la création : [/b]" + form.creation.value + "\n"
+ "[b]Taille de la création : [/b]" + form.taille.value + "\n"
+ "[b]Texte clignotant : [/b]" + form.blink.value + "\n"
+ "[b]Informations supplémentaires : [/b]" + form.plus.value + "\n\n"
+ " Merci pour les propositions qui seront faites .";
form.message.value = txt_message;
 
form.subject.value = "Commande de " + form.creation.value;
}
</script>
</head>
<body>
<form action="/post" method="post" id="post" name="post" enctype="multipart/form-data" onSubmit="envoiMessage(this)">
<input type="hidden" name="lt" value="0" />
<input type="hidden" name="mode" value="newtopic" />
<input type="hidden" name="topictype" value="0" checked="checked" />
<input type="hidden" name="message" value="" />
<input type="hidden" name="subject" value="" />
<input type="hidden" name="f" value="1" />
<h3>Générateur de commande</h3>

<label for="blink">Votre pseudo </label>
<input type="text" size="30" name="pseudo" id="pseudo" />
 
<label for="creation">Nature de la création: </label>
<select name="blink" id="blink">
<option>Bannière</option>
<option>Bouton</option>
<option>Avatar</option>
<option>Signature</option>
<option>Header</option>
<option>Autre</option>
 
<label for="taille">Taille de la création: </label>
<input type="text" size="30" name="taille" id="taille" /><br /><br />

<label for="taille">Police à utiliser: </label>
<input name="police" type="text" value="police" /> / <a href="http://www.dafont.com/fr">Voir les polices</a><br />

<label for="taille">Couleur du fond: </label>
<input name="couleur" type="text" value="couleur" />

<label for="taille">Lien des images à insérer : </label>
<input name="lien1" type="text" value="lien1" />
<input name="lien2" type="text" value="lien2" />
<input name="lien3" type="text" value="lien3" />
<input name="lien4" type="text" value="lien4" />

<label for="taille">Texte à insérer : </label>
<input type="text" size="30" name="texte" id="texte" /><br /><br />

<label for="taille">Couleur du texte: </label>
<input name="couleur" type="text" value="couleur" />
 
<label for="blink">Texte clignotant? </label>
<select name="blink" id="blink">
<option>Oui</option>
<option>Non</option>
</select><br /><br />
 
<label for="plus">Informations supplémentaires: </label>
<textarea id="plus" name="plus"></textarea>

<p> Votre commande sera générée dans un nouveau sujet. N'oubliez pas de confirmer l'envoi!
 
<p><input type="submit" name="post" value="Envoyer" /></p>
</form>
</body>
</html>

11/ Au niveau du CSS. Les titres (Natures de création, Police...) doivent être en gras. Je n'ai rien d'autre à ajouter.

Cordialement.

[Scoubifitz]

Pour info , comme j'utiliserai Jquery , la question 2 était pour savoir si j'allais intégrer le script ou si je profitais du fait qu'il est déjà dans le header du forum .
Je mettrais la palette Spectrum ...

[Zeste]

D'accord ça marche

[Scoubifitz]

voici le code

Code:

<style type="text/css">
<!--
#post {
width:500px;
}
#post h3,#post p{
text-align:center;
}
#post label {
float:left;
text-align:right;
width:250px;
padding-right:10px
}
/***
Spectrum Colorpicker v1.1.1
https://github.com/bgrins/spectrum
Author: Brian Grinstead
License: MIT
***/
 .sp-container { position:absolute; top:0; left:0; display:inline-block; *display: inline; *zoom: 1; /* https://github.com/bgrins/spectrum/issues/40 */ z-index: 9999994; overflow: hidden; } .sp-container.sp-flat { position: relative; }  /* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */ .sp-top { position:relative; width: 100%; display:inline-block; } .sp-top-inner { position:absolute; top:0; left:0; bottom:0; right:0; } .sp-color { position: absolute; top:0; left:0; bottom:0; right:20%; } .sp-hue { position: absolute; top:0; right:0; bottom:0; left:84%; height: 100%; } .sp-fill { padding-top: 80%; } .sp-sat, .sp-val { position: absolute; top:0; left:0; right:0; bottom:0; }  .sp-alpha-enabled .sp-top { margin-bottom: 18px; } .sp-alpha-enabled .sp-alpha { display: block; } .sp-alpha-handle { position:absolute; top:-4px; bottom: -4px; width: 6px; left: 50%; cursor: pointer; border: 1px solid black; background: white; opacity: .8; } .sp-alpha { display: none; position: absolute; bottom: -14px; right: 0; left: 0; height: 8px; } .sp-alpha-inner { border: solid 1px #333; }  /* Don't allow text selection */ .sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button  { -webkit-user-select:none; -moz-user-select: -moz-none; -o-user-select:none; user-select: none; }  .sp-container.sp-input-disabled .sp-input-container { display: none; } .sp-container.sp-buttons-disabled .sp-button-container { display: none; } .sp-palette-only .sp-picker-container { display: none; } .sp-palette-disabled .sp-palette-container { display: none; }  .sp-initial-disabled .sp-initial { display: none; }   /* Gradients for hue, saturation and value instead of images.  Not pretty... but it works */ .sp-sat { background-image: -webkit-gradient(linear,  0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0))); background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0)); background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)"; filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81'); } .sp-val { background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0))); background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0)); background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)"; filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000'); }  .sp-hue { background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000)); background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); }  /* IE filters do not support multiple color stops. Generate 6 divs, line them up, and do two color gradients for each. Yes, really. */ .sp-1 { height:17%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00'); } .sp-2 { height:16%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00'); } .sp-3 { height:17%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff'); } .sp-4 { height:17%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff'); } .sp-5 { height:16%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff'); } .sp-6 { height:17%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000'); }  .sp-hidden { display: none !important; }  /* Clearfix hack */ .sp-cf:before, .sp-cf:after { content: ""; display: table; } .sp-cf:after { clear: both; } .sp-cf { *zoom: 1; }  /* Mobile devices, make hue slider bigger so it is easier to slide */ @media (max-device-width: 480px) { .sp-color { right: 40%; } .sp-hue { left: 63%; } .sp-fill { padding-top: 60%; } } .sp-dragger { border-radius: 5px; height: 5px; width: 5px; border: 1px solid #fff; background: #000; cursor: pointer; position:absolute; top:0; left: 0; } .sp-slider { position: absolute; top:0; cursor:pointer; height: 3px; left: -1px; right: -1px; border: 1px solid #000; background: white; opacity: .8; }  /* Theme authors: Here are the basic themeable display options (colors, fonts, global widths). See http://bgrins.github.io/spectrum/themes/ for instructions. */  .sp-container { border-radius: 0; background-color: #ECECEC; border: solid 1px #f0c49B; padding: 0; } .sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue { font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .sp-top { margin-bottom: 3px; } .sp-color, .sp-hue { border: solid 1px #666; }  /* Input */ .sp-input-container { float:right; width: 100px; margin-bottom: 4px; } .sp-initial-disabled  .sp-input-container { width: 100%; } .sp-input { font-size: 12px !important; border: 1px inset; padding: 4px 5px; margin: 0; width: 100%; background:transparent; border-radius: 3px; color: #222; } .sp-input:focus  { border: 1px solid orange; } .sp-input.sp-validation-error { border: 1px solid red; background: #fdd; } .sp-picker-container , .sp-palette-container { float:left; position: relative; padding: 10px; padding-bottom: 300px; margin-bottom: -290px; } .sp-picker-container { width: 172px; border-left: solid 1px #fff; }  /* Palettes */ .sp-palette-container { border-right: solid 1px #ccc; }  .sp-palette .sp-thumb-el { display: block; position:relative; float:left; width: 24px; height: 15px; margin: 3px; cursor: pointer; border:solid 2px transparent; } .sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active { border-color: orange; } .sp-thumb-el { position:relative; }  /* Initial */ .sp-initial { float: left; border: solid 1px #333; } .sp-initial span { width: 30px; height: 25px; border:none; display:block; float:left; margin:0; }  /* Buttons */ .sp-button-container { float: right; }  /* Replacer (the little preview div that shows up instead of the <input>) */ .sp-replacer { margin:0; overflow:hidden; cursor:pointer; padding: 4px; display:inline-block; *zoom: 1; *display: inline; border: solid 1px #91765d; background: #eee; color: #333; vertical-align: middle; } .sp-replacer:hover, .sp-replacer.sp-active { border-color: #F0C49B; color: #111; } .sp-replacer.sp-disabled { cursor:default; border-color: silver; color: silver; } .sp-dd { padding: 2px 0; height: 16px; line-height: 16px; float:left; font-size:10px; } .sp-preview { position:relative; width:25px; height: 20px; border: solid 1px #222; margin-right: 5px; float:left; z-index: 0; }  .sp-palette { *width: 220px; max-width: 220px; } .sp-palette .sp-thumb-el { width:16px; height: 16px; margin:2px 1px; border: solid 1px #d0d0d0; }  .sp-container { padding-bottom:0; }   /* Buttons: http://hellohappy.org/css3-buttons/ */ .sp-container button { background-color: #eeeeee; background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); background-image: -o-linear-gradient(top, #eeeeee, #cccccc); background-image: linear-gradient(to bottom, #eeeeee, #cccccc); border: 1px solid #ccc; border-bottom: 1px solid #bbb; border-radius: 3px; color: #333; font-size: 14px; line-height: 1; padding: 5px 4px; text-align: center; text-shadow: 0 1px 0 #eee; vertical-align: middle; } .sp-container button:hover { background-color: #dddddd; background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb); background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb); background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb); background-image: -o-linear-gradient(top, #dddddd, #bbbbbb); background-image: linear-gradient(to bottom, #dddddd, #bbbbbb); border: 1px solid #bbb; border-bottom: 1px solid #999; cursor: pointer; text-shadow: 0 1px 0 #ddd; } .sp-container button:active { border: 1px solid #aaa; border-bottom: 1px solid #888; -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; } .sp-cancel { font-size: 11px; color: #d93f3f !important; margin:0; padding:2px; margin-right: 5px; vertical-align: middle; text-decoration:none;  } .sp-cancel:hover { color: #d93f3f !important; text-decoration: underline; }   .sp-palette span:hover, .sp-palette span.sp-thumb-active { border-color: #000; }  .sp-preview, .sp-alpha, .sp-thumb-el { position:relative; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); } .sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner { display:block; position:absolute; top:0;left:0;bottom:0;right:0; }  .sp-palette .sp-thumb-inner { background-position: 50% 50%; background-repeat: no-repeat; }  .sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=); }  .sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=); }
-->
</style>
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
<script type="text/javascript">
(function(E,g,sa){function ga(d,g,l){for(var q=[],r=0;r<d.length;r++){var s=tinycolor(d[r]),p=0.5>s.toHsl().l?"sp-thumb-el sp-thumb-dark":"sp-thumb-el sp-thumb-light",p=p+(tinycolor.equals(g,d[r])?" sp-thumb-active":""),k=ta?"background-color:"+s.toRgbString():"filter:"+s.toFilter();q.push('<span title="'+s.toRgbString()+'" data-color="'+s.toRgbString()+'" class="'+p+'"><span class="sp-thumb-inner" style="'+k+';" /></span>')}return"<div class='sp-cf "+l+"'>"+q.join("")+"</div>"}function Fa(d,y){var l= g.extend({},$,d);l.callbacks={move:A(l.move,y),change:A(l.change,y),show:A(l.show,y),hide:A(l.hide,y),beforeShow:A(l.beforeShow,y)};return l}function ha(d,y){function l(){a.showPaletteOnly&&(a.showPalette=!0);n.toggleClass("sp-flat",b);n.toggleClass("sp-input-disabled",!a.showInput);n.toggleClass("sp-alpha-enabled",a.showAlpha);n.toggleClass("sp-buttons-disabled",!a.showButtons);n.toggleClass("sp-palette-disabled",!a.showPalette);n.toggleClass("sp-palette-only",a.showPaletteOnly);n.toggleClass("sp-initial-disabled", !a.showInitial);n.addClass(a.className);J()}function q(a){if(c){a=tinycolor(a).toRgbString();if(-1===g.inArray(a,K))for(K.push(a);K.length>$;)K.shift();if(m&&E.localStorage)try{E.localStorage[m]=K.join(";")}catch(b){}}}function r(){var b=[],c=K,d={},m;if(a.showPalette){for(var f=0;f<aa.length;f++)for(var h=0;h<aa[f].length;h++)m=tinycolor(aa[f][h]).toRgbString(),d[m]=!0;for(f=0;f<c.length;f++)m=tinycolor(c[f]).toRgbString(),d.hasOwnProperty(m)||(b.push(c[f]),d[m]=!0)}return b.reverse().slice(0,a.maxSelectionSize)} function s(){var a=e(),b=g.map(aa,function(b,c){return ga(b,a,"sp-palette-row sp-palette-row-"+c)});K&&b.push(ga(r(),a,"sp-palette-row sp-palette-row-selection"));ua.html(b.join(""))}function p(){if(a.showInitial){var b=L,c=e();va.html(ga([b,c],c,"sp-palette-row-initial"))}}function k(){(0>=I||0>=R||0>=ba)&&J();n.addClass(wa);M=null}function z(){n.removeClass(wa)}function B(){var a=tinycolor(N.val());a.ok?t(a):N.addClass("sp-validation-error")}function xa(){F?C():ia()}function ia(){var b=g.Event("beforeShow.spectrum"); if(F)J();else if(v.trigger(b,[e()]),!1!==h.beforeShow(e())&&!b.isDefaultPrevented()){for(b=0;b<G.length;b++)G[b]&&G[b].hide();F=!0;g(ja).bind("click.spectrum",C);g(E).bind("resize.spectrum",f);S.addClass("sp-active");n.removeClass("sp-hidden");a.showPalette&&s();J();w();L=e();p();h.show(L);v.trigger("show.spectrum",[L])}}function C(a){a&&"click"==a.type&&2==a.button||!F||b||(F=!1,g(ja).unbind("click.spectrum",C),g(E).unbind("resize.spectrum",f),S.removeClass("sp-active"),n.addClass("sp-hidden"),tinycolor.equals(e(), L)||(ha&&"cancel"!==a?O(!0):t(L,!0)),h.hide(e()),v.trigger("hide.spectrum",[e()]))}function t(a,b){if(!tinycolor.equals(a,e())){var c=tinycolor(a),d=c.toHsv();T=d.h%360/360;U=d.s;V=d.v;P=d.a;w();c.ok&&!b&&(W=ka||c.format)}}function e(a){a=a||{};return tinycolor.fromRatio({h:T,s:U,v:V,a:Math.round(100*P)/100},{format:a.format||W})}function x(){w();h.move(e());v.trigger("move.spectrum",[e()])}function w(){N.removeClass("sp-validation-error");ya();var b=tinycolor.fromRatio({h:T,s:1,v:1});ca.css("background-color", b.toHexString());b=W;1>P&&("hex"===b||"hex3"===b||"hex6"===b||"name"===b)&&(b="rgb");var c=e({format:b}),d=c.toHexString(),f=c.toRgbString();ta||1===c.alpha?la.css("background-color",f):(la.css("background-color","transparent"),la.css("filter",c.toFilter()));if(a.showAlpha){f=c.toRgb();f.a=0;var f=tinycolor(f).toRgbString(),m="linear-gradient(left, "+f+", "+d+")";X?Y.css("filter",tinycolor(f).toFilter({gradientType:1},d)):(Y.css("background","-webkit-"+m),Y.css("background","-moz-"+m),Y.css("background", "-ms-"+m),Y.css("background",m))}a.showInput&&N.val(c.toString(b));a.showPalette&&s();p()}function ya(){var a=U*R,b=I-V*I,a=Math.max(-Q,Math.min(R-Q,a-Q)),b=Math.max(-Q,Math.min(I-Q,b-Q));za.css({top:b,left:a});Aa.css({left:P*ma-A/2});Ba.css({top:T*ba-D})}function O(a){var b=e();na&&v.val(b.toString(W));var c=!tinycolor.equals(b,L);L=b;q(b);a&&c&&(h.change(b),v.trigger("change",[b]))}function J(){R=ca.width();I=ca.height();Q=za.height();oa.width();ba=oa.height();D=Ba.height();ma=Ca.width();A=Aa.width(); b||(n.css("position","absolute"),n.offset(Ga(n,Z)));ya()}function H(){C();pa=!0;v.attr("disabled",!0);Z.addClass("sp-disabled")}var a=Fa(y,d),b=a.flat,c=a.showSelectionPalette,m=a.localStorageKey,u=a.theme,h=a.callbacks,f=Ha(J,10),F=!1,R=0,I=0,Q=0,ba=0,ma=0,A=0,D=0,T=0,U=0,V=0,P=1,qa=a.palette.slice(0),aa=g.isArray(qa[0])?qa:[qa],K=a.selectionPalette.slice(0),$=a.maxSelectionSize,wa="sp-dragging",M=null,ja=d.ownerDocument,v=g(d),pa=!1,n=g(Ia,ja).addClass(u),ca=n.find(".sp-color"),za=n.find(".sp-dragger"), oa=n.find(".sp-hue"),Ba=n.find(".sp-slider"),Y=n.find(".sp-alpha-inner"),Ca=n.find(".sp-alpha"),Aa=n.find(".sp-alpha-handle"),N=n.find(".sp-input"),ua=n.find(".sp-palette"),va=n.find(".sp-initial"),Da=n.find(".sp-cancel"),Ea=n.find(".sp-choose"),na=v.is("input"),ra=na&&!b,S=ra?g(Ja).addClass(u).addClass(a.className):g([]),Z=ra?S:v,la=S.find(".sp-preview-inner"),da=a.color||na&&v.val(),L=!1,ka=a.preferredFormat,W=ka,ha=!a.showButtons||a.clickoutFiresChange;(function(){function c(a){a.data&&a.data.ignore? (t(g(this).data("color")),x()):(t(g(this).data("color")),O(!0),x(),C());return!1}X&&n.find("*:not(input)").attr("unselectable","on");l();ra&&v.after(S).hide();if(b)v.after(n).hide();else{var d="parent"===a.appendTo?v.parent():g(a.appendTo);1!==d.length&&(d=g("body"));d.append(n)}if(m&&E.localStorage){try{var f=E.localStorage[m].split(",#");1<f.length&&(delete E.localStorage[m],g.each(f,function(a,b){q(b)}))}catch(h){}try{K=E.localStorage[m].split(";")}catch(e){}}Z.bind("click.spectrum touchstart.spectrum", function(a){pa||xa();a.stopPropagation();g(a.target).is("input")||a.preventDefault()});(v.is(":disabled")||!0===a.disabled)&&H();n.click(Ka);N.change(B);N.bind("paste",function(){setTimeout(B,1)});N.keydown(function(a){13==a.keyCode&&B()});Da.text(a.cancelText);Da.bind("click.spectrum",function(a){a.stopPropagation();a.preventDefault();C("cancel")});Ea.text(a.chooseText);Ea.bind("click.spectrum",function(a){a.stopPropagation();a.preventDefault();N.hasClass("sp-validation-error")||(O(!0),C())});ea(Ca, function(a,b,c){P=a/ma;c.shiftKey&&(P=Math.round(10*P)/10);x()});ea(oa,function(a,b){T=parseFloat(b/ba);x()},k,z);ea(ca,function(a,b,c){c.shiftKey?M||(c=I-V*I,M=Math.abs(a-U*R)>Math.abs(b-c)?"x":"y"):M=null;c=!M||"y"===M;M&&"x"!==M||(U=parseFloat(a/R));c&&(V=parseFloat((I-b)/I));x()},k,z);da?(t(da),w(),W=ka||tinycolor(da).format,q(da)):w();b&&ia();d=X?"mousedown.spectrum":"click.spectrum touchstart.spectrum";ua.delegate(".sp-thumb-el",d,c);va.delegate(".sp-thumb-el:nth-child(1)",d,{ignore:!0},c)})(); var fa={show:ia,hide:C,toggle:xa,reflow:J,option:function(b,c){if(b===sa)return g.extend({},a);if(c===sa)return a[b];a[b]=c;l()},enable:function(){pa=!1;v.attr("disabled",!1);Z.removeClass("sp-disabled")},disable:H,set:function(a){t(a);O()},get:e,destroy:function(){v.show();Z.unbind("click.spectrum touchstart.spectrum");n.remove();S.remove();G[fa.id]=null},container:n};fa.id=G.push(fa)-1;return fa}function Ga(d,y){var l=d.outerWidth(),q=d.outerHeight(),r=y.outerHeight(),s=d[0].ownerDocument,p=s.documentElement, k=p.clientWidth+g(s).scrollLeft(),s=p.clientHeight+g(s).scrollTop(),p=y.offset();p.top+=r;p.left-=Math.min(p.left,p.left+l>k&&k>l?Math.abs(p.left+l-k):0);p.top-=Math.min(p.top,p.top+q>s&&s>q?Math.abs(q+r-0):0);return p}function D(){}function Ka(d){d.stopPropagation()}function A(d,g){var l=Array.prototype.slice,q=l.call(arguments,2);return function(){return d.apply(g,q.concat(l.call(arguments)))}}function ea(d,y,l,q){function r(d){d.stopPropagation&&d.stopPropagation();d.preventDefault&&d.preventDefault(); d.returnValue=!1}function s(e){if(z){if(X&&9>document.documentMode&&!e.button)return p();var g=e.originalEvent.touches,k=g?g[0].pageY:e.pageY,g=Math.max(0,Math.min((g?g[0].pageX:e.pageX)-B.left,D)),k=Math.max(0,Math.min(k-B.top,A));C&&r(e);y.apply(d,[g,k,e])}}function p(){z&&(g(k).unbind(t),g(k.body).removeClass("sp-dragging"),q.apply(d,arguments));z=!1}y=y||function(){};l=l||function(){};q=q||function(){};var k=d.ownerDocument||document,z=!1,B={},A=0,D=0,C="ontouchstart"in E,t={};t.selectstart=r; t.dragstart=r;t["touchmove mousemove"]=s;t["touchend mouseup"]=p;g(d).bind("touchstart mousedown",function(e){(e.which?3==e.which:2==e.button)||z||!1===l.apply(d,arguments)||(z=!0,A=g(d).height(),D=g(d).width(),B=g(d).offset(),g(k).bind(t),g(k.body).addClass("sp-dragging"),C||s(e),r(e))})}function Ha(d,g,l){var q;return function(){var r=this,s=arguments,p=function(){q=null;d.apply(r,s)};l&&clearTimeout(q);if(l||!q)q=setTimeout(p,g)}}var $={beforeShow:D,move:D,change:D,show:D,hide:D,color:!1,flat:!1, showInput:!1,showButtons:!0,clickoutFiresChange:!1,showInitial:!1,showPalette:!1,showPaletteOnly:!1,showSelectionPalette:!0,localStorageKey:!1,appendTo:"body",maxSelectionSize:7,cancelText:"cancel",chooseText:"choose",preferredFormat:!1,className:"",showAlpha:!1,theme:"sp-light",palette:["fff","000"],selectionPalette:[],disabled:!1},G=[],X=!!/msie/i.exec(E.navigator.userAgent),ta=function(){var d=document.createElement("div").style;d.cssText="background-color:rgba(0,0,0,.5)";return!!~(""+d.backgroundColor).indexOf("rgba")|| !!~(""+d.backgroundColor).indexOf("hsla")}(),Ja="<div class='sp-replacer'><div class='sp-preview'><div class='sp-preview-inner'></div></div><div class='sp-dd'>▼</div></div>",Ia=function(){var d="";if(X)for(var g=1;6>=g;g++)d+="<div class='sp-"+g+"'></div>";return["<div class='sp-container sp-hidden'><div class='sp-palette-container'><div class='sp-palette sp-thumb sp-cf'></div></div><div class='sp-picker-container'><div class='sp-top sp-cf'><div class='sp-fill'></div><div class='sp-top-inner'><div class='sp-color'><div class='sp-sat'><div class='sp-val'><div class='sp-dragger'></div></div></div></div><div class='sp-hue'><div class='sp-slider'></div>", d,"</div></div><div class='sp-alpha'><div class='sp-alpha-inner'><div class='sp-alpha-handle'></div></div></div></div><div class='sp-input-container sp-cf'><input class='sp-input' type='text' spellcheck='false' /></div><div class='sp-initial sp-thumb sp-cf'></div><div class='sp-button-container sp-cf'><a class='sp-cancel' href='#'></a><button class='sp-choose'></button></div></div></div>"].join("")}();g.fn.spectrum=function(d,y){if("string"==typeof d){var l=this,q=Array.prototype.slice.call(arguments, 1);this.each(function(){var r=G[g(this).data("spectrum.id")];if(r){var s=r[d];if(!s)throw Error("Spectrum: no such method: '"+d+"'");"get"==d?l=r.get():"container"==d?l=r.container:"option"==d?l=r.option.apply(r,q):"destroy"==d?(r.destroy(),g(this).removeData("spectrum.id")):s.apply(r,q)}});return l}return this.spectrum("destroy").each(function(){var l=ha(this,d);g(this).data("spectrum.id",l.id)})};g.fn.spectrum.load=!0;g.fn.spectrum.loadOpts={};g.fn.spectrum.draggable=ea;g.fn.spectrum.defaults=$; g.spectrum={};g.spectrum.localization={};g.spectrum.palettes={};g.fn.spectrum.processNativeColorInputs=function(){var d=g("<input type='color' value='!' />")[0];"color"===d.type&&"!"!=d.value||g("input[type=color]").spectrum({preferredFormat:"hex6"})};(function(){function d(a,b){a=a?a:"";b=b||{};if("object"==typeof a&&a.hasOwnProperty("_tc_id"))return a;var c=g(a),m=c.r,u=c.g,h=c.b,f=c.a,F=e(100*f)/100,q=b.format||c.format;1>m&&(m=e(m));1>u&&(u=e(u));1>h&&(h=e(h));return{ok:c.ok,format:q,_tc_id:C++, alpha:f,getAlpha:function(){return f},setAlpha:function(a){f=p(a);F=e(100*f)/100},toHsv:function(){var a=r(m,u,h);return{h:360*a.h,s:a.s,v:a.v,a:f}},toHsvString:function(){var a=r(m,u,h),b=e(360*a.h),c=e(100*a.s),a=e(100*a.v);return 1==f?"hsv("+b+", "+c+"%, "+a+"%)":"hsva("+b+", "+c+"%, "+a+"%, "+F+")"},toHsl:function(){var a=l(m,u,h);return{h:360*a.h,s:a.s,l:a.l,a:f}},toHslString:function(){var a=l(m,u,h),b=e(360*a.h),c=e(100*a.s),a=e(100*a.l);return 1==f?"hsl("+b+", "+c+"%, "+a+"%)":"hsla("+b+", "+ c+"%, "+a+"%, "+F+")"},toHex:function(a){return s(m,u,h,a)},toHexString:function(a){return"#"+s(m,u,h,a)},toRgb:function(){return{r:e(m),g:e(u),b:e(h),a:f}},toRgbString:function(){return 1==f?"rgb("+e(m)+", "+e(u)+", "+e(h)+")":"rgba("+e(m)+", "+e(u)+", "+e(h)+", "+F+")"},toPercentageRgb:function(){return{r:e(100*k(m,255))+"%",g:e(100*k(u,255))+"%",b:e(100*k(h,255))+"%",a:f}},toPercentageRgbString:function(){return 1==f?"rgb("+e(100*k(m,255))+"%, "+e(100*k(u,255))+"%, "+e(100*k(h,255))+"%)":"rgba("+ e(100*k(m,255))+"%, "+e(100*k(u,255))+"%, "+e(100*k(h,255))+"%, "+F+")"},toName:function(){return 0===f?"transparent":J[s(m,u,h,!0)]||!1},toFilter:function(a){var c=s(m,u,h),g=c,e=Math.round(255*parseFloat(f)).toString(16),k=e,l=b&&b.gradientType?"GradientType = 1, ":"";a&&(a=d(a),g=a.toHex(),k=Math.round(255*parseFloat(a.alpha)).toString(16));return"progid:DXImageTransform.Microsoft.gradient("+l+"startColorstr=#"+z(e)+c+",endColorstr=#"+z(k)+g+")"},toString:function(a){var b=!!a;a=a||this.format; var c=!1,b=!b&&1>f&&0<f&&("hex"===a||"hex6"===a||"hex3"===a||"name"===a);"rgb"===a&&(c=this.toRgbString());"prgb"===a&&(c=this.toPercentageRgbString());if("hex"===a||"hex6"===a)c=this.toHexString();"hex3"===a&&(c=this.toHexString(!0));"name"===a&&(c=this.toName());"hsl"===a&&(c=this.toHslString());"hsv"===a&&(c=this.toHsvString());return b?this.toRgbString():c||this.toHexString()}}}function g(a){var b={r:0,g:0,b:0},c=1,d=!1,e=!1;if("string"==typeof a)a:{a=a.replace(A,"").replace(D,"").toLowerCase(); var h=!1;if(O[a])a=O[a],h=!0;else if("transparent"==a){a={r:0,g:0,b:0,a:0,format:"name"};break a}var f;a=(f=H.rgb.exec(a))?{r:f[1],g:f[2],b:f[3]}:(f=H.rgba.exec(a))?{r:f[1],g:f[2],b:f[3],a:f[4]}:(f=H.hsl.exec(a))?{h:f[1],s:f[2],l:f[3]}:(f=H.hsla.exec(a))?{h:f[1],s:f[2],l:f[3],a:f[4]}:(f=H.hsv.exec(a))?{h:f[1],s:f[2],v:f[3]}:(f=H.hex6.exec(a))?{r:parseInt(f[1],16),g:parseInt(f[2],16),b:parseInt(f[3],16),format:h?"name":"hex"}:(f=H.hex3.exec(a))?{r:parseInt(f[1]+""+f[1],16),g:parseInt(f[2]+""+f[2], 16),b:parseInt(f[3]+""+f[3],16),format:h?"name":"hex"}:!1}if("object"==typeof a){if(a.hasOwnProperty("r")&&a.hasOwnProperty("g")&&a.hasOwnProperty("b"))b={r:255*k(a.r,255),g:255*k(a.g,255),b:255*k(a.b,255)},d=!0,e="%"===String(a.r).substr(-1)?"prgb":"rgb";else if(a.hasOwnProperty("h")&&a.hasOwnProperty("s")&&a.hasOwnProperty("v")){a.s=B(a.s);a.v=B(a.v);var e=a.h,h=a.s,b=a.v,e=6*k(e,360),h=k(h,100),b=k(b,100),d=t.floor(e),l=e-d,e=b*(1-h);f=b*(1-l*h);h=b*(1-(1-l)*h);d%=6;b={r:255*[b,f,e,e,h,b][d],g:255* [h,b,b,f,e,e][d],b:255*[e,e,h,b,b,f][d]};d=!0;e="hsv"}else a.hasOwnProperty("h")&&a.hasOwnProperty("s")&&a.hasOwnProperty("l")&&(a.s=B(a.s),a.l=B(a.l),b=q(a.h,a.s,a.l),d=!0,e="hsl");a.hasOwnProperty("a")&&(c=a.a)}c=p(c);return{ok:d,format:a.format||e,r:x(255,w(b.r,0)),g:x(255,w(b.g,0)),b:x(255,w(b.b,0)),a:c}}function l(a,b,c){a=k(a,255);b=k(b,255);c=k(c,255);var d=w(a,b,c),e=x(a,b,c),h,f=(d+e)/2;if(d==e)h=e=0;else{var g=d-e,e=0.5<f?g/(2-d-e):g/(d+e);switch(d){case a:h=(b-c)/g+(b<c?6:0);break;case b:h= (c-a)/g+2;break;case c:h=(a-b)/g+4}h/=6}return{h:h,s:e,l:f}}function q(a,b,c){function d(a,b,c){0>c&&(c+=1);1<c&&(c-=1);return c<1/6?a+6*(b-a)*c:0.5>c?b:c<2/3?a+6*(b-a)*(2/3-c):a}a=k(a,360);b=k(b,100);c=k(c,100);if(0===b)c=b=a=c;else{var e=0.5>c?c*(1+b):c+b-c*b,g=2*c-e;c=d(g,e,a+1/3);b=d(g,e,a);a=d(g,e,a-1/3)}return{r:255*c,g:255*b,b:255*a}}function r(a,b,c){a=k(a,255);b=k(b,255);c=k(c,255);var d=w(a,b,c),e=x(a,b,c),g,f=d-e;if(d==e)g=0;else{switch(d){case a:g=(b-c)/f+(b<c?6:0);break;case b:g=(c-a)/ f+2;break;case c:g=(a-b)/f+4}g/=6}return{h:g,s:0===d?0:f/d,v:d}}function s(a,b,c,d){a=[z(e(a).toString(16)),z(e(b).toString(16)),z(e(c).toString(16))];return d&&a[0].charAt(0)==a[0].charAt(1)&&a[1].charAt(0)==a[1].charAt(1)&&a[2].charAt(0)==a[2].charAt(1)?a[0].charAt(0)+a[1].charAt(0)+a[2].charAt(0):a.join("")}function p(a){a=parseFloat(a);if(isNaN(a)||0>a||1<a)a=1;return a}function k(a,b){"string"==typeof a&&-1!=a.indexOf(".")&&1===parseFloat(a)&&(a="100%");var c="string"===typeof a&&-1!=a.indexOf("%"); a=x(b,w(0,parseFloat(a)));c&&(a=parseInt(a*b,10)/100);return 1E-6>t.abs(a-b)?1:a%b/parseFloat(b)}function z(a){return 1==a.length?"0"+a:""+a}function B(a){1>=a&&(a=100*a+"%");return a}var A=/^[\s,#]+/,D=/\s+$/,C=0,t=Math,e=t.round,x=t.min,w=t.max,G=t.random;d.fromRatio=function(a,b){if("object"==typeof a){var c={},e;for(e in a)a.hasOwnProperty(e)&&(c[e]="a"===e?a[e]:B(a[e]));a=c}return d(a,b)};d.equals=function(a,b){return a&&b?d(a).toRgbString()==d(b).toRgbString():!1};d.random=function(){return d.fromRatio({r:G(), g:G(),b:G()})};d.desaturate=function(a,b){b=0===b?0:b||10;var c=d(a).toHsl();c.s-=b/100;c.s=x(1,w(0,c.s));return d(c)};d.saturate=function(a,b){b=0===b?0:b||10;var c=d(a).toHsl();c.s+=b/100;c.s=x(1,w(0,c.s));return d(c)};d.greyscale=function(a){return d.desaturate(a,100)};d.lighten=function(a,b){b=0===b?0:b||10;var c=d(a).toHsl();c.l+=b/100;c.l=x(1,w(0,c.l));return d(c)};d.darken=function(a,b){b=0===b?0:b||10;var c=d(a).toHsl();c.l-=b/100;c.l=x(1,w(0,c.l));return d(c)};d.complement=function(a){a= d(a).toHsl();a.h=(a.h+180)%360;return d(a)};d.triad=function(a){var b=d(a).toHsl(),c=b.h;return[d(a),d({h:(c+120)%360,s:b.s,l:b.l}),d({h:(c+240)%360,s:b.s,l:b.l})]};d.tetrad=function(a){var b=d(a).toHsl(),c=b.h;return[d(a),d({h:(c+90)%360,s:b.s,l:b.l}),d({h:(c+180)%360,s:b.s,l:b.l}),d({h:(c+270)%360,s:b.s,l:b.l})]};d.splitcomplement=function(a){var b=d(a).toHsl(),c=b.h;return[d(a),d({h:(c+72)%360,s:b.s,l:b.l}),d({h:(c+216)%360,s:b.s,l:b.l})]};d.analogous=function(a,b,c){b=b||6;c=c||30;var e=d(a).toHsl(); c=360/c;a=[d(a)];for(e.h=(e.h-(c*b>>1)+720)%360;--b;)e.h=(e.h+c)%360,a.push(d(e));return a};d.monochromatic=function(a,b){b=b||6;for(var c=d(a).toHsv(),e=c.h,g=c.s,c=c.v,h=[],f=1/b;b--;)h.push(d({h:e,s:g,v:c})),c=(c+f)%1;return h};d.readability=function(a,b){var c=d(a).toRgb(),e=d(b).toRgb(),g=(299*c.r+587*c.g+114*c.b)/1E3,h=(299*e.r+587*e.g+114*e.b)/1E3,c=Math.max(c.r,e.r)-Math.min(c.r,e.r)+Math.max(c.g,e.g)-Math.min(c.g,e.g)+Math.max(c.b,e.b)-Math.min(c.b,e.b);return{brightness:Math.abs(g-h),color:c}}; d.readable=function(a,b){var c=d.readability(a,b);return 125<c.brightness&&500<c.color};d.mostReadable=function(a,b){for(var c=null,e=0,g=!1,h=0;h<b.length;h++){var f=d.readability(a,b[h]),k=125<f.brightness&&500<f.color,f=3*(f.brightness/125)+f.color/500;if(k&&!g||k&&g&&f>e||!k&&!g&&f>e)g=k,e=f,c=d(b[h])}return c};var O=d.names={aliceblue:"f0f8ff",antiquewhite:"faebd7",aqua:"0ff",aquamarine:"7fffd4",azure:"f0ffff",beige:"f5f5dc",bisque:"ffe4c4",black:"000",blanchedalmond:"ffebcd",blue:"00f",blueviolet:"8a2be2", brown:"a52a2a",burlywood:"deb887",burntsienna:"ea7e5d",cadetblue:"5f9ea0",chartreuse:"7fff00",chocolate:"d2691e",coral:"ff7f50",cornflowerblue:"6495ed",cornsilk:"fff8dc",crimson:"dc143c",cyan:"0ff",darkblue:"00008b",darkcyan:"008b8b",darkgoldenrod:"b8860b",darkgray:"a9a9a9",darkgreen:"006400",darkgrey:"a9a9a9",darkkhaki:"bdb76b",darkmagenta:"8b008b",darkolivegreen:"556b2f",darkorange:"ff8c00",darkorchid:"9932cc",darkred:"8b0000",darksalmon:"e9967a",darkseagreen:"8fbc8f",darkslateblue:"483d8b",darkslategray:"2f4f4f", darkslategrey:"2f4f4f",darkturquoise:"00ced1",darkviolet:"9400d3",deeppink:"ff1493",deepskyblue:"00bfff",dimgray:"696969",dimgrey:"696969",dodgerblue:"1e90ff",firebrick:"b22222",floralwhite:"fffaf0",forestgreen:"228b22",fuchsia:"f0f",gainsboro:"dcdcdc",ghostwhite:"f8f8ff",gold:"ffd700",goldenrod:"daa520",gray:"808080",green:"008000",greenyellow:"adff2f",grey:"808080",honeydew:"f0fff0",hotpink:"ff69b4",indianred:"cd5c5c",indigo:"4b0082",ivory:"fffff0",khaki:"f0e68c",lavender:"e6e6fa",lavenderblush:"fff0f5", lawngreen:"7cfc00",lemonchiffon:"fffacd",lightblue:"add8e6",lightcoral:"f08080",lightcyan:"e0ffff",lightgoldenrodyellow:"fafad2",lightgray:"d3d3d3",lightgreen:"90ee90",lightgrey:"d3d3d3",lightpink:"ffb6c1",lightsalmon:"ffa07a",lightseagreen:"20b2aa",lightskyblue:"87cefa",lightslategray:"789",lightslategrey:"789",lightsteelblue:"b0c4de",lightyellow:"ffffe0",lime:"0f0",limegreen:"32cd32",linen:"faf0e6",magenta:"f0f",maroon:"800000",mediumaquamarine:"66cdaa",mediumblue:"0000cd",mediumorchid:"ba55d3", mediumpurple:"9370db",mediumseagreen:"3cb371",mediumslateblue:"7b68ee",mediumspringgreen:"00fa9a",mediumturquoise:"48d1cc",mediumvioletred:"c71585",midnightblue:"191970",mintcream:"f5fffa",mistyrose:"ffe4e1",moccasin:"ffe4b5",navajowhite:"ffdead",navy:"000080",oldlace:"fdf5e6",olive:"808000",olivedrab:"6b8e23",orange:"ffa500",orangered:"ff4500",orchid:"da70d6",palegoldenrod:"eee8aa",palegreen:"98fb98",paleturquoise:"afeeee",palevioletred:"db7093",papayawhip:"ffefd5",peachpuff:"ffdab9",peru:"cd853f", pink:"ffc0cb",plum:"dda0dd",powderblue:"b0e0e6",purple:"800080",red:"f00",rosybrown:"bc8f8f",royalblue:"4169e1",saddlebrown:"8b4513",salmon:"fa8072",sandybrown:"f4a460",seagreen:"2e8b57",seashell:"fff5ee",sienna:"a0522d",silver:"c0c0c0",skyblue:"87ceeb",slateblue:"6a5acd",slategray:"708090",slategrey:"708090",snow:"fffafa",springgreen:"00ff7f",steelblue:"4682b4",tan:"d2b48c",teal:"008080",thistle:"d8bfd8",tomato:"ff6347",turquoise:"40e0d0",violet:"ee82ee",wheat:"f5deb3",white:"fff",whitesmoke:"f5f5f5", yellow:"ff0",yellowgreen:"9acd32"},J=d.hexNames=function(a){var b={},c;for(c in a)a.hasOwnProperty(c)&&(b[a[c]]=c);return b}(O),H={rgb:RegExp("rgb[\\s|\\(]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))\\s*\\)?"),rgba:RegExp("rgba[\\s|\\(]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))\\s*\\)?"), hsl:RegExp("hsl[\\s|\\(]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))\\s*\\)?"),hsla:RegExp("hsla[\\s|\\(]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))\\s*\\)?"),hsv:RegExp("hsv[\\s|\\(]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))\\s*\\)?"), hex3:/^([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/};E.tinycolor=d})();g(function(){g.fn.spectrum.load&&g.fn.spectrum.processNativeColorInputs()})})(window,jQuery);