Spaces:

imseldrith
/

Gemini-UI

Running

App Files Files Community

imseldrith commited on Dec 25, 2023

Commit

c79d99a

1 Parent(s): 58b83d1

Update index.html

Browse files

Files changed (1) hide show

index.html +52 -589

index.html CHANGED Viewed

@@ -1,3 +1,4 @@
 <!DOCTYPE html>
 <html lang="en">
@@ -12,597 +13,9 @@
     <link rel="stylesheet"
         href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/github-dark.css">
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
 </head>
-<style>
-    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,200;0,400;0,800;1,200;1,400;1,800&display=swap');
-    @import url('https://fonts.googleapis.com/css2?family=Product+Sans&family=Google+Sans+Display:ital@0;1&family=Google+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Google+Sans+Text:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Material+Symbols+Outlined&family=Space+Mono&display=swap');
-    @font-face {
-        font-family: 'Material Symbols Outlined';
-        font-style: normal;
-        font-weight: 400;
-        src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v154/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
-    }
-    .material-symbols-outlined {
-        font-family: 'Material Symbols Outlined';
-        font-weight: normal;
-        font-style: normal;
-        font-size: 1.5rem;
-        line-height: 1;
-        letter-spacing: normal;
-        text-transform: none;
-        display: inline-block;
-        white-space: nowrap;
-        word-wrap: normal;
-        direction: ltr;
-        -webkit-font-feature-settings: 'liga';
-        font-feature-settings: "liga";
-        -webkit-font-smoothing: antialiased;
-    }
-    body {
-        font-family: 'Noto Sans', sans-serif;
-        margin: 0;
-    }
-    p {
-        margin: 0;
-        margin-bottom: 0.5rem;
-        padding: 0;
-        font-size: 1rem;
-    }
-    h1,
-    h2,
-    h3,
-    ol,
-    ul {
-        margin: 0;
-    }
-    h1 {
-        margin-bottom: 0.5rem;
-    }
-    a {
-        color: #3b82f6;
-    }
-    input,
-    textarea,
-    select {
-        border: 1px solid;
-        padding: 0.5rem;
-        border-radius: 0.5rem;
-        border: none;
-        font-family: noto sans, sans-serif;
-        font-size: 1rem;
-    }
-    button:focus {
-        outline: none;
-    }
-    .form {
-        display: none;
-        opacity: 0;
-        flex-direction: column;
-        width: 32rem;
-        gap: 0.5rem;
-        flex-grow: 1;
-        justify-content: center;
-    }
-    .overlay {
-        flex-direction: column;
-        display: none;
-        position: fixed;
-        opacity: 0;
-        top: 0;
-        left: 0;
-        width: 100dvw;
-        height: 100dvh;
-        backdrop-filter: blur(2rem);
-        z-index: 2;
-        justify-content: flex-start;
-        align-items: center;
-    }
-    .backButton {
-        position: absolute;
-        top: 1rem;
-        left: 1rem;
-        border: none;
-        background-color: transparent;
-        font-size: 1.5rem;
-        font-weight: 600;
-        transition: all 0.2s;
-    }
-    #btn-hide-sidebar {
-        display: none;
-    }
-    .message-container {
-        display: flex;
-        flex-direction: column-reverse;
-        overflow-y: auto;
-        gap: 1rem;
-        padding-bottom: 2rem;
-        flex-grow: 1;
-    }
-    .message-box {
-        display: flex;
-        position: relative;
-    }
-    .message {
-        padding: 1rem;
-    }
-    .message-model {
-        border-radius: 1rem;
-    }
-    #messageInput {
-        height: 2.5rem;
-        box-sizing: border-box;
-        text-wrap: wrap;
-        resize: none;
-        width: 100%;
-        padding-right: 2rem;
-    }
-    #messageInput::-webkit-scrollbar {
-        height: 1rem;
-        width: 0.5rem;
-    }
-    .btn-textual {
-        background: transparent !important;
-        margin: 0;
-        padding: 0;
-        border: none;
-        transition: all 0.2s;
-        cursor: pointer;
-        font-size: inherit;
-    }
-    #btn-send {
-        position: absolute;
-        right: 0.5rem;
-        bottom: 0.5rem;
-        font-size: 1.5rem;
-    }
-    .btn-array {
-        display: flex;
-        flex-direction: row;
-        gap: 0.5rem;
-        margin-top: 0.5rem;
-    }
-    .btn-array button {
-        flex-grow: 1;
-    }
-    .personality-prompt {
-        display: none;
-    }
-    .prompt-field {
-        resize: vertical;
-        height: 7rem;
-    }
-    .container {
-        box-sizing: border-box;
-        display: flex;
-        gap: 0.5rem;
-        padding: 1rem;
-        width: 100dvw;
-        height: 100dvh;
-    }
-    .sidebar {
-        position: sticky;
-        top: 1rem;
-        display: flex;
-        flex-direction: column;
-        overflow-y: auto;
-        gap: 0.5rem;
-        padding: 1rem;
-        width: 25rem;
-        border-radius: 1rem;
-        scrollbar-width: thin;
-        height: calc(100dvh - 4rem);
-        z-index: 1;
-    }
-    .sidebar-section {
-        margin-bottom: 1rem;
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-    }
-    #btn-show-sidebar {
-        display: none;
-    }
-    .header {
-        display: flex;
-        box-sizing: border-box;
-        align-items: center;
-        font-size: 2rem;
-        font-weight: 800;
-        gap: 0.5rem;
-        width: 100%;
-    }
-    .navbar {
-        position: relative;
-        display: flex;
-        flex-direction: row;
-        border-radius: 0.5rem;
-        justify-content: space-evenly;
-        margin-bottom: 1rem;
-        z-index: 0;
-    }
-    .navbar-tab {
-        width: 100%;
-        padding: 0.5rem;
-        text-align: center;
-        z-index: 2;
-        -webkit-tap-highlight-color: transparent;
-        cursor: pointer;
-    }
-    .navbar-tab-highlight {
-        padding: 0;
-        margin: 0;
-        position: absolute;
-        border-radius: 0.5rem;
-        transition: all 0.2s;
-        height: 100%;
-        z-index: 1;
-        /* glow */
-        box-shadow: 0 0 1rem 0.05rem #29292a3f;
-    }
-    #gemini-pro-branding {
-        font-family: Google Sans Display, sans-serif;
-        color: #7c8a9c;
-        font-size: 1rem;
-        font-weight: 400;
-    }
-    #gemin-pro-logo {
-        width: 2rem;
-        height: 2rem;
-    }
-    .credits {
-        margin-top: auto;
-        display: flex;
-        padding: 0rem 1rem 0 1rem;
-        font-size: 0.75rem;
-        color: #7c8a9c;
-        justify-content: space-between;
-        align-items: center;
-    }
-    button {
-        border: none;
-        background-color: #3b82f6;
-        color: white;
-        padding: 0.5rem;
-        border-radius: 0.5rem;
-        transition: all 0.2s;
-    }
-    #mainContent {
-        display: flex;
-        flex-direction: column;
-        padding: 2rem;
-        margin-left: auto;
-        margin-right: auto;
-        width: 32rem;
-        text-align: justify;
-    }
-    .card-personality {
-        box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        -webkit-box-sizing: border-box;
-        color: #e4e4e4;
-        background-color: black;
-        background-size: cover;
-        background-position: center;
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        justify-content: end;
-        padding: 1rem;
-        border-radius: 1rem;
-        height: 10rem;
-        -webkit-tap-highlight-color: transparent;
-        cursor: pointer;
-        text-shadow: 0 0 10px #000000, 0 0 5px #181818;
-    }
-    .edit:hover {
-        text-shadow: 0 0 10px #e4e4e4, 0 0 5px #dfdfdf;
-    }
-    .card-personality * {
-        /* unselectable */
-        -webkit-user-select: none;
-        /* Safari */
-        -moz-user-select: none;
-        /* Firefox */
-        -ms-user-select: none;
-        /* IE10+/Edge */
-        user-select: none;
-        /* Standard */
-    }
-    .card-personality input {
-        display: none;
-    }
-    .btn-edit-card {
-        /* top right corner */
-        position: absolute;
-        top: 1rem;
-        right: 1rem;
-        color: #e4e4e4;
-    }
-    .btn-share-card {
-        /* bottom right corner */
-        position: absolute;
-        top: 1rem;
-        right: 2.5rem;
-        font-size: 1rem;
-        color: #e4e4e4;
-    }
-    #btn-hide-overlay {
-        padding: 2rem;
-    }
-    @media (max-width: 768px) {
-        body {
-            margin: 0;
-            padding: 0;
-        }
-        .container {
-            padding: 0;
-        }
-        .message-container {
-            padding-left: 1rem;
-            padding-right: 1rem;
-        }
-        .sidebar {
-            top: 0;
-            height: calc(100dvh - 2rem);
-            margin: 0;
-            width: calc(100dvw - 2rem);
-            position: fixed;
-            border-radius: 0;
-            display: none;
-        }
-        .navbar {
-            position: relative;
-        }
-        #btn-hide-sidebar {
-            display: block;
-        }
-        #mainContent {
-            padding: 0;
-            margin: 0;
-            width: 100%;
-        }
-        #mainContent .header {
-            padding: 2rem;
-        }
-        #messageInput {
-            border-radius: 0;
-        }
-        #btn-show-sidebar {
-            display: block;
-        }
-    }
-    /* Light theme styles */
-    @media (prefers-color-scheme: light) {
-        :focus {
-            outline: 1px solid #8f9eb3;
-        }
-        body {
-            background-color: #f0f6ff;
-            color: #0a0a0a;
-        }
-        a {
-            color: #444ed6;
-        }
-        .sidebar {
-            background-color: #d2e2f7;
-        }
-        .navbar {
-            background-color: rgb(176 205 246);
-        }
-        .navbar-tab {
-            color: #0a0a0a;
-        }
-        .navbar-tab-highlight {
-            background-color: #87b0ed;
-        }
-        .btn-textual:hover {
-            text-shadow: 0 0 10px #000000;
-        }
-        button {
-            background-color: #83b5f7;
-            color: #2b3d59;
-        }
-        button:hover {
-            background-color: rgb(63, 191, 255);
-        }
-        input,
-        textarea,
-        select {
-            background-color: #f0f6ff;
-            outline: 1px solid #8f9eb3;
-        }
-        input::placeholder,
-        textarea::placeholder {
-            color: #7c8a9c;
-        }
-        .message-model {
-            background-color: #d2e2f7;
-        }
-    }
-    /* Dark theme styles */
-    @media (prefers-color-scheme: dark) {
-        :root {
-            color-scheme: dark;
-        }
-        :focus {
-            outline: 1px solid #73859e;
-        }
-        body {
-            background-color: #151e24;
-            color: #e4e4e4;
-        }
-        a {
-            color: #92d9eb;
-        }
-        .sidebar {
-            background-color: #1a2733;
-        }
-        .navbar {
-            background-color: #00000047;
-        }
-        .navbar-tab {
-            color: #e4e4e4;
-        }
-        .navbar-tab-highlight {
-            background-color: #22486b;
-            box-shadow: 0 0 1rem 0.05rem #29292aac;
-        }
-        button {
-            background-color: #22486b;
-            color: #c9d3ee;
-        }
-        button:hover {
-            background-color: #31689c;
-        }
-        .btn-textual {
-            color: #e4e4e4;
-        }
-        .btn-textual:hover {
-            text-shadow: 0 0 10px #ffffff, 0 0 5px #dfdfdf;
-        }
-        .edit:hover {
-            text-shadow: 0 0 10px #ffffff, 0 0 5px #dfdfdf;
-            /* Change #00ff00 to the color you want */
-        }
-        input,
-        textarea,
-        select {
-            background-color: #283542;
-            color: #e4e4e4;
-            border: none;
-        }
-        input::placeholder,
-        textarea::placeholder {
-            color: #849caf;
-        }
-        .message-model {
-            background-color: #1a2733;
-        }
-    }
-</style>
 <body>
     <div class="container">
         <div class="sidebar">
@@ -642,6 +55,7 @@
                 <div class="btn-array" id="btn-array-personality-section">
                     <button id="btn-add-personality">Add Personality</button>
                     <button id="btn-import-personality">Import</button>
                 </div>
             </div>
@@ -839,6 +253,7 @@
         const editDefaultPersonalityButton = document.querySelector("#btn-edit-personality-default");
         const submitNewPersonalityButton = document.querySelector("#btn-submit-personality");
         const updatePersonalityButton = document.querySelector("#updatePersonality");
         const sendMessageButton = document.querySelector("#btn-send");
@@ -1013,6 +428,44 @@
             closeOverlay();
         }
         async function run() {
             const msg = document.querySelector("#messageInput");
             const msgText = msg.value;
@@ -1160,6 +613,16 @@
         sendMessageButton.addEventListener("click", run);
         // ...
     </script>

 <!DOCTYPE html>
 <html lang="en">
     <link rel="stylesheet"
         href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/github-dark.css">
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
+   <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
     <div class="container">
         <div class="sidebar">
                 <div class="btn-array" id="btn-array-personality-section">
                     <button id="btn-add-personality">Add Personality</button>
                     <button id="btn-import-personality">Import</button>
+                    <button id="btn-save-personalities">Save</button>
                 </div>
             </div>
         const editDefaultPersonalityButton = document.querySelector("#btn-edit-personality-default");
         const submitNewPersonalityButton = document.querySelector("#btn-submit-personality");
         const updatePersonalityButton = document.querySelector("#updatePersonality");
+        const savePersonalitiesButton = document.querySelector("#btn-save-personalities");
         const sendMessageButton = document.querySelector("#btn-send");
             closeOverlay();
         }
+        //save personalities to local storage
+        async function savePersonalities() {
+            //get array of personality cards
+            const personalityCards = document.querySelectorAll(".card-personality");
+            //create an array of personality objects
+            const personalityObjects = [];
+            personalityCards.forEach(card => {
+                const personalityObject = {
+                    name: card.querySelector(".personality-title").innerText,
+                    description: card.querySelector(".personality-description").innerText,
+                    prompt: card.querySelector(".personality-prompt").innerText,
+                    image: card.style.backgroundImage.match(/url\((.*?)\)/)[1].replace(/('|")/g, '')
+                }
+                personalityObjects.push(personalityObject);
+            })
+            //stringify the array
+            const personalityJSON = JSON.stringify(personalityObjects);
+            //save to local storage
+            localStorage.setItem("personalities", personalityJSON);
+        }
+        //load personalities from local storage
+        async function loadPersonalities() {
+            //get the json string from local storage
+            const personalityJSON = localStorage.getItem("personalities");
+            //parse the json string into an array
+            const personalityObjects = JSON.parse(personalityJSON);
+            //insert each personality into the DOM
+            personalityObjects.forEach(personalityObject => {
+                insertPersonality(personalityObject);
+            })
+        }
         async function run() {
             const msg = document.querySelector("#messageInput");
             const msgText = msg.value;
         sendMessageButton.addEventListener("click", run);
+        //load local storage if available
+        if (localStorage.getItem("personalities")) {
+            loadPersonalities();
+        }
+        //save personalities to local storage when closing the window
+        window.addEventListener("beforeunload", () => {
+            savePersonalities();
+        })
         // ...
     </script>