diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..463d970
Binary files /dev/null and b/.DS_Store differ
diff --git a/README.md b/README.md
index 1a3aa0e..79c19b7 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,17 @@
-# html_feedback_ui
-Supports a student project involving soliciting feedback on arXiv articles rendered as html.
+##Supports a student project involving soliciting feedback on arXiv articles rendered as html.
+
+## Ar5iv_SideBar
+### Project Description
+Try Left Sidebar
+
+### Since the left sidebar will stay at right, so all content need to move right.
+``` .content{
+ margin-left: 200px;
+ }
+```
+Or, we may need to develop JS for fix this problem.
+
+#### Other information
+I have create a individual nav.css for nav bar.
+
+
diff --git a/app.py b/app.py
new file mode 100644
index 0000000..cc57704
--- /dev/null
+++ b/app.py
@@ -0,0 +1,76 @@
+from flask import Flask, render_template
+app = Flask(__name__)
+
+page_titles = {
+ 'page1': 'Page 1 Title',
+ 'page2': 'Page 2 Title',
+ 'page3': 'Page 3 Title',
+ 'page4': 'Page 4 Title',
+ 'page5': 'Page 5 Title',
+ 'page6': 'Page 6 Title',
+ 'page7': 'Page 7 Title',
+ 'page8': 'Page 8 Title',
+ 'page9': 'Page 9 Title',
+ 'page10': 'Page 10 Title',
+ 'page11': 'Page 11 Title',
+ 'page12': 'Page 12 Title',
+}
+
+categories_names = {
+ 'category1': 'Category 1_title',
+ 'category2': 'Category 2_title',
+ 'category3': 'Category 3_title',
+}
+
+
+@app.route('/')
+def page1():
+ return render_template('page1.html', page_titles=page_titles, page_title=page_titles['page1'], categories_names=categories_names)
+
+@app.route('/page2/')
+def page2():
+ return render_template('page2.html', page_titles=page_titles, page_title=page_titles['page2'])
+
+@app.route('/page3/')
+def page3():
+ return render_template('page3.html', page_titles=page_titles, page_title=page_titles['page3'])
+
+@app.route('/page4/')
+def page4():
+ return render_template('page4.html', page_titles=page_titles, page_title=page_titles['page4'])
+
+@app.route('/page5/')
+def page5():
+ return render_template('page5.html', page_titles=page_titles, page_title=page_titles['page5'])
+
+@app.route('/page6/')
+def page6():
+ return render_template('page6.html', page_titles=page_titles, page_title=page_titles['page6'])
+
+@app.route('/page7/')
+def page7():
+ return render_template('page7.html', page_titles=page_titles, page_title=page_titles['page7'])
+
+@app.route('/page8/')
+def page8():
+ return render_template('page8.html', page_titles=page_titles, page_title=page_titles['page8'])
+
+@app.route('/page9/')
+def page9():
+ return render_template('page9.html', page_titles=page_titles, page_title=page_titles['page9'])
+
+
+@app.route('/page10/')
+def page10():
+ return render_template('page10.html', page_titles=page_titles, page_title=page_titles['page10'])
+
+@app.route('/page11/')
+def page11():
+ return render_template('page11.html', page_titles=page_titles, page_title=page_titles['page11'])
+
+@app.route('/page12/')
+def page12():
+ return render_template('page12.html', page_titles=page_titles, page_title=page_titles['page12'])
+
+if __name__ == '__main__':
+ app.run(debug=True)
diff --git a/static/css/nav.css b/static/css/nav.css
new file mode 100644
index 0000000..9e59a5a
--- /dev/null
+++ b/static/css/nav.css
@@ -0,0 +1,59 @@
+.left-sidebar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ width: 200px; /* adjust the width as needed */
+ background-color: #fff; /* set the background color as needed */
+ border-right: 1px solid #ccc; /* add a border to the right side for separation */
+ overflow-y: auto; /* add scrollbars if necessary */
+ }
+
+ .content{
+ margin-left: 200px;
+ }
+
+ .page-categories {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+
+ .page-categories li {
+ margin: 0;
+ padding: 0;
+ }
+
+ .page-categories a {
+ display: block;
+ padding: 10px;
+ color: #000; /* set the link color as needed */
+ text-decoration: none;
+ }
+
+ .page-categories a:hover {
+ background-color: #f0f0f0; /* set the background color when hovering over a link */
+ }
+
+ .page-names {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+
+ .page-names li {
+ margin: 0;
+ padding: 0;
+ }
+
+ .page-names a {
+ display: block;
+ padding: 10px 20px;
+ color: #888; /* set the link color as needed */
+ text-decoration: none;
+ }
+
+ .page-names a:hover {
+ background-color: #f0f0f0; /* set the background color when hovering over a link */
+ }
+
\ No newline at end of file
diff --git a/static/css/styles.css b/static/css/styles.css
new file mode 100644
index 0000000..b64cd6a
--- /dev/null
+++ b/static/css/styles.css
@@ -0,0 +1,86 @@
+body {
+ position: relative;
+}
+
+.report-btn {
+ position: fixed;
+ bottom: 10px;
+ right: 10px;
+ font-size: 20px;
+}
+
+.report-box {
+ position: fixed;
+ top: 50%;
+ right: 20px;
+ transform: translateY(-50%);
+ background: white;
+ border: 1px solid #ccc;
+ padding: 20px;
+ z-index: 1000;
+ display: none;
+}
+
+.close-btn {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ cursor: pointer;
+}
+
+.text-report {
+ width: 100%;
+ height: 100px;
+ margin-bottom: 10px;
+}
+
+.take-screenshot {
+ margin-top: 10px;
+}
+
+.highlight {
+ background-color: yellow;
+}
+
+footer {
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ font-size: 30px;
+}
+
+.breadcrumb {
+ font-size: 1rem;
+ margin-bottom: 1rem;
+}
+
+.breadcrumb ul {
+ list-style-type: none;
+ display: flex;
+ padding: 0;
+}
+
+.breadcrumb ul li {
+ margin-right: 5px;
+}
+
+.breadcrumb ul li:not(:last-child)::after {
+ content: "/";
+ margin-left: 5px;
+}
+
+.breadcrumb ul li a {
+ text-decoration: none;
+ color: #007bff;
+}
+
+.breadcrumb ul li a:hover {
+ text-decoration: underline;
+}
+
+.breadcrumb ul li.current-page {
+ color: #000;
+ text-decoration: none;
+ pointer-events: none;
+}
+
diff --git a/static/js/example.js b/static/js/example.js
new file mode 100644
index 0000000..83f0657
--- /dev/null
+++ b/static/js/example.js
@@ -0,0 +1 @@
+// This is just a exampel
\ No newline at end of file
diff --git a/templates/page1.html b/templates/page1.html
new file mode 100644
index 0000000..a9ea967
--- /dev/null
+++ b/templates/page1.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+ {{ page_title }}
+
+
+
+
+ {% comment %} StartPage {% endcomment %}
+
+
+
+
+
1
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
+
10
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
+
11
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
+
12
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
+
2
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
+
3
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
+
4
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
+
5
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
+
6
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
+
7
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
+
8
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
+
9
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+
Test, Test, Test. Test, Test, Test. Test, Test, Test.
+