Skip to content

Commit

Permalink
enhanced UI for dashboard,blog,compose,achievements
Browse files Browse the repository at this point in the history
  • Loading branch information
@9I0xDeepankar
9I0xDeepankar committed Oct 31, 2021
1 parent fe435cd commit dee00b3
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 109 deletions.
133 changes: 74 additions & 59 deletions views/achievements.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,77 @@
<%- include("partials/header")-%>

<main role="main">

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

</div>
<script>
jQuery(function () {
jQuery(".jtable-command-button.jtable-edit-command-button").click(function () {
alert("Points collected!");
});
});
</script>

<!-- Marketing messaging and featurettes
<main role="main">

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

</div>
<style type="text/css">
body {
background-color: rgba(233, 215, 112, 0.219);
margin-top: 100px;
}
</style>
<script>
jQuery(function() {
jQuery(".jtable-command-button.jtable-edit-command-button").click(function() {
alert("Points collected!");
});
});
</script>

<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->

<div class="container marketing">

<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-lg-4">
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
<h2>Achivement[1]</h2>
<p>Congratulation! your current month electricity consumption is less than the previous month's electricity consumption. </p>
<p> Points:50</p>
<p><a class="btn btn-secondary" href="#" role="button" class=".jtable-command-button.jtable-edit-command-button">Collect Points &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
<h2>Achivement[2]</h2>
<p>Congratulation! your current month electricity consumption is less than the average of all previous month's electricity consumption.</p>
<p> Points:50</p>
<p class=".jtable-command-button.jtable-edit-command-button"><a class="btn btn-secondary" href="#" role="button" >Collect Points &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
<h2>Achivement[3]</h2>
<p>Congratulation! you have been placed under top 20 rank in electricity consumption.</p>
<p> Points:50</p>
<p><a class="btn btn-secondary" class=".jtable-command-button.jtable-edit-command-button" href="#" role="button">Collect Points &raquo;</a></p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->



<footer class="container">
<p class="float-right"><a href="#">Back to top</a></p>
<p>&copy; 2017-2019 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
</footer>
</main>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.4/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.4/dist/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script></body>
</html>
<!-- Wrap the rest of the page in another container to center all the content. -->

<body>
<div class="container marketing">

<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-lg-4">
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
<h2>Achivement[1]</h2>
<p>Congratulation! your current month electricity consumption is less than the previous month's electricity consumption. </p>
<p> Points:50</p>
<p><a class="btn btn-secondary" href="#" role="button" class=".jtable-command-button.jtable-edit-command-button">Collect Points &raquo;</a></p>
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
<h2>Achivement[2]</h2>
<p>Congratulation! your current month electricity consumption is less than the average of all previous month's electricity consumption.</p>
<p> Points:50</p>
<p class=".jtable-command-button.jtable-edit-command-button"><a class="btn btn-secondary" href="#" role="button">Collect Points &raquo;</a></p>
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
<h2>Achivement[3]</h2>
<p>Congratulation! you have been placed under top 20 rank in electricity consumption.</p>
<p> Points:50</p>
<p><a class="btn btn-secondary" class=".jtable-command-button.jtable-edit-command-button" href="#" role="button">Collect Points &raquo;</a></p>
</div>
<!-- /.col-lg-4 -->
</div>
<!-- /.row -->



<footer class="container">
<p class="float-right"><a href="#">Back to top</a></p>
<p>&copy; 2017-2019 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
</footer>
</main>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script>
window.jQuery || document.write('<script src="/docs/4.4/assets/js/vendor/jquery.slim.min.js"><\/script>')
</script>
<script src="/docs/4.4/dist/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
</body>

</html>
49 changes: 29 additions & 20 deletions views/blog.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,36 @@

<%- include("partials/header"); -%>
<style type="text/css">
#ghj{
padding-top: 100px;
}
</style>
<script>
</script>
<div class="container" id="ghj">
<h1>About</h1>
<p> <%= startingContent %> </p>
<style type="text/css">
#ghj {
padding-top: 100px;
}
body {
background-color: rgba(233, 215, 112, 0.219);
}
</style>
<script>
</script>

<body>
<div class="container" id="ghj">
<h1>About</h1>
<p>
<%= startingContent %>
</p>

<% posts.forEach(function(post){ %>

<h1><%=post.title%></h1>
<p>
<%=post.content.substring(0, 100) + " ..."%>
<a href="/posts/<%=post.title%>">Read More</a>
</p>
<% posts.forEach(function(post){ %>
<h1>
<%=post.title%>
</h1>
<p>
<%=post.content.substring(0, 100) + " ..."%>
<a href="/posts/<%=post.title%>">Read More</a>
</p>
<% }) %>
</div>
<%- include("partials/footer"); -%>
<% }) %>
</div>
</body>
<%- include("partials/footer"); -%>
49 changes: 27 additions & 22 deletions views/compose.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,29 @@

<%- include("partials/header"); -%>
<style type="text/css">
#ghj{
padding-top: 100px;
}
</style>
<script>
<style type="text/css">
#ghj {
padding-top: 100px;
}
body {
background-color: rgba(233, 215, 112, 0.219);
}
</style>
<script>
</script>

<body>
<div class="container" id="ghj">
<h1>Compose</h1>
<form class="" action="/compose" method="post" id='compose'>
<div class="form-group">
<label>Title</label>
<input class="form-control" type="text" name="postTitle">
<label>Post</label>
<textarea class="form-control" name="postBody" rows="5" cols="30"></textarea>
</div>
<button class="btn btn-primary" id="sub" type="submit" name="button">Publish</button>

</script>
<div class="container" id="ghj">
<h1>Compose</h1>
<form class="" action="/compose" method="post" id='compose'>
<div class="form-group">
<label>Title</label>
<input class="form-control" type="text" name="postTitle">
<label>Post</label>
<textarea class="form-control" name="postBody" rows="5" cols="30"></textarea>
</div>
<button class="btn btn-primary" id="sub" type="submit" name="button">Publish</button>

</form>
</div>
<%- include("partials/footer"); -%>
</form>
</div>
</body>>
<%- include("partials/footer"); -%>
14 changes: 7 additions & 7 deletions views/dash.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<h2>Leaderboard</h2>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<thead class="thead-dark">
<tr>
<th>Rank</th>
<th>Name</th>
Expand All @@ -29,37 +29,37 @@
</tr>
</thead>
<tbody>
<tr>
<tr class="table-primary">
<td>1</td>
<td>Lorem</td>
<td>1000</td>

</tr>
<tr>
<tr class="table-success">
<td>2</td>
<td>amet</td>
<td>1100</td>

</tr>
<tr>
<tr class="table-primary">
<td>3</td>
<td>Integer</td>
<td>1200</td>

</tr>
<tr>
<tr class="table-success">
<td>4</td>
<td>libero</td>
<td>1300</td>

</tr>
<tr>
<tr class="table-primary">
<td>5</td>
<td>dapibus</td>
<td>1400</td>
</tr>

<tr>
<tr class="table-success">
<td>1000</td>
<td>ligula</td>
<td>5690</td>
Expand Down
2 changes: 1 addition & 1 deletion views/partials/header.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@
<a class="nav-link" href="compose">compose</a>
</li>
<li class="nav-item">
<a class="nav-link" href="achievements">Accomplishments</a>
<a class="nav-link" href="achievements">Achievements</a>
</li>

<!-- <li class="nav-item">
Expand Down

0 comments on commit dee00b3

Please sign in to comment.