Quick Update

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.
+
+

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)

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 */
+  }
+

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;
+}
+

static/js/example.js

@@ -0,0 +1 @@
+// This is just a exampel

templates/page1.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{ page_title }}</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/nav.css') }}" />
+
+  </head>
+  {% comment %} StartPage {% endcomment %}
+  <body>
+    <nav class="left-sidebar">
+      <ul class="page-categories">
+        <li>
+          <a href="#">Category 1</a>
+          <ul class="page-names">
+            <li><a>{{ page_title }}</a></li>
+          </ul>
+        </li>
+        <li>
+          <a href="#">{{ categories_names['category2'] }}</a>
+          <ul class="page-names">
+            <li><a href="#">Page 2.1</a></li>
+          </ul>
+        </li>
+      </ul>
+    </nav>
+
+    <div class="content">
+      <p>1</p>
+      <p>Test, Test, Test. Test, Test, Test. Test, Test, Test.</p>
+      <p>Test, Test, Test. Test, Test, Test. Test, Test, Test.</p>
+      <p>Test, Test, Test. Test, Test, Test. Test, Test, Test.</p>
+      <p>Test, Test, Test. Test, Test, Test. Test, Test, Test.</p>
+      <p>Test, Test, Test. Test, Test, Test. Test, Test, Test.</p>
+      <p>Test, Test, Test. Test, Test, Test. Test, Test, Test.</p>
+    </div>
+
+    <footer>
+      <ul>
+        <a href="{{ url_for('page2') }}">Next Page</a>
+      </ul>
+    </footer>
+
+    <script src="{{ url_for('static', filename='js/example.js') }}"></script>
+  </body>
+</html>

templates/page10.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{ page_title }}</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
+  </head>
+  <body>
+    <nav class="breadcrumb">
+      <ul>
+        <li><a href="{{ url_for('page1') }}">{{ page_titles['page1'] }}</a></li>
+        <li><a href="{{ url_for('page2') }}">{{ page_titles['page2'] }}</a></li>
+        <li><a href="{{ url_for('page3') }}">{{ page_titles['page3'] }}</a></li>
+        <li><a href="{{ url_for('page4') }}">{{ page_titles['page4'] }}</a></li>
+        <li><a href="{{ url_for('page5') }}">{{ page_titles['page5'] }}</a></li>
+        <li><a href="{{ url_for('page6') }}">{{ page_titles['page6'] }}</a></li>
+        <li><a href="{{ url_for('page7') }}">{{ page_titles['page7'] }}</a></li>
+        <li><a href="{{ url_for('page8') }}">{{ page_titles['page8'] }}</a></li>
+        <li><a href="{{ url_for('page9') }}">{{ page_titles['page9'] }}</a></li>
+        <li class="current-page">{{ page_title }}</li>
+      </ul>
+    </nav>
+    <div class="content">
+      <p>10</p>
+      <p>Test, Test, Test. Test, Test, Test. Test, Test, Test.</p>
+      <p>Test, Test, Test. Test, Test, Test. Test, Test, Test.</p>
+      <p>Test, Test, Test. Test, Test, Test. Test, Test, Test.</p>
+      <p>Test, Test, Test. Test, Test, Test. Test, Test, Test.</p>
+      <p>Test, Test, Test. Test, Test, Test. Test, Test, Test.</p>
+      <p>Test, Test, Test. Test, Test, Test. Test, Test, Test.</p>
+    </div>
+    <footer>
+      <ul>
+        <a href="{{ url_for('page11') }}">Next Page</a>
+      </ul>
+    </footer>
+  </body>
+</html>

templates/page11.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{ page_title }}</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
+  </head>
+  <body>
+    <nav class="breadcrumb">
+      <ul>
+        <li><a href="{{ url_for('page1') }}">{{ page_titles['page1'] }}</a></li>
+        <li><a href="{{ url_for('page2') }}">{{ page_titles['page2'] }}</a></li>
+        <li><a href="{{ url_for('page3') }}">{{ page_titles['page3'] }}</a></li>
+        <li><a href="{{ url_for('page4') }}">{{ page_titles['page4'] }}</a></li>
+        <li><a href="{{ url_for('page5') }}">{{ page_titles['page5'] }}</a></li>
+        <li><a href="{{ url_for('page5') }}">{{ page_titles['page6'] }}</a></li>
+        <li><a href="{{ url_for('page7') }}">{{ page_titles['page7'] }}</a></li>
+        <li><a href="{{ url_for('page8') }}">{{ page_titles['page8'] }}</a></li>
+        <li><a href="{{ url_for('page9') }}">{{ page_titles['page9'] }}</a></li>
+        <li><a href="{{ url_for('page10') }}">{{ page_titles['page10'] }}</a></li>
+        <li class="current-page">{{ page_title }}</li>
+      </ul>
+    </nav>
+    <div class="content">
+      <p>11</p>
+      <p>Test, Test, Test. Test, Test, Test. Test, Test, Test.</p>
+      <p>Test, Test, Test. Test, Test, Test. Test, Test, Test.</p>
+      <p>Test, Test, Test. Test, Test, Test. Test, Test, Test.</p>
+      <p>Test, Test, Test. Test, Test, Test. Test, Test, Test.</p>
+      <p>Test, Test, Test. Test, Test, Test. Test, Test, Test.</p>
+      <p>Test, Test, Test. Test, Test, Test. Test, Test, Test.</p>
+    </div>
+    <footer>
+      <ul>
+        <a href="{{ url_for('page12') }}">Next Page</a>
+      </ul>
+    </footer>
+  </body>
+</html>