Hugging Face's logo

Spaces:
HTML-community
/
README
Sleeping

App Files Community
Felguk commited on
Commit
b1d4549
·
verified ·
1 Parent(s): de2bae6

Create app.py

Browse files
Files changed (1) hide show
  1. app.py +103 -0
app.py ADDED
@@ -0,0 +1,103 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import streamlit as st
2
+
3
+ # Set page title and icon
4
+ st.set_page_config(page_title="HTML Community", page_icon="👋")
5
+
6
+ # Custom CSS for styling
7
+ st.markdown("""
8
+ <style>
9
+ .big-font {
10
+ font-size: 30px !important;
11
+ font-weight: bold;
12
+ }
13
+ .medium-font {
14
+ font-size: 20px !important;
15
+ }
16
+ .highlight {
17
+ background-color: #f0f2f6;
18
+ padding: 10px;
19
+ border-radius: 5px;
20
+ margin: 10px 0;
21
+ }
22
+ .footer {
23
+ font-size: 14px;
24
+ text-align: center;
25
+ margin-top: 20px;
26
+ color: #666;
27
+ }
28
+ .editor {
29
+ border: 1px solid #ddd;
30
+ border-radius: 5px;
31
+ padding: 10px;
32
+ margin-bottom: 20px;
33
+ }
34
+ </style>
35
+ """, unsafe_allow_html=True)
36
+
37
+ # Header
38
+ st.markdown('<p class="big-font">Hey👏</p>', unsafe_allow_html=True)
39
+ st.markdown('<p class="medium-font">Welcome to the HTML Community!</p>', unsafe_allow_html=True)
40
+
41
+ # Introduction
42
+ st.markdown("""
43
+ Here, you can create and share HTML spaces with the community. Whether you're a beginner or an expert, this platform is designed to help you showcase your HTML projects and collaborate with others.
44
+ """)
45
+
46
+ # Steps to Get Started
47
+ st.markdown('<p class="medium-font">Get Started:</p>', unsafe_allow_html=True)
48
+ st.markdown("""
49
+ <div class="highlight">
50
+ <ol>
51
+ <li><strong>Create Space:</strong> Start by creating a new space for your project.</li>
52
+ <li><strong>Choose Static:</strong> Select the static option to host your HTML content.</li>
53
+ <li><strong>Enter Code:</strong> Write or paste your HTML code into the editor.</li>
54
+ <li><strong>Ready to Go:</strong> Your app is now created and ready to be shared!</li>
55
+ </ol>
56
+ </div>
57
+ """, unsafe_allow_html=True)
58
+
59
+ # Love for Hugging Face
60
+ st.markdown("""
61
+ I love [Hugging Face](https://huggingface.co) for its amazing community and resources. It's a great place to learn, share, and collaborate on AI and ML projects.
62
+ """)
63
+
64
+ # Demo Tools Section
65
+ st.markdown('<p class="big-font">Demo Tools</p>', unsafe_allow_html=True)
66
+
67
+ # HTML Code Editor
68
+ st.markdown("### HTML Code Editor")
69
+ st.markdown("Write or paste your HTML code below and see the live preview.")
70
+ html_code = st.text_area("HTML Code", height=300, value="""<!DOCTYPE html>
71
+ <html>
72
+ <head>
73
+ <title>My HTML Page</title>
74
+ </head>
75
+ <body>
76
+ <h1>Hello, HTML Community!</h1>
77
+ <p>This is a live preview of your HTML code.</p>
78
+ </body>
79
+ </html>""", key="html_editor")
80
+
81
+ # Live Preview
82
+ st.markdown("### Live Preview")
83
+ if html_code:
84
+ st.components.v1.html(html_code, height=300, scrolling=True)
85
+ else:
86
+ st.warning("Please enter some HTML code to see the preview.")
87
+
88
+ # File Uploader for HTML Files
89
+ st.markdown("### Upload HTML File")
90
+ uploaded_file = st.file_uploader("Choose an HTML file", type="html")
91
+ if uploaded_file is not None:
92
+ file_contents = uploaded_file.read().decode("utf-8")
93
+ st.markdown("#### Uploaded HTML Code")
94
+ st.code(file_contents, language="html")
95
+ st.markdown("#### Uploaded HTML Preview")
96
+ st.components.v1.html(file_contents, height=300, scrolling=True)
97
+
98
+ # Footer
99
+ st.markdown('<p class="footer">Made with ❤️ by the HTML Community</p>', unsafe_allow_html=True)
100
+
101
+ # Optional: Add a button to redirect to Hugging Face
102
+ if st.button("Visit Hugging Face"):
103
+ st.markdown("[Hugging Face](https://huggingface.co)")