init

2019-06-30 21:51:41 +08:00
commit eab01e3674
14 changed files with 11314 additions and 0 deletions
--- a/src/App.css
+++ b/src/App.css
@ -0,0 +1,181 @@
+.App {
+  height: 100%;
+  width: 100%;
+}
+
+/* apply a natural box layout model to all elements */
+*,
+*:before,
+*:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+html {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  font-family: 'Anaheim', sans-serif;
+}
+
+#output,
+#preview,
+#input {
+  width: 100%;
+  display: block;
+  height: 40%;
+  border: none;
+  font-family: 'Anaheim', sans-serif;
+}
+
+#input {
+  height: 10%;
+  background-color: #7a9a95;
+  -webkit-transition: background-color 250ms;
+  -moz-transition: background-color 250ms;
+  transition: background-color 250ms;
+  text-align: center;
+  font-size: 20px;
+  color: #fff;
+}
+
+#output {
+  background-color: #e5e5e5;
+}
+
+#input:focus {
+  background-color: #90c5a9;
+}
+
+#preview {
+  text-align: center;
+}
+
+.Power {
+  text-align: center;
+  width: 100%;
+  padding: 16px 10px 10px 10px;
+  background-color: aliceblue;
+}
+
+.PowerType {
+  max-width: 320px;
+  width: 100%;
+  margin: auto;
+  text-align: left;
+}
+
+#loading {
+  background-color: #45b29d;
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  z-index: 99999999999;
+  margin-top: 0px;
+  top: 0px;
+  display: none;
+}
+
+.loading-title {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+}
+
+#loading-center {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+#loading-center-absolute {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  height: 50px;
+  width: 150px;
+  margin-top: -25px;
+  margin-left: -75px;
+
+}
+
+.object {
+  width: 8px;
+  height: 50px;
+  margin-right: 5px;
+  background-color: #FFF;
+  -webkit-animation: animate 1s infinite;
+  animation: animate 1s infinite;
+  float: left;
+}
+
+.object:last-child {
+  margin-right: 0px;
+}
+
+.object:nth-child(10) {
+  -webkit-animation-delay: 0.9s;
+  animation-delay: 0.9s;
+}
+
+.object:nth-child(9) {
+  -webkit-animation-delay: 0.8s;
+  animation-delay: 0.8s;
+}
+
+.object:nth-child(8) {
+  -webkit-animation-delay: 0.7s;
+  animation-delay: 0.7s;
+}
+
+.object:nth-child(7) {
+  -webkit-animation-delay: 0.6s;
+  animation-delay: 0.6s;
+}
+
+.object:nth-child(6) {
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+.object:nth-child(5) {
+  -webkit-animation-delay: 0.4s;
+  animation-delay: 0.4s;
+}
+
+.object:nth-child(4) {
+  -webkit-animation-delay: 0.3s;
+  animation-delay: 0.3s;
+}
+
+.object:nth-child(3) {
+  -webkit-animation-delay: 0.2s;
+  animation-delay: 0.2s;
+}
+
+.object:nth-child(2) {
+  -webkit-animation-delay: 0.1s;
+  animation-delay: 0.1s;
+}
+
+@-webkit-keyframes animate {
+  50% {
+    -ms-transform: scaleY(0);
+    -webkit-transform: scaleY(0);
+    transform: scaleY(0);
+
+  }
+}
+
+@keyframes animate {
+  50% {
+    -ms-transform: scaleY(0);
+    -webkit-transform: scaleY(0);
+    transform: scaleY(0);
+  }
+}