From 72cb0effcaf9e6caaaa09627a0741fa3b6c05212 Mon Sep 17 00:00:00 2001
From: Bobby <bobbyskhs@gmail.com>
Date: Fri, 12 May 2023 19:48:14 -0400
Subject: Welcome section update. Chat box added. Screenshot reflects chatting
 as well

---
 ignis/views.py                               |  16 ++++++++++++--
 static/css/home.css                          |  31 +++++++++++++++++++++++++--
 static/images/backgrounds/welcome-banner.gif | Bin 4500727 -> 0 bytes
 static/images/backgrounds/welcome-banner.png | Bin 0 -> 378295 bytes
 templates/blog/home.html                     |  24 +++++++++++++++++++++
 5 files changed, 67 insertions(+), 4 deletions(-)
 delete mode 100644 static/images/backgrounds/welcome-banner.gif
 create mode 100644 static/images/backgrounds/welcome-banner.png

diff --git a/ignis/views.py b/ignis/views.py
index bb52c9f8..da39301d 100644
--- a/ignis/views.py
+++ b/ignis/views.py
@@ -9,7 +9,7 @@ import requests
 from django.core.files.base import ContentFile
 from captcha.image import ImageCaptcha
 from users.tokens import CaptchaTokenGenerator
-
+from django.conf import settings
 from django.http import HttpResponse
 from django.views.decorators.cache import never_cache
 from PIL import Image
@@ -182,11 +182,23 @@ def get_screenshot(request):
         driver = webdriver.Firefox(options=options)
         driver.set_window_size(1280, 1440)
 
-        url = 'https://www.thatcomputerscientist.com'
+        url = 'https://www.thatcomputerscientist.com' if not settings.DEBUG else 'https://preview.thatcomputerscientist.com'
+        print(settings.DEBUG)
 
         # Wait until the page is loaded
         driver.get(url)
         time.sleep(5)
+
+        # write 3 chat messages in #chatbox-input
+        chatbox = driver.find_element('id', 'chatbox-input')
+        chatbox.send_keys('Hello!')
+        chatbox.send_keys(u'\ue007')
+
+        chatbox.send_keys('Welcome to my website!')
+        chatbox.send_keys(u'\ue007')
+
+        chatbox.send_keys('You are currently viewing a a dynamically generated screenshot of my website!')
+        chatbox.send_keys(u'\ue007')
         
         screenshot = driver.get_screenshot_as_png()
         screenshot = Image.open(BytesIO(screenshot))
diff --git a/static/css/home.css b/static/css/home.css
index cbce7204..82cad039 100644
--- a/static/css/home.css
+++ b/static/css/home.css
@@ -1,7 +1,7 @@
 #welcome {
     width: 730px;
     height: 262px;
-    background: url('../images/backgrounds/welcome-banner.gif') no-repeat;
+    background: url('../images/backgrounds/welcome-banner.png') no-repeat;
     background-size: 730px 262px;
     margin: 0px auto 20px auto;
     border: 0px;
@@ -12,13 +12,40 @@
 }
 
 #welcome > p {
-    width: 400px;
+    width: 375px;
     margin: 12px 0px 12px 50px;
     position: relative;
     top: 30px;
     text-align: justify;
 }
 
+#chatbox {
+    position: absolute;
+    right: 110px;
+    width: 160px;
+    top: 25px;
+}
+
+#messages {
+    height: 175px;
+    overflow-y: scroll;
+    position: relative;
+}
+
+.message {
+    text-align: left;
+}
+
+#chatbox-input {
+    width: 156px;
+    border: none;
+    padding: 10px 2px 2px 2px;
+    resize: none;
+    border-top: solid 1px rgba(222, 222, 222, 0.7);
+    border-radius: 0;
+    height: 35px;
+}
+
 #announcements {
     background: url('../images/backgrounds/announcements.png') no-repeat;
     background-size: 730px 300px;
diff --git a/static/images/backgrounds/welcome-banner.gif b/static/images/backgrounds/welcome-banner.gif
deleted file mode 100644
index de3bbfd1..00000000
Binary files a/static/images/backgrounds/welcome-banner.gif and /dev/null differ
diff --git a/static/images/backgrounds/welcome-banner.png b/static/images/backgrounds/welcome-banner.png
new file mode 100644
index 00000000..8edf6a54
Binary files /dev/null and b/static/images/backgrounds/welcome-banner.png differ
diff --git a/templates/blog/home.html b/templates/blog/home.html
index 7252736c..5509f8ca 100644
--- a/templates/blog/home.html
+++ b/templates/blog/home.html
@@ -10,8 +10,13 @@
   Please note that I am continuously working on this site, and it is still under construction. So, not all features are available yet, and some features may not work as intended.
   </p>
   <p>
+    There's also a some of <a href="#fun-stuff">fun stuff</a> you can find in the sidebar, that you can play around with. I will be adding more in the not so distant future.
     Also, To participate around various sections of the site, you will need to <a href="{% url 'blog:register' %}">register</a> for an account. I hope you enjoy your stay here.
   </p>
+  <div id="chatbox">
+    <div id="messages"></div>
+    <textarea id="chatbox-input" placeholder="Type your message here... (⏎ to send)"></textarea>
+  </div>
 </div>
 <img src="{% static 'images/gifs/construction.gif' %}" style="width: 730px;">
 <div id="announcements">
@@ -52,5 +57,24 @@
 </div>
 {% include 'blog/partials/mathjax.html' %}
 {% endif %}
+<script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
+<script type="text/javascript">
+  var username = "{{ user.username }}" ? "{{ user.username }}" : "Anonymous";
+  $(document).ready(function() {
+      $('#chatbox-input').on('keyup', function(e) {
+          if (e.keyCode === 13) {
+              var msg = $('#chatbox-input').val();
+              if (msg.trim().length > 0) {
+                  var message = document.createElement("div");
+                  message.className = "message";
+                  message.innerHTML = "<b>" + username + "</b>: " + msg;
+                  $('#messages').append(message);
+                  $('#messages').animate({scrollTop: $('#messages').prop("scrollHeight")}, 100);
+              }
+              $('#chatbox-input').val("");
+          } 
+      });
+  });
+</script>
 
 {% endblock %}
-- 
cgit v1.2.3