diff --git a/.vs/ProjectSettings.json b/.vs/ProjectSettings.json new file mode 100644 index 0000000000000000000000000000000000000000..f8b4888565caadc7510be75682268d6c18edd6de --- /dev/null +++ b/.vs/ProjectSettings.json @@ -0,0 +1,3 @@ +{ + "CurrentProjectSetting": null +} \ No newline at end of file diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json new file mode 100644 index 0000000000000000000000000000000000000000..d282b3b2429acfde2dec7effcded342bf9fd7122 --- /dev/null +++ b/.vs/VSWorkspaceState.json @@ -0,0 +1,7 @@ +{ + "ExpandedNodes": [ + "" + ], + "SelectedNode": "\\README.md", + "PreviewInSolutionExplorer": false +} \ No newline at end of file diff --git a/.vs/client-project-15-main/v16/.suo b/.vs/client-project-15-main/v16/.suo new file mode 100644 index 0000000000000000000000000000000000000000..381e8b772446dfe9b5fc859d6374674e65bc497d Binary files /dev/null and b/.vs/client-project-15-main/v16/.suo differ diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite new file mode 100644 index 0000000000000000000000000000000000000000..539c57ca73138669bcca56622d33f85059855353 Binary files /dev/null and b/.vs/slnx.sqlite differ diff --git a/main.py b/main.py index 14a2dbdc5a4e8d9261d5e674e5423b851e61a71f..ba4680310f17fe96a479bee1a071b0f51a60ee26 100644 --- a/main.py +++ b/main.py @@ -15,6 +15,10 @@ def home(): def about(): return render_template("about.html") +@app.route("/Locations", methods = ["GET"]) +def Locations(): + return render_template("Locations.html") + @app.route("/contact-us", methods = ["GET"]) def contact(): return render_template("contact-us.html") diff --git a/static/Location.css b/static/Location.css new file mode 100644 index 0000000000000000000000000000000000000000..18b4e405b2e85583eceeca8b23308f1a109bad12 --- /dev/null +++ b/static/Location.css @@ -0,0 +1,35 @@ +.container { + overflow: hidden; +} + +.filterDiv { + float: left; + background-color: #2196F3; + color: #ffffff; + width: 100px; + line-height: 100px; + text-align: center; + margin: 2px; + display: none; /* Hidden by default */ +} + +.show { + display: block; +} + +.btn { + border: none; + outline: none; + padding: 12px 16px; + background-color: #f1f1f1; + cursor: pointer; +} + +.btn:hover { + background-color: #ddd; +} + +.btn.active { + background-color: #666; + color: white; +} diff --git a/static/scripts/Location.js b/static/scripts/Location.js new file mode 100644 index 0000000000000000000000000000000000000000..d940a352c80682aa995584899ccb2a9da1792535 --- /dev/null +++ b/static/scripts/Location.js @@ -0,0 +1,47 @@ +filterSelection("all") +function filterSelection(c) { + var x, i; + x = document.getElementsByClassName("filterDiv"); + if (c == "all") c = ""; + // Add the Show class + for (i = 0; i < x.length; i++) { + RemoveClass(x[i], "show"); + if (x[i].className.indexOf(c) > -1) AddClass(x[i], "show"); + } +} + +// Showing filtered elements +function AddClass(element, name) { + var i, arr1, arr2; + arr1 = element.className.split(" "); + arr2 = name.split(" "); + for (i = 0; i < arr2.length; i++) { + if (arr1.indexOf(arr2[i]) == -1) { + element.className += " " + arr2[i]; + } + } +} + +// Removing elements that are not selected +function RemoveClass(element, name) { + var i, arr1, arr2; + arr1 = element.className.split(" "); + arr2 = name.split(" "); + for (i = 0; i < arr2.length; i++) { + while (arr1.indexOf(arr2[i]) > -1) { + arr1.splice(arr1.indexOf(arr2[i]), 1); + } + } + element.className = arr1.join(" "); +} + +// Add active class to current control button +var btnContainer = document.getElementById("myBtnContainer"); +var btns = btnContainer.getElementsByClassName("btn"); +for (var i = 0; i < btns.length; i++) { + btns[i].addEventListener("click", function() { + var current = document.getElementsByClassName("active"); + current[0].className = current[0].className.replace(" active", ""); + this.className += " active"; + }); +} diff --git a/templates/Locations.html b/templates/Locations.html new file mode 100644 index 0000000000000000000000000000000000000000..97c6bfb15fbeff2c8617a88af9c73f9344a58e21 --- /dev/null +++ b/templates/Locations.html @@ -0,0 +1,26 @@ +{% extends "main.html" %} +{% block title %}Locations{% endblock %} +{% block mainBlock %} +<div id="myBtnContainer"> + <button class="btn active" onclick="filterSelection('all')"> Show all</button> + <button class="btn" onclick="filterSelection('Wales')"> Wales</button> + <button class="btn" onclick="filterSelection('North-England')"> North England</button> + <button class="btn" onclick="filterSelection('South-West-England')"> South West England</button> + <button class="btn" onclick="filterSelection('Midlands')"> Midlands</button> + <button class="btn" onclick="filterSelection('Scotland')"> Scotland<button> +</div> + +<div class="container"> + <div class="filterDiv Wales">Location 1</div> + <div class="filterDiv Wales">Location 2</div> + <div class="filterDiv North-England">Location 3</div> + <div class="filterDiv North-England">Location 4</div> + <div class="filterDiv South-West-England">Location 5</div> + <div class="filterDiv South-West-England">Location 6</div> + <div class="filterDiv South-West-England">Location 7</div> + <div class="filterDiv Midlands">Location 8</div> + <div class="filterDiv Midlands">Location 9</div> + <div class="filterDiv Scotland">Location 10</div> + <div class="filterDiv Scotland">Location 11</div> + <div class="filterDiv Scotland">Location 12</div> +</div> diff --git a/templates/main.html b/templates/main.html index 3c531ed4995ce964ffdadc0357886426be05aac3..d390e91694ef8da99a6929ddf61117fb50c6e727 100644 --- a/templates/main.html +++ b/templates/main.html @@ -24,6 +24,7 @@ <li><a href="/">Home</a></li> <li><a href="/map">Map</a></li> <li><a href="/contact-us">Contact Us</a></li> + <li><a href="/Locations">Locations</a></li> <li style="float:right"><a class="active" href="/about">About</a></li> </ul> </nav>