From f8076786905038d2baffcb91ea5fbe01bc994e01 Mon Sep 17 00:00:00 2001
From: amcmanu3 <mcdeweykp@gmail.com>
Date: Sat, 18 Mar 2023 19:52:38 -0400
Subject: [PATCH] Add beta badging

---
 .../templates/server/bedrock_wizard.html      |  10 +-
 .../templates/server/steam_wizard.html        | 500 ++----------------
 app/frontend/templates/server/wizard.html     |  10 +-
 3 files changed, 65 insertions(+), 455 deletions(-)

diff --git a/app/frontend/templates/server/bedrock_wizard.html b/app/frontend/templates/server/bedrock_wizard.html
index 03659510..e5443fbe 100644
--- a/app/frontend/templates/server/bedrock_wizard.html
+++ b/app/frontend/templates/server/bedrock_wizard.html
@@ -17,12 +17,12 @@
     {% if data["steamCMD"] %}
     <li class="nav-item term-nav-item">
       <a class="nav-link" href="/server/steam_cmd_step1" role="tab" aria-selected="false">
-        <i class="fas fa-file-signature"></i>Steam-CMD</a>
+        <i class="fas fa-file-signature"></i><span class="steam">Steam-CMD&nbsp;</span></a>
     </li>
     {% else %}
     <li class="nav-item term-nav-item" id="steam_link">
       <a style="color: gray;" class="nav-link" href="" role="tab" aria-selected="false">
-        <i class="fas fa-file-signature"></i>Steam-CMD 🔒</a>
+        <i class="fas fa-file-signature"></i><span class="steam">Steam-CMD&nbsp;</span> 🔒</a>
     </li>
     <span class="missing" title="Missing Deps" ,
       data-content="SteamCMD dependencies missing. To run SteamCMD servers please install dependencies as noted in our docs."
@@ -489,6 +489,12 @@
   </div>
 </div>
 <style>
+  .steam::after {
+    content: 'BETA';
+    font-size: 10px;
+    vertical-align: top;
+  }
+
   .scroll {
     max-height: 12em;
     overflow-y: auto;
diff --git a/app/frontend/templates/server/steam_wizard.html b/app/frontend/templates/server/steam_wizard.html
index 6b501388..e113e57c 100644
--- a/app/frontend/templates/server/steam_wizard.html
+++ b/app/frontend/templates/server/steam_wizard.html
@@ -16,7 +16,7 @@
     </li>
     <li class="nav-item term-nav-item">
       <a class="nav-link active" href="/server/steam_cmd_step1" role="tab" aria-selected="false">
-        <i class="fas fa-file-signature"></i>Steam-CMD</a>
+        <i class="fas fa-file-signature"></i><span class="steam">Steam-CMD&nbsp;</span></a>
     </li>
   </ul>
   <div class="d-none" id="overlay" onclick="hide(event)"></div>
@@ -24,7 +24,8 @@
     {% if data['online'] %}
     <div class="col-sm-6 grid-margin stretch-card">
       <div class="card">
-        <div class="card-body">
+        <div class="card-body parent">
+          <h4 class="ribbon">BETA</h4>
 
           <h4>{{ translate('serverWizard', 'newServer', data['lang']) }}</h4>
           <br />
@@ -139,458 +140,55 @@
       </div>
       {% end %}
     </div>
-
-    <div class="col-sm-6 grid-margin stretch-card">
-      <div class="card">
-        <div class="card-body">
-
-          <h4>{{ translate('serverWizard', 'importServer', data['lang']) }}</h4>
-          <br />
-          <p class="card-description">
-
-          <form method="post" class="server-wizard" onSubmit="wait_msg(true)">
-            {% raw xsrf_form_html() %}
-            <input type="hidden" value="import_jar" name="create_type">
-            <div class="row">
-
-              <div class="col-sm-12">
-                <div class="form-group">
-                  <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
-                  <input type="text" class="form-control" id="server_name" name="server_name" value=""
-                    placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
-                </div>
-              </div>
-
-              <div class="col-sm-12">
-                <div class="form-group">
-                  <label for="server">{{ translate('serverWizard', 'serverPath', data['lang']) }} <small>{{
-                      translate('serverWizard', 'absoluteServerPath', data['lang']) }}</small></label>
-                  <input type="text" class="form-control" id="server_path" name="server_path"
-                    placeholder="/var/opt/server" required>
-                </div>
-              </div>
-
-              <div class="col-sm-12">
-                <div class="form-group">
-                  <label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label>
-                  <input type="text" class="form-control" id="server_jar" name="server_jar" value=""
-                    placeholder="paper.jar" required>
-                </div>
-              </div>
-
-
-
-            </div>
-            <br />
-            <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small
-                style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription',
-                data['lang']) }}</small></h4>
-            <hr>
-            <div class="row">
-
-              <div class="col-sm-4">
-                <div class="form-group">
-                  <label for="min_memory2">{{ translate('serverWizard', 'minMem', data['lang']) }} <small> - {{
-                      translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
-                  <input type="number" class="form-control" id="min_memory2" name="min_memory" value="1" step="0.5"
-                    min="0.5" required>
-                </div>
-              </div>
-
-              <div class="col-sm-4">
-                <div class="form-group">
-                  <label for="max_memory2">{{ translate('serverWizard', 'maxMem', data['lang']) }} <small> - {{
-                      translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
-                  <input type="number" class="form-control" id="max_memory2" name="max_memory" value="2" step="0.5"
-                    min="0.5" required>
-                </div>
-              </div>
-
-              <div class="col-sm-4">
-                <div class="form-group">
-                  <label for="port2">{{ translate('serverWizard', 'serverPort', data['lang']) }} <small> - {{
-                      translate('serverWizard', 'defaultPort', data['lang']) }}</small></label>
-                  <input type="number" class="form-control" id="port2" name="port" value="25565" step="1" min="1"
-                    max="65535" required>
-                </div>
-              </div>
-              <div class="col-sm-12">
-                <div class="form-group">
-                  <div id="accordion-2">
-                    <div class="card">
-                      <div class="card-header p-2" id="Role-2">
-                        <p class="mb-0 p-0" data-toggle="collapse" data-target="#collapseRole-2" aria-expanded="true"
-                          aria-controls="collapseRole-2">
-                          <i class="fas fa-chevron-down"></i> {{ translate('serverWizard', 'addRole', data['lang']) }}
-                          <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
-                            data['lang']) }}</small>
-                        </p>
-                      </div>
-                      <div id="collapseRole-2" class="collapse" aria-labelledby="Role-2" data-parent="">
-                        <div class="card-body scroll">
-                          <div class="form-group">
-                            {% for r in data['roles'] %}
-                            <span class="d-block menu-option"><label><input name="{{ r['role_id'] }}"
-                                  type="checkbox">&nbsp;
-                                {{ r['role_name'].capitalize() }}</label></span>
-                            {% end %}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <button type="submit" class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton',
-              data['lang']) }}</button>
-            <button type="reset" class="btn btn-danger mr-2">{{ translate('serverWizard', 'resetForm', data['lang'])
-              }}</button>
-
-          </form>
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col-sm-6 grid-margin stretch-card">
-      <div class="card">
-        <div class="card-body">
-
-          <h4>{{ translate('serverWizard', 'importZip', data['lang']) }}</h4>
-          <br />
-          <p class="card-description">
-
-          <form name="zip" method="post" class="server-wizard" onSubmit="wait_msg(true)">
-            {% raw xsrf_form_html() %}
-            <input type="hidden" value="import_zip" name="create_type">
-
-            <div class="row">
-              <div class="col-sm-12">
-                <div class="col-sm-12">
-                  <div class="form-group">
-                    <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
-                    <input type="text" class="form-control" id="server_name" name="server_name" value=""
-                      placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
-                  </div>
-                </div>
-
-                <div class="col-sm-12">
-                  <div class="form-group">
-                    <label for="server">{{ translate('serverWizard', 'zipPath', data['lang']) }} <small>{{
-                        translate('serverWizard', 'absoluteZipPath', data['lang']) }}</small></label>
-                    <input type="text" class="form-control" id="server_path" name="server_path"
-                      placeholder="/var/opt/server.zip" required>
-                  </div>
-                </div>
-
-                <div class="col-sm-12">
-                  <div class="form-group">
-                    <label for="server">{{ translate('serverWizard', 'selectRoot', data['lang']) }} <small>{{
-                        translate('serverWizard', 'explainRoot', data['lang']) }}</small></label>
-                    <br>
-                    <button class="btn btn-primary mr-2" id="root_files_button" type="button">{{
-                      translate('serverWizard', 'clickRoot', data['lang']) }}</button>
-                  </div>
-                </div>
-
-
-                <div class="col-sm-12">
-                  <div class="form-group">
-                    <label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label>
-                    <input type="text" class="form-control" id="server_jar" name="server_jar" value=""
-                      placeholder="paper.jar" required>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-
-
-            <div class="col-sm-12">
-              <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small
-                  style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription',
-                  data['lang']) }}</small></h4>
-              <hr>
-              <div class="row">
-
-                <div class="col-sm-12">
-                  <div class="form-group">
-                    <label for="min_memory3">{{ translate('serverWizard', 'minMem', data['lang']) }} <small> - {{
-                        translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
-                    <input type="number" class="form-control" id="min_memory3" name="min_memory" value="1" step="0.5"
-                      min="0.5" required>
-                  </div>
-                </div>
-
-                <div class="col-sm-12">
-                  <div class="form-group">
-                    <label for="max_memory3">{{ translate('serverWizard', 'maxMem', data['lang']) }} <small> - {{
-                        translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
-                    <input type="number" class="form-control" id="max_memory3" name="max_memory" value="2" step="0.5"
-                      min="0.5" required>
-                  </div>
-                </div>
-
-                <div class="col-sm-12">
-                  <div class="form-group">
-                    <label for="port3">{{ translate('serverWizard', 'serverPort', data['lang']) }} <small> - {{
-                        translate('serverWizard', 'defaultPort', data['lang']) }}</small></label>
-                    <input type="number" class="form-control" id="port3" name="port" value="25565" step="1" min="1"
-                      max="65535" required>
-                  </div>
-                </div>
-
-                <div class="col-sm-12">
-                  <div class="form-group">
-                    <div id="accordion-3">
-                      <div class="card">
-                        <div class="card-header p-2" id="Role-3">
-                          <p class="mb-0 p-0" data-toggle="collapse" data-target="#collapseRole-3" aria-expanded="true"
-                            aria-controls="collapseRole-3">
-                            <i class="fas fa-chevron-down"></i> {{ translate('serverWizard', 'addRole', data['lang'])
-                            }} <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
-                              data['lang']) }}</small>
-                          </p>
-                        </div>
-                        <div id="collapseRole-3" class="collapse" aria-labelledby="Role-3" data-parent="">
-                          <div class="card-body scroll">
-                            <div class="form-group">
-                              {% for r in data['roles'] %}
-                              <span class="d-block menu-option"><label><input name="{{ r['role_id'] }}"
-                                    type="checkbox">&nbsp;
-                                  {{ r['role_name'].capitalize() }}</label></span>
-                              {% end %}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-sm-12" style="visibility: hidden;">
-                  <div class="form-group">
-                    <input type="text" class="form-control" id="zip_root_path" name="zip_root_path">
-                  </div>
-                </div>
-                <div class="modal fade" id="dir_select" tabindex="-1" role="dialog" aria-labelledby="dir_select"
-                  aria-hidden="true">
-                  <div class="modal-dialog" role="document">
-                    <div class="modal-content">
-                      <div class="modal-header">
-                        <h5 class="modal-title" id="exampleModalLongTitle">{{ translate('serverWizard',
-                          'selectZipDir', data['lang']) }}</h5>
-                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                          <span aria-hidden="true">&times;</span>
-                        </button>
-                      </div>
-                      <div class="modal-body">
-                        <div class="tree-ctx-item" id="main-tree-div" data-path=""
-                          style="overflow: scroll; max-height:75%;">
-                          <input type="radio" id="main-tree-input" name="root_path" value="" checked>
-                          <span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path="">
-                            <i class="far fa-folder"></i>
-                            <i class="far fa-folder-open"></i>
-                            {{ translate('serverFiles', 'files', data['lang']) }}
-                          </span>
-                          </input>
-                        </div>
-                      </div>
-                      <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{
-                          translate('serverWizard', 'close', data['lang']) }}</button>
-                        <button type="button" id="modal-okay" data-dismiss="modal" class="btn btn-primary">{{
-                          translate('serverWizard', 'save', data['lang']) }}</button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <button id="zip_submit" type="submit" title="You must select server root dir first" disabled
-                class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton', data['lang'])
-                }}</button>
-              <button type="button" class="btn btn-danger mr-2 tree-reset">{{ translate('serverWizard', 'resetForm',
-                data['lang'])
-                }}</button>
-            </div>
-        </div>
-        </form>
-        </p>
-      </div>
-    </div>
-    <div class="col-sm-6 grid-margin stretch-card">
-      <div class="card">
-        <div class="card-body">
-
-          <h4>{{ translate('serverWizard', 'uploadZip', data['lang']) }}</h4>
-          <br />
-          <p class="card-description">
-
-          <form name="zip" method="post" class="server-wizard" onSubmit="wait_msg(true)">
-            {% raw xsrf_form_html() %}
-            <input type="hidden" value="import_zip" name="create_type">
-
-            <div class="row">
-              <div class="col-sm-12">
-                <div class="col-sm-12">
-                  <div class="form-group">
-                    <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
-                    <input type="text" class="form-control" id="server_name" name="server_name" value=""
-                      placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
-                  </div>
-                </div>
-
-                <div class="col-sm-12">
-                  <div class="form-group">
-                    <label for="server">{{ translate('serverWizard', 'serverUpload', data['lang']) }}</label><br>
-                    <span id="upload_input">
-                      <input type="file" multiple="false" class="form-control" id="file" name="file" required
-                        style="width: 70%;">
-                      <button type="button" class="btn btn-info" onclick="sendFile()">{{ translate('serverWizard',
-                        'uploadButton', data['lang']) }}</button>
-                    </span>
-                  </div>
-                </div>
-              </div>
-              <div id="lower_half" style="visibility: hidden;">
-                <div class="col-sm-12">
-                  <div class="form-group">
-                    <label for="server">{{ translate('serverWizard', 'selectRoot', data['lang']) }} <small>{{
-                        translate('serverWizard', 'explainRoot', data['lang']) }}</small></label>
-                    <br>
-                    <button class="btn btn-primary mr-2" id="root_upload_button" type="button">{{
-                      translate('serverWizard', 'clickRoot', data['lang']) }}</button>
-                  </div>
-                </div>
-
-
-                <div class="col-sm-12">
-                  <div class="form-group">
-                    <label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label>
-                    <input type="text" class="form-control" id="server_jar" name="server_jar" value=""
-                      placeholder="paper.jar" required>
-                  </div>
-                </div>
-
-                <div class="col-sm-12">
-                  <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small
-                      style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription',
-                      data['lang']) }}</small></h4>
-                  <hr>
-                  <div class="row">
-
-                    <div class="col-sm-12">
-                      <div class="form-group">
-                        <label for="min_memory3">{{ translate('serverWizard', 'minMem', data['lang']) }} <small> - {{
-                            translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
-                        <input type="number" class="form-control" id="min_memory3" name="min_memory" value="1"
-                          step="0.5" min="0.5" required>
-                      </div>
-                    </div>
-
-                    <div class="col-sm-12">
-                      <div class="form-group">
-                        <label for="max_memory3">{{ translate('serverWizard', 'maxMem', data['lang']) }} <small> - {{
-                            translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
-                        <input type="number" class="form-control" id="max_memory3" name="max_memory" value="2"
-                          step="0.5" min="0.5" required>
-                      </div>
-                    </div>
-
-                    <div class="col-sm-12">
-                      <div class="form-group">
-                        <label for="port3">{{ translate('serverWizard', 'serverPort', data['lang']) }} <small> - {{
-                            translate('serverWizard', 'defaultPort', data['lang']) }}</small></label>
-                        <input type="number" class="form-control" id="port3" name="port" value="25565" step="1" min="1"
-                          max="65535" required>
-                      </div>
-                    </div>
-
-                    <div class="col-sm-12">
-                      <div class="form-group">
-                        <div id="accordion-3">
-                          <div class="card">
-                            <div class="card-header p-2" id="Role-3">
-                              <p class="mb-0 p-0" data-toggle="collapse" data-target="#collapseRole-3"
-                                aria-expanded="true" aria-controls="collapseRole-3">
-                                <i class="fas fa-chevron-down"></i> {{ translate('serverWizard', 'addRole',
-                                data['lang'])
-                                }} <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
-                                  data['lang']) }}</small>
-                              </p>
-                            </div>
-                            <div id="collapseRole-3" class="collapse" aria-labelledby="Role-3" data-parent="">
-                              <div class="card-body scroll">
-                                <div class="form-group">
-                                  {% for r in data['roles'] %}
-                                  <span class="d-block menu-option"><label><input name="{{ r['role_id'] }}"
-                                        type="checkbox">&nbsp;
-                                      {{ r['role_name'].capitalize() }}</label></span>
-                                  {% end %}
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="col-sm-12" style="visibility: hidden;">
-                      <div class="form-group">
-                        <input type="text" class="form-control" id="zip_root_path" name="zip_root_path">
-                      </div>
-                    </div>
-                    <div class="modal fade" id="dir_upload_select" tabindex="-1" role="dialog"
-                      aria-labelledby="dir_select" aria-hidden="true">
-                      <div class="modal-dialog" role="document">
-                        <div class="modal-content">
-                          <div class="modal-header">
-                            <h5 class="modal-title" id="exampleModalLongTitle">{{ translate('serverWizard',
-                              'selectZipDir', data['lang']) }}</h5>
-                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                              <span aria-hidden="true">&times;</span>
-                            </button>
-                          </div>
-                          <div class="modal-body">
-                            <div class="tree-ctx-item" id="main-tree-div-upload" data-path=""
-                              style="overflow: scroll; max-height:75%;">
-                              <input type="radio" id="main-tree-input-upload" name="root_path" value="" checked>
-                              <span id="main-tree-upload" class="files-tree-title tree-caret-down root-dir"
-                                data-path="">
-                                <i class="far fa-folder"></i>
-                                <i class="far fa-folder-open"></i>
-                                {{ translate('serverFiles', 'files', data['lang']) }}
-                              </span>
-                              </input>
-                            </div>
-                          </div>
-                          <div class="modal-footer">
-                            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{
-                              translate('serverWizard', 'close', data['lang']) }}</button>
-                            <button type="button" id="modal-okay" data-dismiss="modal" class="btn btn-primary">{{
-                              translate('serverWizard', 'save', data['lang']) }}</button>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <button id="upload_submit" type="submit" title="You must select server root dir first" disabled
-                  class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton', data['lang'])
-                  }}</button>
-                <button type="button" class="btn btn-danger mr-2 tree-reset">{{ translate('serverWizard', 'resetForm',
-                  data['lang'])
-                  }}</button>
-              </div>
-            </div>
-          </form>
-          </p>
-        </div>
-      </div>
-    </div>
   </div>
 </div>
 <style>
+  .ribbon {
+    margin: -10px;
+    padding: 0;
+    background: rebeccapurple;
+    color: white;
+    padding: 1em 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translateX(30%) translateY(0%) rotate(45deg);
+    transform-origin: top left;
+  }
+
+  .parent {
+    overflow: hidden;
+    /* required */
+    position: relative;
+    /* required  for demo*/
+  }
+
+  .ribbon:before,
+  .ribbon:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    margin: 0 -1px;
+    /* tweak */
+    width: 100%;
+    height: 100%;
+    background: rebeccapurple;
+  }
+
+  .ribbon:before {
+    right: 100%;
+  }
+
+  .ribbon:after {
+    left: 100%;
+  }
+
+  .steam::after {
+    content: 'BETA';
+    font-size: 10px;
+    vertical-align: top;
+  }
+
   .refresh-class:hover {
     cursor: grab;
   }
diff --git a/app/frontend/templates/server/wizard.html b/app/frontend/templates/server/wizard.html
index 4aa1562a..db86c780 100644
--- a/app/frontend/templates/server/wizard.html
+++ b/app/frontend/templates/server/wizard.html
@@ -17,12 +17,12 @@
     {% if data["steamCMD"] %}
     <li class="nav-item term-nav-item">
       <a class="nav-link" href="/server/steam_cmd_step1" role="tab" aria-selected="false">
-        <i class="fas fa-file-signature"></i>Steam-CMD</a>
+        <i class="fas fa-file-signature"></i><span class="steam">Steam-CMD&nbsp;</span></a>
     </li>
     {% else %}
     <li class="nav-item term-nav-item" id="steam_link">
       <a style="color: gray;" class="nav-link" href="" role="tab" aria-selected="false">
-        <i class="fas fa-file-signature"></i>Steam-CMD 🔒</a>
+        <i class="fas fa-file-signature"></i><span class="steam">Steam-CMD&nbsp;</span> 🔒</a>
     </li>
     <span class="missing" title="Missing Deps" ,
       data-content="SteamCMD dependencies missing. To run SteamCMD servers please install dependencies as noted in our docs."
@@ -618,6 +618,12 @@
   </div>
 </div>
 <style>
+  .steam::after {
+    content: 'BETA';
+    font-size: 10px;
+    vertical-align: top;
+  }
+
   .refresh-class:hover {
     cursor: grab;
   }