Add: login page and game page

BIT-GDSC · Sep 17, 2023 · c623a78 · c623a78
1 parent 5fb1953
commit c623a78
Show file tree

Hide file tree

Showing 28 changed files with 498 additions and 30 deletions.
diff --git a/assets/img/239887e6b7758543a29b1772893e4114.jpg b/assets/img/239887e6b7758543a29b1772893e4114.jpg
diff --git a/assets/img/291221a5c0cd5aa1708276be038c2daf9f0c5417_00.gif b/assets/img/291221a5c0cd5aa1708276be038c2daf9f0c5417_00.gif
diff --git a/assets/img/Group_47-removebg-preview.png b/assets/img/Group_47-removebg-preview.png
diff --git a/assets/img/Group_48-removebg-preview.png b/assets/img/Group_48-removebg-preview.png
diff --git a/assets/img/Group_6-removebg-preview.png b/assets/img/Group_6-removebg-preview.png
diff --git a/assets/img/My-img8bit-com-Effect-removebg-preview.png b/assets/img/My-img8bit-com-Effect-removebg-preview.png
diff --git a/assets/img/My-img8bit-com-Effect.gif b/assets/img/My-img8bit-com-Effect.gif
diff --git a/assets/img/My-img8bit-com-Effect.jpg b/assets/img/My-img8bit-com-Effect.jpg
diff --git a/assets/img/My-img8bit-com-Effect_1-removebg-preview.png b/assets/img/My-img8bit-com-Effect_1-removebg-preview.png
diff --git a/assets/img/My-img8bit-com-Effect_3-removebg-preview.png b/assets/img/My-img8bit-com-Effect_3-removebg-preview.png
diff --git a/assets/img/background.webp b/assets/img/background.webp
diff --git a/assets/img/d51i55p-ab5eed4e-eace-463e-b768-ff4d4b03380c-removebg-preview.png b/assets/img/d51i55p-ab5eed4e-eace-463e-b768-ff4d4b03380c-removebg-preview.png
diff --git a/assets/img/first.png b/assets/img/first.png
diff --git a/assets/img/images-removebg-preview.png b/assets/img/images-removebg-preview.png
diff --git a/assets/img/logo.png b/assets/img/logo.png
diff --git a/assets/img/output-onlinegiftools.gif b/assets/img/output-onlinegiftools.gif
diff --git a/...xelated-heart-for-game-interface-play-life-vector-44555078-removebg-preview.png b/...xelated-heart-for-game-interface-play-life-vector-44555078-removebg-preview.png
diff --git a/assets/img/poke-dialog-removebg-preview.png b/assets/img/poke-dialog-removebg-preview.png
diff --git a/assets/img/poke-dialog.png b/assets/img/poke-dialog.png
diff --git a/...ixel-art-pokemon-psyduck-5a24f9b6f6c96a8d29720948.brickImg-removebg-preview.png b/...ixel-art-pokemon-psyduck-5a24f9b6f6c96a8d29720948.brickImg-removebg-preview.png
diff --git a/assets/img/second.png b/assets/img/second.png
diff --git a/assets/img/third.png b/assets/img/third.png
diff --git a/assets/img/title.png b/assets/img/title.png
diff --git a/index.html b/index.html
@@ -1,25 +1,104 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GDSC-BIT | PokePrompt</title>
+    <!-- gfonts -->
+    <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=VT323&display=swap" rel="stylesheet">
+    <!-- nes.css -->
+    <link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
+    <!-- custom styles -->
     <link rel="stylesheet" href="style.css">
-    <title>PokePrompt</title>
 </head>
+
 <body>
-    <div class="page">
-        <div class="gdsc-logo"><img src="media/Group_6-removebg-preview 1.png"></div>
-        <div class="bird"> <img src="media/output-onlinegiftools 1.png"></div>
-        <div class="poke"><img src="media/PokéPrompt.png"></div>
-        <div class="poke"><img src="media/by GDSC-BIT.png"></div>
-        <div class="poke" id="game-screen"><img src="media/pokedesk.jpg" width="40%"></div>
-    </div>
-    <div>
-        <div><img src="media/"></div>
-
+    <div class="formbold-main-wrapper">
+        <!-- Author: FormBold Team -->
+        <!-- Learn More: https://formbold.com -->
+        <div class="formbold-form-wrapper">
+
+            <div class="full-width logo-div">
+                <img src="https://cdn.discordapp.com/attachments/1152318832602525706/1152580696779530240/title.png" class="logo">
+            </div>
+
+            <form id="pokeForm">
+                <!-- Added an ID to the form for easier access in JavaScript -->
+
+                <div class="formbold-input-flex full-width">
+                    <div class="nes-field">
+                        <label for="name">Your name</label>
+                        <input type="text" id="name" name="name" class="nes-input" required>
+                    </div>
+                </div>
+
+                <div class="formbold-input-flex full-width">
+                    <div class="nes-field">
+                        <label for="email">Email</label>
+                        <input type="email" id="email" name="email" class="nes-input" required>
+                    </div>
+                </div>
+
+                <div class="formbold-mb-3">
+                    <label for="member">Do you study in Bengal Institute of Technology (BIT)?</label>
+                    <div class="nes-select">
+                        <select id="member" name="member" required>
+                            <option value="" disabled selected hidden>Select...</option>
+                            <option value="true">Yes</option>
+                            <option value="false">No</option> <!-- Changed "NO" to "No" for consistency -->
+                        </select>
+                    </div>
+                </div>
+
+                <center>
+                    <button class="formbold-btn nes-btn is-warning" type="submit">Start Game!</button>
+                </center>
+            </form>
+        </div>
     </div>
 
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            const form = document.querySelector("#pokeForm");
+
+            form.addEventListener("submit", function(e) {
+                e.preventDefault();
+
+                const formData = new FormData(form);
+                const data = {};
+                formData.forEach((value, key) => {
+                    data[key] = value;
+                });
+                console.log(data);
+
+                const xhr = new XMLHttpRequest();
+                const url = "https://gdsctempauth.bitgdsc.repl.co/login";
 
-
+                xhr.open("POST", url, true);
+                xhr.setRequestHeader("Content-Type", "application/json");
+
+                // Set the mode to 'no-cors'
+                xhr.mode = 'no-cors';
+
+                xhr.onreadystatechange = function() {
+                    if (xhr.readyState === 4) {
+                        if (xhr.status === 200) {
+                            console.log("Server responded with:", xhr.responseText);
+                            localStorage.setItem("responseData", xhr.responseText);
+                            window.location.href = "/pokeprompt";
+                        } else {
+                            console.error("Server returned an error:", xhr.statusText);
+                        }
+                    }
+                };
+
+                xhr.send(JSON.stringify(data));
+            });
+        });
+    </script>
 </body>
+
 </html>
diff --git a/pokeprompt/app.js b/pokeprompt/app.js
@@ -0,0 +1,22 @@
+const systemPrompt = document.querySelector("#prompt");
+
+
+function fetchSystemPrompt(url) {
+    fetch(url)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            return response.json();
+        })
+        .then(data => {
+            console.log(data);
+            systemPrompt.textContent = data.sys_prompt;
+        })
+        .catch(error => {
+            console.error('Error fetching data:', error);
+        });
+}
+
+
+fetchSystemPrompt("https://pokeprompt.bitgdsc.repl.co/default/lv_3");
diff --git a/pokeprompt/index.html b/pokeprompt/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GDSC-BIT | PokePrompt</title>
+    <link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+    <section id="gameplay-container">
+        <div class="pokemon-desk">
+            <div class="desk-bg">
+                <img src="https://cdn.discordapp.com/attachments/1152318832602525706/1152580530626363484/pokedesk.jpg" id="pokedesk-img" alt="Image">
+            </div>
+            <div class="desk-ball">
+                <img src="https://64.media.tumblr.com/f4918498af34c8764de970a2ca76795b/tumblr_mvzj2elEQA1rfjowdo1_500.gif" alt="" id="pokeball">
+            </div>
+            <div class="desk-display">
+                <div class="system-prompt">
+                    <h1>SYSTEM PROMPT:</h1>
+                    <textarea name="prompt" id="prompt" cols="30" rows="10" readonly>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint, minima eius cum necessitatibus porro molestias dignissimos totam, vero veritatis reprehenderit dolor cupiditate. Dolor aliquam ut iste aperiam nemo consequatur dolorem?</textarea>
+                </div>
+                <div class="gpt-response">
+                    <h1>POKEDESK RESPONSE:</h1>
+                    <textarea name="response" id="response" cols="30" rows="10" readonly>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint, minima eius cum necessitatibus porro molestias dignissimos totam, vero veritatis reprehenderit dolor cupiditate. Dolor aliquam ut iste aperiam nemo consequatur dolorem?</textarea>
+                </div>
+            </div>
+            <div class="desk-instructions">
+                <p id="scrolling-text">INSTRUCTIONS Goal of this game is to come up with the shortest user input that tricks the system prompt into returning the secret key (your Pokémon) back to you.</p>
+            </div>
+        </div>
+    </section>
+    <script type="module" src="app.js"></script>
+</body>
+
+</html>
diff --git a/pokeprompt/style.css b/pokeprompt/style.css
@@ -0,0 +1,152 @@
+@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'VT323', monospace;
+}
+
+#gameplay-container {
+    background-image: url("https://wallpaperaccess.com/full/1089608.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    resize: both;
+}
+
+@media (max-width: 768px) {
+    #gameplay-container {
+        background-image: url("https://cdn.discordapp.com/attachments/1152318832602525706/1152759917204209724/4x.png");
+    }
+}
+
+.desk-bg {
+    height: 500px;
+    width: 325px;
+}
+
+.desk-bg img {
+    height: 100%;
+    width: 100%;
+}
+
+.pokemon-desk {
+    position: relative;
+}
+
+.desk-ball {
+    height: 40px;
+    width: 50px;
+    position: absolute;
+    top: 18px;
+    left: 33px;
+}
+
+.desk-ball img {
+    height: 100%;
+    width: 100%;
+}
+
+.desk-display {
+    height: 260px;
+    width: 247px;
+    /* background-color: white; */
+    position: absolute;
+    top: 93px;
+    left: 40px;
+    padding-left: 10px;
+}
+
+h1 {
+    margin: 0;
+    font-weight: medium;
+    font-size: 25px;
+}
+
+textarea {
+    margin: 0;
+    border: none;
+    background-color: transparent;
+    resize: none;
+    outline: none;
+    height: 70px;
+    width: 230px;
+    font-weight: normal;
+    font-size: 15px;
+    line-height: 18px;
+}
+
+.gpt-response {
+    margin-top: 10px;
+}
+
+.desk-instructions {
+    position: absolute;
+    top: 361px;
+    left: 30px;
+    height: 50px;
+    width: 255px;
+    background-color: transparent;
+    color: black;
+    overflow: hidden;
+    padding: 0px;
+    /* position: relative; */
+}
+
+#scrolling-text {
+    position: absolute;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    line-height: 50px;
+    text-align: center;
+    /* Starting position */
+    -moz-transform: translateX(100%);
+    -webkit-transform: translateX(100%);
+    transform: translateX(100%);
+    /* Apply animation to this element */
+    -moz-animation: scroll-left 5s linear infinite;
+    -webkit-animation: scroll-left 5s linear infinite;
+    animation: scroll-left 10s linear infinite;
+}
+
+@-moz-keyframes scroll-left {
+    0% {
+        -moz-transform: translateX(100%);
+    }
+    100% {
+        -moz-transform: translateX(-100%);
+    }
+}
+
+@-webkit-keyframes scroll-left {
+    0% {
+        -webkit-transform: translateX(100%);
+    }
+    100% {
+        -webkit-transform: translateX(-100%);
+    }
+}
+
+@keyframes scroll-left {
+    0% {
+        -moz-transform: translateX(100%);
+        /* Browser bug fix */
+        -webkit-transform: translateX(100%);
+        /* Browser bug fix */
+        transform: translateX(100%);
+    }
+    100% {
+        -moz-transform: translateX(-100%);
+        /* Browser bug fix */
+        -webkit-transform: translateX(-100%);
+        /* Browser bug fix */
+        transform: translateX(-100%);
+    }
+}
+
+