2024 shorts v1.2 added gallery item details

noeltock · Oct 5, 2024 · af79567 · af79567
1 parent 82cd329
commit af79567
Show file tree

Hide file tree

Showing 7 changed files with 330 additions and 103 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -1,18 +1,18 @@
-on: push
-name: 🚀 Deploy website on push
-jobs:
-  web-deploy:
-    name: 🎉 Deploy
-    runs-on: ubuntu-latest
-    steps:
-    - name: 🚚 Get latest code
-      uses: actions/checkout@v3
-    
-    - name: 📂 Sync files
-      uses: SamKirkland/[email protected]
-      with:
-        server: ftp.vpdfo.org
-        username: ${{ secrets.ftp_username }}
-        password: ${{ secrets.ftp_password }}
-        local-dir: ./src/
-        server-dir: ./public_html/
+#on: push
+#name: 🚀 Deploy website on push
+#jobs:
+#  web-deploy:
+#    name: 🎉 Deploy
+#    runs-on: ubuntu-latest
+#    steps:
+#    - name: 🚚 Get latest code
+#      uses: actions/checkout@v3
+#
+#    - name: 📂 Sync files
+#      uses: SamKirkland/[email protected]
+#      with:
+#        server: ftp.vpdfo.org
+#        username: ${{ secrets.ftp_username }}
+#        password: ${{ secrets.ftp_password }}
+#        local-dir: ./src/
+#        server-dir: ./public_html/
diff --git a/src/gallery.css b/src/gallery.css
@@ -0,0 +1,93 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: Arial, sans-serif;
+}
+
+body {
+    background-color: #f5f5f5;
+    padding: 20px;
+}
+
+.container {
+    display: flex;
+    justify-content: space-between;
+    max-width: 1200px;
+    margin: auto;
+    /*background-color: #ffffff;*/
+    background-color: rgba(47, 65, 91, 0.8);
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.image-section {
+    flex: 1;
+}
+
+.art-image {
+    max-width: 100%;
+    border-radius: 8px;
+    object-fit: cover;
+    padding: 16px;
+}
+
+.info-section {
+    flex: 1;
+    margin-left: 20px;
+}
+
+.author-name {
+    font-size: 32px;
+    font-weight: bold;
+}
+
+.picture-name {
+    font-size: 24px;
+    margin: 10px 0;
+}
+
+.picture-description, .price {
+    font-size: 18px;
+    margin: 5px 0;
+}
+
+.offer-btn {
+    margin-top: 20px;
+    padding: 10px 20px;
+    background-color: #000;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+
+.offer-btn:hover {
+    background-color: #555;
+}
+
+.additional-info {
+    margin-top: 20px;
+}
+
+.additional-info p {
+    font-size: 16px;
+    margin-bottom: 10px;
+}
+
+@media screen and (max-width: 768px) {
+    .container {
+        flex-direction: column;
+    }
+
+    .info-section {
+        margin-left: 0;
+        margin-top: 20px;
+    }
+
+    .offer-btn {
+        width: 100%;
+    }
+}
diff --git a/src/gallery.html b/src/gallery.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-SLNV7GLXM4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+
+        function gtag() {
+            dataLayer.push(arguments);
+        }
+
+        gtag("js", new Date());
+        gtag("config", "G-SLNV7GLXM4");
+    </script>
+    <meta charset="utf-8"/>
+    <title>#VPDFO! Festival 2024</title>
+    <meta name="description" content="Oct 5-6 2024 in Kyiv — Livestream also available. Join us!"/>
+    <meta name="author" content="@noeltock"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta http-equiv="Cache-Control" content="public, max-age=31536000">
+
+    <!-- Facebook Meta Tags -->
+    <meta property="og:url" content="https://vpdfo.org/"/>
+    <meta property="og:type" content="website"/>
+    <meta property="og:title" content="#VPDFO! Festival 2024"/>
+    <meta property="og:description" content="Oct 5-6 2024 in Kyiv — Livestream also available. Join us!"/>
+    <meta property="og:image" content="https://vpdfo.org/background.jpeg"/>
+
+    <!-- Twitter Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image"/>
+    <meta property="twitter:domain" content="vpdfo.org"/>
+    <meta property="twitter:url" content="https://vpdfo.org/"/>
+    <meta name="twitter:title" content="#VPDFO! Festival 2024"/>
+    <meta name="twitter:description" content="Oct 5-6 2024 in Kyiv — Livestream also available. Join us!"/>
+    <meta name="twitter:image" content="https://vpdfo.org/background.jpeg"/>
+
+    <link rel="icon" type="image/png" href="ico.png"/>
+    <link rel="preconnect" href="https://fonts.googleapis.com"/>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Staatliches&display=swap"
+          rel="stylesheet"/>
+    <link href="https://fonts.cdnfonts.com/css/muller-next-expanded-trial" rel="stylesheet">
+    <script src="https://cdn.hadronid.net/hadron.js?url=https%3A%2F%2Fbefonts.com%2Fmuller-next-font-family.html&amp;ref=https%3A%2F%2Fwww.google.com%2F&amp;_it=amazon&amp;partner_id=617"></script>
+    <link rel="stylesheet" href="main-styles.css?v=5"/>
+    <link rel="stylesheet" href="gallery.css">
+</head>
+
+<body class="bg-gray-800 text-white font-inter">
+<div class="container">
+    <div class="image-section">
+        <img id="picturePreview" alt="Artwork" class="art-image protect-image">
+    </div>
+    <div class="info-section" >
+        <h1 id="pictureName"
+            class="relative text-6xl font-extrabold text-hat mt-10 font-staat tracking-wide -skew-y-2 text-center md:text-left md:-left-5">
+            I Threw It All Away, 2012
+        </h1>
+        <!--        <h1 class="author-name">Richard Mosse</h1>-->
+        <h2 id="authorName"
+            class="relative text-4xl font-extrabold mt-10 font-staat tracking-wide -skew-y-2 text-center md:text-left md:-left-5">
+            Richard Mosse</h2>
+        <p id="pictureDescription" class="picture-description mt-5 leading-6">Digital C-Print, 40 1/5 × 50 in (102 × 127
+            cm), Frame included</p>
+        <p id="pictureSize" class="price">50x30</p>
+        <p id="price" class="price">Price: US$20,000 – US$26,000</p>
+        <div class="additional-info">
+            <p id="bio"></p>
+        </div>
+
+        <button class="block bg-hat hover:bg-orange-400 text-white text-lg py-2 px-4 rounded leading-6 w-full" style="margin-top: 12px">Buy
+        </button>
+    </div>
+</div>
+<script src="gallery_script.js"></script>
+</body>
+</html>
diff --git a/src/gallery_script.js b/src/gallery_script.js
@@ -0,0 +1,49 @@
+// 1. Функция для получения параметра imageId из URL
+function getImageIdFromUrl() {
+    const params = new URLSearchParams(window.location.search);
+    return params.get('imageId');
+}
+
+// 2. Функция для загрузки данных из JSON-файла
+async function loadContent() {
+    try {
+        const response = await fetch('gallery/content.json');
+        const data = await response.json();
+        return data;
+    } catch (error) {
+        console.error('There was a problem with the fetch operation:', error);
+        return null;
+    }
+}
+
+// 3. Функция для нахождения объекта по id
+function findArtworkById(data, id) {
+    return data.find(item => item.id == id);
+}
+
+// 4. Функция для вставки данных в HTML
+function populatePage(artwork) {
+    if (!artwork) {
+        console.error('Not fount item by id');
+        return;
+    }
+
+    document.getElementById('picturePreview').src = "gallery/" + artwork.id + ".jpg";
+    document.getElementById('authorName').textContent = artwork.authorName;
+    document.getElementById('pictureName').textContent = artwork.pictureName;
+    document.getElementById('pictureDescription').textContent = artwork.pictureDescription;
+    document.getElementById('pictureSize').textContent = `Size: ${artwork.pictureSize}`;
+    document.getElementById('price').textContent = `Price: ${artwork.price}`;
+    document.getElementById('bio').textContent = artwork.bio;
+}
+
+// 5. Основная логика скрипта
+(async function() {
+    const imageId = getImageIdFromUrl();  // Считываем imageId из URL
+    const contentData = await loadContent(); // Загружаем данные из JSON
+
+    if (contentData) {
+        const artwork = findArtworkById(contentData, imageId); // Находим объект по id
+        populatePage(artwork);  // Вставляем данные на страницу
+    }
+})();