pages/Info_of_Json.py

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 JavaScript Object Notation (JSON)</h2>", unsafe_allow_html=True)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "JSON (JavaScript Object Notation) is a simple and lightweight format for exchanging data. It is human-readable, easy to write, and efficiently parsed and generated by machines. Due to its straightforward structure and versatility, JSON is commonly used in web applications to transfer data between servers and clients. It organizes data in the form of key-value pairs, arrays, and nested structures."
    "</p>", 
    unsafe_allow_html=True
)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "The default structure of JSON is similar to a dictionary, where keys must always be strings when creating a JSON file. In a JSON file, the keys serve as column names, while the values represent the corresponding column data."
    "</p>", 
    unsafe_allow_html=True
)
st.markdown("<h3 style='text-align: left; color: Black;'>Orientation</h3>", unsafe_allow_html=True)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    " JSON supports various orientations, which provide different structural formats. There are four primary types of JSON formats, each serving specific use cases."
    "</p>", 
     unsafe_allow_html=True
)
st.markdown("1.Index Orientation")
st.markdown("2.Column Orientation")
st.markdown("3.Values Orientation")
st.markdown("4.Split Orientation")
st.markdown("<h3 style='text-align: left; color: Black;'> Index Orientation</h3>", unsafe_allow_html=True)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "In JSON, index orientation organizes data so that the dictionary keys function as index labels, while the values represent individual rows of data. This format is commonly used to store tabular data in a structured way, with the index acting as a unique identifier for each row."
    "</p>", 
     unsafe_allow_html=True
)
st.markdown("<h3 style='text-align: left; color: Black;'> Column Orientation</h3>", unsafe_allow_html=True)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "In this format, keys represent column names, and the corresponding values are arrays containing all the data for each column. This orientation is ideal for representing tabular data in a columnar format."
    "</p>", 
     unsafe_allow_html=True
)
st.markdown("<h3 style='text-align: left; color: Black;'> Values Orientation</h3>", unsafe_allow_html=True)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "In this orientation, each record is represented as a list of values, and the order of values matches the order of column names provided separately."
    "</p>", 
     unsafe_allow_html=True
)
st.markdown("<h3 style='text-align: left; color: Black;'> Split Orientation</h3>", unsafe_allow_html=True)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
   "This format splits the data into three components: index, columns, and data. It provides a complete representation of tabular data with structure."
    "</p>", 
     unsafe_allow_html=True
)
st.markdown("<h2 style='text-align: left; color: Black;'>📈How to Read Json Files </h2>", unsafe_allow_html=True)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "JSON data files can be categorized into two types: structured and semi-structured. For structured data, the pd.read_json() function is used, while for semi-structured data, the pd.json_normalize() function is utilized to flatten and extract nested information."
    "</p>", 
    unsafe_allow_html=True
)

# Add the link
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "For more details, visit the <a href='https://colab.research.google.com/drive/12b5R78s99bZ01JUCdN8bweenVY-at0Ku?usp=sharing' target='_blank' style='color: #FFD700;'>Google Colab Notebook</a>."
    "</p>", 
    unsafe_allow_html=True
)