Hugging Face's logo

Spaces:
training-transformers-together
/
calc
Runtime error

App Files Community
justheuristic commited on
Commit
a66df69
·
1 Parent(s): 2c1b6a1

tabs minimalistic

Browse files
Files changed (2) hide show
  1. st_helpers.py +1 -1
  2. static/tabs.html +43 -4
st_helpers.py CHANGED
@@ -30,7 +30,7 @@ def make_header():
30
 
31
 
32
  def make_tabs():
33
- components.html(f"<style>{content_style_css}</style>{tabs_html}", height=400)
34
 
35
 
36
  def make_footer():
 
30
 
31
 
32
  def make_tabs():
33
+ components.html(f"{tabs_html}", height=400)
34
 
35
 
36
  def make_footer():
static/tabs.html CHANGED
@@ -6,6 +6,41 @@
6
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
7
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
8
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  </head>
10
  <body>
11
 
@@ -21,14 +56,18 @@
21
  <!-- Tab panes -->
22
  <div class="tab-content">
23
  <div role="tabpanel" class="tab-pane active" id="home">
 
24
  <b> TODO 1</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
25
  </div>
26
  <div role="tabpanel" class="tab-pane" id="profile">
27
- <b> TODO 2</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
28
- </div>
29
- <div role="tabpanel" class="tab-pane" id="messages">
30
- <b> TODO 3</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
31
  </div>
 
 
 
32
  </div>
33
 
34
  </div>
 
6
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
7
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
8
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
9
+ <style>
10
+ .faded {
11
+ margin: 0 auto;
12
+ background: var(--window-color);
13
+ box-shadow: 0 0 5px 5px var(--window-color);
14
+ font-family: cursive;
15
+ font-family: "Gill Sans", sans-serif;
16
+ display: inline-block
17
+ }
18
+ .padded {
19
+ width: 100%;
20
+ max-width: 800px;
21
+ text-align: left;
22
+ }
23
+ .demo_title {
24
+ font-size: 32px;
25
+ box-shadow: 0 0 5px 5px var(--window-color);
26
+ font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,
27
+ sans-serif,Apple Color Emoji,Segoe UI Emoji;
28
+ }
29
+ .demo_text {
30
+ font-size: 16px;
31
+ box-shadow: 0 0 5px 5px var(--window-color);
32
+ font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,
33
+ sans-serif,Apple Color Emoji,Segoe UI Emoji;
34
+ }
35
+ a:link {
36
+ color: #00194a;
37
+ text-decoration: none;
38
+ }
39
+ a:visited {
40
+ color: #3f004a;
41
+ text-decoration: none;
42
+ }
43
+ </style>
44
  </head>
45
  <body>
46
 
 
56
  <!-- Tab panes -->
57
  <div class="tab-content">
58
  <div role="tabpanel" class="tab-pane active" id="home">
59
+ <span class="padded faded text">
60
  <b> TODO 1</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
61
+ </span>
62
  </div>
63
  <div role="tabpanel" class="tab-pane" id="profile">
64
+ <span class="padded faded text">
65
+ <b> TODO 12</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
66
+ </span>
 
67
  </div>
68
+ <span class="padded faded text">
69
+ <b> TODO 123</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
70
+ </span>
71
  </div>
72
 
73
  </div>