add new project

www/index.html

@@ -60,6 +60,58 @@
             <div class="projects-section text-section">
                 <h2>Projects</h2>
                 
+                <div class="project sub-section">
+                    <h3>Web Presentation Clicker <small>(2024)</small></h3>
+                    <small><a href="https://on-stage.click/" target="_blank">Website</a> - <a href="https://addons.mozilla.org/en-US/firefox/addon/web-presentation-clicker/" target="_blank">Download for Firefox</a> - <a href="https://chromewebstore.google.com/detail/web-presentation-clicker/mnkkbdgkehfhenamhggdljdmlpdpjmom/" target="_blank">Download for Chrome</a> - <a href="https://github.com/web-presentation-clicker" target="_blank">Github</a></small>
+                    <p>A browser extension that lets you control your slideshow presentation from your phone, in the simplest way possible.</p>
+                    <details title="the deets">
+                        <summary>More details</summary>
+                        <p>
+                            &emsp;&emsp;Web Presentation Clicker is a browser extension that a fellow classmate and I worked on for the Web Applications course. It allows you to control your Google Slides or Office 365 slideshow presentation in your browser with your phone without having to download an app. The extension displays a QR code when opened, which both acts as a convenient link to the clicker webpage and contains the necessary pairing data. Once scanned, you are presented with two left and right arrow buttons that can be used to control your slideshow.
+                        </p>
+                        <p>
+                            &emsp;&emsp;To relay the slide change events to the browser extension, a server is used. The extension opens a websocket connection with the server, and the clicker (currently) sends REST API calls to the server to switch slides. A websocket-based clicker API has been implemented in the server but I have yet to add it to the client. The actual "clicking" of the presentation is done by simulating the arrow keys with javascript in the browser window.
+                        </p>
+                        <p>
+                            &emsp;&emsp;The server is written in python and consists of two components. A multiprocess uWSGI application that opens and maintains the websockets and accepts the REST API calls, and a multithreaded "session server" which keeps track of the presentations and routes the "click events" between the multiple uWSGI processes. The two communicate using unix domain socket connections, ensuring minimal overhead.
+                        </p>
+                        <p>
+                            &emsp;&emsp;I worked on the server and the extension while my classmate David worked on the landing page and the project reports. You can view our work <a href="https://github.com/web-presentation-clicker" target="_blank">on the github org</a>. You can even host your own server if you want.
+                        </p>
+                    </details>
+                    <div class="screenshot-collection">
+                        <div class="project-image">
+                            <label for="oscp" class="thumbnail">
+                                <img src="/img/osc-pairing-thumb.webp" alt="Web Presentation Clicker extension showing the pairing QR code">
+                            </label>
+                            <input type="checkbox" id="oscp">
+                            <div class="modal">
+                                <label for="oscp" class="modal-bg"></label>
+                                <label for="oscp" class="close"></label>
+                                <label>
+                                    <input type="checkbox">
+                                    <span class="lazy-image" id="oscp-fr"></span>
+                                </label>
+                            </div>
+                        </div>
+                        <div class="project-image">
+                            <label for="oscc" class="thumbnail no-crop">
+                                <img src="/img/osc-clicker-thumb.webp" alt="Clicker interface, consisting of two buttons for next and previous slide.">
+                            </label>
+                            <input type="checkbox" id="oscc">
+                            <div class="modal">
+                                <label for="oscc" class="modal-bg"></label>
+                                <label for="oscc" class="close"></label>
+                                <label>
+                                    <input type="checkbox">
+                                    <span class="lazy-image" id="oscc-fr"></span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                    <small>click image to view in full resolution</small>
+                </div>
+                
                 <div class="project sub-section">
                     <h3>PeerCord <small>(2023)</small></h3>
                     <p>An end-to-end encrypted client/server messaging application.</p>

www/style.css

@@ -408,6 +408,18 @@ body:has(.project-image > input:checked) {
 
 
 /* full-res images */
+#oscp-fr {
+    background-image: url(/img/osc-pairing.png);
+    --width: 1260;
+    --height: 798;
+}
+
+#oscc-fr {
+    background-image: url(/img/osc-clicker.png);
+    --width: 1551;
+    --height: 3284;
+}
+
 #lpcl-fr {
     background-image: url(/img/peercord-login.png);
     --width: 2004;