diff --git a/project_server.py b/project_server.py
index b1c6bb5c1e4668d8d99623e01297dc07394c4df5..f8b7d80e127eb28d299fe0e8667a60963f267069 100644
--- a/project_server.py
+++ b/project_server.py
@@ -36,7 +36,7 @@ def returnListLocations():
cur.execute("SELECT Name, Main_Photo FROM coworking_spaces")
locationData = cur.fetchall()
conn.close()
- return render_template("ListLocations.html", data = locationData)
+ return render_template("Locations.html", data = locationData)
@app.route("/Load/CodeBase")
def Load():
diff --git a/static/CSS/ListLocations.css b/static/CSS/ListLocations.css
deleted file mode 100644
index 7388f166b927700d63f7b7ed8f2d3b9e4c80cdad..0000000000000000000000000000000000000000
--- a/static/CSS/ListLocations.css
+++ /dev/null
@@ -1,243 +0,0 @@
-/* #iD and .Class
-
-font, color, text
-padding, background, border, margin
-width, height,
-position, top/right/bottom/left
-overflow, float, display
-
-
-.my-class {
- width: calc(100% - 20px);
- height: calc(50% + 10px);
-} */
-
-* {
- font-family: Helvetica, Verdana, Arial, sans-serif;
-}
-
-body {
- margin: 0;
- padding: 0;
-
- /* Below styling used for footer position. */
- display: flex;
- min-height: 100vh;
- flex-direction: column;
-}
-
-ul, li {
- list-style-type: none;
- margin: 0;
- padding: 0;
-}
-
-a {
- text-decoration: none;
-}
-
-.Left {
- margin-right: auto;
-}
-
-.Center {
- margin-left: auto;
- margin-right: auto;
-}
-
-.Right {
- margin-left: auto;
-}
-
-/* [#1] Page header styling. Uses [#2].
-
-header #pageHeader
- div #headerDiv
- a #headerText #headerImg
- nav #headerNav .navBar
- ul .Right, ul .Left
- li a
-
-*/
-
-#headerDiv {
- text-align: center;
- background-color: white;
- padding: 20px 0px;
- display: flex;
- align-items: center;
- justify-content: flex-start;
-}
-
-#headerDiv a {
- font-size: 30px;
- font-weight: bold;
- color: black;
-}
-
-#headerText {
- width: 100%;
- margin-left: -240px;
-}
-
-#headerImg {
- width: 200px;
- height: 65px;
- margin-top: -10px;
- margin-right: 20px;
- margin-bottom: -17.5px;
- margin-left: 20px;
-}
-
-#headerNav {
- width: 100%;
- position: absolute;
-}
-
-#headerNav a {
- font-size: 20px;
- padding: 7.5px 10px;
-}
-
-/* [#2] Page navigation styling. Used in [#1] and [#4]. */
-
-.navBar {
- background-color: #282A35;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.navBar ul, .navBar li {
- display: flex;
- align-items: center;
-}
-
-.navBar a {
- color: white;
-}
-
-.navBar a:hover {
- background-color: #0B0C0F;
-}
-
-/* [#3] Page main styling.
-
-main #pageMain
- form #recordForm
- label
- input .formTextInput
- button #addButton
-
- */
-
-#pageMain {
- /* Below styling used for footer position. */
- flex: 1;
-}
-
-#recordForm {
- margin-left: 5px;
-}
-
-#recordForm .formTextInput {
- margin-top: 5px;
- width: 50%;
-}
-
-/* [#4] Page footer styling. Uses [#2].
-
-footer #pageFooter
- nav #footerNav .navBar
- ul .Center
- li a
-
-*/
-
-#footerNav a {
- font-size: 15px;
- padding: 5px 10px;
-}
-div.contain {
-text-align: center;
-}
-
-ul.list {
-display: inline-block;
-list-style-type: none;
-margin: 0;
-}
-.container {
-display: flex;
-position: relative;
-padding: 5px 660px 5px 5px;
-width: 40%;
-height: 50%;
-background-color: white;
-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-margin-bottom: 25px;
-border-radius: 10px;
-margin-left: 20px;
-
-}
-
-
-.image {
-opacity: 1;
-display: block;
-transition: .5s ease;
-backface-visibility: hidden;
-border-radius: 10px 10px 10px 10px;
- float: left;
- width: 300px;
- height: 250px;
- object-fit: cover;
-}
-
-h2 {
-position: absolute;
-margin-left: 320px;
-margin-top: 30px;
- }
-
-p{
- margin-top: 80px;
- margin-left: 50px;
-}
-
-.checked{
- color: orange;
-}
-
-.star{
- position: absolute;
- top: 50%;
- left: 40%;
- transform: translate(-50%, -50%);
- margin-top: 80px;
-}
-.middle {
-transition: .5s ease;
-opacity: 0;
-position: absolute;
-top: 45%;
-left: 10.5%;
-transform: translate(-25%, -25%);
--ms-transform: translate(-25%, -25%)
-
-}
-
-.container:hover .image {
-opacity: 0.3;
-}
-
-.container:hover .middle {
-opacity: 1;
-}
-
-.text {
-background-color: black;
-color: white;
-font-size: 16px;
-padding: 16px 32px;
-}
diff --git a/static/CSS/locations.css b/static/CSS/locations.css
index 76f5b34ec48aad1f02a488a3161aaec747ea764d..7388f166b927700d63f7b7ed8f2d3b9e4c80cdad 100644
--- a/static/CSS/locations.css
+++ b/static/CSS/locations.css
@@ -1,19 +1,183 @@
-body{
-background-color: white;
-color: black;
+/* #iD and .Class
+
+font, color, text
+padding, background, border, margin
+width, height,
+position, top/right/bottom/left
+overflow, float, display
+
+
+.my-class {
+ width: calc(100% - 20px);
+ height: calc(50% + 10px);
+} */
+
+* {
+ font-family: Helvetica, Verdana, Arial, sans-serif;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+
+ /* Below styling used for footer position. */
+ display: flex;
+ min-height: 100vh;
+ flex-direction: column;
+}
+
+ul, li {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+a {
+ text-decoration: none;
+}
+
+.Left {
+ margin-right: auto;
+}
+
+.Center {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.Right {
+ margin-left: auto;
+}
+
+/* [#1] Page header styling. Uses [#2].
+
+header #pageHeader
+ div #headerDiv
+ a #headerText #headerImg
+ nav #headerNav .navBar
+ ul .Right, ul .Left
+ li a
+
+*/
+
+#headerDiv {
+ text-align: center;
+ background-color: white;
+ padding: 20px 0px;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+}
+
+#headerDiv a {
+ font-size: 30px;
+ font-weight: bold;
+ color: black;
+}
+
+#headerText {
+ width: 100%;
+ margin-left: -240px;
}
+#headerImg {
+ width: 200px;
+ height: 65px;
+ margin-top: -10px;
+ margin-right: 20px;
+ margin-bottom: -17.5px;
+ margin-left: 20px;
+}
+
+#headerNav {
+ width: 100%;
+ position: absolute;
+}
+
+#headerNav a {
+ font-size: 20px;
+ padding: 7.5px 10px;
+}
+
+/* [#2] Page navigation styling. Used in [#1] and [#4]. */
+
+.navBar {
+ background-color: #282A35;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.navBar ul, .navBar li {
+ display: flex;
+ align-items: center;
+}
+
+.navBar a {
+ color: white;
+}
+
+.navBar a:hover {
+ background-color: #0B0C0F;
+}
+
+/* [#3] Page main styling.
+
+main #pageMain
+ form #recordForm
+ label
+ input .formTextInput
+ button #addButton
+
+ */
+
+#pageMain {
+ /* Below styling used for footer position. */
+ flex: 1;
+}
+
+#recordForm {
+ margin-left: 5px;
+}
+
+#recordForm .formTextInput {
+ margin-top: 5px;
+ width: 50%;
+}
+
+/* [#4] Page footer styling. Uses [#2].
+
+footer #pageFooter
+ nav #footerNav .navBar
+ ul .Center
+ li a
+*/
+
+#footerNav a {
+ font-size: 15px;
+ padding: 5px 10px;
+}
+div.contain {
+text-align: center;
+}
+
+ul.list {
+display: inline-block;
+list-style-type: none;
+margin: 0;
+}
.container {
display: flex;
position: relative;
-padding: 5px 640px 5px 5px;
+padding: 5px 660px 5px 5px;
width: 40%;
height: 50%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
border-radius: 10px;
+margin-left: 20px;
}
@@ -51,9 +215,7 @@ p{
left: 40%;
transform: translate(-50%, -50%);
margin-top: 80px;
-
}
-
.middle {
transition: .5s ease;
opacity: 0;
@@ -79,122 +241,3 @@ color: white;
font-size: 16px;
padding: 16px 32px;
}
-
-div.contain {
-text-align: center;
-}
-
-ul.list {
-display: inline-block;
-list-style-type: none;
-margin: 0;
-}
-
-h1 {
-color: white;
-background-color: black;
-font-weight: 600;
-font-family: 'Monospace', Lucida-Console;
-position: relative;
-font-size: 36px;
-display: flex;
-margin-right: 650px;
-margin: 1em 0 1em 0;
-line-height: 110px;
-padding: 15px 15px 15px 3%;
-border-radius: 10px 10px 10px 10px;
-
-}
-
-.logo{
-width: 8%;
-height: 8%
-border: 0;
-float: left;
-display: flex;
-margin: 10px 10px;
-
-}
-
- button{
- width: 40px;
- height: 30px;
- background-color: black;
- border: none;
- outline: none;
- border-radius: 4px;
- padding: 4px;
- position: absolute;
- top: 65px;
- right: 20px;
- cursor: pointer;
- transition: 0.4s ease-in-out;
- }
-
- button.active{
- transform: translateX(-210px);
- }
-
- button span {
- display: block;
- width: 100%;
- height: 4px;
- background-color: white;
-
- }
-
- button span:nth-child(2) {
- margin: 5px 0;
- }
-
- nav{
- background-color: black;
- padding: 15px;
- height: 18.1vh;
- position: absolute;
- top: 0;
- right: 0;
- width: 200px;
- transform: translateX(100%);
- margin-top: 2.25em;
- border-radius: 10px;
- transition: 0.4s ease-in-out;
- }
- nav.active {
- transform: translateX(0);
- }
-
- nav ul{
- list-style: none;
- margin: 0;
- padding:0;
- width: 60px;
- }
- nav ul li{
- padding: 10px 0;
- }
- nav ul li a{
- color: white;
- text-decoration: none;
- display: block;
- }
- nav ul li a:hover {
- color: #A9A9A9;
-
- JScript/locations.js 0 → 100644
-+
-10
--
-0
-
-Viewed
-let btn = document.querySelector("button");
-let nav = document.querySelector("nav");
-
-
-btn.addEventListener("click", function() {
-
- nav.classList.toggle("active");
- btn.classList.toggle("active");
-
- } );
diff --git a/static/locations.html b/static/locations.html
deleted file mode 100644
index b77d1e4483b728cf5b889137f24e97600ff52f96..0000000000000000000000000000000000000000
--- a/static/locations.html
+++ /dev/null
@@ -1,125 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <link rel="stylesheet" href= "CSS/locations.css">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- <title> Locations </title>
- </head>
- <body>
- <section>
- <h1><img src="Media/logo.png" class="logo"/> Our Locations </h1>
- <button>
- <span></span>
- <span></span>
- <span></span>
- </button>
- <nav>
- <ul>
- <li><a href="landingpage.html"> Home </a></li>
- <li><a href="#"> ### </a></li>
- <li><a href="#"> ### </a></li>
- </ul>
- </nav>
- <div class="contain">
- <ul class= "list">
- <li>
- <div class="container">
- <img src="https://images.squarespace-cdn.com/content/v1/55439320e4b0f92b5d6c4c8b/1646867535415-4JI39H286BUMT26H4FHN/C36A1915.jpg?format=2500w" class="image" >
- <h2> Codebase </h2>
- <p>hhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
- <div class= star>
- <span class="fa fa-star fa-3x checked" ></span>
- <span class="fa fa-star fa-3x checked"></span>
- <span class="fa fa-star fa-3x checked"></span>
- <span class="fa fa-star fa-3x" ></span>
- <span class="fa fa-star fa-3x" ></span>
- </div>
- <div class="middle">
- <div class="text"> Codebase </div>
- </div>
- </div>
- </li>
-
- <li>
- <div class="container">
- <img src="https://wearecatalyst.org/wp-content/uploads/2022/05/Catalyst03.jpg" class="image" >
- <h2> Catalyst </h2>
- <p>hhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
- <div class= star>
- <span class="fa fa-star fa-3x checked" ></span>
- <span class="fa fa-star fa-3x checked"></span>
- <span class="fa fa-star fa-3x checked"></span>
- <span class="fa fa-star fa-3x" ></span>
- <span class="fa fa-star fa-3x" ></span>
- </div>
- <div class="middle">
- <div class="text"> Catalyst </div>
- </div>
- </div>
- </li>
- <li>
- <div class="container">
- <img src="https://images.squarespace-cdn.com/content/v1/5709040420c647579532dbb4/1594914119071-OWI9G22S295OCMSWL0VL/_K5L1162.jpg?format=2500w" Class="image" >
- <h2> C4DI </h2>
- <p>hhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
- <div class= star>
- <span class="fa fa-star fa-3x checked" ></span>
- <span class="fa fa-star fa-3x checked"></span>
- <span class="fa fa-star fa-3x checked"></span>
- <span class="fa fa-star fa-3x" ></span>
- <span class="fa fa-star fa-3x" ></span>
- </div>
- <div class="middle">
- <div class="text"> C4DI </div>
- </div>
- </div>
- </li>
-
- <li>
- <div class="container">
- <img src="https://dogpatchlabs.wpenginepowered.com/wp-content/uploads/2022/09/ian_browne.jpg" class="image" >
- <h2> Dogpatch </h2>
- <p>hhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
- <div class= star>
- <span class="fa fa-star fa-3x checked" ></span>
- <span class="fa fa-star fa-3x checked"></span>
- <span class="fa fa-star fa-3x checked"></span>
- <span class="fa fa-star fa-3x" ></span>
- <span class="fa fa-star fa-3x" ></span>
- </div>
- <div class="middle">
- <div class="text"> Dogpatch </div>
- </div>
- </div>
- </li>
-
- <li>
- <div class="container">
- <img src="https://stationf.co/img/misc/create-zone.jpg" class="image" >
- <h2>Station F </h2>
- <p>hhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
- <div class= star>
- <span class="fa fa-star fa-3x checked" ></span>
- <span class="fa fa-star fa-3x checked"></span>
- <span class="fa fa-star fa-3x checked"></span>
- <span class="fa fa-star fa-3x" ></span>
- <span class="fa fa-star fa-3x" ></span>
- </div>
- <div class="middle">
- <div class="text"> Station F </div>
- </div>
- </div>
- </li>
- </ul>
- <div>
- {%if data%}
- {{ data }}
- {%endif%}
- </div>
- </div>
- </section>
- <footer>
- </footer>
- <script src="JS/locations.js"> </script>
-
- </body>
diff --git a/templates/ListLocations.html b/templates/Locations.html
similarity index 93%
rename from templates/ListLocations.html
rename to templates/Locations.html
index 1710c96e6cf8874fab3de8c61cd26eebc47e8cb6..9945f324443a2409af0993c7ba25217dddc92256 100644
--- a/templates/ListLocations.html
+++ b/templates/Locations.html
@@ -2,7 +2,7 @@
{%block headblock%}
<title> Locations </title>
- <link rel="stylesheet" href="/static/CSS/ListLocations.css">
+ <link rel="stylesheet" href="/static/CSS/Locations.css">
{%endblock%}
{%block headerblock%}
<a id="headerText"