code-boxx · September 3, 2024 02:40
diff --git a/0-PY-IMAGE-GALLERY.MD b/0-PY-IMAGE-GALLERY.MD
diff --git a/S1_server.py b/S1_server.py
 # (A) INIT
 # (A1) LOAD REQUIRED PACKAGES
 import os, glob
 from flask import Flask, render_template
 
 # (A2) FLASK SETTINGS + PATH
 HOST_NAME = "localhost"
 HOST_PORT = 80
 PATH_BASE = os.path.dirname(os.path.abspath(__file__))
 PATH_STATIC = os.path.join(PATH_BASE, "static")
 app = Flask(__name__)
 app.debug = True

 # (B) GET ALL IMAGES
 images = []
 for ext in ("jpg", "png", "gif", "webp"):
  for img in glob.iglob(PATH_STATIC + "/*." + ext):
    images.append(os.path.basename(img))
 # images.sort()
 # images.sort(reverse=True)

 # (C) GALLERY PAGE
 @app.route("/")
 def index():
  return render_template("S2A_gallery.html", images=images)

 # (D) START!
 if __name__ == "__main__":
  app.run(HOST_NAME, HOST_PORT)
diff --git a/S2A_gallery.html b/S2A_gallery.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Simple Image Gallery</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="static/S2B_gallery.css">
    <script src="static/S2C_gallery.js"></script>
  </head>
  <body>
    <div class="gallery">
      {% for img in images: %}
      <figure>
        <img src="static/{{img}}">
        <figcaption>{{img}}</figcaption>
      </figure>
      {% endfor %}
    </div>
  </body>
 </html>
diff --git a/S2B_gallery.css b/S2B_gallery.css
 /* (A) GALLERY CONTAINER */
 /* (A1) BIG SCREENS - 3 IMAGES PER ROW */
 .gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  max-width: 1200px;
  margin: 0 auto;
 }

 /* (A2) SMALL SCREENS - 2 IMAGES PER ROW */
 @media screen and (max-width: 640px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }

 /* (B) THUMBNAILS & CAPTION */
 .gallery figure {
  margin: 0;
  border: 1px solid #cdcdcd;
  background: #000;
 }
 .gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover; /* fill | contain | cover | scale-down */
  cursor: pointer;
 }
 .gallery figcaption {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.1em;
  text-align: center;
  color: #fff;
  padding: 5px 10px;
 }

 /* (C) FULLSCREEN IMAGE */
 .gallery img.full {
  position: fixed;
  top: 0; left: 0; z-index: 999;
  width: 100vw; height: 100vh;
  object-fit: contain; /* fill | contain | cover | scale-down */
  background: #fff;
 }

 /* (D) OPTIONAL ANIMATION *
 .gallery { overflow-x: hidden; }
 .gallery img { transition: all 0.3s; } */
diff --git a/S2C_gallery.js b/S2C_gallery.js
 window.addEventListener("DOMContentLoaded", () => {
  // (A) GET ALL IMAGES
  var all = document.querySelectorAll(".gallery img");
 
  // (B) CLICK ON IMAGE TO TOGGLE FULLSCREEN
  if (all.length>0) { for (let img of all) {
    img.onclick = () => img.classList.toggle("full");
  }}
 });
diff --git a/unpack.bat b/unpack.bat
 md templates
 md static
 move S2A_gallery.html templates
 move S2B_gallery.css static
 move S2C_gallery.js static
 curl https://user-images.githubusercontent.com/11156244/281273850-7147f2dd-712a-4728-8c06-f5687af33230.png --ssl-no-revoke --output static/wind.jpg
 curl https://user-images.githubusercontent.com/11156244/281273848-d1a7c896-1f84-4fc2-8f85-e50bb2eebc4f.png --ssl-no-revoke --output static/water.png
 curl https://user-images.githubusercontent.com/11156244/281273846-fb8ff883-f221-4c82-8c3d-2856841d73a3.png --ssl-no-revoke --output static/fire.jpg
 curl https://user-images.githubusercontent.com/11156244/281273838-b511b6d1-f2d2-4aa8-b259-e19344e5e634.png --ssl-no-revoke --output static/earth.jpg
 virtualenv venv
 call venv\Scripts\activate
 pip install flask
 python S1_server.py
diff --git a/unpack.sh b/unpack.sh
 mkdir -m 777 templates
 mkdir -m 777 static
 mv ./S2A_gallery.html ./templates
 mv ./S2B_gallery.css ./static
 mv ./S2C_gallery.js ./static
 curl https://user-images.githubusercontent.com/11156244/281273850-7147f2dd-712a-4728-8c06-f5687af33230.png --ssl-no-revoke --output ./static/wind.jpg
 curl https://user-images.githubusercontent.com/11156244/281273848-d1a7c896-1f84-4fc2-8f85-e50bb2eebc4f.png --ssl-no-revoke --output ./static/water.png
 curl https://user-images.githubusercontent.com/11156244/281273846-fb8ff883-f221-4c82-8c3d-2856841d73a3.png --ssl-no-revoke --output ./static/fire.jpg
 curl https://user-images.githubusercontent.com/11156244/281273838-b511b6d1-f2d2-4aa8-b259-e19344e5e634.png --ssl-no-revoke --output ./static/earth.jpg
 virtualenv venv
 source "venv/bin/activate"
 pip install flask
 python S1_server.py
	# (A) INIT
	# (A1) LOAD REQUIRED PACKAGES
	import os, glob
	from flask import Flask, render_template

	# (A2) FLASK SETTINGS + PATH
	HOST_NAME = "localhost"
	HOST_PORT = 80
	PATH_BASE = os.path.dirname(os.path.abspath(__file__))
	PATH_STATIC = os.path.join(PATH_BASE, "static")
	app = Flask(__name__)
	app.debug = True

	# (B) GET ALL IMAGES
	images = []
	for ext in ("jpg", "png", "gif", "webp"):
	for img in glob.iglob(PATH_STATIC + "/*." + ext):
	images.append(os.path.basename(img))
	# images.sort()
	# images.sort(reverse=True)

	# (C) GALLERY PAGE
	@app.route("/")
	def index():
	return render_template("S2A_gallery.html", images=images)

	# (D) START!
	if __name__ == "__main__":
	app.run(HOST_NAME, HOST_PORT)
	<!DOCTYPE html>
	<html>
	<head>
	<title>Simple Image Gallery</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="static/S2B_gallery.css">
	<script src="static/S2C_gallery.js"></script>
	</head>
	<body>
	<div class="gallery">
	{% for img in images: %}
	<figure>
	<img src="static/{{img}}">
	<figcaption>{{img}}</figcaption>
	</figure>
	{% endfor %}
	</div>
	</body>
	</html>
	/* (A) GALLERY CONTAINER */
	/* (A1) BIG SCREENS - 3 IMAGES PER ROW */
	.gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-gap: 10px;
	max-width: 1200px;
	margin: 0 auto;
	}

	/* (A2) SMALL SCREENS - 2 IMAGES PER ROW */
	@media screen and (max-width: 640px) {
	.gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}

	/* (B) THUMBNAILS & CAPTION */
	.gallery figure {
	margin: 0;
	border: 1px solid #cdcdcd;
	background: #000;
	}
	.gallery img {
	width: 100%;
	height: 200px;
	object-fit: cover; /* fill \| contain \| cover \| scale-down */
	cursor: pointer;
	}
	.gallery figcaption {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	text-align: center;
	color: #fff;
	padding: 5px 10px;
	}

	/* (C) FULLSCREEN IMAGE */
	.gallery img.full {
	position: fixed;
	top: 0; left: 0; z-index: 999;
	width: 100vw; height: 100vh;
	object-fit: contain; /* fill \| contain \| cover \| scale-down */
	background: #fff;
	}

	/* (D) OPTIONAL ANIMATION *
	.gallery { overflow-x: hidden; }
	.gallery img { transition: all 0.3s; } */
	window.addEventListener("DOMContentLoaded", () => {
	// (A) GET ALL IMAGES
	var all = document.querySelectorAll(".gallery img");

	// (B) CLICK ON IMAGE TO TOGGLE FULLSCREEN
	if (all.length>0) { for (let img of all) {
	img.onclick = () => img.classList.toggle("full");
	}}
	});
	md templates
	md static
	move S2A_gallery.html templates
	move S2B_gallery.css static
	move S2C_gallery.js static
	curl https://user-images.githubusercontent.com/11156244/281273850-7147f2dd-712a-4728-8c06-f5687af33230.png --ssl-no-revoke --output static/wind.jpg
	curl https://user-images.githubusercontent.com/11156244/281273848-d1a7c896-1f84-4fc2-8f85-e50bb2eebc4f.png --ssl-no-revoke --output static/water.png
	curl https://user-images.githubusercontent.com/11156244/281273846-fb8ff883-f221-4c82-8c3d-2856841d73a3.png --ssl-no-revoke --output static/fire.jpg
	curl https://user-images.githubusercontent.com/11156244/281273838-b511b6d1-f2d2-4aa8-b259-e19344e5e634.png --ssl-no-revoke --output static/earth.jpg
	virtualenv venv
	call venv\Scripts\activate
	pip install flask
	python S1_server.py
	mkdir -m 777 templates
	mkdir -m 777 static
	mv ./S2A_gallery.html ./templates
	mv ./S2B_gallery.css ./static
	mv ./S2C_gallery.js ./static
	curl https://user-images.githubusercontent.com/11156244/281273850-7147f2dd-712a-4728-8c06-f5687af33230.png --ssl-no-revoke --output ./static/wind.jpg
	curl https://user-images.githubusercontent.com/11156244/281273848-d1a7c896-1f84-4fc2-8f85-e50bb2eebc4f.png --ssl-no-revoke --output ./static/water.png
	curl https://user-images.githubusercontent.com/11156244/281273846-fb8ff883-f221-4c82-8c3d-2856841d73a3.png --ssl-no-revoke --output ./static/fire.jpg
	curl https://user-images.githubusercontent.com/11156244/281273838-b511b6d1-f2d2-4aa8-b259-e19344e5e634.png --ssl-no-revoke --output ./static/earth.jpg
	virtualenv venv
	source "venv/bin/activate"
	pip install flask
	python S1_server.py