üdvözlőüzenet, javítások

index.php

@@ -20,7 +20,11 @@
 <section class="display">
     <section class="blur-layer" id="blurlayer" shown="false"></section>
     <section id="display"></section>
-    <footer style="text-align: center; margin: 1em 0; color: gray">&copy; KockAzúr, 2021</footer>
+    <footer style="text-align: center; margin: 1em 0; color: gray">
+        &copy; KockAzúr, MKK Fotókör, 2021<br>
+        Kapcsolat: <i>mkkgaleria AT gmail DOT com</i><br>
+        A feltöltött tartalmakért a szolgáltatást működtetők és a fejlesztők nem felelnek! </a>
+    </footer>
 </section>
 
 <!-- FELTÖLTŐABLAK MEGNYITÁSA gomb -->
@@ -55,14 +59,17 @@
             <section style="margin: 0em 0em;">
                 <label for="author">Alkotó:*</label><br>
                 <input type="text" id="author" style="width: 55%;" placeholder="Arthur Dent">
-                <input type="text" id="author_group" style="margin-left: 0.0em; width: 38.5%;" placeholder="szürke csoport"><br><br>
+                <input type="text" id="author_group" style="margin-left: 0.0em; width: 38.5%;"
+                       placeholder="szürke csoport"><br><br>
                 <label for="imgtitle">Cím:*</label><br>
                 <input type="text" id="imgtitle" style="width: 95%;" placeholder="Negyvenkettő"><br><br>
                 <label for="description">Leírás:</label><br>
                 <textarea id="description" style="width: 95%; height: 5em;"
                           placeholder="A válasz az életet, a világmindenséget, meg mindent érintő kérdésre."></textarea><br><br>
-                <input type="checkbox" id="autocorrchkbox">Kérek automatikus képkorrekciót! (expozíció, élesítés)<br><br>
+                <input type="checkbox" id="autocorrchkbox">Kérek automatikus képkorrekciót! (expozíció,
-                <input type="checkbox" id="respchkbox">A feltöltött tartalmamért <i>teljes</i> felelősséget vállalok.<br><br>
+                élesítés)<br><br>
+                <input type="checkbox" id="respchkbox">A feltöltött tartalmamért <i>teljes</i> felelősséget
+                vállalok.<br><br>
             </section>
             <section style="text-align: right;">
                 <section class="btn" onclick="publish()" id="publishbtn">Mehet!</section>
@@ -83,6 +90,58 @@
     </section>
 </section>
 
+<!-- ÜDVÖZLŐÜZENET -->
+<section class="popup" id="welcomepup" shown="false">
+    <section class="upload-popup-inner-container">
+        <section style="color: var(--LABEL-TCOLOR)">
+            Kedves idelágatogató közis, azaz Te!<br>
+            <br>
+            Nagy örömmel üdvözlünk a Fotófalon, ahol a számodra kedves, tartalmas, lélekemelő fényképeidet tárhatod a
+            többi közis elé,
+            vagy, ahol, ha úgy tartja kedved, elmerülhetsz a mások által készített képek böngészésében!
+            <br><br>
+            Képet a <i>neved</i>, a <i>csoportod</i> és egy <i>cím</i> megadásával tölthetsz fel a jobbra lent található
+            gomb
+            segítségével, továbbá minden képhez leírás, történet csatolható.
+            <br><br>
+            Kérünk, ugyan a humoros képektől sem zárkózunk el, alapvetően mégis a feltöltéskor a mélyebb lelki tartalom
+            átadására törekedj, így segítve, hogy az oldal a megfelelő célt szolgálja!
+            <br><br>
+            <i>Ahogy minden más weboldal, a Fotófal is használ sütiket!</i>
+        </section>
+        <br>
+        <section style="text-align: center">
+            <section class="btn" onclick="confirm_welcome_msg()">Ok, értem!</section>
+        </section>
+    </section>
+</section>
+
+<script>
+    function open_welcome_msg() {
+        show('welcomepup');
+        blur_page(true);
+    }
+
+    function hide_welcome_msg() {
+        hide('welcomepup');
+        blur_page(false);
+    }
+
+    function confirm_welcome_msg() {
+        hide_welcome_msg();
+
+        // süti mentése
+        let d = new Date();
+        d.setTime(d.getTime() + (7*24*3600*1000));
+        document.cookie = `phw_welcome_confirmed=1; expires=${d.toUTCString()}; path=/;`;
+    }
+
+    // ha még nem olvasta el a felhasználó az útmutatót
+    if (document.cookie.match("phw_welcome_confirmed") == null) {
+        open_welcome_msg();
+    }
+</script>
+
 <!-- TESZTVERZIÓ -->
 <section class="testversion-sign">TESZTVERZIÓ</section>
 

js/phw.js

@@ -15,6 +15,16 @@ function scroll_enable(on) {
     document.body.style.overflowY = on ? "scroll" : "hidden";
 }
 
+function blur_page(blur) {
+    if (blur) {
+        show('blurlayer');
+        o("display").style.filter = "blur(10px)";
+    } else {
+        hide('blurlayer');
+        o("display").style.filter = "";
+    }
+}
+
 // -----------------------------------------
 
 var slide_unit = 504;
@@ -193,9 +203,8 @@ function upload_from_device() {
 // feltöltőablak megnyitása
 function open_upload_pup() {
     show(upload_popup_id);
-    show("blurlayer");
+    blur_page(true);
     let display = o("display");
-    display.style.filter = "blur(10px)";
     scroll_enable(false);
 
     o("fileselector").value = "";
@@ -204,9 +213,8 @@ function open_upload_pup() {
 // feltöltőablak bezárása
 function close_upload_pup() {
     hide(upload_popup_id);
-    hide("blurlayer");
+    blur_page(false);
     let display = o("display");
-    display.style.filter = "";
     scroll_enable(true);
     pup_reset();
 }
@@ -318,7 +326,7 @@ function recv_batch(state, resp) {
     compose_wall();
 
     // ha nem töltődött be elég kép... VIGYÁZAT: rekurzív, mint állat!
-    if (wall_height < window.innerHeight) {
+    if (wall_height < window.innerHeight && total_artwork_count > artworks_loaded_n) {
         req_batch();
     }
 
@@ -358,7 +366,7 @@ function compose_wall() {
 
     // sorok előállítása
     let processed_n = 0;
-    let last_line_height = 0;
+    let last_line_height = thumb_largest_side;
     while (processed_n < artworks_loaded_n) { // amíg van még kép
         // egy sornyi kép összegyűjtése
         let total_width = 0;

phw.css

@@ -40,7 +40,8 @@ label {
     text-transform: uppercase;
 }
 
-section.upload-popup {
+section.upload-popup,
+section.popup {
     display: block;
     position: fixed;
     width: 500px;
@@ -401,4 +402,5 @@ section.blur-layer {
     right: 0;
     bottom: 0;
     z-index: 1;
+    filter: blur(10px);
 }