From 023bcec7dd34c8d19c44a1a6b84d424c88acc8e6 Mon Sep 17 00:00:00 2001 From: Rania Chowdhury Date: Fri, 8 Feb 2019 16:52:21 -0500 Subject: [PATCH] fixed warning, statistic, history and generator pages --- .../generator-search.component.css | 6 + .../generator-search.component.html | 9 +- src/app/history/history.component.html | 2 +- src/app/statistics/statistics.component.css | 120 ++++++++++++++++++ src/app/statistics/statistics.component.html | 72 ++++++++++- src/app/warnings/warnings.component.html | 28 +++- 6 files changed, 229 insertions(+), 8 deletions(-) diff --git a/src/app/generator-search/generator-search.component.css b/src/app/generator-search/generator-search.component.css index e69de29..d6194eb 100644 --- a/src/app/generator-search/generator-search.component.css +++ b/src/app/generator-search/generator-search.component.css @@ -0,0 +1,6 @@ +div { + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%,-50%); +} \ No newline at end of file diff --git a/src/app/generator-search/generator-search.component.html b/src/app/generator-search/generator-search.component.html index 0a61d7c..bc59121 100644 --- a/src/app/generator-search/generator-search.component.html +++ b/src/app/generator-search/generator-search.component.html @@ -1 +1,8 @@ - +
+
+ + +
+
+ +
diff --git a/src/app/history/history.component.html b/src/app/history/history.component.html index c0470d2..af02792 100644 --- a/src/app/history/history.component.html +++ b/src/app/history/history.component.html @@ -1,3 +1,3 @@

- history works! + (There will be graphs in this area and other visualizations)

diff --git a/src/app/statistics/statistics.component.css b/src/app/statistics/statistics.component.css index e69de29..c516a24 100644 --- a/src/app/statistics/statistics.component.css +++ b/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); +} diff --git a/src/app/statistics/statistics.component.html b/src/app/statistics/statistics.component.html index 49a7a1e..e22bc58 100644 --- a/src/app/statistics/statistics.component.html +++ b/src/app/statistics/statistics.component.html @@ -1,3 +1,69 @@ -

- statistics works! -

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ \ No newline at end of file diff --git a/src/app/warnings/warnings.component.html b/src/app/warnings/warnings.component.html index ffec4a0..71a71b4 100644 --- a/src/app/warnings/warnings.component.html +++ b/src/app/warnings/warnings.component.html @@ -1,3 +1,25 @@ -

- warnings works! -

+
+
+
+

Warning History


+
    +
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • +
  • Nullam egestas, lorem ut blandit elementum, sem leo viverra ipsum, bibendum interdum dui ex a quam.
    • +
  • Curabitur scelerisque non ante nec elementum.
    • +
  • Nunc vestibulum neque eu lacus ullamcorper vehicula. Nunc velit dolor, sodales at dolor vel, imperdiet tempus lacus.
    • +
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • +
  • Nullam egestas, lorem ut blandit elementum, sem leo viverra ipsum, bibendum interdum dui ex a quam.
    • +
  • Curabitur scelerisque non ante nec elementum.
    • +
  • Nunc vestibulum neque eu lacus ullamcorper vehicula. Nunc velit dolor, sodales at dolor vel, imperdiet tempus lacus.
    • +
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • +
  • Nullam egestas, lorem ut blandit elementum, sem leo viverra ipsum, bibendum interdum dui ex a quam.
    • +
  • Curabitur scelerisque non ante nec elementum.
    • +
  • Nunc vestibulum neque eu lacus ullamcorper vehicula. Nunc velit dolor, sodales at dolor vel, imperdiet tempus lacus.
    • +
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • +
  • Nullam egestas, lorem ut blandit elementum, sem leo viverra ipsum, bibendum interdum dui ex a quam.
    • +
  • Curabitur scelerisque non ante nec elementum.
    • +
  • Nunc vestibulum neque eu lacus ullamcorper vehicula. Nunc velit dolor, sodales at dolor vel, imperdiet tempus lacus.
    • +
+
+
+
\ No newline at end of file