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.
17 Révisions
1 Branche
Aborescence: ed51f20302
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de 'ed51f20302'
${ noResults }
rpg-cards/generator/generate.html

generate.html 26KB
Historique Brut

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134 
  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_example.js"></script>

  16.     <!-- Javascript -->

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

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

  19.     <!-- CSS -->

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

  21. </head>

  22. <body>

  23.     <div class="container">

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

  25.         <div class="row">

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

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

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

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

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

  31.             </div>

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

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

  34.                 <strong>Warning!</strong>

  35.                 Some RPG systems are protected by copyright.

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

  37.             </div>

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

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

  40.                 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>.

  41.             </div>

  42.         </div>

  43.         <div class="row">

  44.             <div class="col-md-4">

  45.                 <h3>Menu</h3>

  46.                 <form role="form">

  47.                     <span class="help-block" id="total_card_count">Deck contains 0 cards.</span>

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

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

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

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

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

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

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

  55.                 </form>

  56.             </div>

  57.             <div class="col-md-4">

  58.                 <h3>Global options</h3>

  59.                 <form role="form">

  60.                     <div class="checkbox">

  61.                         <label>

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

  63.                         </label>

  64.                     </div>

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

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

  67.                         <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>

  68.                         <script>

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

  70.                         </script>

  71.                     </div>

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

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

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

  75.                     </div>

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

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

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

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

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

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

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

  83.                         </select>

  84.                     </div>

  85.                 </form>

  86.             </div>

  87.             <div class="col-md-4">

  88.                 <h3>Card list</h3>

  89.                 <form role="form">

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

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

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

  93.                     </div>

  94.                     <button type="button" class="btn btn-primary btn-block" id="button-delete-card">Delete selected card</button>

  95.                     <button type="button" class="btn btn-primary btn-block" id="button-add-card">Add new card</button>

  96.                 </form>

  97.             </div>

  98.         </div>

  99.         <div class="row">

  100.             <div class="col-md-8">

  101.                 <h3>Card</h3>

  102.                 <form role="form">

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

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

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

  106.                     </div>

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

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

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

  110.                     </div>

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

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

  113.                         <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>

  114.                         <script>

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

  116.                         </script>

  117.                     </div>

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

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

  120.                         <textarea class="form-control" rows="10" id="card_contents" readonly wrap="off">

  121. subtitle | Subtitle text

  122. rule

  123. property | Name | Text

  124.                         </textarea>

  125.                     </div>

  126.                 </form>

  127.             </div>

  128.             <div class="col-md-4">

  129.                 <h3>Preview</h3>

  130.             </div>

  131.         </div>

  132.     </div>

  133. </body>

  134. </html>