CocoCAD/blockscad/bsPage.js

/*
    Copyright (C) 2014-2015  H3XL, Inc

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

// This file holds the html for the main page
var blockscadpage = {};
blockscadpage.start = function() {
  var output = "";
output += '  <div id="main">\n';
output += '    <nav class="navbar" id="top-navigation-bar">\n';
output += '      <div class="container-fluid">\n';
output += '      <div class="navbar-center">\n';
output += '        <a href="#" class="hoverStyle pull-left mar-top5">COCOCAD</a>\n';

output += '        <div class="project-name-wrapper">';
output += '             <input type="text" id="project-name" class="project-name-input" placeholder="Project name" maxlength="28" style="min-width: 120px;">'
output += '             <i class="material-icons mdl-color-text--white pro-name-edit" style="font-size: 30px">create</i>';
output += '        </div>';
output += '        <ul class="nav navbar-nav">\n';
// output += '          <li class="dropdown vc">\n';
// output += '          <select id="languageMenu"></select>\n';
// output += '          </li>\n';
// output += '          <li><a " href="https://youtu.be/5RNKVn7lijM" target="_blank"> <img src="imgs/youtube_logo.png" alt="Youtube" width="100" height="50"></a></li>\n';
output += '          <li class="dropdown">\n';
output += '            <a href="#" class="first-link dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i id="global" class="material-icons mdl-color-text--white">language</i></a>\n';
output += '            <ul id="languageMenu" class="dropdown-menu" role="menu">\n';
output += '            </ul>\n';
output += '          </li>\n';


output += '          <li class="dropdown"> \n';
output += '            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">'+Blockscad.Msg.PROJECT_MENU+'</a>\n';
output += '            <ul id="file-menu" class="dropdown-menu" role="menu">\n';
output += '              <li><a href="#" class="new-project">'+Blockscad.Msg.NEW+'</a></li>\n';
output += '              <li class="divider"></li>\n';
output += '              <li><a href="#" id="saveLocal">'+Blockscad.Msg.SAVE_BLOCKS_LOCAL+'</a></li>\n';
output += '              <li>\n';
output += '                <input type="file" accept=".xml" id="loadLocal" style="visibility: hidden; width: 1px; height: 1px" />\n';
output += '                <a href="#" onclick="document.getElementById(\'loadLocal\').click(); return false">'+Blockscad.Msg.LOAD_BLOCKS_LOCAL+'</a>\n';
output += '              </li>\n';
output += '              <li class="divider"></li>\n';
output += '              <li>\n';
output += '                <input type="file" accept=".xml" id="importLocal" style="visibility: hidden; width: 1px; height: 1px" />\n';
output += '                <a href="#" onclick="document.getElementById(\'importLocal\').click(); return false">'+Blockscad.Msg.IMPORT_BLOCKS_LOCAL+'</a>\n';
output += '              </li>\n';
output += '              <li>\n';
output += '                <input type="file" accept=".stl" id="importStl" style="visibility: hidden; width: 1px; height: 1px" />\n';
output += '                <a href="#" onclick="document.getElementById(\'importStl\').click(); return false">'+Blockscad.Msg.IMPORT_STL_MENU +'</a>\n';
output += '              </li>\n';
output += '              <li class="divider"></li>\n';
output += '              <li><a href="#" id="saveOpenscad">' + Blockscad.Msg.SAVE_SCAD_LOCAL + '</a></li>\n';
output += '            </ul>\n';
output += '          </li>\n';
output += '          <li class="dropdown">\n';
output += '            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">' + Blockscad.Msg.OPTIONS_MENU + '</a>\n';
output += '            <ul id="options-menu" class="dropdown-menu" role="menu">\n';
output += '              <li><a href="#" id="simpleToolbox">' + Blockscad.Msg.SIMPLE_TOOLBOX + '</a></li>\n';
output += '              <li><a href="#" id="advancedToolbox">' + Blockscad.Msg.ADVANCED_TOOLBOX + '</a></li>\n';
output += '              <li>\n';
output += '                <a class="trigger right-caret">' + Blockscad.Msg.BLOCK_COLORS + '</a>\n';
output += '                <ul class="dropdown-menu sub-menu">\n';
output += '                  <li><a href="#" id="colors_one">' + Blockscad.Msg.CLASSIC_COLORS + '</a></li>\n';
output += '                  <li><a href="#" id="colors_two">' + Blockscad.Msg.PALE_COLORS + '</a></li>\n';
output += '                </ul>\n';
output += '              </li>\n';
output += '            </ul>\n';
output += '          </li>\n';
output += '          <li class="dropdown">\n';
output += '            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">' + Blockscad.Msg.EXAMPLES_MENU + '</a>\n';
output += '            <ul id="examples-menu" class="dropdown-menu" role="menu">\n';
output += '              <li><a href="#" id="examples_cube_with_cutouts">' + Blockscad.Msg.EXAMPLE_CUBE_WITH_CUTOUTS + '</a></li>\n';
output += '              <li><a href="#" id="examples_anthias_fish">' + Blockscad.Msg.EXAMPLE_ANTHIAS_FISH +'</a></li>\n';
output += '              <li><a href="#" id="examples_torus">' + Blockscad.Msg.TORUS + '</a></li>\n';
output += '              <li><a href="#" id="examples_box">' + Blockscad.Msg.EXAMPLE_PARAMETRIC_BOX + '</a></li>\n';
output += '              <li><a href="#" id="examples_linear_extrude">' + Blockscad.Msg.LINEAR_EXTRUDE + '</a></li>\n';
output += '              <li><a href="#" id="examples_rotate_extrude">' + Blockscad.Msg.ROTATE_EXTRUDE + '</a></li>\n';
output += '              <li><a href="#" id="examples_hulled_loop_sun">' + Blockscad.Msg.EXAMPLE_LOOP_SUN + '</a></li>\n';
output += '              <li><a href="#" id="examples_sine_function_with_loop">' + Blockscad.Msg.EXAMPLE_LOOP_SINE + '</a></li>\n';
output += '              <li><a href="#" id="examples_trefoil_knot_param_eq">' + Blockscad.Msg.EXAMPLE_PARAMETRIC_EQ_KNOT + '</a></li>\n';
output += '            </ul>\n';
output += '          </li>\n';
output += '          <li class="dropdown">\n';
output += '            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">' + Blockscad.Msg.HELP_MENU + '</a>\n';
output += '            <ul id="help-menu" class="dropdown-menu" role="menu">\n';
// output += '              <li><a href="docs/" target="_blank">' + Blockscad.Msg.DOCUMENTATION_LINK + '</a></li>\n';
// output += '<!--               <li class="divider"></li>\n';
// output += '              <li><a href="#" id="colorPicker">Color Picker</a></li> -->\n';
// output += '              <li class="divider"></li>\n';
output += '              <li><a href="#" data-toggle="modal" data-target="#about-modal">' + Blockscad.Msg.ABOUT_LINK + '</a></li>\n';
output += '            </ul>\n';
output += '          </li>\n';
// output += '          <li class="button">\n';
// output += '             <a type="button" class="btn btn-default btn-lg" style="margin-top:2px" href="https://youtu.be/5RNKVn7lijM" target="_blank">'+ Blockscad.Msg.GET_STARTED_VIDEO + '</a>';
// output += '          </li>\n';

/* I CHANGED */
/* Changed image from youtube to play.png. Replace the old one directly. Find the image from the imgs folder. */
output += '             <a href="https://youtu.be/5RNKVn7lijM" target="_blank"> <img id="playButton" src="imgs/play.png" alt="Youtube Vedio" width="45" height="30"></a>';
/* I CHANGED */

output += '        </ul>\n';
output += '        <div id="login-area" class="navbar-right">\n';
output += '        </div>\n';
output += '      </div>  <!-- /.navbar-center-->\n';
output += '      </div>  <!-- /.container-fluid -->\n';
output += '    </nav>\n';
// output += '    <!-- after the navbar, I want a second row to contain the project name (if any), -->\n';
// output += '    <!-- undo/redo/discard_all, and the "Blocks/Code" tabs.  Use a div for this. -->\n';
output += '    <div id="editView">\n';

output += '      <a href="#blocklyContainer" data-toggle="pill" id="displayBlocks">' + Blockscad.Msg.BLOCKS_TAB + '</a>\n';
output += '      <a href="#openScadPre" data-toggle="pill" id="displayCode">' + Blockscad.Msg.CODE_TAB + '</a>\n';


output += '      <button type="button" class="btn btn-default mdl-button mdl-js-ripple-effect mdl-js-button mdl-button--fab mdl-color--orange" id="undoButton" style="margin-right: -5px">\n';
output += '         <i class="material-icons mdl-color-text--white" style="font-size: 24px">undo</i>\n';
output += '      </button>\n';
output += '      <button type="button" class="btn btn-default btn btn-default mdl-button mdl-js-ripple-effect mdl-js-button mdl-button--fab mdl-color--orange" id="redoButton" style="margin-right: 20px">\n';
output += '         <i class="material-icons mdl-color-text--white" style="font-size: 24px">redo</i>\n';
output += '      </button>\n';
output += '      <button id="trashButton" class="btn btn-default notext mdl-button mdl-js-ripple-effect mdl-js-button mdl-button--fab mdl-color--red-700" title="' + Blockscad.Msg.MOUSEOVER_TRASHCAN + '">\n';
output += '         <i class="material-icons mdl-color-text--white" style="font-size: 24px">delete</i>\n';
output += '      </button>\n';

output += '      <!-- End of the header content -->\n';
output += '\n';
output += '      <!-- beginning of page content (blockly + viewer) -->\n';
output += '      <div class="tab-content">\n';
output += '        <div class="tab-pane active" id="blocklyContainer">\n';


output += '          <div id="blocklyDiv">\n';
output += '\n';
output += '            <div class="resizableDiv">\n';
output += '              <div id="renderDiv">\n';
// output += '                <input type="text" id="defColor"/>\n';

// output += '                <button type="button" id="viewReset" class="vreset">' + Blockscad.Msg.RESET_VIEW_BUTTON;
// output += '                </button>\n';
// output += '<!--';
// output += '                 <button type="button" id="picButton" class="btn btn-default btn-pushed">';
// output += '                  Pic';
// output += '                </button>\n';
// output += '                <button type="button" id="rPicButton" class="btn btn-default btn-pushed">';
// output += '                  Rotating Pic';
// output += '                </button> \n';
// output += '-->';

// output += '                <button type="button" id="axesButton" class="btn btn-default btn-pushed">\n';
// output += '                  <img src="imgs/axes.png">\n';
// output += '                </button>\n';



// output += '\n';
// output += '\n';
output += '                <!-- <input type="text" id="colorButton"/> -->\n';
// output += '\n';
output += '              </div> <!--renderDiv -->\n';
// output += '\n';
output += '              <div id="paneContainer">\n';


output += '                 <div>\n';
output += '                  <button type="button" class="btn btn-default btn-lg changeable mdl-button mdl-js-ripple-effect mdl-js-button mdl-button--fab mdl-color--green" id="renderButton"><i class="material-icons mdl-color-text--white" style="font-size: 30px;transform: translate(-15px,-12px);">play_arrow</i></button>\n';
output += '                  <button type="button" class="btn btn-default btn-lg btn-danger " id="abortButton">' + Blockscad.Msg.ABORT_BUTTON + '</button>\n';
output += '                 </div>\n';
output += '                <div class="paneButtonWrapper">\n';
output += '                   <div id="viewerButtons">\n';

output += '                  <div class="btn-group">\n';
// output += '                    <button id="colorButton" type="button" title="' + Blockscad.Msg.DEFAULT_COLOR_BUTTON + '" class="btn vbut btn-default">\n';
output += '                    <input type="text" id="defColor"/>\n';
// output += '                    </button>\n';
output += '                  </div>\n';

output += '                  <div class="btn-group">\n';
output += '                    <button id="axesButton" type="button" title="' + Blockscad.Msg.AXES_BUTTON + '" class="btn vbut btn-default flat-butt">\n';
output += '                      <svg viewbox="0 0 26 26">\n';
output += '                           <path style="stroke:#777;stroke-width:1.6;fill:none" d="m9 0.5v15h15"/>\n';
output += '                           <path style="stroke:#777;stroke-width:1.6;fill:none" d="m9 15-9 9"/>\n';
output += '                      </svg>\n';
output += '                    </button>\n';
output += '                  </div>\n';

output += '                  <div class="btn-group">\n';
output += '                    <button id="zInButton" type="button" title="' + Blockscad.Msg.ZOOM_IN_BUTTON + '" class="btn vbut btn-default">\n';
output += '                        <i class="material-icons mdl-color-text--grey-600" style="font-size: 30px">zoom_in</i>'
// output += '                     <svg viewbox="0 0 30 30">\n';
// output += '                      <circle r="14" style="stroke:#777;stroke-width:1.6;fill:none" cx="15" cy="15"/>\n';
// output += '                      <path style="stroke:#555;stroke-width:1.6;fill:none" d="m15 8v14"/>\n';
// output += '                      <path style="stroke:#555;stroke-width:1.6;fill:none" d="m8 15h14"/>\n';
// output += '                     </svg>\n';
output += '                    </button>\n';
output += '                    <button id="zOutButton" type="button" title="' + Blockscad.Msg.ZOOM_OUT_BUTTON + '" class="btn vbut btn-default">\n';
output += '                        <i class="material-icons mdl-color-text--grey-600" style="font-size: 30px">zoom_out</i>'
// output += '                     <svg viewbox="0 0 30 30">\n';
// output += '                      <circle r="14" style="stroke:#777;stroke-width:1.6;fill:none" cx="15" cy="15"/>\n';
// output += '                      <path style="stroke:#555;stroke-width:1.6;fill:none" d="m8 15h14"/>\n';
// output += '                     </svg>\n';
output += '                    </button>\n';
output += '                  </div>\n';
output += '                  <div class="btn-group">\n';
output += '                    <button id="zResetButton" type="button" title="' + Blockscad.Msg.ZOOM_RESET_BUTTON + '" class="btn vbut btn-default">\n';
output += '                     <svg viewbox="0 0 30 30">\n';
output += '                       <circle r="11" style="fill:none;stroke:#777;stroke-width:1.6" cx="15" cy="15"/>\n';
output += '                       <path d="M 15,4 15,0" style="stroke:#666;stroke-width:1.6;" />\n';
output += '                       <path d="m 26,15 4,0" style="stroke:#666;stroke-width:1.6;" />\n';
output += '                       <path d="m 15,26 0,4" style="stroke:#666;stroke-width:1.6;" />\n';
output += '                       <path d="M 4,15 0,15" style="stroke:#666;stroke-width:1.6;" />\n';
output += '                       <circle r="3" cy="15" cx="15" style="fill:#777;stroke:#777;stroke-width:1.6;" />\n';
output += '                     </svg>\n';
output += '                    </button>\n';
output += '                     <select id="viewMenu" class="btn btn-default">\n';
output += '                          <option value="diagonal">' + Blockscad.Msg.DIRECTION_DIAGONAL + '</option>\n';
output += '                         <option value="front">' + Blockscad.Msg.DIRECTION_FRONT + '</option>\n';
output += '                         <option value="top">' + Blockscad.Msg.DIRECTION_TOP + '</option>\n';
output += '                         <option value="right">' + Blockscad.Msg.DIRECTION_RIGHT + '</option>\n';
output += '                         <option value="left">' + Blockscad.Msg.DIRECTION_LEFT + '</option>\n';
output += '                         <option value="back">' + Blockscad.Msg.DIRECTION_BACK + '</option>\n';
output += '                         <option value="bottom">' + Blockscad.Msg.DIRECTION_BOTTOM + '</option>\n';
output += '                     </select>\n';
output += '                  </div>\n';
output += '                  <button type="button" id="cameraButton" class="btn vbut btn-default">\n';
output += '                     <i class="material-icons mdl-color-text--grey-600" style="font-size: 30px">camera_alt</i>\n';
output += '                  </button>\n';
output += '                </div>\n';   // end of viewerButtons div




output += '                <div id="viewerDefaults">\n';

// output += '                  <div class="btn-group">\n';
// output += '                    <button id="colorButton" type="button" title="' + Blockscad.Msg.DEFAULT_COLOR_BUTTON + '" class="btn vbut btn-default">\n';
// output += '                    <input type="text" id="defColor"/>\n';
// output += '                    </button>\n';
// output += '                  </div>\n';
// output += '                 <span id="resolution_radio" class="btn btn-default"> \n';
output += '                 <span id="resolution_radio"> \n';
output += '                  <span>Smooth:&nbsp&nbsp</span>\n';
output += '                 <label class="radio-inline mdl-radio mdl-js-radio mdl-js-ripple-effect"><input class="mdl-radio__button" type="radio" name="resolution" value="0.4"><span class="mdl-radio__label">Low</span></label>\n';
output += '                 <label class="radio-inline mdl-radio mdl-js-radio mdl-js-ripple-effect"><input class="mdl-radio__button" type="radio" name="resolution" value="1"checked><span class="mdl-radio__label">Medium</span></label>\n';
output += '                 <label class="radio-inline mdl-radio mdl-js-radio mdl-js-ripple-effect"><input class="mdl-radio__button" type="radio" name="resolution" value="2.25"><span class="mdl-radio__label">High</span></label>\n';
output += '                 </span>\n';

output += '                </div>\n';   // end of viewerDefaults div


output += '                <div id="renderPane">\n';
// output += '                  <button type="button" class="btn btn-default btn-lg changeable mdl-button mdl-js-ripple-effect mdl-js-button mdl-button--fab mdl-color--green" id="renderButton"><i class="material-icons mdl-color-text--white" style="font-size: 30px">play_arrow</i></button>\n';
// output += '                  <button type="button" class="btn btn-default btn-lg btn-danger " id="abortButton">' + Blockscad.Msg.ABORT_BUTTON + '</button>\n';
output += '                  <div id="stl_buttons" style="padding:5px 5px;border:none;">\n';
output += '                    <select id="render-type" style="padding:2px 4px;border:none;"></select>\n';
output += '                    <button type="button" class="btn btn-default btn-lg changeable" id="stlButton">' + Blockscad.Msg.GENERATE_STL + '</button>\n';
output += '                  </div>\n';
output += '                  <div id="render-ongoing">' + Blockscad.Msg.PARSE_IN_PROGRESS + '  <img id=busy src="imgs/busy2.gif"></div>\n';
output += '                  <div id="error-message"></div>\n';
output += '                </div>\n';
output += '                </div> <!-- paneButtonWrapper -->\n';
output += '              </div> <!-- paneContainer -->\n';
output += '            </div> <!-- resizable div -->\n';


// output += '            </div> <!-- resizable div wrapper -->\n';
// output += '\n';
output += '          </div> <!-- blocklyDiv -->\n';


output += '        </div>\n';
output += '        <!-- Blockly Container (tab pane)-->\n';
output += '        <pre class="tab-pane content" id="openScadPre"></pre>';
// output += '        <pre class="tab-pane content" id="parsePre">';
// this input is only for testing the parser.  For any user-facing work this should be commented out.
// output += '          <textarea id="textToParse" rows="15" cols="60"></textarea>';
// output += '          <div id="parsedText" style="float:right;width:300;height:100">aaaaaaaaaaa</div>';
// output += '          <button type="button" class="btn btn-default btn-lg" id="parseButton">Parse</button>';
// output += '        </pre>\n';
// end parser testing junk.  Also look in blockscad.js for interaction with these elemenets.
output += '      </div>\n';
output += '      <!-- end tab content -->\n';
output += '    </div> <!-- end of the #editView content  -->\n';
// output += '\n';
output += '    <div id="projectView" class="hidden">\n';
// output += '      <!-- first row - a "my projects" label, a "New" button on the right -->\n';
output += '      <div style="width:100%; background-color:#bbbbff;">\n';
output += '        <span class="proj-header">' + Blockscad.Msg.MY_PROJECTS + '</span>\n';
output += '        <button type="button" class="btn btn-default new-project spacey">' + Blockscad.Msg.NEW_PROJECT_BUTTON + '</button>\n';
output += '        <input type="text" class="search noselect" title="Filter" placeholder="' + Blockscad.Msg.PROJECT_LIST_FILTER + '"  id="ptsearch"/>\n';
output += '        <button type="button" class="btn btn-default plist-cancel spacey">' + Blockscad.Msg.PROJECT_LIST_EXIT + '</button>\n';
output += '      </div>\n';
output += '        <table id="projTable" class="table table-striped sortable" style="padding:0px">\n';
output += '          <colgroup>\n';
output += '            <col style="width:80px">\n';
output += '            <col class="col-md-4">\n';
output += '            <col class="col-md-4">\n';
output += '            <!-- this was the column for "is project shared" attribute <col class="col-md-2"> -->\n';
output += '            <col class="col-md-4">\n';
output += '          </colgroup>\n';
output += '          <thead>\n';
// output += '            <!-- <tr> -->\n';
output += '              <th class="sorttable_nosort" style="width:80px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>\n';
output += '              <th class="noselect">' + Blockscad.Msg.PROJECT_NAME + '</th>\n';
output += '              <th class="noselect">' + Blockscad.Msg.PROJECT_LIST_LAST_MODIFIED + '</th>\n';
// output += '              <!-- this is the shared column <th>Shared</th> -->\n';
output += '              <th class="sorttable_nosort"></th>\n';
// output += '         <!--    </tr> -->\n';
output += '          </thead> \n';
output += '          <tbody id="projList">\n';
output += '          </tbody>\n';
output += '        </table>\n';
output += '        <button type="button" id="list-more" class="btn btn-default">' + Blockscad.Msg.PROJECT_LIST_MORE_BUTTON + '</button>\n';
output += '    </div> <!-- end of projectView -->\n';
output += '  </div> <!-- end of main -->\n';
output += '\n';
output += '\n';
// output += '  <!-- html for Popups -->\n';
// output += '  <!-- Popup login -->\n';
output += '  <div id="login-user" class="modal">\n';
output += '    <div class="modal-dialog">\n';
output += '     <div class="modal-md">\n';
output += '      <div class="modal-content">\n';
output += '        <form id="login-form">\n';
output += '          <fieldset>\n';
output += '            <div class="modal-header">\n';
output += '              <a href="#" data-dismiss="modal" class="close">\n';
output += '              </a>\n';
output += '              <h3>' + Blockscad.Msg.LOGIN_BUTTON + '</h3>\n';
output += '            </div>\n';
output += '            <div class="modal-body">\n';
output += '              <div class="form-group"> \n';
output += '                <label class="control-label" for="username">' + Blockscad.Msg.USERNAME_FIELD + '</label>\n';
output += '                <input class="username pull-right" id="login-username" type="text" autocomplete="off" name="username" maxlength="30" />\n';
output += '              </div>\n';
output += '              <div class="form-group"> \n';
output += '                <label class="control-label" for="password">' + Blockscad.Msg.PASSWORD_FIELD + '</label>\n';
output += '                <input type="password" name="password" id="login-password" autocomplete="off" class="password pull-right" maxlength="30"/>\n';
output += '              </div>\n';
output += '            </div>\n';
output += '            <div class="modal-footer">\n';
output += '              <div class="footer-error" id="login-error" style="margin-top:-5px; margin-bottom:12px; "></div>\n';
output += '              <div>\n';
output += '                <button id="logbut" class="button primary" type="submit" style="float: left;">' + Blockscad.Msg.LOGIN_BUTTON + '</button> \n';
output += '                <a href="#" id="forgot-password" style="float: right;">' + Blockscad.Msg.PASSWORD_FORGOT_FIELD + '</a>\n';
output += '              </div>\n';
output += '            </div>\n';
// output += '\n';
output += '          </fieldset>\n';
output += '        </form>\n';
// output += '\n';
output += '      </div><!-- /.modal-content -->\n';
output += '      </div><!-- /.modal-md -->\n';
output += '    </div><!-- /.modal-dialog -->\n';
output += '  </div><!-- /.modal -->\n';
// output += '  <!-- End Login Popup -->\n';
// output += '  <!-- Popup change Password -->\n';
output += '  <div id="change-password-modal" class="modal" data-backdrop="true">\n';
output += '    <div class="modal-dialog">\n';
output += '      <div class="modal-content">\n';
output += '        <form id="password-settings-form" novalidate>\n';
output += '          <fieldset>\n';
output += '            <div class="modal-header">\n';
output += '              <a href="#" data-dismiss="modal" data-target="#password-settings-modal" class="close">x\n';
output += '              </a>\n';
output += '              <h3>' + Blockscad.Msg.CHANGE_PASSWORD + '</h3>\n';
output += '              <span>' + Blockscad.Msg.CHANGE_PASSWORD_INSTRUCTIONS + '</span>\n';
output += '            </div>\n';
output += '            <div class="modal-body">\n';
output += '              <div class="form-group"> \n';
output += '                <label class="control-label mycl" for="password">' + Blockscad.Msg.OLD_PASSWORD + ' :</label>\n';
output += '                <input type="password" id="change-pw-old" name="old-password" autocomplete="off" class="password regform" maxlength="30"/>\n';
output += '                <div class="form-error">\n';
output += '                  <span class="password-error"></span>\n';
output += '                </div>\n';
output += '              </div>\n';
output += '              <div class="form-group"> \n';
output += '                <label class="control-label mycl" for="password">' + Blockscad.Msg.NEW_PASSWORD + ' :</label>\n';
output += '                <input type="password" id="change-pw-new" name="new-password" autocomplete="off" class="password regform" maxlength="30"/>\n';
output += '                <div class="form-error">\n';
output += '                  <span class="password-error"></span>\n';
output += '                </div>\n';
output += '              </div>\n';
output += '              <div class="form-group"> \n';
output += '                <label class="control-label mycl" for="pass2">' + Blockscad.Msg.CONFIRM_NEW_PASSWORD + ' :</label>\n';
output += '                <input type="password" id="change-pw-2" autocomplete="off" class="password regform" maxlength="30"/>\n';
output += '                <div class="form-error">\n';
output += '                  <span class="password-confirm-error"></span>\n';
output += '                </div> \n';
output += '              </div>\n';
output += '              <div class="buttons-right">\n';
output += '                <button class="button primary" type="submit">' + Blockscad.Msg.CHANGE_PASSWORD + '</button> \n';
output += '              </div>\n';
output += '            </div>\n';
output += '            <div class="modal-footer">\n';
output += '            <span class="footer-error" id="pw-error"></span>\n';
output += '            </div>\n';
output += '          </fieldset>\n';
output += '        </form>\n';
// output += '\n';
output += '      </div><!-- /.modal-content -->\n';
output += '    </div><!-- /.modal-dialog -->\n';
output += '  </div><!-- /.modal -->\n';
// output += '  <!-- end change password popup -->\n';
// output += '  <!-- Popup change Email -->\n';
output += '  <div id="change-email-modal" class="modal" data-backdrop="true">\n';
output += '    <div class="modal-dialog">\n';
output += '      <div class="modal-content">\n';
output += '        <form id="email-settings-form" novalidate>\n';
output += '          <fieldset>\n';
output += '            <div class="modal-header">\n';
output += '              <a href="#" data-dismiss="modal" data-target="#email-settings-modal" class="close">x\n';
output += '              </a>\n';
output += '              <h3>' + Blockscad.Msg.CHANGE_EMAIL + '</h3>\n';
output += '            </div>\n';
output += '            <div class="modal-body">\n';
output += '              <p id="current-email">' + Blockscad.Msg.CHANGE_EMAIL_CURRENT + ' :</p>\n';
output += '              <div class="form-group"> \n';
output += '                <label class="control-label mycl" for="email">' + Blockscad.Msg.CHANGE_EMAIL_NEW + ' :</label>\n';
output += '                <input type="text" id="new-email" name="new-email" autocomplete="off" class="email regform" size="30"/>\n';
output += '                <div class="form-error">\n';
output += '                  <span class="email-error"></span>\n';
output += '                </div> \n';
output += '              </div>\n';
output += '              <div class="form-group"> \n';
output += '                <label class="control-label mycl" for="password">' + Blockscad.Msg.PASSWORD_FIELD + ' :</label>\n';
output += '                <input type="password" id="change-email-pw" name="password" autocomplete="off" class="password regform" maxlength="30"/>\n';
output += '              </div> \n';
output += '              <div class="buttons-right">\n';
output += '                <button class="button primary" type="submit">' + Blockscad.Msg.CHANGE_EMAIL + '</button> \n';
output += '              </div>\n';
output += '            </div>\n';
output += '            <div class="modal-footer">\n';
output += '            <span class="footer-error" id="email-pw-error"></span>\n';
output += '            </div>\n';
output += '          </fieldset>\n';
output += '        </form>\n';
// output += '\n';
output += '      </div><!-- /.modal-content -->\n';
output += '    </div><!-- /.modal-dialog -->\n';
output += '  </div><!-- /.modal -->\n';
// output += '  <!-- end change password popup -->\n';
// output += '  <!-- Popup register user -->\n';
output += '  <div id="register-user" class="modal">\n';
output += '    <div class="modal-dialog">\n';
output += '      <div class="modal-content modal-md">\n';
output += '        <form id="register-form">\n';
output += '          <fieldset>\n';
output += '            <div class="modal-header">\n';
output += '              <a href="#" data-dismiss="modal" class="close">x\n';
output += '              </a>\n';
output += '              <h3>' + Blockscad.Msg.REGISTER_NEW_USER + '</h3>\n';
output += '            </div>\n';
output += '            <div class="modal-body">\n';
output += '              <div class="form-group"> \n';
output += '                <label class="control-label mycl" for="username">' + Blockscad.Msg.USERNAME_FIELD + '</label>\n';
output += '                <input class="username regform" id="register-username" type="text" autocomplete="off" name="username" maxlength="30" />\n';
output += '                <div class="form-error">\n';
output += '                  <span id="username-error"></span>\n';
output += '                </div>\n';
output += '              </div>\n';
output += '              <div class="form-group"> \n';
output += '                <label class="control-label mycl" for="password">' + Blockscad.Msg.PASSWORD_FIELD + '</label>\n';
output += '                <input type="password" id="register-password" name="password" autocomplete="off" class="password regform" maxlength="30"/>\n';
output += '                <div class="form-error">\n';
output += '                  <span class="password-error"></span>\n';
output += '                </div>\n';
output += '              </div>\n';
output += '              <div class="form-group"> \n';
output += '                <label class="control-label mycl" for="pass2">' + Blockscad.Msg.PASSWORD_RETYPE_FIELD + '</label>\n';
output += '                <input type="password" id="pass2" autocomplete="off" class="password regform" maxlength="30"/>\n';
output += '                <div class="form-error">\n';
output += '                  <span class="password-confirm-error"></span>\n';
output += '                </div> \n';
output += '              </div>\n';
output += '              <div class="form-group"> \n';
output += '                <label class="control-label mycl" for="email">' + Blockscad.Msg.EMAIL_FIELD + '</label>\n';
output += '                <input type="text" id="register-email" name="email" autocomplete="off" class="email regform"/>\n';
output += '                <div class="form-error">\n';
output += '                  <span class="email-error"></span>\n';
output += '                </div> \n';
output += '              </div>\n';
output += '            </div>\n';
output += '            <div class="modal-footer">\n';
output += '              <span class="error"></span>\n';
output += '              <div class="buttons-right">\n';
output += '                <button class="button primary" type="submit">' + Blockscad.Msg.REGISTER_BUTTON + '</button> \n';
output += '              </div>\n';
output += '            </div>\n';
// output += '\n';
output += '          </fieldset>\n';
output += '        </form>\n';
// output += '\n';
output += '      </div><!-- /.modal-content -->\n';
output += '    </div><!-- /.modal-dialog -->\n';
output += '  </div><!-- /.modal -->\n';
// output += '  <!-- end of registration popup -->\n';
// output += '  <!-- Popup  password recovery-->\n';
output += '  <div id="pw-recover" class="modal">\n';
output += '    <div class="modal-dialog">\n';
output += '      <div class="modal-content modal-md">\n';
output += '        <form id="pw-recover-form" novalidate>\n';
output += '          <fieldset>\n';
output += '            <div class="modal-header">\n';
output += '              <a href="#" data-dismiss="modal" class="close">x\n';
output += '              </a>\n';
output += '              <h3>' + Blockscad.Msg.RESET_PASSWORD + '</h3>\n';
output += '            </div>\n';
output += '            <div class="modal-body">\n';
output += '              <p><b>' + Blockscad.Msg.PASSWORD_FORGOT_FIELD + '</b></p>\n';
output += '              <p>' + Blockscad.Msg.RESET_PASSWORD_INSTRUCTIONS + '</p>\n';
output += '              <div class="form-group"> \n';
output += '                <label class="control-label mycl" for="username">' + Blockscad.Msg.USERNAME_FIELD + '</label>\n';
output += '                <input class="username regform" id="recover-username" type="text" autocomplete="off" name="username" maxlength="30" />\n';
output += '                <div>\n';
output += '                  <span class="email-error" id="un-recover-error" style="color:#b04444;"></span>\n';
output += '                </div>\n';
output += '              </div><p>' + Blockscad.Msg.DIALOG_OR + '</p>\n';
output += '              <div class="form-group"> \n';
output += '                <label class="control-label mycl" for="email">' + Blockscad.Msg.EMAIL_FIELD + '</label>\n';
output += '                <input type="text" id="recover-email" name="email" autocomplete="off" class="email regform"/>\n';
output += '                <div>\n';
output += '                  <span class="email-error" id="em-recover-error" style="color:#b04444;"></span>\n';
output += '                </div> \n';
output += '              </div>\n';
output += '            </div>\n';
output += '            <div class="modal-footer">\n';
output += '              <div class="buttons-right">\n';
output += '                <button class="button primary" type="submit">' + Blockscad.Msg.RESET_PASSWORD_LINK_BUTTON + '</button> \n';
output += '              </div>\n';
output += '            </div>\n';
// output += '\n';
output += '          </fieldset>\n';
output += '        </form>\n';
// output += '\n';
output += '      </div><!-- /.modal-content -->\n';
output += '    </div><!-- /.modal-dialog -->\n';
output += '  </div><!-- /.modal --> <!-- end of password recovery popup -->\n';
// output += '  <!-- password recovery email sent modal -->\n';
output += '  <div id="recover-email-sent" class="modal">\n';
output += '    <div class="modal-dialog modal-sm">\n';
output += '      <div class="modal-content">\n';
output += '        <div class="modal-header">\n';
output += '          <a href="#" data-dismiss="modal" class="close">x\n';
output += '          </a>\n';
output += '          <h3>' + Blockscad.Msg.PASSWORD_RESET_EMAIL_SENT + '</h3>\n';
output += '        </div>\n';
output += '        <div class="modal-body">' + Blockscad.Msg.PASSWORD_RESET_EMAIL_INSTRUCTIONS;
output += '        </div>\n';
output += '      </div>\n';
output += '    </div>\n';
output += '  </div> <!-- end of password recovery email sent modal -->\n';
// output += '  <!--  online delete confirm popup -->\n';
output += '  <div id="online-delete-confirm" class="modal" data-backdrop="false">\n';
output += '    <div class="modal-dialog modal-sm" style="width:400px">\n';
output += '      <div class="modal-content">\n';
output += '        <div class="modal-header">\n';
output += '          <a href="#" data-dismiss="modal" class="close">x\n';
output += '          </a>\n';
output += '          <h4 class="modal-title"></h4>\n';
output += '        </div>\n';
output += '        <div class="modal-footer">\n';
output += '            <button id="toss-it" class="button btn-lg btn-default primary pull-left" style="margin-left:90px" type="button" data-dismiss="modal" data-target="#online-delete-confirm">' + Blockscad.Msg.CONFIRM_DIALOG_YES + '</button> \n';
output += '            <button id="whatthe" class="button btn-default btn-lg primary" style="margin-right:90px" type="button" data-dismiss="modal" data-target="#online-delete-confirm">' + Blockscad.Msg.CONFIRM_DIALOG_NO + '</button> \n';
output += '        </div>\n';
output += '      </div><!-- /.modal-content -->\n';
output += '    </div><!-- /.modal-dialog -->\n';
output += '  </div> <!-- end of online delete-confirm popup -->\n';
// output += '\n';
// // output += '  <!--  delete account confirm popup -->\n';
output += '  <div id="delete-account-confirm" class="modal">\n';
output += '    <div class="modal-dialog modal-sm" style="width:600px">\n';
output += '      <div class="modal-content">\n';
output += '        <div class="modal-header">\n';
output += '          <h4>' + Blockscad.Msg.DELETE_ACCOUNT_CONFIRM + '</h4>\n';
output += '        </div>\n';
output += '        <div class="modal-footer">\n';
output += '            <button id="delete-account-yes" class="button btn-lg btn-default primary pull-left" style="margin-left:10%" type="button" data-dismiss="modal" data-target="#delete-account-confirm">' + Blockscad.Msg.CONFIRM_DIALOG_YES + '</button> \n';
output += '            <button class="button btn-default btn-lg primary" style="margin-right:10%" type="button" data-dismiss="modal" data-target="#delete-account-confirm">' + Blockscad.Msg.CONFIRM_DIALOG_NO + '</button> \n';
output += '        </div>\n';
output += '      </div><!-- /.modal-content -->\n';
output += '    </div><!-- /.modal-dialog -->\n';
output += '  </div>\n';
// output += '  <!-- end of delete-confirm popup -->\n';
// output += '  <!--  delete account popup -->\n';
output += '  <div id="delete-account-modal" class="modal">\n';
output += '    <div class="modal-dialog modal-sm" style="width:600px">\n';
output += '      <div class="modal-content">\n';
output += '        <form id="delete-account-form" novalidate>\n';
output += '          <fieldset>\n';
output += '            <div class="modal-header">\n';
output += '              <a href="#" data-dismiss="modal" data-target="#delete-account-modal" class="close">x\n';
output += '              </a>\n';
output += '              <h4>' + Blockscad.Msg.DELETE_ACCOUNT + '</h4>\n';
output += '              <h3>' + Blockscad.Msg.DELETE_ACCOUNT_INSTRUCTIONS_ONE + '</b></h3>\n';
output += '              <p>' + Blockscad.Msg.DELETE_ACCOUNT_INSTRUCTIONS_TWO + '</p>\n';
output += '            </div>\n';
output += '            <div class="modal-body">\n';
output += '              <div class="form-group"> \n';
output += '                <label  for="password">' + Blockscad.Msg.DELETE_ACCOUNT_CONFIRM_PASSWORD + ' : </label>\n';
output += '                <input type="password" id="del-acct-pw" name="password" autocomplete="off" class="password regform" maxlength="30"/>\n';
output += '                <div class="form-error">\n';
output += '                  <span class="password-error"></span>\n';
output += '                </div>\n';
output += '              </div>\n';
output += '               <div class="buttons-right">\n';
output += '                <button class="button primary btn-default btn-lg" type="submit">' + Blockscad.Msg.DELETE_ACCOUNT_BUTTON + '</button> \n';
output += '              </div>\n';
output += '            </div>\n';
output += '            <div class="modal-footer">\n';
output += '            <span class="footer-error" id="da-pw-error"></span>\n';
output += '            </div>\n';
output += '          </fieldset>\n';
output += '        </form>\n';
output += '      </div><!-- /.modal-content -->\n';
output += '    </div><!-- /.modal-dialog -->\n';
output += '  </div>\n';
// output += '  <!-- end of delete account popup -->\n';
// output += '  <!--  delete reactivate popup -->\n';
output += '  <div id="delete-reactivate" class="modal">\n';
output += '    <div class="modal-dialog modal-sm" style="width:500px">\n';
output += '      <div class="modal-content">\n';
output += '        <div class="modal-header">\n';
output += '          <a href="#" data-dismiss="modal" class="close">x\n';
output += '          </a>\n';
output += '          <h4><b>' + Blockscad.Msg.REACTIVATE_ACCOUNT_TITLE + '</b></h4>\n';
output += '        </div>\n';
output += '        <div class="modal-body">\n';
output += '          <p>' + Blockscad.Msg.REACTIVATE_ACCOUNT_EXPLAINED + '</p>\n';
output += '         <p><a href="#" data-toggle="modal" data-target="#change-password-modal" data-dismiss="modal" data-target="#delete-reactivate">' + Blockscad.Msg.CHANGE_PASSWORD + '</a><p>'
output += '        </div>\n';
output += '        <div class="modal-footer">\n';
output += '            <button class="button btn-default btn-lg primary" style="margin-right:10%" type="button" data-dismiss="modal" data-target="#delete-reactivate">' + Blockscad.Msg.REACTIVATE_BUTTON + '</button> \n';
output += '        </div>\n';
output += '      </div><!-- /.modal-content -->\n';
output += '    </div><!-- /.modal-dialog -->\n';
output += '  </div>\n';
// output += '  <!-- end of delete reactivate popup -->\n';
// output += '  <!-- About popup -->\n';
output += '  <div id="about-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="about-modal" aria-hidden="true">\n';
output += '    <div class="modal-dialog">\n';
output += '      <div class="modal-content">\n';
output += '    <div class="modal-header">\n';
output += '      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>\n';
output += '      <h3 class="modal-title">BlocksCAD\n';
output += '      <small>Easy, Open-Source Solid CAD for Everyone!</small></h3>\n';
output += '    </div>\n';
output += '    <div class="modal-body">\n';
output += '      <div>\n';
output += '        <p>Version ' + Blockscad.version + ' (' + Blockscad.releaseDate + ')</p>\n';
output += '        <br>\n';
output += '        <p>Contact us at:  <a href="mailto://blockscad@einsteinsworkshop.com">blockscad@einsteinsworkshop.com</a>\n';
output += '        <p><a href="https://github.com/EinsteinsWorkshop/BlocksCAD">Visit our Git Repository</a></p>\n';
output += '          <p><small><small>Developed with the sponsorship of the Defense Advanced Research Projects Agency (DARPA) and delivered to the U.S. Government with Unlimited Rights as defined in DFARS 252.227-7013.<br>Approved for Public Release, Distribution Unlimited.<br>Created by Katy Hamilton, J. Yoder, and Matthew Minuti. Copyright and Trademark 2014-2015 H3XL, Inc.</small></small>\n';
output += '          </p>\n';
output += '      </div>\n';
output += '    </div>\n';
output += '    <div class="modal-footer">\n';
output += '      <div class="row">\n';
output += '        <div class="col-md-4">\n';
output += '          <a href="http://www.gnu.org/licenses/gpl-3.0-standalone.html" target="_blank">Licensed GPLv3 or later</a></div>\n';
output += '        <div class="col-md-4">\n';
output += '          <a href="TOS.html" target="_blank">Terms of Service</a></div>\n';
output += '        <div class="col-md-4">\n';
output += '          <a href="privacy.html" target="_blank">Privacy Policy</a></div>\n';
output += '      </div>\n';
output += '    </div>\n';
output += '  </div>\n';
output += '    </div>\n';
output += '  </div>\n';
// output += '  <!-- Message popup -->\n';
output += '  <div id="message-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="message-modal" aria-hidden="true">\n';
output += '    <div class="modal-dialog modal-sm">\n';
output += '      <div class="modal-content">\n';
output += '        <div class="modal-header">\n';
output += '          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>\n';
output += '        </div>\n';
output += '        <div id="message-text" class="modal-body">Display a message here.\n';
output += '        </div>\n';
output += '      </div>\n';
output += '    </div>\n';
output += '  </div>\n';



output += '<div id="outage-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="outage-modal" aria-hidden="true">\n';
output += '  <div class="modal-dialog">\n';
output += '    <div class="modal-content">\n';
output += '          <div class="modal-header">\n';
output += '            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>\n';
output += '            <h3 class="modal-title">Scheduled Database Maintenance Dec. 27</h3>\n';
output += '          </div>\n';
output += '          <div class="modal-body">\n';
output += '            <div>\n';
output += '              On Dec. 27, 2016, we will be upgrading the BlocksCAD project database. During this time, login will be disabled and you won\'t have access to your account or your saved projects. ';
output += ' <br><br>If you plan to work on specific projects that day, be sure to download them to your computer before Dec. 27. Any edits to these projects or any new creations will need to be saved to your computer that day as well. \n'; 
output += '            </div>\n';
output += '          </div>\n';
output += '  </div>\n';
output += '</div>\n';
// output += '  <!-- end of popups -->   \n';

return output;
}