a little more personality

codeforpakistan · May 4, 2024 · f04dd0f · f04dd0f
1 parent 2bf1fb9
commit f04dd0f
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 230 deletions.
diff --git a/about.html b/about.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"
+ />
+    <title>About Karachi Chal</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/
+[email protected]/css/bulma.min.css"
+    />
+  </head>
+
+  <body>
+    <section class="section">
+      <div class="container">
+        <div class="columns">
+          <div class="column is-8 is-offset-2">
+            <h1 class="title">About Karachi Chal</h1>
+
+            <p>
+              Karachi Chal is a web application that helps you explore the
+              vibrant city of Karachi, Pakistan. It provides information on
+              popular tourist destinations, local cuisine, and upcoming events.
+            </p>
+
+            <p>
+              The application is designed to be user-friendly and easy to
+              navigate. It features a clean and modern interface that makes it
+              easy to find the information you're looking for.
+            </p>
+
+            <h2 class="subtitle">Our Mission</h2>
+
+            <p>
+              Our mission is to promote tourism in Karachi and to help visitors
+              make the most of their stay in the city. We believe that Karachi
+              has a lot to offer visitors, and we want to share its beauty and
+              culture with the world.
+            </p>
+
+            <h2 class="subtitle">Our Team</h2>
+
+            <p>
+              Karachi Chal is a team of passionate individuals who are dedicated
+              to providing the best possible experience for our users. We have a
+              diverse team with a wide range of skills and experience, and we're
+              always looking for new ways to improve our application.
+            </p>
+
+            <p>
+              If you have any questions or feedback, please don't hesitate to
+              contact us. We're always happy to hear from our users.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -5,28 +5,67 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Karachi Chal</title>
+  <link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"
+>
 </head>
 
 <body>
+  <nav class="level">
+    <p class="level-item has-text-centered">
+      <img
+        src="Karachi Chal (1).svg"
+        alt=""
+        style="height: 256px"
+      />
+    </p>
+  </nav>
   <main>
-      <img src="Karachi Chal (1).svg" style="display: block; margin-left: auto; margin-right: auto; width: 50%;"/>
-      <h1>Your AI-Powered Itinerary Guide for Karachi</h1>
-      <form>
-        <div class="prompt-box">
-          <label>
-            <input name="prompt" placeholder="Enter itenerary and what you like to do here" type="text"
-              value="">
-          </label>
-          <button type="submit">Go</button>
+    <div class="container is-max-desktop">
+      <section class="section">
+
+        <form>
+          <div class="box is-clearfix">
+            <div class="field">
+              <div class="control">
+                <input
+  class="input is-large"
+  type="text"
+  name="prompt" placeholder="Enter itenerary and what you like to do here" type="text"
+              value=""
+/>
+              </div>
+            </div>
+        <!-- <div class="is-pulled-right"> -->
+            <button type="submit" class="button is-info is-pulled-right">Lets Go!</button>
+        <!-- </div> -->
         </div>
       </form>
-      <p class="output"></p>
-  </main>
-<footer class="sticky-footer">
-  <p>Karachi Chal is a project of <a href="https://codeforpakistan.org">Code for Pakistan</a> built with  ❤️ and the people of Karachi.</p>
-</footer>
-
+    </section>
+
 
+    <section class="section">
+      <!-- <p class="output"></p> -->
+      <article class="message is-info">
+        <div class="message-header">
+          <p>Your Itenerary</p>
+        </div>
+        <div class="message-body output">
+          <div class="skeleton-block"></div>
+        </div>
+      </article>
+    </section>
+    </div>
+  </main>
+  <footer class="footer">
+    <div class="content has-text-centered">
+      <p>
+        <strong>Karachi Chal</strong> built by <a href="https://codeforpakistan.org">Code For Pakistan</a> and the 
+        citizens of Karachi with ❤️. Powered by <a href="https://gemini.google.com">Google Gemini</a> ✨.
+      </p>
+    </div>
+  </footer>
   <script type="module" src="/main.js"></script>
 </body>
 </html>
diff --git a/main.js b/main.js
@@ -4,16 +4,22 @@ import MarkdownIt from 'markdown-it';
 import './style.css';
 
 
+
 // 🔥 https://g.co/ai/idxGetGeminiKey 🔥
 let API_KEY = import.meta.env.VITE_GEMINI_KEY
 
 let form = document.querySelector('form');
 let promptInput = document.querySelector('input[name="prompt"]');
 let output = document.querySelector('.output');
+let message = document.querySelector('.message');
+
+message.style.display = 'none';
 
 form.onsubmit = async (ev) => {
   ev.preventDefault();
 
+  message.style.display = 'block'
+
   try {
 
 

diff --git a/public/arfat-jabbar-RtIVw8BGMWc-unsplash.jpg b/public/arfat-jabbar-RtIVw8BGMWc-unsplash.jpg
diff --git a/public/muhammad-jawaid-shamshad-24W9b5WZuS4-unsplash.jpg b/public/muhammad-jawaid-shamshad-24W9b5WZuS4-unsplash.jpg
diff --git a/public/muneer-ahmed-ok-WhL6zAjjlUc-unsplash.jpg b/public/muneer-ahmed-ok-WhL6zAjjlUc-unsplash.jpg
diff --git a/public/qasim-nagori-mqP1EKXKB8E-unsplash.jpg b/public/qasim-nagori-mqP1EKXKB8E-unsplash.jpg
diff --git a/style.css b/style.css
@@ -1,218 +1,4 @@
 body {
-  margin: 24px;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  --accent-color: #076EFF;
-  color: #202124;
-  background-color: lightgoldenrodyellow;
-}
-
-main,
-.api-key-banner {
-  width: 100%;
-  padding: 24px;
-  max-width: 460px;
-  margin: 0 auto;
-  border-radius: 20px;
-}
-
-* {
-  outline-color: var(--accent-color);
-}
-
-main {
-  background-color: lightsteelblue;
-}
-
-h1 {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 0 auto;
-  font-size: 24px;
-}
-
-h1::before {
-  content: '';
-  display: inline-block;
-  /* background: url(gemini.png); */
-  /* width: 40px;
-  height: 40px; */
+  background-image: url("arfat-jabbar-RtIVw8BGMWc-unsplash.jpg");
   background-size: cover;
-}
-
-form {
-  margin: 0;
-}
-
-.image-picker {
-  display: flex;
-  width: 100%;
-  gap: 8px;
-  margin-top: 24px;
-}
-
-.image-choice {
-  position: relative;
-  border-radius: 8px;
-  overflow: hidden;
-  cursor: pointer;
-}
-
-.image-choice:has(:checked)::before {
-  pointer-events: none;
-  position: absolute;
-  right: 8px;
-  top: 8px;
-  z-index: 1;
-  color: white;
-  content: '✓';
-  background-color: var(--accent-color);
-  width: 16px;
-  height: 16px;
-  display: grid;
-  place-items: center;
-  font-weight: bold;
-  border-radius: 100px;
-  box-shadow: 0 0 0 2px #fff;
-}
-
-.image-choice:has(:checked)::after {
-  content: '';
-  position: absolute;
-  pointer-events: none;
-  inset: 0;
-  border-radius: 8px;
-  box-shadow:
-    0 0 0 2px var(--accent-color) inset,
-    0 0 0 4px #fff inset;
-}
-
-.image-choice img {
-  width: 100%;
-}
-
-.image-choice input {
-  opacity: 0;
-  position: absolute;
-}
-
-.image-choice:focus-within::after {
-  box-shadow: 0 0 0 4px var(--accent-color) inset;
-}
-
-.prompt-box {
-  margin: 24px 0;
-  width: 100%;
-  display: flex;
-  gap: 8px;
-  align-items: flex-end;
-}
-
-label {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 8px;
-  font-size: 12px;
-}
-
-input,
-button {
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  padding: 12px 16px;
-  font-family: unset;
-  font-size: 16px;
-}
-
-button {
-  border-color: var(--accent-color);
-  background-color: var(--accent-color);
-  color: white;
-  font-weight: bold;
-  cursor: pointer;
-  opacity: 1;
-}
-
-button:focus-visible {
-  outline: 2px solid white;
-  outline-offset: -4px;
-}
-
-button:hover {
-  opacity: 0.95;
-}
-
-.chatbot-container {
-  background-color: #f5f5f5;
-  border-radius: 10px;
-  padding: 20px;
-}
-
-.chatbot-header {
-  background-color: #008080;
-  color: #fff;
-  padding: 10px;
-  border-radius: 10px 10px 0 0;
-}
-
-.chatbot-body {
-  height: 300px;
-  overflow-y: auto;
-}
-
-.chatbot-messages {
-  display: flex;
-  flex-direction: column;
-}
-
-.user-message,
-.bot-message {
-  padding: 10px;
-  margin: 10px 0;
-  border-radius: 5px;
-}
-
-.user-message {
-  background-color: #008080;
-  color: #fff;
-  align-self: flex-end;
-}
-
-.bot-message {
-  background-color: #e0e0e0;
-  align-self: flex-start;
-}
-
-.chatbot-input-container {
-  display: flex;
-  align-items: center;
-}
-
-input[type="text"] {
-  flex-grow: 1;
-  padding: 10px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-}
-
-button[type="submit"] {
-  background-color: #008080;
-  color: #fff;
-  padding: 10px;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-
-.sticky-footer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  background-color: #f5f5f5;
-  padding: 1rem;
-  text-align: center;
 }