File size: 3,314 Bytes
b1d4549
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
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)")