SAMBUDAR · krishagandhi0711 · Jul 31, 2025 · Jul 31, 2025 · Jul 31, 2025 · Jul 31, 2025
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,17 @@
+# Node.js
+node_modules/
+.env
+.env.local
+.DS_Store
+
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Vercel local settings
+.vercel
+
+# Optional: OS or editor specific
+.vscode/
+*.swp
diff --git a/api/chatbot.js b/api/chatbot.js
@@ -0,0 +1,49 @@
+import dotenv from 'dotenv';
+dotenv.config();
+
+export default async function handler(req, res) {
+  if (req.method !== 'POST') {
+    return res.status(405).json({ error: 'Only POST requests allowed' });
+  }
+
+  try {
+    const { messages } = req.body;
+
+    if (!messages || !Array.isArray(messages) || messages.length === 0) {
+      return res.status(400).json({ error: 'Messages array is required' });
+    }
+
+    const response = await fetch("https://openrouter.ai/api/v1/chat/completions", {
+      method: "POST",
+      headers: {
+        "Authorization": `Bearer ${process.env.OPENROUTER_API_KEY}`,
+        "Content-Type": "application/json",
+        "X-Title": "Styleka Fashion Assistant"
+      },
+      body: JSON.stringify({
+        model: "openai/gpt-4o-mini",
+        messages: [
+          {
+            role: "system",
+            content: `You are Styleka, a helpful and friendly fashion assistant for an e-commerce clothing site. 
+You help users with sizing, return policies, offers, order status, and outfit recommendations based on current trends or occasion. 
+Keep your tone stylish, brief, and confident.`
+          },
+          ...messages
+        ]
+      }),
+    });
+
+    const result = await response.json();
+
+    if (!result.choices || result.choices.length === 0) {
+      return res.status(500).json({ error: "No response from model" });
+    }
+
+    res.status(200).json({ reply: result.choices[0].message.content });
+
+  } catch (err) {
+    console.error("Handler error:", err);
+    res.status(500).json({ error: 'Something went wrong.' });
+  }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "styleka",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "node api/chatbot.js"
+  },
+  "dependencies": {
+    "dotenv": "^17.2.1"
+  }
+}
diff --git a/about.html → public/about.html b/about.html → public/about.html
@@ -9,6 +9,9 @@
     <!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" /> -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
     <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" rel="stylesheet" />
+    <link rel="stylesheet" href="/chatbot.css">
 </head>
 
 <body>
@@ -122,7 +125,7 @@ <h3>Our Promise to You:</h3>
             </div>
         </div>
     </section>
-
+    
     <!-- Enhanced App Section -->
     <section id="about-app" class="section-p1">
         <h1>Experience STYLÉKA on Mobile</h1>
@@ -224,7 +227,36 @@ <h4>Secure Payment Gateways</h4>
             <p>© 2025, Powered By STYLÉKA - Where Fashion Meets Excellence</p>
         </div>
     </footer>
+
+
+<button class="chatbot-toggler">
+  <span class="material-symbols-rounded">mode_comment</span>
+  <span class="material-symbols-outlined">close</span>
+</button>
 
+<div class="chatbot show-chatbot">
+  <header>
+    <h2>Styleka Assistant 🤖</h2>
+    <span class="close-btn material-symbols-outlined">close</span>
+  </header>
+
+<div class="chatbox" id="chat-window">
+    <ul>
+      <li class="chat incoming">
+        <span class="material-symbols-outlined">smart_toy</span>
+        <div class="bot-message-content">
+          <p>Hi there 👋<br>Looking for style advice or help? I'm here to assist!</p>
+        </div>
+      </li>
+    </ul>
+</div>
+    <form id="chat-form" class="chat-input">
+      <textarea id="chat-input" placeholder="Ask me anything about fashion..." spellcheck="false" required></textarea>
+      <!-- Removed image upload button -->
+      <button type="submit" id="send-btn" class="material-symbols-rounded">send</button>
+  </form>
+</div>
+    <script src="chatbot.js"></script>
     <script src="script.js"></script>
 </body>
 

diff --git a/blog.html → public/blog.html b/blog.html → public/blog.html
@@ -9,6 +9,9 @@
     <!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" /> -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
     <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" rel="stylesheet" />
+    <link rel="stylesheet" href="/chatbot.css">
 </head>
 
 <body>
@@ -180,7 +183,34 @@ <h4>Secure Payment Gateways</h4>
             <p>© 2025 , Powered By STYLÉKA</p>
         </div>
     </footer>
-
+<button class="chatbot-toggler">
+  <span class="material-symbols-rounded">mode_comment</span>
+  <span class="material-symbols-outlined">close</span>
+</button>
+
+<div class="chatbot show-chatbot">
+  <header>
+    <h2>Styleka Assistant 🤖</h2>
+    <span class="close-btn material-symbols-outlined">close</span>
+  </header>
+
+<div class="chatbox" id="chat-window">
+    <ul>
+      <li class="chat incoming">
+        <span class="material-symbols-outlined">smart_toy</span>
+        <div class="bot-message-content">
+          <p>Hi there 👋<br>Looking for style advice or help? I'm here to assist!</p>
+        </div>
+      </li>
+    </ul>
+</div>
+    <form id="chat-form" class="chat-input">
+      <textarea id="chat-input" placeholder="Ask me anything about fashion..." spellcheck="false" required></textarea>
+      <!-- Removed image upload button -->
+      <button type="submit" id="send-btn" class="material-symbols-rounded">send</button>
+  </form>
+</div>
+    <script src="chatbot.js"></script>
     <script src="script.js"></script>
 </body>
 

diff --git a/cancel.html → public/cancel.html b/cancel.html → public/cancel.html
diff --git a/cart.html → public/cart.html b/cart.html → public/cart.html