added simple help panel for first timers

ISO53 · Dec 30, 2023 · e6c0a8b · e6c0a8b
1 parent 4e7e70c
commit e6c0a8b
Show file tree

Hide file tree

Showing 3 changed files with 165 additions and 3 deletions.
diff --git a/index.css b/index.css
@@ -1,9 +1,9 @@
 :root {
     --background-color-dark: #101010;
     --background-color-light: #1f1f1f;
-    --white-accent-dark: rgb(50, 50, 50);
-    --white-accent-mid: rgb(150, 150, 150);
-    --white-accent-light: rgb(250, 250, 250);
+    --white-accent-dark: #323232;
+    --white-accent-mid: #969696;
+    --white-accent-light: #fafafa;
     --main-color-one: #FAF8F1;
     --main-color-two: #FAEAB1;
     --main-color-three: #E5BA73;
@@ -152,6 +152,7 @@ input[type="checkbox"] {
 }
 
 .sort_div {
+    position: relative;
     background-color: var(--background-color-light);
     border-radius: 20px;
     display: flex;
@@ -163,6 +164,52 @@ input[type="checkbox"] {
     max-height: 50px;
 }
 
+.sort_div:hover > .sort_dropdown {
+    visibility: visible;
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.sort_dropdown {
+    visibility: hidden;
+    opacity: 0;
+    transform: translateY(-16px);
+
+    top: calc(100% + 16px);
+    right: 0;
+    background-color: var(--background-color-light);
+    padding: 20px;
+    border-radius: 20px;
+    position: absolute;
+    cursor: default;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 0 5px 1px black;
+    transition: visibility 250ms ease, opacity 250ms ease, transform 250ms ease;
+    z-index: 10;
+}
+
+.sort_element {
+    width: auto;
+    text-wrap: nowrap;
+    margin: 8px;
+    padding-bottom: 14px;
+    border-bottom: 1px solid var(--white-accent-dark);
+    color: var(--white-accent-mid);
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: color 250ms ease;
+}
+
+.sort_element:hover {
+    color: var(--white-accent-light);
+}
+
+.sort_element:last-child {
+    border: none;
+    padding: 0;
+}
+
 .sort_div:hover>.sort_icon {
     fill: var(--white-accent-light);
 }
@@ -701,3 +748,69 @@ input[type="checkbox"] {
     width: 100%;
     text-align: left;
 }
+
+.steps {
+    margin-top: 40px;
+    display: flex;
+    gap: 30px;
+    flex-direction: column;
+}
+
+.check_circle_div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 120px;
+}
+
+.step_logo_svg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    max-width: 30px;
+    max-height: 30px;
+    background-color: var(--background-color-light);
+}
+
+.step_number {
+    position: absolute;
+    left: 20px;
+    top: -15px;
+    padding: 4px 8px 4px 8px;
+    border: 1px solid var(--white-accent-mid);
+    border-radius: 20px;
+    color: var(--white-accent-light);
+    background-color: var(--background-color-light);
+    font-size: 0.8rem;
+    user-select: none;
+}
+
+.step {
+    position: relative;
+    border-radius: 20px;
+    border: 1px solid var(--white-accent-mid);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 10px;
+}
+
+.step_paragraph {
+    color: var(--white-accent-mid);
+    text-align: justify;
+    margin: 10px;
+    user-select: none;
+}
+
+.successful {
+    border-color: rgb(0, 200, 0);
+    pointer-events: none;
+}
+
+.step.successful .step_number {
+    border-color: rgb(0, 200, 0);
+}
+
+.step.successful .check_circle_div svg:nth-child(2) {
+    display: none;
+}
diff --git a/index.html b/index.html
@@ -143,6 +143,41 @@ <h2 class="movie_info_story_header">Story</h2>
         <p class="popup_paragraph" id="movie_story_paragraph">-</p>
 
     </div>
+
+    <div class="popup first_time_div " id="first_time_div">
+        <div class="popup_close_button">✖</div>
+        <div class="popup_logo_div">
+            <svg class="popup_logo" xmlns="http://www.w3.org/2000/svg" fill="white" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-160q-33 0-56.5-23.5T40-240v-480q0-33 23.5-56.5T120-800h720q33 0 56.5 23.5T920-720v480q0 33-23.5 56.5T840-160H120Zm0-80h720v-480H120v480Zm20-120h50v-140l102 140h48v-240h-50v140L190-600h-50v240Zm240 0h160v-50H440v-44h100v-50H440v-46h100v-50H380v240Zm240 0h160q17 0 28.5-11.5T820-400v-200h-50v180h-44v-140h-50v140h-46v-180h-50v200q0 17 11.5 28.5T620-360ZM120-240v-480 480Z"/></svg>
+        </div>
+        <h1 class="popup_header">First Time? Dont Worry.</h1>
+        <p class="popup_paragraph">Welcome to our app! If this is your first time, rest assured we've got you covered. Simply follow these straightforward steps, and you'll be ready to make the most of our app.</p>
+
+        <div class="steps">
+
+            <div class="step" id="step_1">
+                <span class="step_number">Step 1</span>
+                <div class="check_circle_div">
+                    <svg class="step_logo_svg" xmlns="http://www.w3.org/2000/svg" fill="rgb(0, 200, 0)" height="24" viewBox="0 -960 960 960" width="24"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
+                    <svg class="step_logo_svg" xmlns="http://www.w3.org/2000/svg" fill="#969696" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" /></svg>
+                </div>
+                <div>
+                    <p class="step_paragraph">To get started, head over to the OMDB API settings by clicking [Settings > OMDB Api] from top left corner and then set up your OMDB API key.</p>
+                </div>
+            </div>
+
+            <div class="step" id="step_2">
+                <span class="step_number">Step 2</span>
+                <div class="check_circle_div">
+                    <svg class="step_logo_svg" xmlns="http://www.w3.org/2000/svg" fill="rgb(0, 200, 0)" height="24" viewBox="0 -960 960 960" width="24"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
+                    <svg class="step_logo_svg" xmlns="http://www.w3.org/2000/svg" fill="#969696" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" /></svg>
+                </div>
+                <div>
+                    <p class="step_paragraph">To start the movie import process, click [File > Import Movies]. You have the flexibility to import your movie list from a TXT file or directly from your local files.</p>
+                </div>
+            </div>
+
+        </div>
+    </div>
 
     <div class="blur_background" id="blur_background"></div>
 

diff --git a/renderer.js b/renderer.js
@@ -39,6 +39,10 @@ function popupHandler(arg) {
     const popupID = arg.substring(2);
 
     if (arg.startsWith("o")) {
+        if (popupID === "first_time_div") {
+            loadFirstTimeSteps();            
+        }
+
         // Open popup
         document.getElementById(popupID).classList.remove("hide_popup");
         document.getElementById("blur_background").classList.add("blur");
@@ -465,4 +469,14 @@ function sortMovies(sortingType) {
                 return (a.Title || "").localeCompare(b.Title || "");
         }
     });
+}
+
+function loadFirstTimeSteps() {
+    if (KEY !== undefined && KEY !== null) {
+        document.getElementById("step_1").classList.add("successful");
+    }
+
+    if (MOVIES !== undefined && MOVIES !== null && MOVIES.length !== 0) {
+        document.getElementById("step_2").classList.add("successful");
+    }
 }