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(""" """, unsafe_allow_html=True) # Header st.markdown('

Hey👏

', unsafe_allow_html=True) st.markdown('

Welcome to the HTML Community!

', 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('

Get Started:

', unsafe_allow_html=True) st.markdown("""
  1. Create Space: Start by creating a new space for your project.
  2. Choose Static: Select the static option to host your HTML content.
  3. Enter Code: Write or paste your HTML code into the editor.
  4. Ready to Go: Your app is now created and ready to be shared!
""", 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('

Demo Tools

', 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=""" My HTML Page

Hello, HTML Community!

This is a live preview of your HTML code.

""", 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('

Made with ❤️ by the HTML Community

', 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)")