Upload 2 files

static/script.js

@@ -0,0 +1,57 @@
+async function extractContent() {
+  const url = document.getElementById('url').value.trim();
+  const tag = document.getElementById('tag').value.trim() || 'all';
+  const output = document.getElementById('output');
+  const analysisBox = document.getElementById('analysis-box');
+  const lang = document.getElementById('lang');
+  const wordCount = document.getElementById('wordCount');
+  const sentCount = document.getElementById('sentCount');
+  const uniqueCount = document.getElementById('uniqueCount');
+  const topWords = document.getElementById('topWords');
+
+  output.innerHTML = '<p>⏳ Extracting content...</p>';
+  analysisBox.classList.add('hidden');
+
+  try {
+    const res = await fetch('/extract', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ url, tag })
+    });
+
+    const data = await res.json();
+
+    if (!res.ok || data.error) {
+      output.innerHTML = `<p class="error">❌ ${data.error || 'Failed to fetch data'}</p>`;
+      return;
+    }
+
+    // Display extracted tag results
+    if (data.results) {
+      output.innerHTML = data.results.map(item => `<p>${item}</p>`).join('');
+    } else if (data.text) {
+      output.innerHTML = `<p>${data.text.slice(0, 1000)}...</p>`;
+    } else {
+      output.innerHTML = '<p>No results found.</p>';
+    }
+
+    // Display analysis
+    if (data.analysis) {
+      analysisBox.classList.remove('hidden');
+      lang.textContent = data.language || 'unknown';
+      wordCount.textContent = data.analysis.word_count || 0;
+      sentCount.textContent = data.analysis.sentence_count || 0;
+      uniqueCount.textContent = data.analysis.unique_words || 0;
+
+      topWords.innerHTML = '';
+      data.analysis.top_words.forEach(([word, freq]) => {
+        const li = document.createElement('li');
+        li.textContent = `${word} (${freq})`;
+        topWords.appendChild(li);
+      });
+    }
+
+  } catch (err) {
+    output.innerHTML = `<p class="error">⚠️ Error: ${err.message}</p>`;
+  }
+}

static/style.css

@@ -0,0 +1,173 @@
+/* ------------------------------------------
+ 🌐 Web Content Extractor - Modern Glass Style
+-------------------------------------------*/
+
+:root {
+  --bg: #020b17;
+  --card: rgba(255, 255, 255, 0.05);
+  --accent1: #00ffcc;
+  --accent2: #00c6ff;
+  --muted: #d8e4f0;
+  --text: #e6eef8;
+  --error: #ff4444;
+  --radius: 12px;
+  font-family: 'Segoe UI', Roboto, sans-serif;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background: radial-gradient(circle at 20% 30%, #0a1a2a, #010810 80%);
+  color: var(--text);
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding-top: 40px;
+}
+
+/* ------------------------------
+   Container
+-------------------------------*/
+.container {
+  width: 90%;
+  max-width: 800px;
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: var(--radius);
+  padding: 30px 40px;
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+/* ------------------------------
+   Header & Inputs
+-------------------------------*/
+h1 {
+  text-align: center;
+  margin-bottom: 24px;
+  font-size: 30px;
+  background: linear-gradient(90deg, var(--accent1), var(--accent2));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.form-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+input {
+  width: 100%;
+  padding: 12px;
+  border-radius: var(--radius);
+  border: none;
+  outline: none;
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text);
+  font-size: 15px;
+}
+
+button {
+  background: linear-gradient(90deg, var(--accent1), var(--accent2));
+  color: #001219;
+  font-weight: 700;
+  border: none;
+  border-radius: var(--radius);
+  padding: 12px 24px;
+  cursor: pointer;
+  transition: all 0.25s ease;
+}
+
+button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(0, 255, 204, 0.4);
+}
+
+/* ------------------------------
+   Result Box
+-------------------------------*/
+#result-box {
+  background: var(--card);
+  padding: 20px;
+  border-radius: var(--radius);
+  margin-top: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+#output p {
+  background: rgba(255, 255, 255, 0.03);
+  padding: 8px 10px;
+  border-radius: 8px;
+  margin: 6px 0;
+  line-height: 1.4;
+}
+
+.error {
+  background: rgba(255, 50, 50, 0.15);
+  border-left: 4px solid var(--error);
+  color: #ffbfbf;
+  padding: 10px;
+  border-radius: var(--radius);
+  margin-top: 10px;
+}
+
+/* ------------------------------
+   Analysis Section
+-------------------------------*/
+#analysis-box {
+  background: rgba(255, 255, 255, 0.05);
+  padding: 20px;
+  border-radius: var(--radius);
+  margin-top: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+#analysis-box h3 {
+  color: var(--accent1);
+  margin-top: 0;
+}
+
+#analysis-box p {
+  margin: 6px 0;
+}
+
+#topWords {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+#topWords li {
+  background: rgba(255, 255, 255, 0.08);
+  padding: 6px 10px;
+  border-radius: 20px;
+  font-size: 14px;
+  color: var(--accent1);
+}
+
+/* ------------------------------
+   Utility
+-------------------------------*/
+.hidden {
+  display: none;
+}
+
+@media (max-width: 600px) {
+  .container {
+    padding: 20px;
+  }
+
+  h1 {
+    font-size: 24px;
+  }
+
+  button {
+    width: 100%;
+  }
+}