HTML, CSS, JSON

HTML page templates, CSS files, and JSON file for testing with data
codingandcommunity · pjs1221 · Oct 26, 2018 · Oct 26, 2018 · Oct 26, 2018 · 3fd3f8f312240aebeb5df23c6bc85eb0c001546c
commit 3fd3f8f312240aebeb5df23c6bc85eb0c001546c
diff --git a/launchpad/static/Projects.json b/launchpad/static/Projects.json
@@ -0,0 +1,28 @@
+{
+  "projects": [
+                {
+                  "lang": "python",
+                  "level": 1,
+                  "description": "Get started with this beginner Python project!"
+                },
+                {
+                  "lang": "java",
+                  "level": 2,
+                  "description": "Try this fun Java project!"
+                },
+                {
+                  "lang": "c++",
+                  "level": 2,
+                  "description": "Try your skills with this great C++ project!"
+                },
+                {
+                  "lang": "reactjs",
+                  "level": 3,
+                  "description": "Challenge yourself with this level 3 JavaScript library!"
+                }
+
+  ],
+
+  "dataTitle": "Projects",
+  "version": 1.0
+}
diff --git a/launchpad/static/Style.css b/launchpad/static/Style.css
@@ -0,0 +1,9 @@
+.container{
+    margin-left: 8%;
+}
+
+.card:hover{
+    -webkit-box-shadow: -1px 9px 40px -12px rgba(0,0,0,0.75);
+    -moz-box-shadow: -1px 9px 40px -12px rgba(0,0,0,0.75);
+    box-shadow: -1px 9px 40px -12px rgba(0, 0, 0, 0.75);
+}
diff --git a/launchpad/static/main.css b/launchpad/static/main.css
@@ -0,0 +1,80 @@
+body {
+  background: #fafafa;
+  color: #333333;
+  margin-top: 5rem;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: #444444;
+}
+
+.bg-steel {
+  background-color: #5f788a;
+}
+
+.site-header .navbar-nav .nav-link {
+  color: #cbd5db;
+}
+
+.site-header .navbar-nav .nav-link:hover {
+  color: #ffffff;
+}
+
+.site-header .navbar-nav .nav-link.active {
+  font-weight: 500;
+}
+
+.content-section {
+  background: #ffffff;
+  padding: 10px 20px;
+  border: 1px solid #dddddd;
+  border-radius: 3px;
+  margin-bottom: 20px;
+}
+
+.article-title {
+  color: #444444;
+}
+
+a.article-title:hover {
+  color: #428bca;
+  text-decoration: none;
+}
+
+.article-content {
+  white-space: pre-line;
+}
+
+.article-img {
+  height: 65px;
+  width: 65px;
+  margin-right: 16px;
+}
+
+.article-metadata {
+  padding-bottom: 1px;
+  margin-bottom: 4px;
+  border-bottom: 1px solid #e3e3e3
+}
+
+.article-metadata a:hover {
+  color: #333;
+  text-decoration: none;
+}
+
+.article-svg {
+  width: 25px;
+  height: 25px;
+  vertical-align: middle;
+}
+
+.account-img {
+  height: 125px;
+  width: 125px;
+  margin-right: 20px;
+  margin-bottom: 16px;
+}
+
+.account-heading {
+  font-size: 2.5rem;
+}
diff --git a/launchpad/templates/about.html b/launchpad/templates/about.html
@@ -0,0 +1,4 @@
+{% extends "layout.html" %}
+{% block content %}
+	<h1>About Page</h1>
+{% endblock content%}
diff --git a/launchpad/templates/home.html b/launchpad/templates/home.html
@@ -0,0 +1,15 @@
+{% extends "layout.html" %}
+{% block content %}
+	{% for post in posts %}
+		<article class="media content-section">
+		  <div class="media-body">
+			<div class="article-metadata">
+			  <a class="mr-2" href="#">{{ post.author }}</a>
+			  <small class="text-muted">{{ post.date_posted }}</small>
+			</div>
+			<h2><a class="article-title" href="#">{{ post.title }}</a></h2>
+			<p class="article-content">{{ post.content }}</p>
+		  </div>
+		</article>
+	{% endfor %}
+{% endblock content%}
diff --git a/launchpad/templates/layout.html b/launchpad/templates/layout.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+
+    <link rel="stylesheet" href="../static/Style.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename ='main.css')}}">
+
+	{% if title %}
+		<title>coding&&community - {{ title }}</title>
+	{% else %}
+		<title>coding&&community</title>
+	{% endif %}
+</head>
+<body>
+
+	<header class="site-header">
+	  <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
+		<div class="container">
+		  <a class="navbar-brand mr-4" href="/">coding&&community</a>
+		  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
+			<span class="navbar-toggler-icon"></span>
+		  </button>
+		  <div class="collapse navbar-collapse" id="navbarToggle">
+			<div class="navbar-nav mr-auto">
+			  <a class="nav-item nav-link" href="/">Home</a>
+			  <a class="nav-item nav-link" href="/about">About</a>
+        <a class="nav-item nav-link" href="/myprojects">My Projects</a>
+			</div>
+			<!-- Navbar Right Side -->
+
+			<div class="navbar-nav">
+			  <a class="nav-item nav-link" href="/login">Login</a>
+			  <a class="nav-item nav-link" href="/register">Register</a>
+			</div>
+		  </div>
+		</div>
+	  </nav>
+	</header>
+
+	<main role="main" class="container">
+	  <div class="row">
+		<div class="col-md-8">
+		  {%with messages = get_flashed_messages(with_categories=true) %}
+		    {% if messages %}
+			  {% for category, message in messages %}
+			    <div class ="alert alert-{{ category }}">
+				  {{message}}
+			    </div>
+			  {% endfor %}
+		    {% endif%}
+		  {% endwith %}
+    </div>
+  </div>
+		  {% block content %}{% endblock %}
+
+	</main>
+
+
+
+	<!-- Optional JavaScript -->
+    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+    <!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+</body>
+</html>
diff --git a/launchpad/templates/login.html b/launchpad/templates/login.html
diff --git a/launchpad/templates/myprojects.html b/launchpad/templates/myprojects.html
@@ -0,0 +1,50 @@
+{% extends "layout.html" %}
+{% block content %}
+	<h1>My Projects</h1>
+	<br />
+	<div class="container">
+        <div id="cardspot" class="row">
+
+        </div>
+    </div>
+
+<script>
+    $(document).ready(function(){
+
+				$.getJSON("static/Projects.json",function(result){
+						$.each(result.projects, function(key,value){
+							$("#cardspot").append("<div class='col-4-lg'> \
+	                <!-- Bootstrap Card --> \
+									<div class='col-md-4'> \
+	                <div class='card' style='width:18rem;'> \
+	                    <div class='card-body'> \
+	                        <h5 class='card-title'>" + value.lang.toUpperCase() + " - Level " + value.level + "</h5> \
+	                        <p class='card-text'> \
+	                           " + value.description +" \
+	                        </p>\
+	                        <a href='#' class='btn btn-primary'>Read...</a>\
+	                    </div>\
+	                </div>\
+	            </div>\
+							</div>");
+					})
+				});
+
+        $('.col-4-lg').hover(
+            // trigger when mouse hover
+            function(){
+                $(this).animate({
+                    marginTop: "-=1%",
+                },50);
+            },
+
+            // trigger when mouse out
+            function(){
+                $(this).animate({
+                    marginTop: "0%"
+                },50);
+            }
+        );
+    });
+</script>
+{% endblock content%}
diff --git a/launchpad/templates/project_layout.html b/launchpad/templates/project_layout.html
@@ -0,0 +1,5 @@
+{% extends "layout.html" %}
+{% block content %}
+
+
+{% endblock content%}
diff --git a/launchpad/templates/register.html b/launchpad/templates/register.html
@@ -0,0 +1,34 @@
+{% extends "layout.html" %}
+{% block content %}
+	<div class="content-section">
+		<form method="POST" action = "">
+			{{ form.hidden_tag() }}
+			<fieldset class="form-group>
+				<legend class="border-bottom mb-4"Join Today</legend>
+				<div class="form-group">
+					{{ form.username.label(class="form-control-label") }}
+					{{ form.username(class="form-control form-control-lg") }}
+				</div>
+				<div class="form-group">
+					{{ form.email.label(class="form-control-label") }}
+					{{ form.email(class="form-control form-control-lg") }}
+				</div>
+				<div class="form-group">
+					{{ form.password.label(class="form-control-label") }}
+					{{ form.password(class="form-control form-control-lg") }}
+				</div>
+				<div class="form-group">
+					{{ form.confirm_password.label(class="form-control-label") }}
+					{{ form.confirm_password(class="form-control form-control-lg") }}
+				</div>
+			</fieldset>
+			<div class="form-group">
+				{{ form.submit(class="btn btn-outline-info") }}
+			</div>
+		</form>
+	</div>
+	<div class="border-top pt-3">
+		<small class="text-muted">
+			Already Have An Account? <a class="ml-2" href="{{ url_for('login') }}">Sign In</a>
+		</small>
+{% endblock content%}