Proper setting for the page background color

generator/generate.html

@@ -82,12 +82,12 @@
                             <button type="button" class="btn btn-success btn-block" id="button-generate">Generate</button>
                         </div>
                     </div>
-                    <span class="help-block">Generated cards open in a new tab or window.</span>
+                    <!--<span class="help-block">Generated cards open in a new tab or window.</span>-->
                 </form>
-                <h3>Sizes</h3>
+                <h3>Page settings</h3>
                 <form role="form" class="form-horizontal">
                     <div class="form-group">
-                        <label for="page-size" class="col-sm-4 control-label">Page</label>
+                        <label for="page-size" class="col-sm-4 control-label">Page Size</label>
                         <div class="col-sm-8">
                             <select class="form-control" id="page-size" data-option="page_size">
                                 <option value="A4" selected>A4</option>
@@ -97,7 +97,7 @@
                         </div>
                     </div>
                     <div class="form-group">
-                        <label for="card-size" class="col-sm-4 control-label">Card</label>
+                        <label for="card-size" class="col-sm-4 control-label">Card Size</label>
                         <div class="col-sm-8">
                             <select class="form-control" id="card-size" data-option="card_size">
                                 <option value="225x35">2.25&quot; x 3.5&quot; (Bridge)</option>
@@ -129,6 +129,24 @@
                             </select>
                         </div>
                     </div>
+                    <div class="form-group">
+                        <label for="foreground-color" class="col-sm-4 control-label">Front color</label>
+                        <div class="col-sm-8">
+                            <div class="input-group">
+                                <select id="foreground_color_selector" class="colorselector-data"></select>
+                                <input type="text" id="foreground-color" class="form-control" placeholder="Front page color" data-property="color" value="white">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="background-color" class="col-sm-4 control-label">Back color</label>
+                        <div class="col-sm-8">
+                            <div class="input-group">
+                                <select id="background_color_selector" class="colorselector-data"></select>
+                                <input type="text" id="background-color" class="form-control" placeholder="Back page color" data-property="color" value="white">
+                            </div>
+                        </div>
+                    </div>
                 </form>
                 <h3>Default values</h3>
                 <form role="form" class="form-horizontal">

generator/js/cards.js

@@ -3,6 +3,8 @@
 // ============================================================================
 function card_default_options() {
     return {
+        foreground_color: "white",
+        background_color: "white",
         default_color: "black",
         default_icon: "ace",
         default_title_size: "13",
@@ -301,7 +303,9 @@ function card_pages_wrap(pages, options) {
     for (var i = 0; i < pages.length; ++i) {
         var style = "";
         if ((options.card_arrangement == "doublesided") &&  (i % 2 == 1)) {
-            style += 'style="background-color:'+options.default_color+'"';
+            style += 'style="background-color:' + options.background_color + '"';
+        } else {
+            style += 'style="background-color:' + options.foreground_color + '"';
         }
         result += '<page class="page page-preview" size="' + size + '" ' + style + '>\n';
         result += pages[i].join("\n");

generator/js/ui.js

@@ -209,6 +209,18 @@ function ui_setup_color_selector() {
             ui_set_card_color(value);
         }
     });
+    $('#foreground_color_selector').colorselector({
+        callback: function (value, color, title) {
+            $("#foreground-color").val(title);
+            ui_set_foreground_color(value);
+        }
+    });
+    $('#background_color_selector').colorselector({
+        callback: function (value, color, title) {
+            $("#background-color").val(title);
+            ui_set_background_color(value);
+        }
+    });
 
     // Styling
     $(".dropdown-colorselector").addClass("input-group-addon color-input-addon");
@@ -219,6 +231,14 @@ function ui_set_default_color(color) {
     ui_render_selected_card();
 }
 
+function ui_set_foreground_color(color) {
+    card_options.foreground_color = color;
+}
+
+function ui_set_background_color(color) {
+    card_options.background_color = color;
+}
+
 function ui_change_option() {
     var property = $(this).attr("data-option");
     var value = $(this).val();
@@ -390,6 +410,7 @@ $(document).ready(function () {
     $("#page-columns").change(ui_change_option);
     $("#card-arrangement").change(ui_change_option);
     $("#card-size").change(ui_change_option);
+    $("#background-color").change(ui_change_option);
 
     $("#default-color").change(ui_change_default_color);
     $("#default-icon").change(ui_change_default_icon);