From 512c3915b13decf07fecba96f9f063cf5cf87163 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wiesner=20Andr=C3=A1s?= Date: Sat, 16 Jan 2021 21:06:57 +0100 Subject: [PATCH] =?UTF-8?q?b=C3=A9tatesztre=20k=C3=A9sz?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.php | 83 ++++++ interface.php | 233 +++++++++++++++++ js/o.js | 8 + js/phw.js | 477 +++++++++++++++++++++++++++++++++++ js/slider.js | 11 + js/socket.js | 46 ++++ media/loading.svg | 14 + media/upload_glyph.svg | 1 + media/upload_glyph_white.svg | 83 ++++++ phw.css | 243 ++++++++++++++++++ 10 files changed, 1199 insertions(+) create mode 100644 index.php create mode 100644 interface.php create mode 100755 js/o.js create mode 100644 js/phw.js create mode 100644 js/slider.js create mode 100755 js/socket.js create mode 100755 media/loading.svg create mode 100644 media/upload_glyph.svg create mode 100644 media/upload_glyph_white.svg create mode 100644 phw.css diff --git a/index.php b/index.php new file mode 100644 index 0000000..545904e --- /dev/null +++ b/index.php @@ -0,0 +1,83 @@ + + + + + Fotófal + + + + + + + + + + + +
+ +
+ + +
+ +
+ + +
+
⊠
+
+
+
+ Húzd az ablakra, vagy tallózással töltsd fel a képet!

+ + A feltöltendő kép JPG- vagy PNG-formátumú, illetve legalább egyik dimenziójában minimum 2000 pixel + méretű + kell legyen! +
+

+
+
Feltöltés
+
+
+
+
+
+ Feltöltés folyamatban... +
+
+
+
+
+

+
+

+
+

+
+
+
Mehet!
+
+
+
+
+ + +
+ + +
+ Negyvenkettő + Arthur Dent + A válasz az életet, a világmindenséget, meg mindent érintő kérdésre. +
+
+ + + + + diff --git a/interface.php b/interface.php new file mode 100644 index 0000000..df4e45f --- /dev/null +++ b/interface.php @@ -0,0 +1,233 @@ + $MAX_LARGE_IMAGE_FILESIZE) { + $cmd = "convert -define jpeg:extent=$MAX_LARGE_IMAGE_FILESIZE_STR $incoming_filename $large_filename"; + shell_exec($cmd); + unlink($incoming_filename); // törlés az incoming-ból + } else { //...ha nem volt túl nagy a fájl + shell_exec("mv $incoming_filename $large_filename"); + } + + // bélyegkép elkészítése + $thumb_filename = THUMBNAIL_DIR . DIRECTORY_SEPARATOR . $final_filename; + $cmd = "convert -define jpeg:extent=$MAX_THUMB_IMAGE_FILESIZE_STR -resize \"$THUMB_IMAGE_LARGEST_DIM>\" $large_filename $thumb_filename"; + shell_exec($cmd); + + // átlagszín kiszámítása + $cmd = "convert $thumb_filename -resize 1x1\! -format \"rgb(%[fx:int(255*r+.5)],%[fx:int(255*g+.5)],%[fx:int(255*b+.5)])\" info:-"; + $color_mean = shell_exec($cmd); + + // beírás az adatbázisba + global $dbconn; + + //echo mysqli_error($dbconn); + + $img_info = getimagesize($thumb_filename); + + $author = mysqli_real_escape_string($dbconn, $artwork_details["author"]); + $title = mysqli_real_escape_string($dbconn, $artwork_details["title"]); + $desc = mysqli_real_escape_string($dbconn, $artwork_details["desc"]); + $uid = md5_file($thumb_filename); // valami random... + $aspect_ratio = $img_info[0] / $img_info[1]; + $query = "INSERT INTO publish_table (Author,Title,Description,Image_FileName,AspectRatio,ColorMean,Approved,UID,TS) VALUES('$author', '$title', '$desc', '$final_filename', $aspect_ratio, '$color_mean', TRUE, '$uid', CURRENT_TIMESTAMP);"; + + $res = mysqli_query($dbconn, $query); + + // megnézzük, hogy volt-e már ilyen kép feltöltve + if ($res === false) { + unlink($large_filename); + unlink($thumb_filename); + return -1; + } + + return 0; +} + +/* $accented_chars = explode(",","ç,æ,œ,á,é,í,ó,ú,à,è,ì,ò,ù,ä,ë,ï,ö,ü,ÿ,â,ê,î,ô,û,å,e,i,ø,u"); +$accented_alternatives = explode(",","c,ae,oe,a,e,i,o,u,a,e,i,o,u,a,e,i,o,u,y,a,e,i,o,u,a,e,i,o,u"); + +$title = $artwork_details["title"]; +$title_conforming = str_replace(" ", "_", $title); +$title_conforming = strtolower($title_conforming); +$title_conforming = str_replace($accented_chars, $accented_alternatives, $title_conforming);*/ + +// általános információk lekérése +function get_general_info() +{ + global $dbconn; + + $info = []; + + // összes kép számának lekérdezése + $query = "SELECT COUNT(No) FROM publish_table WHERE Approved;"; + $ret = (int)mysqli_query($dbconn, $query)->fetch_assoc()["COUNT(No)"]; + $info["total_artwork_count"] = $ret; + + // bélyegképek hosszabb oldalának nagysága + $info["thumb_largest_side"] = THUMB_LARGEST_SIDE; + + return $info; +} + +// egy adagnyi képinformáció szolgáltalása +function get_batch($offset, $n) +{ + global $dbconn; + + $batch = []; + + // kívánt mennyiségű képinformáció lekérdezése + $query = "SELECT Image_FileName,AspectRatio,ColorMean,Author,Title,Description,UID FROM publish_table WHERE Approved ORDER BY No DESC Limit $n OFFSET $offset;"; + $ret = mysqli_query($dbconn, $query); + while (($row = $ret->fetch_assoc()) != NULL) { + $batch[] = $row; + } + + return $batch; +} + +// az utolsó ismert UID-óta keletkezett sorokat kéri le +function get_update_batch($last_uid) +{ + global $dbconn; + + $batch = []; + + // az utolsó UID óta érkezett sorok kiválogatása + $query = "SELECT Image_FileName,AspectRatio,ColorMean,Author,Description,Title,UID FROM publish_table WHERE No > (SELECT No FROM publish_table WHERE UID = '$last_uid')"; + $ret = mysqli_query($dbconn, $query); + while (($row = $ret->fetch_assoc()) != NULL) { + $batch[] = $row; + } + + return $batch; +} + +// ------------------------------------ + +if (!isset($_POST["action"])) { + exit(0); +} + +$action = only_alpha_numeric($_POST["action"]); + +$ret = -1; + +// parancs kiválasztása +switch ($action) { + case "upload": // fájl feltöltése + if (isset($_FILES["image"]) && $_FILES["image"]["error"] === 0) { + $ret = process_uploaded_file($_FILES["image"]); + } + break; + case "publish": // kép publikálása + if (isset($_POST["details"])) { + $details = json_decode($_POST["details"], true); + $ret = publish_image($details); + } + break; + case "general_info": // általános információ lekérése + $ret = json_encode(get_general_info()); + break; + case "batch": // egy adagnyi kép lekérése + if (isset($_POST["offset"]) && isset($_POST["n"])) { + $ret = json_encode(get_batch($_POST["offset"], $_POST["n"])); + } + break; + case "update": // új képek betöltése + if (isset($_POST["last_uid"])) { + $ret = json_encode(get_update_batch(json_decode($_POST["last_uid"]))); + } + break; +} + +// válasz küldése +echo $ret; + +mysqli_close($dbconn); \ No newline at end of file diff --git a/js/o.js b/js/o.js new file mode 100755 index 0000000..42e9057 --- /dev/null +++ b/js/o.js @@ -0,0 +1,8 @@ +function o(input) { + var o; + if (typeof input === "string") + o = document.getElementById(input); + else if (typeof input === "object") + o = input; + return o; +} \ No newline at end of file diff --git a/js/phw.js b/js/phw.js new file mode 100644 index 0000000..9626402 --- /dev/null +++ b/js/phw.js @@ -0,0 +1,477 @@ +// megjelenítés / eltüntetés +function show(obj) { + o(obj).setAttribute("shown", "true"); +} + +function hide(obj) { + o(obj).setAttribute("shown", "false"); +} + +function toggle_show(obj) { + o(obj).setAttribute("shown", o(obj).getAttribute("shown") === "false"); +} + +function scroll_enable(on) { + document.body.style.overflow = on ? "auto" : "hidden"; +} + +// ----------------------------------------- + +var slide_unit = 504; +var slider_id = "pupslider"; +var upload_popup_id = "uploadpup"; +var publish_btn_id = "publishbtn"; + +var image_uid = null; + + +function pup_slide(units) { + slider_slide(slider_id, -slide_unit * units); +} + +function pup_reset() { + hide(upload_popup_id); // ablak eltüntetése + reset_slider(slider_id); // slider visszaállítása + o(publish_btn_id).innerText = "Mehet!"; // gombfelirat visszaállítása +} + +// kép publikálása +function publish() { + if (image_uid == null) { // csak, ha érvényes... + return; + } + + // mezők kinyerése + let author = o("author").value; + let title = o("imgtitle").value; + let desc = o("description").value; + + // ha a kötelező mezők nincsenek kitöltve, akkor nem lehet beküldeni + if (author.trim() === "" || title.trim() === "") { + alert("Alkotó és cím megadása kötelező!"); + return; + } + + // struktúra összeállítása + let details = { + uid: image_uid, + author: author, + title: title, + desc: desc + } + + // küldés + let formData = new FormData(); + formData.append("action", "publish"); + formData.append("details", JSON.stringify(details)); + + let req = new XMLHttpRequest(); + + req.onreadystatechange = state => { + if (req.status === 200 && req.readyState === 4) { + pup_reset(); // popup resetelése + + if (Number(req.response) === 0) { + alert("Sikeres feltöltés!"); + req_update(); + } else { + alert("Ugyanezt képet már korábban feltöltötték!"); + } + } + }; + + req.open("POST", "interface.php"); + req.send(formData); + + // UID elfelejtése + image_uid = null; + o(publish_btn_id).innerText = "Türelem..." +} + +// feltöltés után kapott válasz feldolgozása +function process_upload_response(resp) { + if (!isNaN(Number(resp))) { // ha szám a válasz, akkor biztosan hibás az eredmény + let resp_num = Number(resp); + switch (resp_num) { + case -1: + alert("Hiba a feldolgozás során!"); + break; + case -2: + alert("A feltöltött fájl formátuma nem megfelelő, csak JPG- vagy PNG-képek elfogadottak!") + break; + case -3: + alert("Mérethiba: a kép hosszabb oldalának legalább 2000 pixel szélesnek kell lennie!"); + break; + } + + pup_slide(-1); // visszalépés + } else { // ha kaptunk UID-t + image_uid = resp; + pup_slide(1); // előrelépés + } +} + +// fájl feltöltése +function upload_file(f) { + let formData = new FormData(); + formData.append("image", f); + formData.append("action", "upload"); + let req = new XMLHttpRequest(); + + req.onreadystatechange = state => { + if (req.status === 200 && req.readyState === 4) { + process_upload_response(req.response); + } + }; + + req.open("POST", "interface.php"); + req.send(formData); +} + +// feltöltés eszközről +function upload_from_device() { + let file_selector = o("fileselector"); + if (file_selector.files.length > 0) { + pup_slide(1); // görgetés jobbra + upload_file(file_selector.files[0]); + } +} + +// feltöltőablak megnyitása +function open_upload_pup() { + show(upload_popup_id); + let display = o("display"); + display.style.filter = "blur(10px)"; + scroll_enable(false); +} + +// feltöltőablak bezárása +function close_upload_pup() { + hide(upload_popup_id); + let display = o("display"); + display.style.filter = ""; + scroll_enable(true); +} + + +// ----------------- + +function async_req(action, cb, add_data = null) { + xhr = new XMLHttpRequest(); + fd = new FormData(); + fd.append("action", action); + + xhr.onreadystatechange = state => { + if (xhr.status === 200 && xhr.readyState === 4 && cb != null) { + cb(state, xhr.response); + } + }; + + // további adatok hozzáfűzése a kéréshez + if (add_data != null) { + for (let prop in add_data) { + if (Object.prototype.hasOwnProperty.call(add_data, prop)) { + fd.append(prop, JSON.stringify(add_data[prop])); + } + } + } + + xhr.open("POST", "interface.php"); + xhr.send(fd) +} + +var total_artwork_count = 0; // összes kép alkotás száma +var thumb_largest_side = 400; // a bélyegkép hosszabb oldala 400 pixel +var batch_loading_quantity = 10; // egyszerre betöltött képek mennyisége +var autoload_enabled = false; // automatikus betöltés +var artworks_loaded_n = 0; // ennyi kép van betöltve a megjelenítőbe +var thumbnail_padding = 8; // kép körüli margó +var extra_margin = 10; // extra margó, amire számítani kell a fal generálásakor +var last_uid = ""; // utolsó UID +var wall_height = 0; // a fal magassága, pixelben +var dynamic_load_distance = 200; // ennyi pixellel a fal alja előtt indítja a dinamikus betöltést +var dynamic_loading_under_way = false; // dinamikus töltés folyamatban, ne indítsunk új requestet + +var thumbnails = []; + +// fotófal inicializálása +function init_photowall() { + init_drag_and_drop(); + req_general_info(); + init_dynamic_loading(); + init_viewer(); + + window.addEventListener("resize", () => { + compose_wall(); + }, false); +} + +// inicializálási lánc +function req_general_info() { + async_req("general_info", recv_general_info); +} + +function recv_general_info(state, resp) { + // általános adatok mentése + let resp_obj = JSON.parse(resp); + total_artwork_count = resp_obj["total_artwork_count"]; + thumb_largest_side = resp_obj["thumb_largest_side"]; + + // első adag képe betöltése + req_batch(); +} + +// egy adag kép lekérése +function req_batch() { + async_req("batch", recv_batch, {offset: artworks_loaded_n, n: batch_loading_quantity}); +} + +function recv_batch(state, resp) { + let img_batch = JSON.parse(resp); + + // utolsó UID mentése, ha most történt az első letöltés + if (artworks_loaded_n === 0) { + last_uid = img_batch[0].UID; + } + + // betöltött művek számának növelése + artworks_loaded_n += img_batch.length; + + // ha van még mit letölteni, akkor engedélyezzük az automatikus betöltést + autoload_enabled = total_artwork_count > artworks_loaded_n; + + // újonnan kapott képek befűzése a lista ELEJÉRE! + thumbnails = thumbnails.concat(img_batch); + + // fotófal összeállítása + compose_wall(); + + // ha nem töltődött be elég kép... VIGYÁZAT: rekurzív, mint állat! + if (wall_height < window.innerHeight) { + req_batch(); + } + + // töltés kész + dynamic_loading_under_way = false; +} + +// fotófal összeállítása +function compose_wall() { + // görgetési pozíció mentése + let scroll_pos = window.scrollY; + + // nézőfelület szélessége és magassága + let display = o("display"); + display.innerHTML = ""; // fal törlése + wall_height = 0; + + let width = display.clientWidth; + //let height = display.clientHeight; + + // bélyegképek méreteinek meghatározása + for (let i = 0; i < thumbnails.length; i++) { + let thumbnail = thumbnails[i]; + + // ha kell, akkor kiszámoljuk a kép méretét + if (!(thumbnail.hasOwnProperty("width") && thumbnail.hasOwnProperty("height"))) { + let ar = Number(thumbnail["AspectRatio"]); + if (ar >= 1.0) { // a kép fekvő vagy négyzet, ezért a SZÉLESSÉG a nagyobb + thumbnail.width = thumb_largest_side; + thumbnail.height = thumb_largest_side / ar; + } else { // a kép álló, ezért a MAGASSÁG a nagyobb + thumbnail.height = thumb_largest_side; + thumbnail.width = thumb_largest_side * ar; + } + } + } + + // sorok előállítása + let processed_n = 0; + while (processed_n < artworks_loaded_n) { // amíg van még kép + // egy sornyi kép összegyűjtése + let total_width = 0; + let max_thumbnail_height = 0; // maximális bélyegkép-magasság + let line_entries = []; + for (let i = processed_n; i < artworks_loaded_n && total_width < width; i++) { // futtatás a lista végéig, vagy amíg be nem telik a sok + line_entries.push(thumbnails[i]); // hozzáadás a listához + + // maximális hossz növelése + total_width += thumbnails[i].width; + + // (1. lépés) maximális magasság keresése + max_thumbnail_height = thumbnails[i].height > max_thumbnail_height ? thumbnails[i].height : max_thumbnail_height; + } + + // 2. lépés: a maximális magasságnál kisebb képek felskálázása + let total_scaled_width = 0; + for (let i = 0; i < line_entries.length; i++) { + let thumbnail = line_entries[i]; + + // skálafaktor + let K = max_thumbnail_height / thumbnail.height; + thumbnail.scale_factor = K; + + // skálázott méret kiszámítása + thumbnail.scaledHeight = thumbnail.height * K; + thumbnail.scaledWidth = thumbnail.width * K; + + total_scaled_width += thumbnail.scaledWidth; + } + + // 3. lépés: visszaskálázás a sor hosszára + let summed_padding = (line_entries.length + 1) * thumbnail_padding + extra_margin; // sorhossz kiszámítása margókkal együtt + + // a képeknek az ablakszélesség-összes margó helyre be kell férni, ezért: + let k = (width - summed_padding) / total_scaled_width; + + for (let i = 0; i < line_entries.length; i++) { + line_entries[i].scale_factor *= k; + line_entries[i].scale_factor = Math.round(line_entries[i].scale_factor * 1000) / 1000; // kerekítés ezredekre + } + + // képek elhelyzése + for (let i = 0; i < line_entries.length; i++) { + let container_section = document.createElement("section"); + container_section.style.backgroundColor = line_entries[i].ColorMean; + container_section.classList.add("thumbnail-container"); + + console.log(line_entries[i]); + + let img = document.createElement("img"); + img.classList.add("thumbnail"); + container_section.style.width = img.style.width = `${line_entries[i].width * line_entries[i].scale_factor}px`; + container_section.style.height = img.style.height = `${line_entries[i].height * line_entries[i].scale_factor}px`; + img.src = `ARTWORKS/thumbnails/${line_entries[i].Image_FileName}`; + img.addEventListener("load", (e) => { + img.style.opacity = "100%"; + }, false); + img.details = line_entries[i]; + img.addEventListener("click", (e) => { + open_viewer(img.details); + }, false); + + container_section.appendChild(img); + display.appendChild(container_section); + } + + // falmagasság számítása + wall_height += 2 * thumbnail_padding + max_thumbnail_height * k; + + // feldolgozottság léptetése + processed_n += line_entries.length; + } + + // görgetés oda, ahol eredetileg álltunk + window.scrollTo(0, scroll_pos); +} + +// frissítés lekérése +function req_update() { + async_req("update", recv_update, {last_uid: last_uid}); +} + +// frissítés fogadása +function recv_update(state, resp) { + let img_update_batch = JSON.parse(resp); + + // növeljük az összes és a betöltött művek számát + artworks_loaded_n += img_update_batch.length; + total_artwork_count += img_update_batch.length; + + // ha van még mit letölteni, akkor engedélyezzük az automatikus betöltést + autoload_enabled = total_artwork_count > artworks_loaded_n; + + // újonnan kapott képek befűzése a lista ELEJÉRE! + thumbnails = img_update_batch.concat(thumbnails); + + // utolsó UID mentése + last_uid = thumbnails[0].UID; + + // fal összeállítása + compose_wall(); +} + + +// DnD inicializálása +function init_drag_and_drop() { + let drop_area = o("uploadtype"); + drop_area.addEventListener("dragover", (e) => { + e.stopPropagation(); + e.preventDefault(); + }, false); + + drop_area.addEventListener("drop", (e) => { + e.stopPropagation(); + e.preventDefault(); + + if (e.dataTransfer.files.length > 0) { + pup_slide(1); + upload_file(e.dataTransfer.files[0]); + } + }, false); +} + +// dinamikus betöltés inicializálása +function init_dynamic_loading() { + document.addEventListener("scroll", (e) => { + if (autoload_enabled && !dynamic_loading_under_way) { // ha az automatikus töltés engedélyezett + if (window.scrollY + window.innerHeight > wall_height - dynamic_load_distance) { + dynamic_loading_under_way = true; + req_batch(); + } + } + }, false); +} + +// képnézegető inicializálása +function init_viewer() { + let img = o("viewerimg"); + let caption_sect = o("artcaptions"); + + // betöltéskor a felirat megjelenítése + img.addEventListener("load", (e) => { + img.style.opacity='100%' + place_artcaptions(); + show(caption_sect); + }, false); + + window.addEventListener("resize", (e) => { + setTimeout(() => { + place_artcaptions(); + }, 400); + }, false); + + // TODO görgetéskor nagyítás +} + +// feliratok elhelyezése +function place_artcaptions() { + let img = o("viewerimg"); + let caption_sect = o("artcaptions"); + let brect = img.getBoundingClientRect(); + caption_sect.style.left = brect.x + "px"; + caption_sect.style.width = img.clientWidth + "px"; +} + +// képnézegető megynitása +function open_viewer(details) { + let img = o("viewerimg"); + img.style.opacity = "0"; + img.src = "ARTWORKS/published/" + details.Image_FileName; + + // feliratok kiírása + o("arttitle").innerText = details.Title; + o("artauthor").innerText = details.Author; + o("artdesc").innerText = details.Description; + + // ... + scroll_enable(false); + show("viewersect"); +} + +// képnézegető bezárása +function close_viewer() { + scroll_enable(true); + hide("viewersect"); + hide("artcaptions"); +} \ No newline at end of file diff --git a/js/slider.js b/js/slider.js new file mode 100644 index 0000000..a0707bf --- /dev/null +++ b/js/slider.js @@ -0,0 +1,11 @@ +function slider_slide(slider, d) { + let slider_obj = o(slider); + let left = slider_obj.style.left; + let left_px = Number(left.substr(0, left.length - 2)); + left_px += d; + slider_obj.style.left = left_px + "px"; +} + +function reset_slider(slider) { + o(slider).style.left = "0px"; +} \ No newline at end of file diff --git a/js/socket.js b/js/socket.js new file mode 100755 index 0000000..3028420 --- /dev/null +++ b/js/socket.js @@ -0,0 +1,46 @@ +/* + * Epagris, 2016-2017 + */ + +/*AJAX socket, mindent url-encodedként [key]=adat formában küld, data csak string lehet*/ + +class ESocket { + /*url-re rááll*/ + constructor(url) { + this.url = url; + this.ajaxObject = new XMLHttpRequest(); + this.lastResponse = ""; + } + init() { + this.ajaxObject.open("POST", this.url, false); //szinkron!! + this.ajaxObject.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); + } + /*írás parancsot ad ki*/ + send(data) { + this.init(); //meg kell nyitni a kapcsolatot + this.ajaxObject.send(data); + this.lastResponse = this.ajaxObject.responseText; + return this.lastResponse; + } + /*átállítja a foglalat url-jét*/ + setURL(url) { + this.url = url; + } +} + +/*socket, ami data-t EPS-be konvertálja*/ + +/*class EPSSocket extends ESocket { + constructor(url, key) { + super(url, key); + } + // adatot küld, objektumot EPS-be konvertál, ha respondingEPS = true, akkor a választ visszakonvertálja is EPS-ből + send(data, respondingEPS = true) { + data = EPS_encode(data); + var escdata = data.replace(/&/g, "%26"); + var result = super.send(escdata); + if (respondingEPS === true) + result = EPS_decode(result); + return result; + } +}*/ \ No newline at end of file diff --git a/media/loading.svg b/media/loading.svg new file mode 100755 index 0000000..e07e250 --- /dev/null +++ b/media/loading.svg @@ -0,0 +1,14 @@ + + + + + + diff --git a/media/upload_glyph.svg b/media/upload_glyph.svg new file mode 100644 index 0000000..e126ef5 --- /dev/null +++ b/media/upload_glyph.svg @@ -0,0 +1 @@ + 843 \ No newline at end of file diff --git a/media/upload_glyph_white.svg b/media/upload_glyph_white.svg new file mode 100644 index 0000000..fbda838 --- /dev/null +++ b/media/upload_glyph_white.svg @@ -0,0 +1,83 @@ + + + + + + + + image/svg+xml + + 843 + + + + + + 843 + + + + + + + + diff --git a/phw.css b/phw.css new file mode 100644 index 0000000..fccceef --- /dev/null +++ b/phw.css @@ -0,0 +1,243 @@ +@import url('https://fonts.googleapis.com/css2?family=Texturina:ital,wght@0,200;1,200&display=swap'); + +body { + font-family: 'Texturina', serif; + + --PUP-BGCOLOR: #EFEFEF; + --PAGE-BGCOLOR: #EFEFEF; + --BTN-INACT-BGCOLOR: #28C1C0; + --BTN-HOV-BGCOLOR: #198786; + --BTN-ACT-BGCOLOR: #90dedd; + --INPUT-INACT-BORDERCOLOR: lightgray; + --INPUT-ACT-BORDERCOLOR: var(--BTN-HOV-BGCOLOR); + --INPUT-BGCOLOR: var(--PUP-BGCOLOR); + --LABEL-TCOLOR: #0d4c4b; + + --TITLE-COLOR: white; + --AUTHOR-COLOR: lightgray; + --DESC-COLOR: white; + + background-color: var(--PAGE-BGCOLOR); +} + +input, textarea { + font-family: 'Texturina', serif; + font-size: 16px; + background-color: var(--INPUT-BGCOLOR); +} + +label { + text-transform: uppercase; +} + +section.upload-popup { + display: block; + position: fixed; + width: 500px; + height: 500px; + left: calc(50vw - 250px); + top: calc(50vh - 250px); + background-color: var(--PUP-BGCOLOR); + overflow: hidden; + border-radius: 0.5em; +} + +section.upload-popup-slider { + display: block; + position: absolute; + width: 1600px; + height: 500px; + background-color: var(--PUP-BGCOLOR); + left: 0px; + + transition: 0.3s ease-in-out; +} + +section.upload-popup-inner-container { + display: inline-block; + width: 460px; + height: 460px; + margin: 10px; + padding: 10px; + vertical-align: bottom; + background-color: var(--PUP-BGCOLOR); +} + +section.btn, +section.upload-btn { + padding: 0.8em 1.2em; + background-color: var(--BTN-INACT-BGCOLOR); + display: inline-block; + cursor: pointer; + color: white; + text-transform: uppercase; + font-weight: bold; + border-radius: 0.2em; +} + +section.btn:hover, +section.upload-btn:hover { + background-color: var(--BTN-HOV-BGCOLOR); +} + +section.btn:active, +section.upload-btn:active { + background-color: var(--BTN-ACT-BGCOLOR); +} + +section.upload-btn { + padding: 1em 1em; + background-color: gray; + display: inline-block; + cursor: pointer; + height: 2.4em; + width: 2.4em; + text-align: center; + border-radius: 50%; +} + +*[shown="false"] { + visibility: hidden; + display: none; + opacity: 0%; + transition: 0.3s ease; +} + +*[shown="true"] { + opacity: 100%; + transition: 0.3s ease; +} + +label { + color: var(--LABEL-TCOLOR); +} + +input[type="text"], +textarea { + margin-left: 20px; + border: 0; + border-bottom: 2px solid var(--INPUT-INACT-BORDERCOLOR); +} + +input[type="text"]:focus, +textarea:focus { + border-bottom-color: var(--INPUT-ACT-BORDERCOLOR); +} + +section.upload-popup-closebtn { + font-size: 24px; + display: block; + float: right; + position: absolute; + z-index: 1000; + text-align: center; + right: 0.5em; + color: #c15353; + cursor: pointer; +} + +section.display { + display: block; + position: absolute; + width: calc(100vw - 10px); + margin: 5px; +} + +img.thumbnail { + margin: 0; + display: inline-block; + /*max-width: 600px;*/ + border-radius: 2px; + opacity: 0; + + cursor: pointer; + + transition: 0.3s ease; +} + +img.thumbnail:hover { + filter: brightness(130%); +} + +section.thumbnail-container { + margin: 4px 4px; + display: inline-block; + border-radius: 2px; +} + +section.viewer { + position: fixed; + display: block; + z-index: 2000; + top: 0; + left: 0; + height: 100vh; + width: 100vw; + background-color: rgba(0,0,0,0.9); + text-align: center; + + opacity: 0; + + transition: 0.3s ease; +} + +section.viewer[shown="true"] +{ + opacity: 100%; +} + +img.viewer { + position: relative; + max-width: 100%; + max-height: 100%; + z-index: 3000; + + transition: 0.3s ease; +} + +span.art-title, +span.art-author, +span.art-desc { + position: absolute; +} + +span.art-title { + left: 1em; + color: var(--TITLE-COLOR); + font-weight: bold; + font-size: 32px; +} + +span.art-author { + left: 2.5em; + top: 45px; + color: var(--AUTHOR-COLOR); + font-size: 20px; +} + +span.art-desc { + left: 2.2em; + right: 1em; + top: 85px; + color: var(--DESC-COLOR); + font-size: 16px; + text-align: left; +} + +section.art-captions { + display: block; + z-index: 4000; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 200px; + + opacity: 0; + + transition: 0.3s ease; +} + +section[shown="true"] { + opacity: 100%; +} \ No newline at end of file