create/edit character buttons >>> icons

chat/mes padding adjusted
swipe left/right circle background removed

public/index.html

@@ -345,8 +345,8 @@
             <form id="form_create" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                 <div id="avatar-and-name-block">
                     <div id="name_div">
-                        <h4>Character Name</h4><br>
-                        <input id="character_name_pole" name="ch_name" class="text_pole" maxlength="120" value=""
+                        <h4>Character Name</h4>
+                        <input id="character_name_pole" name="ch_name" class="text_pole" placeholder="Name this character" maxlength="120" value=""
                             autocomplete="off">
                     </div>
                     <div id="avatar_div" class="avatar_div">
@@ -357,24 +357,35 @@
                             title="Click to select a new avatar for this character">
                             <input type="file" id="add_avatar_button" name="avatar"
                                 accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
-                            Change Avatar
+                                📷
                         </label>
+                        <div class="form_create_bottom_buttons_block">
+                            <div id="rm_button_back" class="menu_button">🔙</div>
+                            <div id="advanced_div" class="menu_button" title="Advanced Definitions">🧠</div>
+                            <div id="export_button" class="menu_button" title="Export and Download">💾</div>
+                            <!-- <div id="create_button" class="menu_button" type="submit" title="Create Character">✅</div> -->
+                            <label for="create_button" id="create_button_label" class="menu_button" title="Create Character">
+                                <input type="submit" id="create_button" name="create_button">✅
+                            </label>
+                            <!-- <input id="create_button" class="menu_button" title="Create Character" type="submit" value="✅"> -->
+                            <div id="delete_button" class="menu_button" title="Delete Character" >🗑️</div>
+                        </div>
                     </div>
-                    <div id="result_info" style="width: 100px;">&nbsp;</div>
+                    <div id="result_info"></div>
                 </div>
                 <hr>
-                <div id="description_div" class="margin-bot-10px">
+                <div id="description_div"  class="margin-bot-10px">
                     <h4>Description <a href="/notes/1" class="notes-link" target="_blank"><span
                                 class="note-link-span">?</span></a></h4>
                 </div>
-                <textarea id="description_textarea" class="margin-bot-10px" name="description"
+                <textarea id="description_textarea" placeholder="Describe your character's physical and mental traits here." class="margin-bot-10px" name="description"
                     placeholder=""></textarea>
 
-                <div id="first_message_div" class="margin-bot-10px">
+                <div id="first_message_div"  class="margin-bot-10px">
                     <h4>First message<a href="/notes/3" class="notes-link" target="_blank"><span
                                 class="note-link-span">?</span></a></h4>
                 </div>
-                <textarea id="firstmessage_textarea" class="margin-bot-10px" name="first_mes" placeholder=""></textarea>
+                <textarea id="firstmessage_textarea" placeholder="This will be the first message from the character that starts every chat." class="margin-bot-10px" name="first_mes" placeholder=""></textarea>
 
                 <!-- these divs are invisible and used for server communication purposes -->
                 <div id="hidden-divs">
@@ -397,15 +408,9 @@
                 </div>
                 <!-- now back to normal divs for display purposes-->
 
-                <input id="advanced_div" class="menu_button" type="button" value="Advanced Edit">
+               
 
-                <div class="form_create_bottom_buttons_block">
-                    <div id="rm_button_back" class="menu_button">Go Back</div>
-                    <input id="delete_button" class="menu_button" type="button" value="Delete">
-                    <input id="export_button" class="menu_button" type="button" value="Export">
-                    <input id="create_button" class="menu_button" type="submit" value="Create">
 
-                </div>
 
             </form>
         </div>
@@ -794,13 +799,13 @@
 
         <div id="rm_characters_block" class="right_menu">
             <div class="form_create_bottom_buttons_block">
-                <div id="rm_button_create" class="menu_button">+New Character</div>
-                <div id="character_import_button" class="menu_button">+Import</div>
-                <div id="rm_button_group_chats" class="menu_button">+Group</div>
+                <div id="rm_button_create" title="Create New Character" class="menu_button">+👤</div>
+                <div id="character_import_button" title="Import Character from File" class="menu_button">+📂</div>
+                <div id="rm_button_group_chats" title="Create New Chat Group" class="menu_button">+👨‍👩‍👧‍👦</div>
             </div>
 
             <form id="form_character_search_form" action="javascript:void(null);">
-                <input id="character_search_bar" class="text_pole" type="search" placeholder="Search here..." />
+                <input id="character_search_bar" class="text_pole" type="search" placeholder="Character search..." />
             </form>
             <div id="rm_print_characters_block"></div>
 

public/script.js

@@ -2500,8 +2500,8 @@ function select_selected_character(chid) {
     //create text poles
     $("#rm_button_back").css("display", "none");
     //$("#character_import_button").css("display", "none");
-    $("#create_button").attr("value", "Save");
-    $("#create_button").css("display", "none");
+    $("#create_button").attr("value", "Save");              // what is the use case for this?
+    $("#create_button_label").css("display", "none");
 
     $("#rm_button_selected_ch").children("h2").text(display_name);
     $("#add_avatar_button").val("");
@@ -2553,7 +2553,7 @@ function select_rm_create() {
     $("#delete_button_div").css("display", "none");
     $("#delete_button").css("display", "none");
     $("#export_button").css("display", "none");
-    $("#create_button").css("display", "block");
+    $("#create_button_label").css("display", "block");
     $("#create_button").attr("value", "Create");
     //RossAscends: commented this out as part of the auto-loading token counter
     //$('#result_info').html(' ');
@@ -2573,7 +2573,7 @@ function select_rm_create() {
     } else {
         $("#mes_example_textarea").val(create_save_mes_example);
     }
-    $("#avatar_div").css("display", "grid");
+    $("#avatar_div").css("display", "flex");
     $("#avatar_load_preview").attr("src", default_avatar);
     $("#name_div").css("display", "block");
 
@@ -3373,7 +3373,7 @@ $(document).ready(function () {
                     data: formData,
                     beforeSend: function () {
                         $("#create_button").attr("disabled", true);
-                        $("#create_button").attr("value", "Creating...");
+                        $("#create_button").attr("value", "⏳");
                     },
                     cache: false,
                     contentType: false,
@@ -3405,7 +3405,7 @@ $(document).ready(function () {
                             $("#add_avatar_button").val("").clone(true)
                         );
 
-                        $("#create_button").attr("value", "Create");
+                        $("#create_button").attr("value", "✅");
                         if (true) {
                             let oldSelectedChar = null;
                             if (this_chid != undefined && this_chid != "invalid-safety-id") {

public/style.css

@@ -367,7 +367,7 @@ code {
 
     display: grid;
     grid-template-columns: min-content min-content auto min-content min-content;
-    padding: 10px 10px 0 10px;
+    padding: 20px 10px 0 10px;
     margin-top: 0;
     width: 100%;
     color: var(--ivory, white);
@@ -382,7 +382,7 @@ code {
 }
 
 .last_mes .mes_text {
-    min-height: 6em;
+    min-height: 10em;
 }
 
 .last_mes{
@@ -396,14 +396,11 @@ code {
     width: 40px;
     opacity: 0.36;
     position: absolute;
-    right: 15px;
-    margin-top: 60px;
+    right: 10px;
+    margin-top: 5em;
     left: auto;
-    background-color: var(--black50a);
-    border-radius: 50%;
     align-items: center;
     justify-content: center;
-    border: 1px solid grey;
     flex-wrap: wrap;
 }
 
@@ -422,7 +419,7 @@ code {
 }
 
 .swipe_left {
-    left: 20px;
+    left: 15px;
     right: auto;
 }
 
@@ -452,7 +449,7 @@ code {
 
 .mes_block {
     padding-top: 0;
-    padding-left: 20px;
+    padding-left: 10px;
 }
 
 .ch_name {
@@ -544,7 +541,7 @@ textarea {
 
 }
 
-#character_name_pole {}
+#character_name_pole {margin-bottom:0;}
 
 #firstmessage_textarea {
 
@@ -1025,33 +1022,49 @@ input[type=search]:focus::-webkit-search-cancel-button {
 }
 
 .avatar_div {
-    /*margin-top: 16px;*/
-    vertical-align: middle;
-    display: grid;
-    grid-template-columns: min-content min-content;
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    margin-top: 16px;
+    margin-bottom:10px;
     align-items: center;
-    grid-gap: 10px;
 }
 
+#avatar-and-name-block{
+    justify-content: space-between;
+    display: flex;
+    flex: 0 0 100%;
+    flex-wrap: wrap;
+    margin-bottom:10px;
+}
+
+#name_div{
+    width: 100%;
+}
+
+#create_button {display:none;}
+
 .avatar_div .avatar {
     margin-left: 4px;
     margin-right: 10px;
+    height: 70px;
+    width:70px;
     display: inline-block;
 }
 
 #first_message_div {}
 
 #advanced_div {
-    width: 100%;
+    /* width: 100%; */
 }
 
 .form_create_bottom_buttons_block {
-    display: grid;
-    width: min-content;
+    display: flex;
+    flex: 1;
     grid-template-columns: repeat(3, min-content);
     grid-gap: 20px;
     align-items: center;
-    margin: 0px auto;
+    justify-content: right;
 }
 
 #rm_info_block {
@@ -1085,9 +1098,14 @@ input[type=search]:focus::-webkit-search-cancel-button {
     background-color: var(--crimson70a);
 }
 
+#delete_button:hover {
+    background-color: var(--fullred);
+}
+
 #result_info {
     margin-left: 10px;
     color: var(--white30a);
+    display: flex;
 }
 
 .input-file {
@@ -1174,12 +1192,30 @@ input[type=search]:focus::-webkit-search-cancel-button {
     cursor: pointer;
 }
 
-.menu_button {
+.avatar_div .menu_button, .form_create_bottom_buttons_block .menu_button {
     font-weight: bold;
     color: var(--white70);
     background-color: var(--black50a);
     border: 1px solid var(--white30a);
     border-radius: 10px;
+    padding: 3px;
+    cursor: pointer;
+    margin: 10px 0;
+    transition: 0.3s;
+    font-size: 22px;
+    min-width:40px;
+    min-height:40px;
+    filter: grayscale(0.5);
+    text-align: center;
+}
+
+    .menu_button{
+
+     font-weight: bold;
+    color: var(--white70);
+    background-color: var(--black50a);
+    border: 1px solid var(--white30a);
+    border-radius: 10px;
     padding: 10px;
     width: min-content;
     cursor: pointer;