okos
/
rpg-cards
Suivre 1
Favoriser 0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 0 Wiki Activité
Aucune description
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
13 Révisions
1 Branche
Aborescence: 97ab83e7b1
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de '97ab83e7b1'
${ noResults }
rpg-cards/generator/generate.html

generate.html 25KB
Historique Brut

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127 
  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4.     <title>RPG cards</title>

  5.     <!-- Library: jQuery -->

  6.     <script type="text/javascript" src="lib/jquery/jquery.min.js" charset="utf-8"></script>

  7.     <!-- Library: Bootstrap -->

  8.     <script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js" charset="utf-8"></script>

  9.     <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css" />

  10.     <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap-theme.min.css" />

  11.     <!-- Library: Color picker -->

  12.     <link href="lib/colorpicker/css/bootstrap-colorselector.css" rel="stylesheet" />

  13.     <script type="text/javascript" src="lib/colorpicker/js/bootstrap-colorselector.js" charset="utf-8"></script>

  14.     <!-- Data -->

  15.     <script type="text/javascript" src="data/card_data.js"></script>

  16.     <script type="text/javascript" src="data/card_data_example.js"></script>

  17.     <!-- Javascript -->

  18.     <script type="text/javascript" defer src="js/cards.js"></script>

  19.     <script type="text/javascript" defer src="js/ui.js"></script>

  20.     <!-- CSS -->

  21.     <link href="css/ui.css" rel="stylesheet" />

  22. </head>

  23. <body>

  24.     <div class="container">

  25.         <h1 class="page-header">RPG card generator</h1>

  26.         <div class="row">

  27.             <div class="alert alert-danger alert-dismissible" role="alert">

  28.                 <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

  29.                 <strong>Experimental user interface!</strong>

  30.                 This user interface is experimental and largely non-functional.

  31.                 The only thing that works right now are the "load sample cards", "load cards from file", "save cards", and "generate cards" buttons.

  32.             </div>

  33.             <div class="alert alert-warning alert-dismissible" role="alert">

  34.                 <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

  35.                 <strong>Warning!</strong>

  36.                 Some RPG systems are protected by copyright.

  37.                 Even if some spell/item data is freely available, it does not mean you may redistribute cards containing such data.

  38.             </div>

  39.             <div class="alert alert-info alert-dismissible" role="alert">

  40.                 <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

  41.                 If you need help on how to use this tool, go visit <a href="http://crobi.github.io/rpg-cards/" class="alert-link">http://crobi.github.io/rpg-cards/</a>.

  42.             </div>

  43.         </div>

  44.         <div class="row">

  45.             <div class="col-md-3">

  46.                 <h3>Global</h3>

  47.                 <form role="form">

  48.                     <div class="form-group">

  49.                         <label for="default_color" class="color-label">Default color</label>

  50.                         <select id="default_color" class="form-control"><option value="black" data-color="black">black</option><option value="navy" data-color="navy">navy</option><option value="darkblue" data-color="darkblue">darkblue</option><option value="mediumblue" data-color="mediumblue">mediumblue</option><option value="blue" data-color="blue">blue</option><option value="darkgreen" data-color="darkgreen">darkgreen</option><option value="green" data-color="green">green</option><option value="teal" data-color="teal">teal</option><option value="darkcyan" data-color="darkcyan">darkcyan</option><option value="deepskyblue" data-color="deepskyblue">deepskyblue</option><option value="darkturquoise" data-color="darkturquoise">darkturquoise</option><option value="mediumspringgreen" data-color="mediumspringgreen">mediumspringgreen</option><option value="lime" data-color="lime">lime</option><option value="springgreen" data-color="springgreen">springgreen</option><option value="aqua" data-color="aqua">aqua</option><option value="cyan" data-color="cyan">cyan</option><option value="midnightblue" data-color="midnightblue">midnightblue</option><option value="dodgerblue" data-color="dodgerblue">dodgerblue</option><option value="lightseagreen" data-color="lightseagreen">lightseagreen</option><option value="forestgreen" data-color="forestgreen">forestgreen</option><option value="seagreen" data-color="seagreen">seagreen</option><option value="darkslategray" data-color="darkslategray">darkslategray</option><option value="limegreen" data-color="limegreen">limegreen</option><option value="mediumseagreen" data-color="mediumseagreen">mediumseagreen</option><option value="turquoise" data-color="turquoise">turquoise</option><option value="royalblue" data-color="royalblue">royalblue</option><option value="steelblue" data-color="steelblue">steelblue</option><option value="darkslateblue" data-color="darkslateblue">darkslateblue</option><option value="mediumturquoise" data-color="mediumturquoise">mediumturquoise</option><option value="indigo" data-color="indigo">indigo</option><option value="darkolivegreen" data-color="darkolivegreen">darkolivegreen</option><option value="cadetblue" data-color="cadetblue">cadetblue</option><option value="cornflowerblue" data-color="cornflowerblue">cornflowerblue</option><option value="mediumaquamarine" data-color="mediumaquamarine">mediumaquamarine</option><option value="dimgray" data-color="dimgray">dimgray</option><option value="slateblue" data-color="slateblue">slateblue</option><option value="olivedrab" data-color="olivedrab">olivedrab</option><option value="slategray" data-color="slategray">slategray</option><option value="lightslategray" data-color="lightslategray">lightslategray</option><option value="mediumslateblue" data-color="mediumslateblue">mediumslateblue</option><option value="lawngreen" data-color="lawngreen">lawngreen</option><option value="chartreuse" data-color="chartreuse">chartreuse</option><option value="aquamarine" data-color="aquamarine">aquamarine</option><option value="maroon" data-color="maroon">maroon</option><option value="purple" data-color="purple">purple</option><option value="olive" data-color="olive">olive</option><option value="gray" data-color="gray">gray</option><option value="skyblue" data-color="skyblue">skyblue</option><option value="lightskyblue" data-color="lightskyblue">lightskyblue</option><option value="blueviolet" data-color="blueviolet">blueviolet</option><option value="darkred" data-color="darkred">darkred</option><option value="darkmagenta" data-color="darkmagenta">darkmagenta</option><option value="saddlebrown" data-color="saddlebrown">saddlebrown</option><option value="darkseagreen" data-color="darkseagreen">darkseagreen</option><option value="lightgreen" data-color="lightgreen">lightgreen</option><option value="mediumpurple" data-color="mediumpurple">mediumpurple</option><option value="darkviolet" data-color="darkviolet">darkviolet</option><option value="palegreen" data-color="palegreen">palegreen</option><option value="darkorchid" data-color="darkorchid">darkorchid</option><option value="yellowgreen" data-color="yellowgreen">yellowgreen</option><option value="sienna" data-color="sienna">sienna</option><option value="brown" data-color="brown">brown</option><option value="darkgray" data-color="darkgray">darkgray</option><option value="lightblue" data-color="lightblue">lightblue</option><option value="greenyellow" data-color="greenyellow">greenyellow</option><option value="paleturquoise" data-color="paleturquoise">paleturquoise</option><option value="lightsteelblue" data-color="lightsteelblue">lightsteelblue</option><option value="powderblue" data-color="powderblue">powderblue</option><option value="firebrick" data-color="firebrick">firebrick</option><option value="darkgoldenrod" data-color="darkgoldenrod">darkgoldenrod</option><option value="mediumorchid" data-color="mediumorchid">mediumorchid</option><option value="rosybrown" data-color="rosybrown">rosybrown</option><option value="darkkhaki" data-color="darkkhaki">darkkhaki</option><option value="silver" data-color="silver">silver</option><option value="mediumvioletred" data-color="mediumvioletred">mediumvioletred</option><option value="indianred" data-color="indianred">indianred</option><option value="peru" data-color="peru">peru</option><option value="chocolate" data-color="chocolate">chocolate</option><option value="tan" data-color="tan">tan</option><option value="lightgray" data-color="lightgray">lightgray</option><option value="thistle" data-color="thistle">thistle</option><option value="orchid" data-color="orchid">orchid</option><option value="goldenrod" data-color="goldenrod">goldenrod</option><option value="palevioletred" data-color="palevioletred">palevioletred</option><option value="crimson" data-color="crimson">crimson</option><option value="gainsboro" data-color="gainsboro">gainsboro</option><option value="plum" data-color="plum">plum</option><option value="burlywood" data-color="burlywood">burlywood</option><option value="lightcyan" data-color="lightcyan">lightcyan</option><option value="lavender" data-color="lavender">lavender</option><option value="darksalmon" data-color="darksalmon">darksalmon</option><option value="violet" data-color="violet">violet</option><option value="palegoldenrod" data-color="palegoldenrod">palegoldenrod</option><option value="lightcoral" data-color="lightcoral">lightcoral</option><option value="khaki" data-color="khaki">khaki</option><option value="aliceblue" data-color="aliceblue">aliceblue</option><option value="honeydew" data-color="honeydew">honeydew</option><option value="azure" data-color="azure">azure</option><option value="sandybrown" data-color="sandybrown">sandybrown</option><option value="wheat" data-color="wheat">wheat</option><option value="beige" data-color="beige">beige</option><option value="whitesmoke" data-color="whitesmoke">whitesmoke</option><option value="mintcream" data-color="mintcream">mintcream</option><option value="ghostwhite" data-color="ghostwhite">ghostwhite</option><option value="salmon" data-color="salmon">salmon</option><option value="antiquewhite" data-color="antiquewhite">antiquewhite</option><option value="linen" data-color="linen">linen</option><option value="lightgoldenrodyellow" data-color="lightgoldenrodyellow">lightgoldenrodyellow</option><option value="oldlace" data-color="oldlace">oldlace</option><option value="red" data-color="red">red</option><option value="fuchsia" data-color="fuchsia">fuchsia</option><option value="magenta" data-color="magenta">magenta</option><option value="deeppink" data-color="deeppink">deeppink</option><option value="orangered" data-color="orangered">orangered</option><option value="tomato" data-color="tomato">tomato</option><option value="hotpink" data-color="hotpink">hotpink</option><option value="coral" data-color="coral">coral</option><option value="darkorange" data-color="darkorange">darkorange</option><option value="lightsalmon" data-color="lightsalmon">lightsalmon</option><option value="orange" data-color="orange">orange</option><option value="lightpink" data-color="lightpink">lightpink</option><option value="pink" data-color="pink">pink</option><option value="gold" data-color="gold">gold</option><option value="peachpuff" data-color="peachpuff">peachpuff</option><option value="navajowhite" data-color="navajowhite">navajowhite</option><option value="moccasin" data-color="moccasin">moccasin</option><option value="bisque" data-color="bisque">bisque</option><option value="mistyrose" data-color="mistyrose">mistyrose</option><option value="blanchedalmond" data-color="blanchedalmond">blanchedalmond</option><option value="papayawhip" data-color="papayawhip">papayawhip</option><option value="lavenderblush" data-color="lavenderblush">lavenderblush</option><option value="seashell" data-color="seashell">seashell</option><option value="cornsilk" data-color="cornsilk">cornsilk</option><option value="lemonchiffon" data-color="lemonchiffon">lemonchiffon</option><option value="floralwhite" data-color="floralwhite">floralwhite</option><option value="snow" data-color="snow">snow</option><option value="yellow" data-color="yellow">yellow</option><option value="lightyellow" data-color="lightyellow">lightyellow</option><option value="ivory" data-color="ivory">ivory</option><option value="white" data-color="white">white</option></select>

  51.                         <script>

  52.                             $('#default_color').colorselector();

  53.                         </script>

  54.                     </div>

  55.                     <div class="form-group">

  56.                         <label for="default_icon">Default Icon</label>

  57.                         <input type="text" id="default_icon" class="form-control" placeholder="Icon name" readonly>

  58.                     </div>

  59.                     <div class="checkbox">

  60.                         <label>

  61.                             <input type="checkbox" checked disabled> Small front icons

  62.                         </label>

  63.                     </div>

  64.                     <div class="form-group">

  65.                         <label for="default_title_size">Default title size</label>

  66.                         <select class="form-control" id="default_title_size" disabled>

  67.                             <option value="big">big</option>

  68.                             <option value="normal" selected>normal</option>

  69.                             <option value="small">small</option>

  70.                             <option value="tiny">tiny</option>

  71.                         </select>

  72.                     </div>

  73.                     <input type="file" id="file-load" name="files[]" multiple class="form-control" style="display:none" />

  74.                     <a href="" id="file-save-link" style="display:none">Hidden download link</a>

  75.                     <button type="button" class="btn btn-primary btn-block" id="button-load">Load cards from file</button>

  76.                     <button type="button" class="btn btn-primary btn-block" id="button-save">Save cards</button>

  77.                     <button type="button" class="btn btn-primary btn-block" id="button-load-sample">Load sample cards</button>

  78.                     <button type="button" class="btn btn-success btn-block" id="button-generate">Generate cards</button>

  79.                     <span class="help-block">Note: generated cards open in a new tab or window.</span>

  80.                 </form>

  81.             </div>

  82.             <div class="col-md-3">

  83.                 <h3>Card list</h3>

  84.                 <form role="form">

  85.                     <div class="form-group">

  86.                         <label for="selected_card">Selected card</label>

  87.                         <select class="form-control" id="selected_card" readonly></select>

  88.                     </div>

  89.                     <button type="button" class="btn btn-primary btn-block disabled">Delete selected card</button>

  90.                     <button type="button" class="btn btn-primary btn-block disabled">Add new card</button>

  91.                 </form>

  92.             </div>

  93.             <div class="col-md-3">

  94.                 <h3>Card</h3>

  95.                 <form role="form">

  96.                     <div class="form-group">

  97.                         <label for="card_name">Name</label>

  98.                         <input type="text" id="card_name" class="form-control" placeholder="Title" readonly>

  99.                     </div>

  100.                     <div class="form-group">

  101.                         <label for="card_icon">Icon</label>

  102.                         <input type="text" id="card_icon" class="form-control" placeholder="Icon name" readonly>

  103.                     </div>

  104.                     <div class="form-group">

  105.                         <label for="card_color" class="color-label">Color</label>

  106.                         <select id="card_color" class="form-control disabled"><option value="none" data-color="white">none</option><option value="black" data-color="black" selected>black</option><option value="navy" data-color="navy">navy</option><option value="darkblue" data-color="darkblue">darkblue</option><option value="mediumblue" data-color="mediumblue">mediumblue</option><option value="blue" data-color="blue">blue</option><option value="darkgreen" data-color="darkgreen">darkgreen</option><option value="green" data-color="green">green</option><option value="teal" data-color="teal">teal</option><option value="darkcyan" data-color="darkcyan">darkcyan</option><option value="deepskyblue" data-color="deepskyblue">deepskyblue</option><option value="darkturquoise" data-color="darkturquoise">darkturquoise</option><option value="mediumspringgreen" data-color="mediumspringgreen">mediumspringgreen</option><option value="lime" data-color="lime">lime</option><option value="springgreen" data-color="springgreen">springgreen</option><option value="aqua" data-color="aqua">aqua</option><option value="cyan" data-color="cyan">cyan</option><option value="midnightblue" data-color="midnightblue">midnightblue</option><option value="dodgerblue" data-color="dodgerblue">dodgerblue</option><option value="lightseagreen" data-color="lightseagreen">lightseagreen</option><option value="forestgreen" data-color="forestgreen">forestgreen</option><option value="seagreen" data-color="seagreen">seagreen</option><option value="darkslategray" data-color="darkslategray">darkslategray</option><option value="limegreen" data-color="limegreen">limegreen</option><option value="mediumseagreen" data-color="mediumseagreen">mediumseagreen</option><option value="turquoise" data-color="turquoise">turquoise</option><option value="royalblue" data-color="royalblue">royalblue</option><option value="steelblue" data-color="steelblue">steelblue</option><option value="darkslateblue" data-color="darkslateblue">darkslateblue</option><option value="mediumturquoise" data-color="mediumturquoise">mediumturquoise</option><option value="indigo" data-color="indigo">indigo</option><option value="darkolivegreen" data-color="darkolivegreen">darkolivegreen</option><option value="cadetblue" data-color="cadetblue">cadetblue</option><option value="cornflowerblue" data-color="cornflowerblue">cornflowerblue</option><option value="mediumaquamarine" data-color="mediumaquamarine">mediumaquamarine</option><option value="dimgray" data-color="dimgray">dimgray</option><option value="slateblue" data-color="slateblue">slateblue</option><option value="olivedrab" data-color="olivedrab">olivedrab</option><option value="slategray" data-color="slategray">slategray</option><option value="lightslategray" data-color="lightslategray">lightslategray</option><option value="mediumslateblue" data-color="mediumslateblue">mediumslateblue</option><option value="lawngreen" data-color="lawngreen">lawngreen</option><option value="chartreuse" data-color="chartreuse">chartreuse</option><option value="aquamarine" data-color="aquamarine">aquamarine</option><option value="maroon" data-color="maroon">maroon</option><option value="purple" data-color="purple">purple</option><option value="olive" data-color="olive">olive</option><option value="gray" data-color="gray">gray</option><option value="skyblue" data-color="skyblue">skyblue</option><option value="lightskyblue" data-color="lightskyblue">lightskyblue</option><option value="blueviolet" data-color="blueviolet">blueviolet</option><option value="darkred" data-color="darkred">darkred</option><option value="darkmagenta" data-color="darkmagenta">darkmagenta</option><option value="saddlebrown" data-color="saddlebrown">saddlebrown</option><option value="darkseagreen" data-color="darkseagreen">darkseagreen</option><option value="lightgreen" data-color="lightgreen">lightgreen</option><option value="mediumpurple" data-color="mediumpurple">mediumpurple</option><option value="darkviolet" data-color="darkviolet">darkviolet</option><option value="palegreen" data-color="palegreen">palegreen</option><option value="darkorchid" data-color="darkorchid">darkorchid</option><option value="yellowgreen" data-color="yellowgreen">yellowgreen</option><option value="sienna" data-color="sienna">sienna</option><option value="brown" data-color="brown">brown</option><option value="darkgray" data-color="darkgray">darkgray</option><option value="lightblue" data-color="lightblue">lightblue</option><option value="greenyellow" data-color="greenyellow">greenyellow</option><option value="paleturquoise" data-color="paleturquoise">paleturquoise</option><option value="lightsteelblue" data-color="lightsteelblue">lightsteelblue</option><option value="powderblue" data-color="powderblue">powderblue</option><option value="firebrick" data-color="firebrick">firebrick</option><option value="darkgoldenrod" data-color="darkgoldenrod">darkgoldenrod</option><option value="mediumorchid" data-color="mediumorchid">mediumorchid</option><option value="rosybrown" data-color="rosybrown">rosybrown</option><option value="darkkhaki" data-color="darkkhaki">darkkhaki</option><option value="silver" data-color="silver">silver</option><option value="mediumvioletred" data-color="mediumvioletred">mediumvioletred</option><option value="indianred" data-color="indianred">indianred</option><option value="peru" data-color="peru">peru</option><option value="chocolate" data-color="chocolate">chocolate</option><option value="tan" data-color="tan">tan</option><option value="lightgray" data-color="lightgray">lightgray</option><option value="thistle" data-color="thistle">thistle</option><option value="orchid" data-color="orchid">orchid</option><option value="goldenrod" data-color="goldenrod">goldenrod</option><option value="palevioletred" data-color="palevioletred">palevioletred</option><option value="crimson" data-color="crimson">crimson</option><option value="gainsboro" data-color="gainsboro">gainsboro</option><option value="plum" data-color="plum">plum</option><option value="burlywood" data-color="burlywood">burlywood</option><option value="lightcyan" data-color="lightcyan">lightcyan</option><option value="lavender" data-color="lavender">lavender</option><option value="darksalmon" data-color="darksalmon">darksalmon</option><option value="violet" data-color="violet">violet</option><option value="palegoldenrod" data-color="palegoldenrod">palegoldenrod</option><option value="lightcoral" data-color="lightcoral">lightcoral</option><option value="khaki" data-color="khaki">khaki</option><option value="aliceblue" data-color="aliceblue">aliceblue</option><option value="honeydew" data-color="honeydew">honeydew</option><option value="azure" data-color="azure">azure</option><option value="sandybrown" data-color="sandybrown">sandybrown</option><option value="wheat" data-color="wheat">wheat</option><option value="beige" data-color="beige">beige</option><option value="whitesmoke" data-color="whitesmoke">whitesmoke</option><option value="mintcream" data-color="mintcream">mintcream</option><option value="ghostwhite" data-color="ghostwhite">ghostwhite</option><option value="salmon" data-color="salmon">salmon</option><option value="antiquewhite" data-color="antiquewhite">antiquewhite</option><option value="linen" data-color="linen">linen</option><option value="lightgoldenrodyellow" data-color="lightgoldenrodyellow">lightgoldenrodyellow</option><option value="oldlace" data-color="oldlace">oldlace</option><option value="red" data-color="red">red</option><option value="fuchsia" data-color="fuchsia">fuchsia</option><option value="magenta" data-color="magenta">magenta</option><option value="deeppink" data-color="deeppink">deeppink</option><option value="orangered" data-color="orangered">orangered</option><option value="tomato" data-color="tomato">tomato</option><option value="hotpink" data-color="hotpink">hotpink</option><option value="coral" data-color="coral">coral</option><option value="darkorange" data-color="darkorange">darkorange</option><option value="lightsalmon" data-color="lightsalmon">lightsalmon</option><option value="orange" data-color="orange">orange</option><option value="lightpink" data-color="lightpink">lightpink</option><option value="pink" data-color="pink">pink</option><option value="gold" data-color="gold">gold</option><option value="peachpuff" data-color="peachpuff">peachpuff</option><option value="navajowhite" data-color="navajowhite">navajowhite</option><option value="moccasin" data-color="moccasin">moccasin</option><option value="bisque" data-color="bisque">bisque</option><option value="mistyrose" data-color="mistyrose">mistyrose</option><option value="blanchedalmond" data-color="blanchedalmond">blanchedalmond</option><option value="papayawhip" data-color="papayawhip">papayawhip</option><option value="lavenderblush" data-color="lavenderblush">lavenderblush</option><option value="seashell" data-color="seashell">seashell</option><option value="cornsilk" data-color="cornsilk">cornsilk</option><option value="lemonchiffon" data-color="lemonchiffon">lemonchiffon</option><option value="floralwhite" data-color="floralwhite">floralwhite</option><option value="snow" data-color="snow">snow</option><option value="yellow" data-color="yellow">yellow</option><option value="lightyellow" data-color="lightyellow">lightyellow</option><option value="ivory" data-color="ivory">ivory</option><option value="white" data-color="white">white</option></select>

  107.                         <script>

  108.                             $('#card_color').colorselector();

  109.                         </script>

  110.                     </div>

  111.                     <div class="form-group">

  112.                         <label for="card_contents">Contents</label>

  113.                         <textarea class="form-control" rows="10" id="card_contents" readonly>

  114. subtitle | Subtitle text

  115. rule

  116. property | Name | Text

  117.                         </textarea>

  118.                     </div>

  119.                 </form>

  120.             </div>

  121.             <div class="col-md-3">

  122.                 <h3>Preview</h3>

  123.             </div>

  124.         </div>

  125.     </div>

  126. </body>

  127. </html>