completed

index.html

@@ -25,6 +25,13 @@ <h2 class="p-3">Poster Generator</h2>
         <a id="downloadBtn" class="btn btn-custom mt-3" download="generated_poster.png">Download Poster</a>
         <button id="shareBtn" class="btn btn-custom mt-3" onclick="sharePoster()">Share Poster</button>
 
+        <div class="instruction-box p-3 my-3 text-center bg-light border rounded" id="instruction-box">
+            <p class="mb-2">
+                <strong>How to share:</strong> Click "Copy Text" to copy the message below, then press "Share Poster" to open your favorite social media platform (e.g., LinkedIn or Twitter) and share your attendance at <strong>#ACDKOCHI24</strong>!
+            </p>
+        </div>
+
+
         <!-- Share Text Section -->
         <div id="shareTextContainer">
             <label for="shareText">Shareable Message:</label>

script.js

@@ -92,9 +92,12 @@ function generatePoster() {
             image.src = e.target.result;
         };
         reader.readAsDataURL(file);
+
+        document.getElementById('instruction-box').style.display = "block";
+
     };
 
-    document.getElementById('shareTextContainer').style.display = 'block';
+
 }
 
 async function sharePoster() {

style.css

@@ -74,3 +74,11 @@ footer {
   font-size: 0.9rem;
   color: #777;
 }
+
+.instruction-box {
+  font-weight: 500;
+  background-color: #f8f9fa; /* Light gray background */
+  border: 1px solid #dee2e6; /* Subtle border color */
+  border-radius: 8px;        /* Rounded corners */
+  display: none;
+}