Hugging Face's logo

Spaces:
enotkrutoy
/
URLs
Running

App Files Community
enotkrutoy commited on
Commit
eeecfea
·
verified ·
1 Parent(s): 077cfe6

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +108 -18
index.html CHANGED
@@ -1,19 +1,109 @@
1
  <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!doctype html>
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Tabs Example with Export</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ padding: 20px;
11
+ }
12
+ .tabs-menu {
13
+ list-style: none;
14
+ padding: 0;
15
+ margin: 0 0 10px 0;
16
+ display: flex;
17
+ }
18
+ .tabs-menu li {
19
+ margin-right: 10px;
20
+ }
21
+ .tabs-menu li a {
22
+ text-decoration: none;
23
+ padding: 10px 15px;
24
+ display: block;
25
+ background: #ddd;
26
+ color: #000;
27
+ border-radius: 4px;
28
+ }
29
+ .tabs-menu .current a {
30
+ background: #00ff00;
31
+ }
32
+ .tab-content {
33
+ display: none;
34
+ padding: 15px;
35
+ border: 1px solid #ccc;
36
+ border-radius: 4px;
37
+ background: #f9f9f9;
38
+ }
39
+ #news {
40
+ display: block;
41
+ }
42
+ button.export-btn {
43
+ margin-top: 20px;
44
+ padding: 10px 15px;
45
+ font-size: 14px;
46
+ cursor: pointer;
47
+ }
48
+ </style>
49
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
50
+ </head>
51
+ <body>
52
+ <div id="tabs-container">
53
+ <ul class="tabs-menu">
54
+ <li class="current"><a href="#news">News</a></li>
55
+ <li><a href="#contact">Contact</a></li>
56
+ </ul>
57
+ <div class="tab">
58
+ <div id="news" class="tab-content">
59
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Nullam pretium, est at congue mattis, nibh eros pharetra lectus, nec posuere libero dui consectetur arcu. Quisque convallis facilisis fermentum. Nam tincidunt, diam nec dictum mattis, nunc dolor ultrices ipsum, in mattis justo turpis nec ligula. Curabitur a ante mauris. Integer placerat imperdiet diam, facilisis pretium elit mollis pretium. Sed lobortis, eros non egestas suscipit, dui dui euismod enim, ac ultricies arcu risus at tellus. Donec imperdiet congue ligula, quis vulputate mauris ultrices non. Aliquam rhoncus, arcu a bibendum congue, augue risus tincidunt massa, vel vehicula diam dolor eget felis.</p>
60
+ <p>URL: https://example.com/news/1</p>
61
+ <p>URL: https://example.com/news/2</p>
62
+ </div>
63
+ <div id="contact" class="tab-content">
64
+ <p>Donec semper dictum sem, quis pretium sem malesuada non. Proin venenatis orci vel nisl porta sollicitudin. Pellentesque sit amet massa et orci malesuada facilisis vel vel lectus. Etiam tristique volutpat auctor. Morbi nec massa eget sem ultricies fermentum id ut ligula. Praesent aliquet adipiscing dictum. Suspendisse dignissim dui tortor. Integer faucibus interdum justo, mattis commodo elit tempor id. Quisque ut orci orci, sit amet mattis nulla. Suspendisse quam diam, feugiat at ullamcorper eget, sagittis sed eros. Proin tortor tellus, pulvinar at imperdiet in, egestas sed nisl. Aenean tempor neque ut felis dignissim ac congue felis viverra.</p>
65
+ <p>URL: https://example.com/contact/info</p>
66
+ </div>
67
+ </div>
68
+ </div>
69
+
70
+ <button class="export-btn">Export URLs to .txt</button>
71
+
72
+ <script>
73
+ $(document).ready(function () {
74
+ $(".tabs-menu a").click(function (event) {
75
+ event.preventDefault();
76
+ $(this).parent().addClass("current");
77
+ $(this).parent().siblings().removeClass("current");
78
+
79
+ var tab = $(this).attr("href");
80
+ $(".tab-content").css("display", "none");
81
+ $(tab).fadeIn();
82
+ });
83
+
84
+ $(".export-btn").click(function () {
85
+ let urls = [];
86
+ $(".tab-content:visible").each(function () {
87
+ $(this).find("p").each(function () {
88
+ const text = $(this).text().trim();
89
+ if (text.startsWith("URL: ")) {
90
+ urls.push(text.replace("URL: ", ""));
91
+ }
92
+ });
93
+ });
94
+
95
+ if (urls.length === 0) {
96
+ alert("No URLs found in the visible tab.");
97
+ return;
98
+ }
99
+
100
+ const blob = new Blob([urls.join("\n")], { type: "text/plain;charset=utf-8" });
101
+ const link = document.createElement("a");
102
+ link.href = URL.createObjectURL(blob);
103
+ link.download = "urls.txt";
104
+ link.click();
105
+ });
106
+ });
107
+ </script>
108
+ </body>
109
+ </html>