davanstrien HF Staff commited on
Commit
358c2e4
·
verified ·
1 Parent(s): 3427641

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +79 -30
index.html CHANGED
@@ -2,52 +2,101 @@
2
  <html>
3
  <head>
4
  <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>Embedded iframes Demo</title>
 
7
  <style>
8
  body {
9
- font-family: system-ui, -apple-system, sans-serif;
10
- max-width: 1200px;
11
- margin: 0 auto;
12
  padding: 20px;
13
- background-color: #f5f5f5;
 
14
  }
 
15
  .container {
 
 
 
 
 
 
 
 
 
 
 
16
  display: flex;
17
  flex-direction: column;
18
- gap: 20px;
19
  }
20
- .iframe-wrapper {
 
21
  background: white;
22
- padding: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  border-radius: 8px;
24
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 
25
  }
26
- h1 {
27
- color: #333;
28
- text-align: center;
29
- margin-bottom: 30px;
 
 
 
 
 
 
 
 
 
 
 
30
  }
31
  </style>
32
  </head>
33
  <body>
34
- <h1>Leaderboard</h1>
35
  <div class="container">
36
- <div class="iframe-wrapper">
37
- <iframe
38
- src="https://huggingface.co/datasets/davanstrien/progress/embed/sql-console/NbscKj4"
39
- frameborder="0"
40
- width="100%"
41
- height="560px">
42
- </iframe>
43
- </div>
44
- <div class="iframe-wrapper">
45
- <iframe
46
- src="https://huggingface.co/datasets/davanstrien/progress/embed/sql-console/5Bhx9Ck"
47
- frameborder="0"
48
- width="100%"
49
- height="560px">
50
- </iframe>
 
 
 
 
 
 
 
 
 
 
 
51
  </div>
52
  </div>
53
  </body>
 
2
  <html>
3
  <head>
4
  <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>SQL Console Demos</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet" />
8
  <style>
9
  body {
10
+ font-family: 'Source Sans Pro', system-ui, -apple-system, sans-serif;
11
+ margin: 0;
 
12
  padding: 20px;
13
+ background: #f5f5f5;
14
+ min-height: 100vh;
15
  }
16
+
17
  .container {
18
+ max-width: 1200px;
19
+ margin: 0 auto;
20
+ }
21
+
22
+ .header {
23
+ text-align: center;
24
+ margin-bottom: 2rem;
25
+ color: #111827;
26
+ }
27
+
28
+ .grid {
29
  display: flex;
30
  flex-direction: column;
31
+ gap: 2rem;
32
  }
33
+
34
+ .card {
35
  background: white;
36
+ border-radius: 12px;
37
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
38
+ padding: 1.5rem;
39
+ border: 1px solid #e5e7eb;
40
+ }
41
+
42
+ .card-title {
43
+ font-size: 1.25rem;
44
+ font-weight: 600;
45
+ margin-bottom: 1rem;
46
+ color: #111827;
47
+ }
48
+
49
+ .iframe-container {
50
  border-radius: 8px;
51
+ overflow: hidden;
52
+ background: #fff;
53
  }
54
+
55
+ iframe {
56
+ border: none;
57
+ width: 100%;
58
+ display: block;
59
+ }
60
+
61
+ @media (max-width: 768px) {
62
+ body {
63
+ padding: 1rem;
64
+ }
65
+
66
+ .card {
67
+ padding: 1rem;
68
+ }
69
  }
70
  </style>
71
  </head>
72
  <body>
 
73
  <div class="container">
74
+ <header class="header">
75
+ <h1>SQL Console Examples</h1>
76
+ </header>
77
+
78
+ <div class="grid">
79
+ <div class="card">
80
+ <div class="card-title">Console Example 1</div>
81
+ <div class="iframe-container">
82
+ <iframe
83
+ src="https://huggingface.co/datasets/davanstrien/progress/embed/sql-console/NbscKj4"
84
+ frameborder="0"
85
+ height="560px">
86
+ </iframe>
87
+ </div>
88
+ </div>
89
+
90
+ <div class="card">
91
+ <div class="card-title">Console Example 2</div>
92
+ <div class="iframe-container">
93
+ <iframe
94
+ src="https://huggingface.co/datasets/davanstrien/progress/embed/sql-console/5Bhx9Ck"
95
+ frameborder="0"
96
+ height="560px">
97
+ </iframe>
98
+ </div>
99
+ </div>
100
  </div>
101
  </div>
102
  </body>