Hugging Face's logo

Spaces:
georad
/
sbsmapper
Running

App Files Community
georad commited on
Commit
f9acfdd
·
verified ·
1 Parent(s): 97aea69

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +30 -76
app.py CHANGED
@@ -1,85 +1,39 @@
1
  import streamlit as st
2
 
3
- # Set basic page config
4
- st.set_page_config(page_title="App with Sticky Header", layout="wide")
5
-
6
- # Create an HTML iframe component that contains both the header and content
7
- iframe_html = """
8
- <!DOCTYPE html>
9
- <html>
10
- <head>
11
- <style>
12
- body {
13
- margin: 0;
14
- padding: 0;
15
- font-family: sans-serif;
16
- }
17
- .sticky-header {
18
- position: sticky;
19
- top: 0;
20
- background-color: #262730;
21
- color: white;
22
- padding: 1rem;
23
- box-shadow: 0 2px 5px rgba(0,0,0,0.2);
24
- z-index: 1000;
25
- display: flex;
26
- justify-content: space-between;
27
- align-items: center;
28
- }
29
- .content {
30
- padding: 1rem;
31
- }
32
- .nav-link {
33
- color: white;
34
- margin-left: 1rem;
35
- text-decoration: none;
36
- }
37
- .nav-link:hover {
38
- text-decoration: underline;
39
- }
40
- </style>
41
- </head>
42
- <body>
43
- <div class="sticky-header">
44
- <h2>My Application</h2>
45
- <div>
46
- <a href="#section1" class="nav-link">Section 1</a>
47
- <a href="#section2" class="nav-link">Section 2</a>
48
- <a href="#section3" class="nav-link">Section 3</a>
49
- </div>
50
- </div>
51
- <div class="content">
52
- <h3 id="section1">Section 1</h3>
53
- <p>This is the content for section 1.</p>
54
- <!-- Generate some dummy content -->
55
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
56
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
57
-
58
- <h3 id="section2">Section 2</h3>
59
- <p>This is the content for section 2.</p>
60
- <!-- Generate some dummy content -->
61
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
62
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
63
-
64
- <h3 id="section3">Section 3</h3>
65
- <p>This is the content for section 3.</p>
66
- <!-- Generate some dummy content -->
67
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
68
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
69
- </div>
70
- </body>
71
- </html>
72
  """
73
 
74
- # Use streamlit components to render the iframe
75
- # Note: We're placing this in a container to give it proper dimensions
76
- container = st.container()
77
- with container:
78
- st.components.v1.html(iframe_html, height=600, scrolling=True)
 
 
 
 
 
79
 
80
- # You can still add Streamlit content below if needed
81
- st.write("This content is outside the iframe")
 
 
82
 
 
 
 
 
83
 
84
 
85
 
 
1
  import streamlit as st
2
 
3
+ # Set page config
4
+ st.set_page_config(page_title="Hybrid Solution", layout="wide")
5
+
6
+ # Create a custom HTML component just for the navigation
7
+ nav_html = """
8
+ <div style="position:fixed; top:0; left:0; width:100%; background-color:#262730; color:white; padding:10px; z-index:9999; text-align:center;">
9
+ <h3 style="display:inline-block; margin:0 20px;">My App Navigation</h3>
10
+ <a href="#section1" style="color:white; margin:0 10px;">Section 1</a>
11
+ <a href="#section2" style="color:white; margin:0 10px;">Section 2</a>
12
+ <a href="#section3" style="color:white; margin:0 10px;">Section 3</a>
13
+ </div>
14
+ <div style="height:50px;"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  """
16
 
17
+ # Inject the navigation HTML
18
+ st.components.v1.html(nav_html, height=50)
19
+
20
+ # Regular Streamlit content with anchors
21
+ st.title("My Application")
22
+
23
+ st.header("Section 1", anchor="section1")
24
+ st.write("This is section 1 content")
25
+ for i in range(5):
26
+ st.write(f"Content line {i}")
27
 
28
+ st.header("Section 2", anchor="section2")
29
+ st.write("This is section 2 content")
30
+ for i in range(5):
31
+ st.write(f"Content line {i}")
32
 
33
+ st.header("Section 3", anchor="section3")
34
+ st.write("This is section 3 content")
35
+ for i in range(5):
36
+ st.write(f"Content line {i}")
37
 
38
 
39