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