File size: 3,465 Bytes
0f22445
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Smart Web Scraper</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Poppins', sans-serif;
      background: linear-gradient(135deg, #283c86, #45a247);
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
    }
    .card {
      background: rgba(255, 255, 255, 0.15);
      padding: 40px 50px;
      border-radius: 20px;
      backdrop-filter: blur(12px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.3);
      text-align: center;
      animation: fadeIn 1.2s ease-in-out;
    }
    h1 {
      font-size: 42px;
      margin-bottom: 10px;
      letter-spacing: 1px;
    }
    p {
      font-size: 18px;
      margin-bottom: 25px;
      color: #f2f2f2;
    }
    input[type="text"] {
      width: 380px;
      padding: 12px;
      border-radius: 8px;
      border: none;
      outline: none;
      font-size: 16px;
      margin-bottom: 20px;
    }
    .tag-buttons {
      margin: 10px 0 25px 0;
    }
    .tag-buttons button {
      background: rgba(255,255,255,0.2);
      border: 1px solid #fff;
      color: #fff;
      border-radius: 8px;
      margin: 5px;
      padding: 8px 16px;
      cursor: pointer;
      font-size: 15px;
      transition: all 0.3s;
    }
    .tag-buttons button:hover,
    .tag-buttons button.active {
      background-color: #00c9a7;
      transform: scale(1.05);
      color: #222;
    }
    input[type="submit"] {
      padding: 12px 30px;
      background: linear-gradient(90deg, #00c9ff, #92fe9d);
      border: none;
      border-radius: 30px;
      color: #222;
      font-size: 17px;
      cursor: pointer;
      transition: all 0.3s;
    }
    input[type="submit"]:hover {
      transform: scale(1.07);
      background: linear-gradient(90deg, #92fe9d, #00c9ff);
    }
    footer {
      position: absolute;
      bottom: 15px;
      color: #e0e0e0;
      font-size: 14px;
    }
    @keyframes fadeIn {
      from {opacity: 0; transform: translateY(40px);}
      to {opacity: 1; transform: translateY(0);}
    }
  </style>
  <script>
    function setTag(tagName) {
      document.getElementById('selectedTag').value = tagName;
      const buttons = document.querySelectorAll('.tag-buttons button');
      buttons.forEach(btn => btn.classList.remove('active'));
      event.target.classList.add('active');
    }
  </script>
</head>
<body>
  <div class="card">
    <h1>🌐 Smart Web Scraper</h1>
    <p>Enter a website and select which tag you want to scrape (H1, H2, etc.)</p>
    <form method="POST" action="/">
      <input type="text" name="url" placeholder="https://indianexpress.com/" required><br>
      <div class="tag-buttons">
        <button type="button" onclick="setTag('h1')">H1</button>
        <button type="button" onclick="setTag('h2')" class="active">H2</button>
        <button type="button" onclick="setTag('h3')">H3</button>
        <button type="button" onclick="setTag('p')">P</button>
        <button type="button" onclick="setTag('span')">SPAN</button>
      </div>
      <input type="hidden" name="tag" id="selectedTag" value="h2">
      <input type="submit" value="Scrape Now 🚀">
    </form>
  </div>
  <footer>Made with ❤️ using Flask & BeautifulSoup</footer>
</body>
</html>