Received: from mail.netlandish.com (mail.netlandish.com [174.136.98.166])
	by code.netlandish.com (Postfix) with ESMTP id 010A757C6
	for <~netlandish/links-dev@lists.code.netlandish.com>; Thu, 30 May 2024 01:00:02 +0000 (UTC)
Received-SPF: Pass (mailfrom) identity=mailfrom; client-ip=209.85.221.182; helo=mail-vk1-f182.google.com; envelope-from=ra.elemm2009@gmail.com; receiver=lists.code.netlandish.com 
Authentication-Results: mail.netlandish.com;
	dkim=pass (2048-bit key; unprotected) header.d=gmail.com header.i=@gmail.com header.b=cXRPz9i1
Received: from mail-vk1-f182.google.com (mail-vk1-f182.google.com [209.85.221.182])
	by mail.netlandish.com (Postfix) with ESMTP id 1F30117A3C7
	for <~netlandish/links-dev@lists.code.netlandish.com>; Thu, 30 May 2024 01:00:12 +0000 (UTC)
Received: by mail-vk1-f182.google.com with SMTP id 71dfb90a1353d-4e4f01fd479so116902e0c.3
        for <~netlandish/links-dev@lists.code.netlandish.com>; Wed, 29 May 2024 18:00:12 -0700 (PDT)
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed;
        d=gmail.com; s=20230601; t=1717030811; x=1717635611; darn=lists.code.netlandish.com;
        h=content-transfer-encoding:mime-version:message-id:date:subject:cc
         :to:from:from:to:cc:subject:date:message-id:reply-to;
        bh=alIz0pO4aeSYO6BZCd1YEOH0yanDvCEeHQ9+xQToTQw=;
        b=cXRPz9i15n/EfM+ljLiTms+76ZUa/B+NnzvcCPq9uVoCKnDJb7deZDakZ8p99lc2Rv
         02jWAFwpg+H7P0FoyYXT5GyTjqw2E/It7bagw6csKbrex7Y8qBaQbVMnVGW5p45kYXou
         GrGdvls1+H3BAronhg2NzGAYm4uHAc+RB5XInC1Y5D+0a9Hdrz0uS6SrIm82BHmTwfdh
         oiinqBpH/IbaK6sI3tMkJnlylrC30hilApk80lcSHejlF5uBl2JTF3QNLzjYMqA8M7vN
         DzgwPEho9IMDGSjb+S1GOG6AjbjrC0IXFini4jKU4vHHZDyTHYsuAl4JeZ8WMB/kgytA
         SRGg==
X-Google-DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed;
        d=1e100.net; s=20230601; t=1717030811; x=1717635611;
        h=content-transfer-encoding:mime-version:message-id:date:subject:cc
         :to:from:x-gm-message-state:from:to:cc:subject:date:message-id
         :reply-to;
        bh=alIz0pO4aeSYO6BZCd1YEOH0yanDvCEeHQ9+xQToTQw=;
        b=SqTqAbZAICvsGvjQ2HxibNDSz34toZ1c5ffKt1PynSL+TEXf0xQjdH7V9buE7sBUbO
         KvmOx2guD5ibOXwfwsij5FpRBfdtY6JyMg89qg8U0RHCTNyy3rTIDcW3PM9jynWAE3Nz
         W4P+QnIIxOirR9elfvnt5VB9A9GkTKc8aaqfe/hAPjVMjKmIbU0MMkkQoBqu7iRMrorF
         l1w+BiP+8vhR3KpRBStOPEOeoRVZuZ/S5mGGeb7rgF/NFDDBia9/Q+go5AYkZWmeIhVp
         svUX14d96qIDyVCqNNSUJBinukByHiAVpti6DBtsBtJkhvYPcPHVGFk6gINQBkRr3/va
         BoGg==
X-Gm-Message-State: AOJu0Yy23R/T2AoEjXgJ1YGZv42bSXH6uGCmTjRatvvpAtQztKGZGJqF
	Q/2ToGUOfn5b7XGePp4wWX2EA8ZvIQGLTpjZLQuzQsfdYpB+UPmd4BVjZQ==
X-Google-Smtp-Source: AGHT+IEuHxQoZ9KnNF17z1wv1H/DJpmpFeBbIK2xUvQLHjiSFlNP5c001OX8BLnJJnhsUu5iy6bCng==
X-Received: by 2002:a05:6122:984:b0:4df:1a28:5e3c with SMTP id 71dfb90a1353d-4eaf2054df3mr1011512e0c.0.1717030809387;
        Wed, 29 May 2024 18:00:09 -0700 (PDT)
Received: from mudkip-B85M-DS3H-A.. ([186.77.205.216])
        by smtp.gmail.com with ESMTPSA id 71dfb90a1353d-4e97f5132fbsm278195e0c.38.2024.05.29.18.00.08
        (version=TLS1_3 cipher=TLS_AES_256_GCM_SHA384 bits=256/256);
        Wed, 29 May 2024 18:00:08 -0700 (PDT)
From: Rael Monge <ra.elemm2009@gmail.com>
To: ~netlandish/links-dev@lists.code.netlandish.com
Cc: Rael Monge <ra.elemm2009@gmail.com>
Subject: [PATCH links] Creating a dialog and using it on the tour page
Date: Wed, 29 May 2024 18:58:54 -0600
Message-Id: <20240530005854.126249-1-ra.elemm2009@gmail.com>
X-Mailer: git-send-email 2.34.1
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/css/style.css        | 34 +++++++++++++++++-
 templates/feature_tour.html | 69 +++++++++++++++++++++++++++++++++----
 2 files changed, 95 insertions(+), 8 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 7910889..638b6e3 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -820,4 +820,36 @@ a.bullet-link:before {
   justify-content: center;
   margin-top: 16px;
   margin-bottom: 16px;
-}
\ No newline at end of file
+}
+
+.hide-dialog {
+  display: none;
+}
+
+.show-dialog {
+  display: flex;
+}
+
+.close-dialog-div {
+  z-index: -1;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+}
+
+#dialog-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: rgba(0,0,0,0.5);
+  height: 100%;
+  border: solid 1px black;
+  justify-content: center;
+  align-items: center;
+}
+
+#dialog-image {
+  max-width: 95%;
+  max-height: 95%;
+}
diff --git a/templates/feature_tour.html b/templates/feature_tour.html
index 6b95acf..c339f0f 100644
--- a/templates/feature_tour.html
+++ b/templates/feature_tour.html
@@ -34,7 +34,7 @@
             </div>
         </div>
         <div class="col-4">
-            <img class="tour-section-img" src="{{staticURL "img/example.png"}}"/>
+            <img class="tour-section-img" src="{{ staticURL "img/web/lt_analytics_small.png" }}"/>
         </div>
     </div>
     <div class="tour-section row">
@@ -56,7 +56,7 @@
             </div>
         </div>
         <div class="col-4">
-            <img class="tour-section-img" src="{{staticURL "img/example.png"}}"/>
+            <img class="tour-section-img" src="{{staticURL "img/web/lt_bookmarks_small.png"}}"/>
         </div>
     </div>
     <div class="tour-section row">
@@ -79,7 +79,7 @@
             </div>
         </div>
         <div class="col-4">
-            <img class="tour-section-img" src="{{staticURL "img/example.png"}}"/>
+            <img class="tour-section-img" src="{{staticURL "img/web/lt_collaborate_small.png"}}"/>
         </div>
     </div>
     <div class="tour-section row">
@@ -98,7 +98,7 @@
             </div>
         </div>
         <div class="col-4">
-            <img class="tour-section-img" src="{{staticURL "img/example.png"}}"/>
+            <img class="tour-section-img" src="{{staticURL "img/web/lt_graphql_small.png"}}"/>
         </div>
     </div>
     <div class="tour-section row">
@@ -118,7 +118,7 @@
             </div>
         </div>
         <div class="col-4">
-            <img class="tour-section-img" src="{{staticURL "img/example.png"}}"/>
+            <img class="tour-section-img" src="{{staticURL "img/web/lt_import_small.png"}}"/>
         </div>
     </div>
     <div class="tour-section row">
@@ -138,7 +138,7 @@
             </div>
         </div>
         <div class="col-4">
-            <img class="tour-section-img" src="{{staticURL "img/example.png"}}"/>
+            <img class="tour-section-img" src="{{staticURL "img/web/lt_integrations_small.png"}}"/>
         </div>
     </div>
     <div class="tour-section row">
@@ -157,8 +157,63 @@
             </div>
         </div>
         <div class="col-4">
-            <img class="tour-section-img" src="{{staticURL "img/example.png"}}"/>
+            <img class="tour-section-img" src="{{staticURL "img/web/lt_linklistings_small.png"}}"/>
+        </div>
+    </div>
+    <div class="tour-section row">
+        <div class="col-8">
+            <h3 class="tour-title">{{.pd.Data.import_export}}</h3>
+            <ul>
+                <li>{{.pd.Data.import_pinboard}}</li>
+                <li>{{.pd.Data.export_json}}</li>
+            </ul>
+            <div class="tour-description">
+                <p>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro voluptate illo alias fugit
+                    nobis, accusamus, quae eius repellat quaerat.
+                </p>
+                <p>— Juan Perez, Netlandish Inc.</p>
+            </div>
+        </div>
+        <div class="col-4">
+            <img class="tour-section-img" src="{{staticURL "img/web/lt_linkshortening_small.png"}}"/>
         </div>
     </div>
 </section>
+
+<div id="dialog-container" class="hide-dialog">
+    <div class="close-dialog-div" onclick="closeDialog()"></div>
+    <img src="" alt="image from dialog" id="dialog-image">
+</div>
+  
 {{template "base_footer" .}}
+
+{{ define "extrajs" }}
+<script>
+    const openDialog = (photoName) => {
+        document.getElementById("dialog-image").src = "";
+        document.getElementById("dialog-image").src = "https://s3.amazonaws.com/linktaco/media/web/" + photoName;
+        document.getElementById("dialog-container").classList.remove("hide-dialog");
+        document.getElementById("dialog-container").classList.add("show-dialog");
+    };
+    const closeDialog = () => {
+        document.getElementById("dialog-container").classList.add("hide-dialog");
+        document.getElementById("dialog-container").classList.remove("show-dialog");
+    };
+
+    const images = document.getElementsByClassName("tour-section-img");
+
+    for(let i = 0; i < images.length; i++) {
+        images[i].addEventListener("click", (event) => {
+            openDialog(images[i].src.split("/").at(-1).replace("_small", ""));
+        });
+    }
+
+    document.addEventListener("keydown", (event) => {
+        const keyName = event.key;
+        if (keyName === "Escape") {
+            closeDialog();
+        }
+    });
+</script>
+{{ end }}
-- 
2.34.1