Spaces:
Sleeping
Sleeping
| import streamlit as st | |
| # Set page title and icon | |
| st.set_page_config(page_title="HTML Community", page_icon="👋") | |
| # Custom CSS for styling | |
| st.markdown(""" | |
| <style> | |
| .big-font { | |
| font-size: 30px !important; | |
| font-weight: bold; | |
| } | |
| .medium-font { | |
| font-size: 20px !important; | |
| } | |
| .highlight { | |
| background-color: #f0f2f6; | |
| padding: 10px; | |
| border-radius: 5px; | |
| margin: 10px 0; | |
| } | |
| .footer { | |
| font-size: 14px; | |
| text-align: center; | |
| margin-top: 20px; | |
| color: #666; | |
| } | |
| .editor { | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| padding: 10px; | |
| margin-bottom: 20px; | |
| } | |
| </style> | |
| """, unsafe_allow_html=True) | |
| # Header | |
| st.markdown('<p class="big-font">Hey👏</p>', unsafe_allow_html=True) | |
| st.markdown('<p class="medium-font">Welcome to the HTML Community!</p>', unsafe_allow_html=True) | |
| # Introduction | |
| st.markdown(""" | |
| 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. | |
| """) | |
| # Steps to Get Started | |
| st.markdown('<p class="medium-font">Get Started:</p>', unsafe_allow_html=True) | |
| st.markdown(""" | |
| <div class="highlight"> | |
| <ol> | |
| <li><strong>Create Space:</strong> Start by creating a new space for your project.</li> | |
| <li><strong>Choose Static:</strong> Select the static option to host your HTML content.</li> | |
| <li><strong>Enter Code:</strong> Write or paste your HTML code into the editor.</li> | |
| <li><strong>Ready to Go:</strong> Your app is now created and ready to be shared!</li> | |
| </ol> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # Love for Hugging Face | |
| st.markdown(""" | |
| 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. | |
| """) | |
| # Demo Tools Section | |
| st.markdown('<p class="big-font">Demo Tools</p>', unsafe_allow_html=True) | |
| # HTML Code Editor | |
| st.markdown("### HTML Code Editor") | |
| st.markdown("Write or paste your HTML code below and see the live preview.") | |
| html_code = st.text_area("HTML Code", height=300, value="""<!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>My HTML Page</title> | |
| </head> | |
| <body> | |
| <h1>Hello, HTML Community!</h1> | |
| <p>This is a live preview of your HTML code.</p> | |
| </body> | |
| </html>""", key="html_editor") | |
| # Live Preview | |
| st.markdown("### Live Preview") | |
| if html_code: | |
| st.components.v1.html(html_code, height=300, scrolling=True) | |
| else: | |
| st.warning("Please enter some HTML code to see the preview.") | |
| # File Uploader for HTML Files | |
| st.markdown("### Upload HTML File") | |
| uploaded_file = st.file_uploader("Choose an HTML file", type="html") | |
| if uploaded_file is not None: | |
| file_contents = uploaded_file.read().decode("utf-8") | |
| st.markdown("#### Uploaded HTML Code") | |
| st.code(file_contents, language="html") | |
| st.markdown("#### Uploaded HTML Preview") | |
| st.components.v1.html(file_contents, height=300, scrolling=True) | |
| # Footer | |
| st.markdown('<p class="footer">Made with ❤️ by the HTML Community</p>', unsafe_allow_html=True) | |
| # Optional: Add a button to redirect to Hugging Face | |
| if st.button("Visit Hugging Face"): | |
| st.markdown("[Hugging Face](https://huggingface.co)") |