import streamlit as st
import pandas as pd
import numpy as np

# Custom CSS for styling
custom_css = """
<style>
    html, body, [data-testid="stAppViewContainer"] {
        background-image: linear-gradient(
            rgba(0, 0, 0, 0.6), 
            rgba(0, 0, 0, 0.6)
        ), 
        url("https://www.istockphoto.com/photo/tech-or-space-background-abstract-3d-illustration-gm1367865109-437999705?utm_source=pixabay&utm_medium=affiliate&utm_campaign=SRP_photo_sponsored&utm_content=https%3A%2F%2Fpixabay.com%2Fphotos%2Fsearch%2Fbackground%2520datascience%2F&utm_term=background+datascience.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        color: white;  /* Ensures all text is readable */
    }
    h2, h3 {
        color: #FFD700; /* Gold color for headings */
    }
    p {
        color: #FFFFFF; /* White text for paragraphs */
    }
</style>
"""

# Inject the CSS into the app
st.markdown(custom_css, unsafe_allow_html=True)
st.markdown("<h2 style='text-align: left; color: Black;'>📈What is HyperText Markup Language(HTML)</h2>", unsafe_allow_html=True)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "HTML (HyperText Markup Language) is the core language for designing and organizing content on the web. It structures web pages using elements defined by tags, such as headings, paragraphs, links, images, and multimedia. Serving as the backbone of web development, HTML works alongside CSS and JavaScript to build interactive and visually engaging web experiences."
    "</p>", 
    unsafe_allow_html=True
)
st.markdown("<h2 style='text-align: left; color: Black;'>How to read HTML Files</h2>", unsafe_allow_html=True)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "HTML files can be analyzed and processed using various tools and libraries, with pandas being a popular choice. Pandas allows for direct extraction of tables from HTML files or web pages using the pd.read_html('file.html') function."
    "</p>", 
    unsafe_allow_html=True
)
st.markdown("<h2 style='text-align: left; color: Black;'>Issues Encountered When Handling HTML Files</h2>", unsafe_allow_html=True)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "Parsing errors can occur due to missing tags or incorrectly nested elements. Additionally, using non-standard encodings in HTML files may result in issues during "
    "</p>", 
    unsafe_allow_html=True
)
st.markdown("<h2 style='text-align: left; color: Black;'>How to Overcome These Errors</h2>", unsafe_allow_html=True)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "Utilize parsers such as html.parser and define the encoding explicitly when opening files, will clear the Issues."
    "</p>", 
    unsafe_allow_html=True
)

# Adding the link
st.markdown(
    "<h2 style='text-align: left; color: Black;'>Useful Resource</h2>", unsafe_allow_html=True
)
st.markdown(
    "<p style='font-size: 16px; color: White;'>"
    "You can explore further on Google Colab using the following link: "
    "<a href='https://colab.research.google.com/drive/1JirPtBvjsVW5OZQt9flKlnro7bQ5RzXP?usp=sharing' style='color: #FFD700;'>Open Resource</a>"
    "</p>", 
    unsafe_allow_html=True
)