ReadMe update and graphical fixes

aledipa · Nov 17, 2024 · 9470d0c · 9470d0c
1 parent ab2a7ed
commit 9470d0c
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -21,8 +21,8 @@ FreeGPT4-WEB-API is a python server that allows you to have a self-hosted GPT-4
 ## GUI Preview:
 
 <!-- round angles images -->
-<img src="./img/login.png" width="408" height="290" style="border-radius: 0.4rem;" />
-<img src="./img/settings.png" width="408" height="290" style="border-radius: 0.4rem;" />
+<img src="./img/login.png" style="width:100%; max-width:500px; min-width:200px; aspect-ratio: 4/3" />
+<img src="./img/settings.png" style="width:100%; max-width:500px; min-width:200px; aspect-ratio: 4/3" />
 
 ## Installation
 1. Clone the repository: `git clone https://github.com/aledipa/Free-GPT4-WEB-API.git`

diff --git a/img/login.png b/img/login.png
diff --git a/img/settings.png b/img/settings.png
diff --git a/src/static/js/script.js b/src/static/js/script.js
@@ -36,6 +36,16 @@ function hideElement(idToHide) {
   element.hidden = true;
 }
 
+// Hides a composed warning
+function hideWarning(idToHide) {
+  document.getElementById(idToHide).classList.add("hidden");
+}
+
+// Shows a composed warning
+function showWarning(idToShow) {
+  document.getElementById(idToShow).classList.remove("hidden");
+}
+
 // Copies the text in the given id to the clipboard
 function copyTextToClipboardFromName(name) {
   var copyText = document.getElementsByName(name)[0].value;

diff --git a/src/templates/login.html b/src/templates/login.html
@@ -14,10 +14,19 @@
 </head>
 <body>
     {% block content %}
-    <div class="m-7">
-        <h1 class="title font-bold inter darkblue text-4xl">Free GPT 4</h1>
-        <h2 class="title blue text-2xl">Login page</h2>
-    </div>
+    <!-- Logo on the left and title on the right -->
+    <table class="w-50 m-7">
+        <tr>
+            <td class="m-7">
+                <img src="{{ url_for('static', filename='img/favicon(Nicoladipa).png') }}" width="96" class="inline-block" alt="Logo">
+            </td>
+            <td class="m-7">
+                <h1 class="title font-bold inter darkblue text-4xl">FreeGPT4</h1>
+                <h2 class="title blue
+                text-2xl">Server settings</h2>
+            </td>
+        </tr>
+    </table>
 
     <div class="flex justify-center w-screen h-96">
         <div class="flex items-center">

diff --git a/src/templates/settings.html b/src/templates/settings.html
@@ -93,24 +93,24 @@ <h1 class="title font-bold inter darkblue text-4xl">FreeGPT4</h1>
                     {% if data['token']|length > 0 %}
                     <span id="warning_1" class="text-sm blue inline-block">
                     {% else %}
-                    <span id="warning_1" class="text-sm blue inline-block hidden" hidden>
+                    <span id="warning_1" class="text-sm blue inline-block hidden">
                     {% endif %}
                         <b>Your Token: </b> <i id="token_text" onclick="copyTextToClipboardFromName('token');">{{ data['token'] }}</i>
                         <img id="copy_icon" src="{{ url_for('static', filename='img/copy(Gregor_Cresnar).png') }}" width="16" class="inline-block" alt="Copy" onclick="copy('token', this.id, 'Copied!');"/>
                     </span>
                 </td>
                 <td class="py-1 fond-bold inter darkblue text-lg">
                 {% if data['token'] %}
-                <input type="radio" id="off_rad_3" name="private_mode" value="false" hidden oninput="turnOff('on_3', 'off_3', 'set_3'); hideElement('warning_1'); showElement('warning_0');">
+                <input type="radio" id="off_rad_3" name="private_mode" value="false" hidden oninput="turnOff('on_3', 'off_3', 'set_3'); hideWarning('warning_1'); showElement('warning_0');">
                     <label for="off_rad_3" id="off_3" class="label_gray"><b>OFF</b></label>
                     <p class="inline-block mx-1"> - </p>
-                    <input type="radio" id="on_rad_3" name="private_mode" value="true" hidden oninput="turnOn('on_3', 'off_3', 'set_3'); showElement('warning_1'); hideElement('warning_0'); createToken('token_text')" checked>
+                    <input type="radio" id="on_rad_3" name="private_mode" value="true" hidden oninput="turnOn('on_3', 'off_3', 'set_3'); showWarning('warning_1'); hideElement('warning_0'); createToken('token_text')" checked>
                     <label for="on_rad_3" id="on_3" class="label_green"><b>ON</b></label>
                 {% else %}
-                    <input type="radio" id="off_rad_3" name="private_mode" value="false" hidden oninput="turnOff('on_3', 'off_3', 'set_3'); hideElement('warning_1'); showElement('warning_0');" checked>
+                    <input type="radio" id="off_rad_3" name="private_mode" value="false" hidden oninput="turnOff('on_3', 'off_3', 'set_3'); hideWarning('warning_1'); showElement('warning_0');" checked>
                     <label for="off_rad_3" id="off_3" class="label_red"><b>OFF</b></label>
                     <p class="inline-block mx-1"> - </p>
-                    <input type="radio" id="on_rad_3" name="private_mode" value="true" hidden oninput="turnOn('on_3', 'off_3', 'set_3'); showElement('warning_1'); hideElement('warning_0'); createToken('token_text')">
+                    <input type="radio" id="on_rad_3" name="private_mode" value="true" hidden oninput="turnOn('on_3', 'off_3', 'set_3'); showWarning('warning_1'); hideElement('warning_0'); createToken('token_text')">
                     <label for="on_rad_3" id="on_3" class="label_gray"><b>ON</b></label>
                 {% endif %}
                 </td>