Update pages/Info_of_Json.py

pages/Info_of_Json.py

@@ -0,0 +1,84 @@
+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
+)
+
+