diff --git a/web_app/js/sif_tools.js b/web_app/js/sif_tools.js
index 9a1dd2f..4c54596 100644
--- a/web_app/js/sif_tools.js
+++ b/web_app/js/sif_tools.js
@@ -346,7 +346,11 @@ function is_same_day(m1, m2)
 function calculate_gems()
 {
     var verbose = $("#gems_verbose").is(':checked');
-    var current_gems = parseInt($("#current_gems").val());
+    var current_gems_text = $("#current_gems").val();
+    var current_gems = 0;
+    if (current_gems_text != "") {
+        current_gems = parseInt(current_gems_text);
+    }
     if (isNaN(current_gems)) {
         alert("Error: invalid number of current gems. Please check your input and try again.");
         return;
@@ -354,7 +358,15 @@ function calculate_gems()
     var mode = $("input[name=gem-mode]:checked").val();
     if (mode === "DATE")  {
         var target_date = $("#gem_desired_date").val();
+        if (target_date === "") {
+            alert("Error: invalid date. Please check and try again.");
+            return;
+        }
         var target_date_object = moment(new Date(target_date));
+        if (!target_date_object.isValid())  {
+            alert("Error: invalid date. Please check and try again.");
+            return;
+        }
 
         var now = moment(new Date());
         if (target_date_object.isBefore(now) || is_same_day(now, target_date_object)) {
@@ -384,15 +396,15 @@ function calculate_gems()
             // record verbose output if desired
             if (verbose) {
                 if (is_gem_day(now) && is_bday) {
-                    verboseText += sprintf("%02d/%02d/%04d: free gem as login bonus AND it's %s's birthday! You get 6 gems, which brings you to %d gems.\n", month(now), day(now), year(now), name, gems);
+                    verboseText += sprintf("<b>%02d/%02d/%04d</b><br />Free gem as login bonus AND it's %s's birthday! You get 6 gems, which brings you to %d gems.<br /><br />", month(now), day(now), year(now), name, gems);
                 }
                 
                 if (is_bday && !is_gem_day(now)) {
-                    verboseText += sprintf("%02d/%02d/%04d: it's %s's birthday! You get 5 gems, which brings you to %d gems.\n", month(now), day(now), year(now), name, gems);
+                    verboseText += sprintf("<b>%02d/%02d/%04d</b><br />It's %s's birthday! You get 5 gems, which brings you to %d gems.<br /><br />", month(now), day(now), year(now), name, gems);
                 }
                 
                 if (is_gem_day(now) && !is_bday) {
-                    verboseText = verboseText + sprintf("%02d/%02d/%04d: free gem as login bonus, which brings you to %d gems.\n", month(now), day(now), year(now), gems);
+                    verboseText = verboseText + sprintf("<b>%02d/%02d/%04d</b><br />Free gem as login bonus, which brings you to %d gems.<br /><br />", month(now), day(now), year(now), gems);
                 }
             }
 
@@ -402,10 +414,10 @@ function calculate_gems()
         resultsString = resultsString + sprintf("<br />You will have %d love gems on %02d/%02d/%04d. Good things come to those who wait!", gems, month(target_date_object), day(target_date_object), year(target_date_object));
         $("#gem-result-summary").html(resultsString);
         if (verbose) {
-            $("#gem-result-verbose-area").val(verboseText);
+            $("#gem-result-verbose-area").html(verboseText);
             $("#gem-result-textarea").show();
         } else {
-            $("#gem-result-verbose-area").val(verboseText);
+            $("#gem-result-verbose-area").html(verboseText);
             $("#gem-result-textarea").hide();
         }
     } else if (mode === "GEMS")  {
@@ -440,15 +452,15 @@ function calculate_gems()
             // record verbose output if desired
             if (verbose) {
                 if (is_gem_day(now) && is_bday) {
-                    verboseText += sprintf("%02d/%02d/%04d: free gem as login bonus AND it's %s's birthday! You get 6 gems, which brings you to %d gems.\n", month(now), day(now), year(now), name, gems);
+                    verboseText += sprintf("<b>%02d/%02d/%04d</b><br />Free gem as login bonus AND it's %s's birthday! You get 6 gems, which brings you to %d gems.<br /><br />", month(now), day(now), year(now), name, gems);
                 }
                 
                 if (is_bday && !is_gem_day(now)) {
-                    verboseText += sprintf("%02d/%02d/%04d: it's %s's birthday! You get 5 gems, which brings you to %d gems.\n", month(now), day(now), year(now), name, gems);
+                    verboseText += sprintf("<b>%02d/%02d/%04d</b><br />It's %s's birthday! You get 5 gems, which brings you to %d gems.<br /><br />", month(now), day(now), year(now), name, gems);
                 }
                 
                 if (is_gem_day(now) && !is_bday) {
-                    verboseText = verboseText + sprintf("%02d/%02d/%04d: free gem as login bonus, which brings you to %d gems.\n", month(now), day(now), year(now), gems);
+                    verboseText = verboseText + sprintf("<b>%02d/%02d/%04d</b><br />Free gem as login bonus, which brings you to %d gems.<br /><br />", month(now), day(now), year(now), gems);
                 }
             }
         }
@@ -457,10 +469,10 @@ function calculate_gems()
         
         $("#gem-result-summary").html(resultsString);
         if (verbose) {
-            $("#gem-result-verbose-area").val(verboseText);
+            $("#gem-result-verbose-area").html(verboseText);
             $("#gem-result-textarea").show();
         } else {
-            $("#gem-result-verbose-area").val(verboseText);
+            $("#gem-result-verbose-area").html(verboseText);
             $("#gem-result-textarea").hide();
         }
     }
diff --git a/web_app/sif_tools.html b/web_app/sif_tools.html
index 59e9f43..22efb81 100644
--- a/web_app/sif_tools.html
+++ b/web_app/sif_tools.html
@@ -4,7 +4,7 @@
   <link rel="apple-touch-icon" href="apple-touch-icon.png" />
   <meta name="viewport" content="width=320, initial-scale=1, user-scalable=no">
   <meta charset="utf-8">
-  <title>SIFTools</title>
+  <title>SIF Tools</title>
   <link href="css/external/jquery-ui.css" rel="stylesheet">
   <link href="css/external/jquery-ui-timepicker-addon.css" rel="stylesheet">
   <link href="css/sif-tools.css" rel="stylesheet">
@@ -17,133 +17,133 @@
   <script src="js/external/twitterFetcher.js"></script>
   <script src="js/sif_tools.js"></script>
 </head>
+
 <body>
-
-  <div id="header" align="center">
-    <h1>SIF Tools</h1>
-  </div>
-
-  <div id="tabs">
-    <ul>
-      <li><a href="#tab-rank">Rank Calc</a></li>
-      <li><a href="#tab-love-gem">Love Gem Calc</a></li>
-      <li><a href="#tab-card-level">Card Level-up Calc</a></li>
-      <li><a href="#tab-event">Event End Calc</a></li>
-    </ul>
-
-    <div id="tab-rank">
-      <div id="the-form" align="center">
-        <h1>Rank Calculator</h1>
-        Current Rank:&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="current_rank" name="current_rank" placeholder="rank" value="" />
-        <br />
-        Current EXP (optional):&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="current_exp" name="current_exp" placeholder="exp" value="" />
-        <br />
-        Desired Rank:&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="desired_rank" name="desired_rank" placeholder="rank" value="" />
-        <br />
-        Game Version:&nbsp;&nbsp;&nbsp;
-        <select id="game_version" name="game_version">
-          <option value="EN">EN</option>
-          <option value="JP">JP</option>
-        </select>
-        <br /><br />
-        <div id="button-calculate-rank">Calculate</div>
-        <br /><br />
-        <div id="rank-calc-result-area">
-          <h1>Results</h1>
-          EXP required:&nbsp;&nbsp;&nbsp;<span id="rank-result-exp">-</span><br /><br />
-          You will need to play the following number of songs in order to get this amount of EXP:<br /><br />
-          EASY:&nbsp;&nbsp;&nbsp;<span id="rank-result-songs-easy">-</span><br />
-          NORMAL:&nbsp;&nbsp;&nbsp;<span id="rank-result-songs-normal">-</span><br />
-          HARD:&nbsp;&nbsp;&nbsp;<span id="rank-result-songs-hard">-</span><br />
-          EXPERT:&nbsp;&nbsp;&nbsp;<span id="rank-result-songs-expert">-</span><br /><br/>
-          At this rank you will have <span id="rank-results-lp">-</span> LP and <span id="rank-results-fp">-</span> friend slots.<br /><br />
-          <div id="button-reset-rank">Reset</div>
-        </div>
-      </div>
+    <div id="header" align="center">
+        <h1>SIF Tools</h1>
     </div>
-    <div id="tab-love-gem">
-      <div id="love-gem-form" align="center">
-        Current Love Gems:&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="current_gems" name="current_gems" placeholder="gems" value="" />
-        <br /><br />
-        Mode:<br />
-        <input type="radio" name="gem-mode" id="gem-mode" value="DATE" checked />Number of gems on date?<br />
-        <input type="radio" name="gem-mode" id="gem-mode" value="GEMS" />Date you will have this many gems?<br /><br />
-        <div id="gem-date-area">
-        Date:&nbsp;&nbsp;&nbsp;<input type="text" size="10" id="gem_desired_date" name="gem_desired_date" placeholder="MM/DD/YYYY" value="" />
-        </div>
-        <div id="gem-desired-gems-area">
-        Number of gems desired:&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="gem_desired_gems" name="gem_desired_gems" placeholder="gems" value="" />
-        </div>
-        <br /><br />
-          <input type="checkbox" name="gems_verbose" id="gems_verbose" value="YES" />Verbose Mode<br />
-        <br /><br />
-        <div id="button-calculate-gems">Calculate</div>
-        <br /><br />
-        <div id="gem-calc-result-area">
-          <h1>Results</h1>
-          <span id="gem-result-summary">-</span><br /><br />
-          <div id="gem-result-textarea">
-          <textarea id="gem-result-verbose-area" rows="10" cols="80"></textarea><br /><br />
+
+    <div id="tabs">
+        <ul>
+            <li><a href="#tab-rank">Rank Calc</a></li>
+            <li><a href="#tab-love-gem">Love Gem Calc</a></li>
+            <li><a href="#tab-card-level">Card Level-up Calc</a></li>
+            <li><a href="#tab-event">Event End Calc</a></li>
+        </ul>
+
+        <div id="tab-rank">
+            <div id="the-form" align="center">
+                <h1>Rank Calculator</h1>
+                Current Rank:&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="current_rank" name="current_rank" placeholder="rank" value="" />
+                <br />
+                Current EXP (optional):&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="current_exp" name="current_exp" placeholder="exp" value="" />
+                <br />
+                Desired Rank:&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="desired_rank" name="desired_rank" placeholder="rank" value="" />
+                <br />
+                Game Version:&nbsp;&nbsp;&nbsp;
+                <select id="game_version" name="game_version">
+                  <option value="EN">EN</option>
+                  <option value="JP">JP</option>
+              </select>
+              <br /><br />
+              <div id="button-calculate-rank">Calculate</div>
+              <br /><br />
+              <div id="rank-calc-result-area">
+                  <h1>Results</h1>
+                  EXP required:&nbsp;&nbsp;&nbsp;<span id="rank-result-exp">-</span><br /><br />
+                  You will need to play the following number of songs in order to get this amount of EXP:<br /><br />
+                  EASY:&nbsp;&nbsp;&nbsp;<span id="rank-result-songs-easy">-</span><br />
+                  NORMAL:&nbsp;&nbsp;&nbsp;<span id="rank-result-songs-normal">-</span><br />
+                  HARD:&nbsp;&nbsp;&nbsp;<span id="rank-result-songs-hard">-</span><br />
+                  EXPERT:&nbsp;&nbsp;&nbsp;<span id="rank-result-songs-expert">-</span><br /><br/>
+                  At this rank you will have <span id="rank-results-lp">-</span> LP and <span id="rank-results-fp">-</span> friend slots.<br /><br />
+                  <div id="button-reset-rank">Reset</div>
+              </div>
+          </div>
+      </div>
+      <div id="tab-love-gem">
+          <div id="love-gem-form" align="center">
+          Current Love Gems (optional):&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="current_gems" name="current_gems" placeholder="gems" value="" />
+            <br /><br />
+            Mode:<br />
+            <input type="radio" name="gem-mode" id="gem-mode" value="DATE" checked />Number of gems on date?<br />
+            <input type="radio" name="gem-mode" id="gem-mode" value="GEMS" />Date you will have this many gems?<br /><br />
+            <div id="gem-date-area">
+                Date:&nbsp;&nbsp;&nbsp;<input type="text" size="10" id="gem_desired_date" name="gem_desired_date" readonly="true" placeholder="MM/DD/YYYY" value="" />
+            </div>
+            <div id="gem-desired-gems-area">
+                Number of gems desired:&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="gem_desired_gems" name="gem_desired_gems" placeholder="gems" value="" />
+            </div>
+            <br /><br />
+            <input type="checkbox" name="gems_verbose" id="gems_verbose" value="YES" />Verbose Mode<br />
+            <br /><br />
+            <div id="button-calculate-gems">Calculate</div>
+            <br /><br />
+            <div id="gem-calc-result-area">
+              <h1>Results</h1>
+              <span id="gem-result-summary">-</span><br /><br />
+              <div id="gem-result-verbose-area">
+              <div id="gem-result-textarea">-</div>
+              </div>
           </div>
           <div id="button-reset-gems">Reset</div>
-        </div>
       </div>
-    </div>
+  </div>
 
-    <div id="tab-card-level">
-      <div id="love-gem-form" align="center">
-        Card Rarity:&nbsp;&nbsp;&nbsp;
-        <select id="card_rarity" name="card_rarity">
-          <option value="N">N</option>
-          <option value="R">R</option>
-          <option value="SR">SR</option>
-          <option value="UR">UR</option>
-        </select>
-        <br />
-        Current Level:&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="card_current_level" name="card_current_level" placeholder="level" value="" />
-        <br />
-        Current EXP (optional):&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="card_current_exp" name="card_current_exp" placeholder="exp" value="" />
-        <br /><br />
-        Mode:<br />
-        <input type="radio" name="card-mode" id="card-mode" value="LEVEL" checked />EXP needed to get to a level?<br />
-        <input type="radio" name="card-mode" id="card-mode" value="EXP" />Level reached after feeding EXP?<br /><br />
-        <div id="card-level-area">
-        Desired level:&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="card_desired_level" name="card_desired_level" placeholder="level" value="" />
-        </div>
-        <div id="card-exp-area">
-        EXP:&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="card_feed_exp" name="card_feed_exp" placeholder="exp" value="" />
-        </div>
-        <br /><br />
-        <div id="button-calculate-card">Calculate</div>
-        <br /><br />
-        <div id="card-calc-result-area">
-          <h1>Results</h1>
-          <span id="card-result-summary">-</span><br /><br />
-          <div id="button-reset-card">Reset</div>
-        </div>
-      </div>
-    </div>
+<div id="tab-card-level">
+  <div id="love-gem-form" align="center">
+    Card Rarity:&nbsp;&nbsp;&nbsp;
+    <select id="card_rarity" name="card_rarity">
+      <option value="N">N</option>
+      <option value="R">R</option>
+      <option value="SR">SR</option>
+      <option value="UR">UR</option>
+  </select>
+  <br />
+  Current Level:&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="card_current_level" name="card_current_level" placeholder="level" value="" />
+  <br />
+  Current EXP (optional):&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="card_current_exp" name="card_current_exp" placeholder="exp" value="" />
+  <br /><br />
+  Mode:<br />
+  <input type="radio" name="card-mode" id="card-mode" value="LEVEL" checked />EXP needed to get to a level?<br />
+  <input type="radio" name="card-mode" id="card-mode" value="EXP" />Level reached after feeding EXP?<br /><br />
+  <div id="card-level-area">
+    Desired level:&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="card_desired_level" name="card_desired_level" placeholder="level" value="" />
+</div>
+<div id="card-exp-area">
+    EXP:&nbsp;&nbsp;&nbsp;<input type="text" pattern="\d*" size="5" id="card_feed_exp" name="card_feed_exp" placeholder="exp" value="" />
+</div>
+<br /><br />
+<div id="button-calculate-card">Calculate</div>
+<br /><br />
+<div id="card-calc-result-area">
+  <h1>Results</h1>
+  <span id="card-result-summary">-</span><br /><br />
+  <div id="button-reset-card">Reset</div>
+</div>
+</div>
+</div>
 
-    <div id="tab-event">
-      <div id="event-timer-form" align="center">
+<div id="tab-event">
+  <div id="event-timer-form" align="center">
       <h3>Enter Event End Date/Time (in UTC):</h3><br />
-      <input type="text" size="10" id="event_end_date" name="event_end_date" placeholder="MM/DD/YYYY" value="" />
-      <input type="text" size="5" id="event_end_time" name="event_end_time" placeholder="HH:MM" value="" />
+      <input type="text" size="10" id="event_end_date" name="event_end_date" readonly="true" placeholder="MM/DD/YYYY" value="" />
+      <input type="text" size="5" id="event_end_time" name="event_end_time" readonly="true" placeholder="HH:MM" value="" />
       <br /><br />
       <div id="button-start-stop-timer">Start Timer</div>
       <div id="timer_output_area" align="center">
         <h1>Timer Not Running</h1>
-      </div>
-      <div id="tier_info_output_area" align="center">
-      </div>
-      <div id="button-clear-timer">Clear Timer</div>
     </div>
+    <div id="tier_info_output_area" align="center">
+    </div>
+    <div id="button-clear-timer">Clear Timer</div>
+</div>
 
-    <div id="error-dialog" title="Error">
-      <p><span id="error-text" /></p>
-      </div>
-    </div>
-  </div>
+<div id="error-dialog" title="Error">
+  <p><span id="error-text" /></p>
+</div>
+</div>
+</div>
 
 </body>
 </html>
\ No newline at end of file