diff --git a/about.html b/about.html new file mode 100644 index 0000000..72603d7 --- /dev/null +++ b/about.html @@ -0,0 +1,60 @@ + + + + + About Karachi Chal + + + + +
+
+
+
+

About Karachi Chal

+ +

+ 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. +

+ +

+ 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. +

+ +

Our Mission

+ +

+ 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. +

+ +

Our Team

+ +

+ 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. +

+ +

+ If you have any questions or feedback, please don't hesitate to + contact us. We're always happy to hear from our users. +

+
+
+
+
+ + diff --git a/index.html b/index.html index 00ae501..5a52bd5 100755 --- a/index.html +++ b/index.html @@ -5,28 +5,67 @@ Karachi Chal + +
- -

Your AI-Powered Itinerary Guide for Karachi

-
-
- - +
+
+ + +
+
+
+ +
+
+ + +
-

-
- - + + +
+ +
+
+

Your Itenerary

+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/main.js b/main.js index 8ccfb43..046cf33 100755 --- 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 new file mode 100644 index 0000000..4ba335d Binary files /dev/null and b/public/arfat-jabbar-RtIVw8BGMWc-unsplash.jpg differ diff --git a/public/muhammad-jawaid-shamshad-24W9b5WZuS4-unsplash.jpg b/public/muhammad-jawaid-shamshad-24W9b5WZuS4-unsplash.jpg new file mode 100644 index 0000000..7b24273 Binary files /dev/null and b/public/muhammad-jawaid-shamshad-24W9b5WZuS4-unsplash.jpg differ diff --git a/public/muneer-ahmed-ok-WhL6zAjjlUc-unsplash.jpg b/public/muneer-ahmed-ok-WhL6zAjjlUc-unsplash.jpg new file mode 100644 index 0000000..30fa262 Binary files /dev/null and b/public/muneer-ahmed-ok-WhL6zAjjlUc-unsplash.jpg differ diff --git a/public/qasim-nagori-mqP1EKXKB8E-unsplash.jpg b/public/qasim-nagori-mqP1EKXKB8E-unsplash.jpg new file mode 100644 index 0000000..80638dd Binary files /dev/null and b/public/qasim-nagori-mqP1EKXKB8E-unsplash.jpg differ diff --git a/style.css b/style.css index 80fc885..c08986d 100755 --- 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; } \ No newline at end of file