Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fixed warning, statistic, history and generator pages
  • Loading branch information
rrc12004 committed Feb 8, 2019
1 parent 40cba17 commit 023bcec
Show file tree
Hide file tree
Showing 6 changed files with 229 additions and 8 deletions.
6 changes: 6 additions & 0 deletions src/app/generator-search/generator-search.component.css
@@ -0,0 +1,6 @@
div {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%,-50%);
}
9 changes: 8 additions & 1 deletion src/app/generator-search/generator-search.component.html
@@ -1 +1,8 @@
<button type="button" class="btn btn-dark m-4"><a routerLink = "/statistics">Statistics</a></button>
<div class="generator-main" id="findGenerator">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search for Generator" aria-label="Search">
<button class="btn btn-light my-2 my-sm-0" type="submit">Search</button>
</form>
<br>
<button type="button" class="btn btn-light my-2 my-sm-0"><a routerLink="/statistics">Generator 1</a></button>
</div>
2 changes: 1 addition & 1 deletion src/app/history/history.component.html
@@ -1,3 +1,3 @@
<p>
history works!
(There will be graphs in this area and other visualizations)
</p>
120 changes: 120 additions & 0 deletions src/app/statistics/statistics.component.css
@@ -0,0 +1,120 @@
.bubble {
width: 75px;
height: 75px;
border-radius: 50%;
font-size: 25px;
color: #fff;
line-height: 0px;
background:#00cc66;
}
input
{
background: transparent;
border: none;
margin-left: 20px;
margin-top: 20px
}
div {
margin: 20px;
display: inline-block;
}

.tg-list {
text-align: center;
display: flex;
align-items: center;
}
.tg-list-item {
margin: 0 2em;
}
.tgl {
display: none;
}
.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {
box-sizing: border-box;
}
.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {
background: none;
}
.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {
background: none;
}
.tgl + .tgl-btn {
outline: 0;
display: block;
width: 4em;
height: 2em;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
position: relative;
display: block;
content: "";
width: 50%;
height: 100%;
}
.tgl + .tgl-btn:after {
left: 0;
}
.tgl + .tgl-btn:before {
display: none;
}
.tgl:checked + .tgl-btn:after {
left: 50%;
}
.tgl-flip + .tgl-btn {
padding: 2px;
transition: all .2s ease;
font-family: sans-serif;
-webkit-perspective: 100px;
perspective: 100px;
}
.tgl-flip + .tgl-btn:after, .tgl-flip + .tgl-btn:before {
display: inline-block;
transition: all .4s ease;
width: 100%;
text-align: center;
position: absolute;
line-height: 2em;
font-weight: bold;
color: #fff;
position: absolute;
top: 0;
left: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 4px;
}
.tgl-flip + .tgl-btn:after {
content: attr(data-tg-on);
background: #02C66F;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.tgl-flip + .tgl-btn:before {
background: #FF3A19;
content: attr(data-tg-off);
}
.tgl-flip + .tgl-btn:active:before {
-webkit-transform: rotateY(-20deg);
transform: rotateY(-20deg);
}
.tgl-flip:checked + .tgl-btn:before {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.tgl-flip:checked + .tgl-btn:after {
-webkit-transform: rotateY(0);
transform: rotateY(0);
left: 0;
background: #7FC6A6;
}
.tgl-flip:checked + .tgl-btn:active:after {
-webkit-transform: rotateY(20deg);
transform: rotateY(20deg);
}
72 changes: 69 additions & 3 deletions src/app/statistics/statistics.component.html
@@ -1,3 +1,69 @@
<p>
statistics works!
</p>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="1" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-stat" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="2" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="3" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="4" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="5" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="6" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="7" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="8" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="9" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="10" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="11" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="12" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="13" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="14" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="15" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="16" data-tg-on="On" for="cb5"></label>
</div>
<!-- <div class="stat-temp" id="temp">
<form class="bubble">
<input type="number" name="quantity" min="30" max="100" placeholder="65">
</form>
</div> -->
28 changes: 25 additions & 3 deletions src/app/warnings/warnings.component.html
@@ -1,3 +1,25 @@
<p>
warnings works!
</p>
<div class = "container">
<div class = "row" >
<div class = "col-md mt-5">
<h1> Warning History</h1> <br>
<ul>
<li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
<li> Nullam egestas, lorem ut blandit elementum, sem leo viverra ipsum, bibendum interdum dui ex a quam. </li>
<li> Curabitur scelerisque non ante nec elementum. </li>
<li> Nunc vestibulum neque eu lacus ullamcorper vehicula. Nunc velit dolor, sodales at dolor vel, imperdiet tempus lacus. </li>
<li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
<li> Nullam egestas, lorem ut blandit elementum, sem leo viverra ipsum, bibendum interdum dui ex a quam. </li>
<li> Curabitur scelerisque non ante nec elementum. </li>
<li> Nunc vestibulum neque eu lacus ullamcorper vehicula. Nunc velit dolor, sodales at dolor vel, imperdiet tempus lacus. </li>
<li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
<li> Nullam egestas, lorem ut blandit elementum, sem leo viverra ipsum, bibendum interdum dui ex a quam. </li>
<li> Curabitur scelerisque non ante nec elementum. </li>
<li> Nunc vestibulum neque eu lacus ullamcorper vehicula. Nunc velit dolor, sodales at dolor vel, imperdiet tempus lacus. </li>
<li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
<li> Nullam egestas, lorem ut blandit elementum, sem leo viverra ipsum, bibendum interdum dui ex a quam. </li>
<li> Curabitur scelerisque non ante nec elementum. </li>
<li> Nunc vestibulum neque eu lacus ullamcorper vehicula. Nunc velit dolor, sodales at dolor vel, imperdiet tempus lacus. </li>
</ul>
</div>
</div>
</div>

0 comments on commit 023bcec

Please sign in to comment.