diff --git a/__pycache__/code_editor.cpython-312.pyc b/__pycache__/code_editor.cpython-312.pyc
new file mode 100644
index 000000000..dc93e3113
Binary files /dev/null and b/__pycache__/code_editor.cpython-312.pyc differ
diff --git a/__pycache__/navigation.cpython-312.pyc b/__pycache__/navigation.cpython-312.pyc
new file mode 100644
index 000000000..e449ad902
Binary files /dev/null and b/__pycache__/navigation.cpython-312.pyc differ
diff --git a/app.py b/app.py
new file mode 100644
index 000000000..b16cae64d
--- /dev/null
+++ b/app.py
@@ -0,0 +1,35 @@
+import streamlit as st
+import webpages as pg
+from webpages.navigation import navigation_bar as nv
+
+page_label = nv()
+
+# block for main pages
+if page_label == "Homepage":
+ pg.home()
+
+elif page_label == "BuffTeks Project":
+ pg.project()
+
+elif page_label == "About Classroom":
+ pg.classroom()
+
+elif page_label == "BuffTeks Event":
+ pg.event()
+
+elif page_label == "Join Us":
+ pg.join_us()
+
+# block of PythonX lessons
+elif page_label == "About PythonX":
+ pg.pythonx_homepage()
+elif page_label == "Lesson1":
+ pg.pythonx_lesson1()
+elif page_label == "Lesson2":
+ pg.pythonx_lesson2()
+
+# block for testing page
+elif page_label == "Testing":
+ pg.testing()
+elif page_label == "Reference":
+ pg.reference()
\ No newline at end of file
diff --git a/images/AboutCoding.png b/images/AboutCoding.png
new file mode 100644
index 000000000..6919970d7
Binary files /dev/null and b/images/AboutCoding.png differ
diff --git a/images/BuffTeksLogo.png b/images/BuffTeksLogo.png
new file mode 100644
index 000000000..85abdd351
Binary files /dev/null and b/images/BuffTeksLogo.png differ
diff --git a/images/CodingProcess.png b/images/CodingProcess.png
new file mode 100644
index 000000000..6919970d7
Binary files /dev/null and b/images/CodingProcess.png differ
diff --git a/images/PythonXPicture.png b/images/PythonXPicture.png
new file mode 100644
index 000000000..5857c740a
Binary files /dev/null and b/images/PythonXPicture.png differ
diff --git a/webpages/__init__.py b/webpages/__init__.py
new file mode 100644
index 000000000..fb61b3ff3
--- /dev/null
+++ b/webpages/__init__.py
@@ -0,0 +1,11 @@
+from .home import home
+from .project import project
+from .event import event
+from .classroom import classroom
+from .join_us import join_us
+from .testing import testing
+from .reference import reference
+from .pythonx_lessons_pages.pythonx_homepage import pythonx_homepage
+from .pythonx_lessons_pages.pythonx_lesson1 import pythonx_lesson1
+from .pythonx_lessons_pages.pythonx_lesson2 import pythonx_lesson2
+from .pythonx_lessons_pages.pythonx_lesson3 import pythonx_lesson3
\ No newline at end of file
diff --git a/webpages/__pycache__/__init__.cpython-312.pyc b/webpages/__pycache__/__init__.cpython-312.pyc
new file mode 100644
index 000000000..271f22620
Binary files /dev/null and b/webpages/__pycache__/__init__.cpython-312.pyc differ
diff --git a/webpages/__pycache__/classroom.cpython-312.pyc b/webpages/__pycache__/classroom.cpython-312.pyc
new file mode 100644
index 000000000..b9b75e6f0
Binary files /dev/null and b/webpages/__pycache__/classroom.cpython-312.pyc differ
diff --git a/webpages/__pycache__/code_editor.cpython-312.pyc b/webpages/__pycache__/code_editor.cpython-312.pyc
new file mode 100644
index 000000000..a5ac39fde
Binary files /dev/null and b/webpages/__pycache__/code_editor.cpython-312.pyc differ
diff --git a/webpages/__pycache__/event.cpython-312.pyc b/webpages/__pycache__/event.cpython-312.pyc
new file mode 100644
index 000000000..c934cc216
Binary files /dev/null and b/webpages/__pycache__/event.cpython-312.pyc differ
diff --git a/webpages/__pycache__/home.cpython-312.pyc b/webpages/__pycache__/home.cpython-312.pyc
new file mode 100644
index 000000000..fde7f3853
Binary files /dev/null and b/webpages/__pycache__/home.cpython-312.pyc differ
diff --git a/webpages/__pycache__/join_us.cpython-312.pyc b/webpages/__pycache__/join_us.cpython-312.pyc
new file mode 100644
index 000000000..522ef0e4b
Binary files /dev/null and b/webpages/__pycache__/join_us.cpython-312.pyc differ
diff --git a/webpages/__pycache__/navigation.cpython-312.pyc b/webpages/__pycache__/navigation.cpython-312.pyc
new file mode 100644
index 000000000..3d11ef222
Binary files /dev/null and b/webpages/__pycache__/navigation.cpython-312.pyc differ
diff --git a/webpages/__pycache__/project.cpython-312.pyc b/webpages/__pycache__/project.cpython-312.pyc
new file mode 100644
index 000000000..88dd9e8cd
Binary files /dev/null and b/webpages/__pycache__/project.cpython-312.pyc differ
diff --git a/webpages/__pycache__/reference.cpython-312.pyc b/webpages/__pycache__/reference.cpython-312.pyc
new file mode 100644
index 000000000..31a93889e
Binary files /dev/null and b/webpages/__pycache__/reference.cpython-312.pyc differ
diff --git a/webpages/__pycache__/testing.cpython-312.pyc b/webpages/__pycache__/testing.cpython-312.pyc
new file mode 100644
index 000000000..e5a81c0b7
Binary files /dev/null and b/webpages/__pycache__/testing.cpython-312.pyc differ
diff --git a/webpages/buffteks.html b/webpages/buffteks.html
new file mode 100644
index 000000000..dbc849464
--- /dev/null
+++ b/webpages/buffteks.html
@@ -0,0 +1,145 @@
+
+
+
+
+
+ BuffTeks - Student Tech Club
+
+
+
+
+ BuffTeks Student Organization
+
+
+
+
+
+ Our Mission
+ Empower members with advanced software development knowledge, foster new skills and technologies in a collaborative and engaging community.
+
+
+
+ Our Activities
+
+ - BuffTeks Event: Host competitions and hackathons that empower students to use classroom knowledge for real-world solutions.
+ - BuffTeks Project: Faculty-led coding projects to provide IT solutions and support to problems facing local companies as part of an experiential learning effort.
+ - BuffTeks Classroom: An open learning platform devoted to sharing knowledge of information technology including Python programming and web application development.
+
+
+
+
+ Faculty Advisors
+
+
+

+
+
+
+
+

+
+
+
+
+
+
+
+
+
diff --git a/webpages/classroom.py b/webpages/classroom.py
new file mode 100644
index 000000000..7b52b0691
--- /dev/null
+++ b/webpages/classroom.py
@@ -0,0 +1,7 @@
+import streamlit as st
+
+def classroom():
+ st.title("BuffTeks Classroom")
+ st.divider()
+ st.title("PythonX")
+ st.image("./images/PythonXPicture.png")
diff --git a/webpages/code_editor.py b/webpages/code_editor.py
new file mode 100644
index 000000000..c51185aae
--- /dev/null
+++ b/webpages/code_editor.py
@@ -0,0 +1,52 @@
+# [TBD] Once the code editor works in the texting page, move it here
+import streamlit as st
+import subprocess
+from streamlit_ace import st_ace
+
+
+def code_editor(height="300px", sample_code = "", editor_label = "",min_lines = 20):
+ with st.container():
+ content = st_ace(
+ height=height,
+ value= sample_code,
+ placeholder="Put the code here and click 'APPLY' to run",
+ language= "python",
+ theme="github",
+ font_size= 15,
+ tab_size=4,
+ show_gutter=True, # line number
+ min_lines=min_lines,
+ key=editor_label, #lable of the code editor
+
+ # show_print_margin=c2.checkbox("Show print margin", value=False),
+ # wrap=c2.checkbox("Wrap enabled", value=False),
+ # auto_update=c2.checkbox("Auto update", value=False),
+ # readonly=c2.checkbox("Read-only", value=False),
+ # keybinding=c2.selectbox("Keybinding mode", options=KEYBINDINGS, index=3),
+
+
+ )
+
+ if content:
+ with open("./webpages/input_code.py", "w") as f:
+ f.write(content)
+
+ try:
+ result = subprocess.run(
+ ["python", "./webpages/input_code.py"], # Command to execute
+ capture_output=True, # Capture both stdout and stderr
+ text=True, # Ensure the output is returned as a string
+ timeout=10 # Timeout after 10 seconds
+ )
+ # Check if the process encountered an error (non-zero exit code)
+ if result.returncode != 0:
+ st.error("Error:\t"+ result.stderr) # Print the error details from code.py
+ else:
+ st.success("**Code Output:**")
+ st.text(result.stdout) # Print the normal output if no errors
+
+ except subprocess.TimeoutExpired:
+ # Handle case where the process runs for too long
+ st.exception("The code took too long to execute and was terminated.")
+ st.divider()
+
diff --git a/webpages/event.py b/webpages/event.py
new file mode 100644
index 000000000..80b64ff17
--- /dev/null
+++ b/webpages/event.py
@@ -0,0 +1,6 @@
+import streamlit as st
+
+
+
+def event():
+ st.title("BuffTeks Event")
\ No newline at end of file
diff --git a/webpages/home.py b/webpages/home.py
new file mode 100644
index 000000000..02d9e33da
--- /dev/null
+++ b/webpages/home.py
@@ -0,0 +1,4 @@
+import streamlit as st
+
+def home():
+ st.html("./webpages/buffteks.html")
\ No newline at end of file
diff --git a/webpages/input_code.py b/webpages/input_code.py
new file mode 100644
index 000000000..54ccb747c
--- /dev/null
+++ b/webpages/input_code.py
@@ -0,0 +1 @@
+print("Hello PythonX")
\ No newline at end of file
diff --git a/webpages/join_us.py b/webpages/join_us.py
new file mode 100644
index 000000000..fe9f46d80
--- /dev/null
+++ b/webpages/join_us.py
@@ -0,0 +1,4 @@
+import streamlit as st
+
+def join_us():
+ st.html("https://wtamuuw.az1.qualtrics.com/jfe/form/SV_2boQtKLCptO33HE")
\ No newline at end of file
diff --git a/webpages/navigation.py b/webpages/navigation.py
new file mode 100644
index 000000000..48a3a34bc
--- /dev/null
+++ b/webpages/navigation.py
@@ -0,0 +1,39 @@
+import streamlit as st
+
+import streamlit_antd_components as sac
+
+# This doc is used to set up the navigation bar
+# basic structure is:
+def navigation_bar():
+ # start page is the homepage
+ page_label = "Homepage"
+
+ with st.sidebar:
+ st.image("./images/BuffTeksLogo.png", caption="Building Skills, Crafting Code, Bridging Communities")
+
+ page_label = sac.menu([
+ sac.MenuItem("Testing", icon='fingerprint'),
+ sac.MenuItem('Homepage', icon='house'),
+ sac.MenuItem('BuffTeks Project', icon='bi bi-laptop'),
+ sac.MenuItem('BuffTeks Event', icon='calendar-event'),
+ sac.MenuItem('BuffTeks Classroom', icon='book', children=[
+ sac.MenuItem('About Classroom', icon='question-circle'),
+ sac.MenuItem('PythonX', icon='bi bi-filetype-py', children=[
+ sac.MenuItem('About PythonX', icon='question-circle'),
+ sac.MenuItem('Lesson1', icon='1-square'),
+ sac.MenuItem('Lesson2', icon='2-square'),
+ sac.MenuItem('Lesson3', icon='3-square'),
+ ]),
+ ]),
+ sac.MenuItem(type='divider'),
+ sac.MenuItem('Link', type='group', children=[
+ sac.MenuItem('Join Us', icon='person-plus', href='https://wtamuuw.az1.qualtrics.com/jfe/form/SV_2boQtKLCptO33HE'),
+ ]),
+
+ sac.MenuItem(type='divider'),
+ sac.MenuItem("Reference", icon='paperclip'),
+
+ ], open_all=True)
+
+ return page_label
+
\ No newline at end of file
diff --git a/webpages/project.py b/webpages/project.py
new file mode 100644
index 000000000..4a6fe2d76
--- /dev/null
+++ b/webpages/project.py
@@ -0,0 +1,4 @@
+import streamlit as st
+
+def project():
+ st.title("BuffTeks Project")
\ No newline at end of file
diff --git a/webpages/pythonx_lessons_pages/__pycache__/PythonXHomepage.cpython-312.pyc b/webpages/pythonx_lessons_pages/__pycache__/PythonXHomepage.cpython-312.pyc
new file mode 100644
index 000000000..b45f58a36
Binary files /dev/null and b/webpages/pythonx_lessons_pages/__pycache__/PythonXHomepage.cpython-312.pyc differ
diff --git a/webpages/pythonx_lessons_pages/__pycache__/pythonx_homepage.cpython-312.pyc b/webpages/pythonx_lessons_pages/__pycache__/pythonx_homepage.cpython-312.pyc
new file mode 100644
index 000000000..4386be8d6
Binary files /dev/null and b/webpages/pythonx_lessons_pages/__pycache__/pythonx_homepage.cpython-312.pyc differ
diff --git a/webpages/pythonx_lessons_pages/__pycache__/pythonx_lesson1.cpython-312.pyc b/webpages/pythonx_lessons_pages/__pycache__/pythonx_lesson1.cpython-312.pyc
new file mode 100644
index 000000000..576c10894
Binary files /dev/null and b/webpages/pythonx_lessons_pages/__pycache__/pythonx_lesson1.cpython-312.pyc differ
diff --git a/webpages/pythonx_lessons_pages/__pycache__/pythonx_lesson2.cpython-312.pyc b/webpages/pythonx_lessons_pages/__pycache__/pythonx_lesson2.cpython-312.pyc
new file mode 100644
index 000000000..e8da8816e
Binary files /dev/null and b/webpages/pythonx_lessons_pages/__pycache__/pythonx_lesson2.cpython-312.pyc differ
diff --git a/webpages/pythonx_lessons_pages/__pycache__/pythonx_lesson3.cpython-312.pyc b/webpages/pythonx_lessons_pages/__pycache__/pythonx_lesson3.cpython-312.pyc
new file mode 100644
index 000000000..cd439a3b2
Binary files /dev/null and b/webpages/pythonx_lessons_pages/__pycache__/pythonx_lesson3.cpython-312.pyc differ
diff --git a/webpages/pythonx_lessons_pages/pythonx_homepage.py b/webpages/pythonx_lessons_pages/pythonx_homepage.py
new file mode 100644
index 000000000..4e02e18f6
--- /dev/null
+++ b/webpages/pythonx_lessons_pages/pythonx_homepage.py
@@ -0,0 +1,31 @@
+import streamlit as st
+
+def pythonx_homepage():
+ # load pythonx logo
+ st.image("./images/PythonXPicture.png")
+
+ st.markdown("# :question: What is PythonX")
+
+ st.markdown(
+ """:blush: Computer programming is the art of designing and creating instructions for computers to follow and execute in the form of software programs. It involves using programming languages, algorithms, and data structures to solve problems and accomplish tasks. With the advancement of technology, programming has expanded beyond traditional computer platforms to include smartphones, smartwatches, and even automobiles. It has also become a powerful tool in other fields such as chemistry, biology, finance, and more.
+ \nIn this tutorial, we aim to introduce the basics of Python programming and demonstrate its utility across various fields. Our goal is not to make you an expert software developer or engineer, but rather to equip you with fundamental Python programming skills that can enhance your work in your chosen field. That's why we've named this tutorial \"PythonX\" where 'X' represents the infinite possibilities and diverse applications in various domains."""
+ )
+
+
+ st.markdown("# :question: Why Choose Python")
+
+ st.markdown(
+ """
+
+ :snake: [Python](https://www.python.org/) is a high-level, widely-used programming language known for its simplicity and readability. As a general-purpose language, it is versatile enough to create a variety of software, including desktop applications, web and mobile apps, games, as well as for scientific and mathematical computing, data analysis and visualization, machine learning, and more.
+
+ :smiley: Python is also considered a **beginner-friendly** language due to its straightforward syntax, making it accessible for new programmers to learn. Furthermore, Python boasts a large and active community that provides a plethora of **libraries, frameworks, and modules**, enabling developers to perform complex tasks with minimal code.
+
+ :chart_with_upwards_trend: The language is widely utilized in **scientific and numerical computing, data science, and artificial intelligence**.
+
+ :+1: Overall, Python is a **powerful, versatile, and easy-to-learn** programming language, making it one of the most popular languages in use today.
+
+ """
+ )
+
+
diff --git a/webpages/pythonx_lessons_pages/pythonx_lesson1.py b/webpages/pythonx_lessons_pages/pythonx_lesson1.py
new file mode 100644
index 000000000..eea16f29a
--- /dev/null
+++ b/webpages/pythonx_lessons_pages/pythonx_lesson1.py
@@ -0,0 +1,30 @@
+import streamlit as st
+from webpages import code_editor as ce
+
+
+
+def pythonx_lesson1():
+ st.title("Lesson 1: Introduction to Python")
+
+ st.markdown("# :one: From Idea to Program")
+
+ st.markdown(
+ """
+ The following chat outlines the basic logic of computer programming. We start with a task that we want the computer to help complete.
+
+ - **Step 1**: The programmer **analyzes reuqirements** to identify the process to complete the task.
+ - **Step 2**: The programmer **implements** the identified process in programming code as a computer program.
+ - **Step 3**: The programmer **deploys** the program on the computer and let the complete complete the task and give expected outcomes.
+
+ This is a simplified outline of coding (computer programming), and additional steps may be involved depending on the task's complexity and the program.
+ """)
+ st.image("./images/CodingProcess.png")
+
+
+ st.markdown("# :two: First Python Program: Hello PythonX!")
+ st.markdown("""Now, let's try our first program, which print out "Hello PythonX" on our computer screen with following code:""")
+ st.code("""print("Hello PythonX)""")
+
+ # try sample code of hello pythonX
+ ce.code_editor(height="150px",editor_label="lesson1-helloworld")
+
diff --git a/webpages/pythonx_lessons_pages/pythonx_lesson2.py b/webpages/pythonx_lessons_pages/pythonx_lesson2.py
new file mode 100644
index 000000000..7e471182a
--- /dev/null
+++ b/webpages/pythonx_lessons_pages/pythonx_lesson2.py
@@ -0,0 +1,5 @@
+import streamlit as st
+from webpages import code_editor as ce
+def pythonx_lesson2():
+ st.title("Lesson 2: Create WordClouds in Python")
+
diff --git a/webpages/pythonx_lessons_pages/pythonx_lesson3.py b/webpages/pythonx_lessons_pages/pythonx_lesson3.py
new file mode 100644
index 000000000..eb88a0be0
--- /dev/null
+++ b/webpages/pythonx_lessons_pages/pythonx_lesson3.py
@@ -0,0 +1,6 @@
+import streamlit as st
+from webpages import code_editor as ce
+
+def pythonx_lesson3():
+ st.title("Lesson 3: Create WordClouds in Python")
+
diff --git a/webpages/reference.py b/webpages/reference.py
new file mode 100644
index 000000000..4471f579b
--- /dev/null
+++ b/webpages/reference.py
@@ -0,0 +1,14 @@
+import streamlit as st
+
+def reference():
+ st.markdown("This page is used to list all references when implementing this online tutorials")
+ st.markdown("""
+
+ - [Emoji for Markdown](https://gist.github.com/rxaviers/7360908)"
+ - [Streamlit Cheat Sheet](https://cheat-sheet.streamlit.app/)
+ - [Navigation Bar](https://docs.streamlit.io/develop/api-reference/navigation/st.navigation)
+ - [Menu Bar](https://nicedouble-streamlitantdcomponentsdemo-app-middmy.streamlit.app/)
+ - [Bootstrap Icon](https://icons.getbootstrap.com/)
+ - [Code editor](https://okld-gallery.streamlit.app/)
+
+ """)
\ No newline at end of file
diff --git a/webpages/testing.py b/webpages/testing.py
new file mode 100644
index 000000000..afd30cc66
--- /dev/null
+++ b/webpages/testing.py
@@ -0,0 +1,12 @@
+import streamlit as st
+import subprocess
+from webpages import code_editor as ce
+
+
+def testing():
+ st.title("Testing Page")
+ ce.code_editor()
+
+ # # [Work]code for instering youtube videos
+ # video = "https://youtu.be/HluANRwPyNo?feature=shared"
+ # st.video(video)