Spaces:

Dooratre
/

db-test

Running

App Files Files Community

Dooratre commited on Apr 8

Commit

c0c4120

verified ·

1 Parent(s): 74006d5

Update index.html

Browse files

Files changed (1) hide show

index.html +78 -321

index.html CHANGED Viewed

@@ -1,328 +1,85 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Modern AI </title>
-<style>
-/* Import Fonts */
-@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600&family=Poppins:wght@400;600&display=swap');
-/* Highlight Title Styling for AI Response */
-.highlight-title {
-  font-size: 1rem; /* Adjust for mobile */
-  font-weight: 700; /* Extra bold */
-  color: #000; /* Black text */
-  display: inline-block;
-  margin: 5px 0; /* Add some spacing if needed */
-}
-/* Fullscreen Responsive Styling */
-body {
-  margin: 0;
-  padding: 0;
-  font-family: 'Poppins', sans-serif;
-  background: linear-gradient(135deg, #6E45E2, #88D3CE);
-  height: 100vh; /* Full height */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-/* Animation Background */
-body::before {
-  content: '';
-  position: absolute;
-  top: -50%;
-  left: -50%;
-  width: 200%;
-  height: 200%;
-  background: radial-gradient(circle, rgba(98, 0, 234, 0.6), transparent);
-  animation: backgroundAnimation 6s infinite linear alternate;
-  z-index: 0;
-}
-@keyframes backgroundAnimation {
-  to {
-    transform: rotate(360deg);
-  }
-}
-.chat-container {
-  position: relative;
-  z-index: 1;
-  width: 100%; /* Full width for mobile */
-  height: 100%; /* Full height for mobile */
-  background: #ffffff;
-  border-radius: 15px 15px 0 0; /* Rounded top corners */
-  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2); /* Subtle shadow */
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-/* Header */
-.chat-header {
-  background: linear-gradient(135deg, #6200ea, #3700b3);
-  color: #fff;
-  padding: 15px; /* Adjusted padding for mobile */
-  text-align: center;
-  font-size: 1.2rem; /* Adjusted for mobile */
-  font-weight: bold;
-  font-family: 'Cairo', sans-serif;
-  border-bottom: 1px solid #ddd;
-}
-/* Chat Box */
-.chat-box {
-  flex: 1;
-  padding: 10px 15px; /* Smaller padding for mobile */
-  overflow-y: auto; /* Enable vertical scrolling */
-  max-height: calc(100vh - 140px); /* Dynamic height */
-  display: flex;
-  flex-direction: column;
-  background: #f8f9fa;
-}
-.chat-box .message {
-  margin-bottom: 10px; /* Reduced margin for compact spacing */
-  font-size: 0.9rem; /* Adjusted for mobile */
-  padding: 10px 15px;
-  border-radius: 20px;
-  max-width: 75%;
-  animation: slideIn 0.3s ease-in-out;
-  word-wrap: break-word;
-  font-family: 'Cairo', 'Poppins', sans-serif;
-}
-@keyframes slideIn {
-  from {
-    transform: translateY(10px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-.chat-box .message.user {
-  margin-left: auto;
-  background: #e3f2fd;
-  color: #0D47A1;
-  text-align: right;
-}
-.chat-box .message.ai {
-  margin-right: auto;
-  background: #e8f5e9;
-  color: #1B5E20;
-  text-align: left;
-}
-/* Typing Animation */
-.typing-animation {
-  display: flex;
-  margin: 10px 0;
-  justify-content: left;
-  align-items: center;
-}
-.typing-animation span {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  margin: 0 3px;
-  background: #1B5E20;
-  border-radius: 50%;
-  animation: typing 1.3s infinite;
-}
-.typing-animation span:nth-child(2) {
-  animation-delay: 0.2s;
-}
-.typing-animation span:nth-child(3) {
-  animation-delay: 0.4s;
-}
-@keyframes typing {
-  0%, 80% {
-    transform: scale(0);
-  }
-  40% {
-    transform: scale(1);
-  }
-}
-/* Chat Input */
-.chat-input {
-  display: flex;
-  align-items: center;
-  padding: 10px; /* Reduced padding for mobile */
-  background: #f9f9f9;
-  border-top: 1px solid #ddd;
-}
-.chat-input input {
-  flex: 1;
-  padding: 12px; /* Adjusted for smaller screens */
-  border: 1px solid #ddd;
-  border-radius: 30px;
-  margin-right: 10px;
-  font-size: 0.9rem; /* Smaller size for mobile */
-  font-family: 'Poppins', 'Cairo', sans-serif;
-  outline: none;
-  transition: all 0.3s ease;
-}
-.chat-input input:focus {
-  border-color: #6200ea;
-  box-shadow: 0 0 5px rgba(98, 0, 234, 0.5);
-}
-.chat-input button {
-  padding: 10px 15px; /* Adjusted for mobile */
-  background: linear-gradient(135deg, #6200ea, #3700b3);
-  border: none;
-  color: white;
-  border-radius: 20px;
-  cursor: pointer;
-  font-weight: bold;
-  font-size: 0.9rem; /* Adjusted for mobile */
-  font-family: 'Poppins', 'Cairo', sans-serif;
-  transition: all 0.3s ease;
-}
-.chat-input button:hover {
-  background: #5e35b1;
-  box-shadow: 0 5px 15px rgba(98, 0, 234, 0.4);
-}
-</style>
 </head>
 <body>
-<div class="chat-container">
-  <div class="chat-header">
-    AI Chat with Omar's Smart Model
-  </div>
-  <div class="chat-box" id="chat-box">
-    <!-- Chat messages will populate here -->
-  </div>
-  <div class="chat-input">
-    <input type="text" id="user-input" placeholder="Type a message..." autocomplete="off">
-    <button id="send-btn">Send</button>
-  </div>
-</div>
-<script>
-const apiUrl = "https://dooratre-test-flask-space.hf.space/chat";
-const chatBox = document.getElementById("chat-box");
-const userInput = document.getElementById("user-input");
-const sendBtn = document.getElementById("send-btn");
-// Initialize conversation history
-let conversationHistory = [
-  { "role": "system", "content": "you are AI model created and developed By MR Omar Nuwara In CORVO AI Company you are model name ALEX-9 you can chat and help user you are best model for now\n\n you will chat Omar's Freind Hussein Shkikel He is Libyan So chat with Libyan arabic accent 😂😂😂 make it fun with smart libyan brain 😂 Hussein now in the work he is working in الاستخبارات😂😂" }
-];
-// Function to format AI response
-function formatResponse(content) {
-  content = content.replace(/\n/g, "<br>");
-  content = content.replace(/\*\*(.*?)\*\*/g, '<strong class="highlight-title">$1</strong>');
-  return content;
-}
-// Function to add a message to the chat box
-function addMessage(role, content) {
-  const messageDiv = document.createElement("div");
-  messageDiv.classList.add("message", role);
-  if (role === "ai") {
-    content = formatResponse(content);
-  }
-  messageDiv.innerHTML = content;
-  chatBox.appendChild(messageDiv);
-  setTimeout(() => {
-    chatBox.scrollTop = chatBox.scrollHeight;
-  }, 100);
-}
-// Function to show typing animation
-function showTyping() {
-  const typingDiv = document.createElement("div");
-  typingDiv.classList.add("typing-animation");
-  typingDiv.innerHTML = `
-    <span></span>
-    <span></span>
-    <span></span>
-  `;
-  chatBox.appendChild(typingDiv);
-  setTimeout(() => {
-    chatBox.scrollTop = chatBox.scrollHeight;
-  }, 100);
-  return typingDiv;
-}
-// Function to send a message
-async function sendMessage() {
-  const userMessage = userInput.value.trim();
-  if (!userMessage) return;
-  addMessage("user", userMessage);
-  conversationHistory.push({ "role": "user", "content": userMessage });
-  const typingDiv = showTyping();
-  const data = { message: conversationHistory };
-  try {
-    const response = await fetch(apiUrl, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify(data)
-    });
-    if (response.ok) {
-      const aiResponse = await response.text();
-      chatBox.removeChild(typingDiv);
-      addMessage("ai", aiResponse);
-      conversationHistory.push({ "role": "assistant", "content": aiResponse });
-    } else {
-      throw new Error(`Error: ${response.status}`);
-    }
-  } catch (error) {
-    console.error("Error:", error);
-    chatBox.removeChild(typingDiv);
-    addMessage("ai", "AI: Sorry, something went wrong!");
-  }
-  userInput.value = "";
-}
-// Attach event listeners
-sendBtn.addEventListener("click", sendMessage);
-userInput.addEventListener("keypress", (e) => {
-  if (e.key === "Enter") sendMessage();
-});
-</script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Get Page Access Token</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            margin-top: 50px;
+        }
+        #token {
+            margin-top: 20px;
+            font-size: 16px;
+            color: green;
+        }
+        #error {
+            margin-top: 20px;
+            font-size: 16px;
+            color: red;
+        }
+    </style>
 </head>
 <body>
+    <h1>Connect Your Facebook Page</h1>
+    <p>Click the button below to connect your Facebook page and get the access token.</p>
+    <!-- Facebook Login Button -->
+    <a href="#" id="loginButton" style="display: inline-block; padding: 10px 20px; background-color: #1877F2; color: white; text-decoration: none; border-radius: 5px;">
+        Connect with Facebook
+    </a>
+    <!-- Display Access Token -->
+    <div id="token"></div>
+    <div id="error"></div>
+    <script>
+        // Facebook App ID
+        const APP_ID = '1091493532996125'; // Replace with your App ID
+        const REDIRECT_URI = encodeURIComponent('https://dooratre-db-test.static.hf.space/index.html'); // Replace with your redirect URI
+        // Generate Facebook OAuth URL
+        const oauthUrl = `https://www.facebook.com/v12.0/dialog/oauth?client_id=${APP_ID}&redirect_uri=${REDIRECT_URI}&scope=pages_manage_metadata,pages_read_engagement,pages_messaging,manage_pages&response_type=token`;
+        // Set the button's href to the OAuth URL
+        document.getElementById('loginButton').href = oauthUrl;
+        // Handle the response from Facebook
+        window.onload = () => {
+            const hash = window.location.hash.substring(1); // Get the hash from the URL
+            if (hash) {
+                const params = new URLSearchParams(hash);
+                const accessToken = params.get('access_token');
+                if (accessToken) {
+                    // Display the access token
+                    document.getElementById('token').innerText = `Access Token: ${accessToken}`;
+                    // Fetch the user's pages
+                    fetch(`https://graph.facebook.com/v12.0/me/accounts?access_token=${accessToken}`)
+                        .then(response => response.json())
+                        .then(data => {
+                            if (data.data && data.data.length > 0) {
+                                const pages = data.data;
+                                let pageInfo = '';
+                                pages.forEach(page => {
+                                    pageInfo += `Page ID: ${page.id}, Page Token: ${page.access_token}\n`;
+                                });
+                                document.getElementById('token').innerText += `\n\nPages:\n${pageInfo}`;
+                            } else {
+                                document.getElementById('error').innerText = 'No pages found for this user.';
+                            }
+                        })
+                        .catch(error => {
+                            document.getElementById('error').innerText = `Error fetching pages: ${error.message}`;
+                        });
+                } else {
+                    document.getElementById('error').innerText = 'Failed to retrieve access token.';
+                }
+            }
+        };
+    </script>
 </body>
 </html>