From 5a929f8edb040366484bd1eaba9b43025a434866 Mon Sep 17 00:00:00 2001 From: Sanchit Date: Tue, 18 Aug 2020 20:57:42 +0530 Subject: [PATCH] update ui --- README.md | 7 +++++++ index.html | 15 +++++++++----- scss/style.css | 50 +++++++++++++++++++++++++--------------------- scss/style.css.map | 2 +- scss/style.scss | 48 +++++++++++++++++++++++--------------------- 5 files changed, 70 insertions(+), 52 deletions(-) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..e3354c5 --- /dev/null +++ b/README.md @@ -0,0 +1,7 @@ +![GitHub release (latest by date)](https://img.shields.io/github/v/release/Sanchitbajaj02/Calculator?style=flat-square) +![GitHub issues](https://img.shields.io/github/issues/Sanchitbajaj02/Calculator?style=flat-square) +# Calculator + +### Basic calculator using CSS and JavaScript +The theme of the calculator is inspired by Xiaomi's Default Calculator + diff --git a/index.html b/index.html index beab07c..f3f105f 100644 --- a/index.html +++ b/index.html @@ -3,19 +3,24 @@ + cal
- +
- + + + + +
@@ -36,10 +41,10 @@
- + - - + +
diff --git a/scss/style.css b/scss/style.css index 3a8a890..8644565 100644 --- a/scss/style.css +++ b/scss/style.css @@ -6,8 +6,7 @@ } body { - background: url("../img/img14.jpg"); - background-size: 100% 100%; + background: #000; } .centercal { @@ -23,30 +22,27 @@ body { } form { - width: 400px; - height: 520px; - -webkit-box-shadow: 0 0 20px 5px grey; - box-shadow: 0 0 20px 5px grey; - z-index: 10; - opacity: 0.9; + width: 360px; + height: 573px; + -webkit-box-shadow: 0 0 10px 5px rgba(245, 122, 51, 0.76); + box-shadow: 0 0 10px 5px rgba(245, 122, 51, 0.76); + -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #00000057); } #app_name { width: inherit; - padding: 2px 0px 2px 10px; + padding: 4px 0px 4px 10px; font-size: 0.8rem; - background-color: #303030; + background-color: #121212; color: #fff; border: none; outline: none; - font-family: sans-serif; - opacity: 1; } #display_ans { width: inherit; height: 100px; - background-color: #303030; + background-color: #121212; font-size: 2rem; color: #fff; border: none; @@ -68,7 +64,7 @@ form { .layer2 { width: inherit; - height: 40px; + height: 90px; display: -webkit-box; display: -ms-flexbox; display: flex; @@ -77,26 +73,34 @@ form { justify-content: center; } -input { +input, button { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; - font-size: 1.4rem; + font-size: 1.5rem; + background-color: #121212; color: #fff; border: none; outline: none; - border: 1px solid #504F4F; + border: 1px solid #504f4f1a; } -input:hover { - background-color: #474747; +input:active, button:active { + background-color: #ff651dda; } -.main_num { - background-color: #101010; +.operator { + background-color: #121212; + color: #FE7436; } -.operator { - background-color: #303030; +.operator:active { + color: #000; +} + +.circle { + border-radius: 50%; + background-color: #FE7436; + color: #fff; } /*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/scss/style.css.map b/scss/style.css.map index e266a5d..f61c223 100644 --- a/scss/style.css.map +++ b/scss/style.css.map @@ -1,6 +1,6 @@ { "version": 3, - "mappings": "AAcA,AAAA,CAAC,CAAC;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,UAAU;CACzB;;AAED,AAAA,IAAI,CAAC;EACD,UAAU,EAAE,uBAAuB;EACnC,eAAe,EAAE,SAAS;CAE7B;;AAED,AAAA,UAAU,CAAC;EACP,MAAM,EAAE,KAAK;EA1Bb,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;CA0B1B;;AAED,AAAA,IAAI,CAAC;EACD,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,UAAU,EAAE,iBAAiB;EAC7B,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,GAAG;CACf;;AAED,AAAA,SAAS,CAAC;EACN,KAAK,EAAE,OAAO;EACd,OAAO,EAAE,gBAAgB;EACzB,SAAS,EAAE,MAAM;EACjB,gBAAgB,EAhCT,OAAO;EAiCd,KAAK,EAhCC,IAAI;EALV,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EAsCb,WAAW,EAAE,UAAU;EACvB,OAAO,EAAE,CAAC;CACb;;AAED,AAAA,YAAY,CAAA;EACR,KAAK,EAAE,OAAO;EACd,MAAM,EAAE,KAAK;EACb,gBAAgB,EA1CT,OAAO;EA2Cd,SAAS,EAAE,IAAI;EACf,KAAK,EA3CC,IAAI;EALV,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EAiDb,UAAU,EAAE,KAAK;EACjB,OAAO,EAAE,QAAQ;CACpB;;AAED,AAAA,OAAO,CAAC;EACJ,KAAK,EAAE,OAAO;EACd,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;CAC1B;;AAED,AAAA,OAAO,CAAC;EACJ,KAAK,EAAE,OAAO;EACd,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;CAC1B;;AAED,AAAA,KAAK,CAAA;EACD,IAAI,EAAE,CAAC;EACP,SAAS,EAAE,MAAM;EACjB,KAAK,EAlEC,IAAI;EALV,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EAwEb,MAAM,EAAE,iBAAiB;CAK5B;;AAVD,AAOI,KAPC,AAOA,MAAM,CAAC;EACJ,gBAAgB,EAAE,OAAO;CAC5B;;AAGL,AAAA,SAAS,CAAC;EACN,gBAAgB,EAAE,OAAO;CAC5B;;AAED,AAAA,SAAS,CAAC;EACN,gBAAgB,EAjFT,OAAO;CAmFjB", + "mappings": "AAcA,AAAA,CAAC,CAAC;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,UAAU;CACzB;;AAED,AAAA,IAAI,CAAC;EACD,UAAU,EAAE,IAAI;CACnB;;AAED,AAAA,UAAU,CAAC;EACP,MAAM,EAAE,KAAK;EAxBb,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;CAwB1B;;AAED,AAAA,IAAI,CAAC;EACD,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,wBAAwB;EACjD,mBAAmB,EAAE,KAAK,CAAC,IAAI,CAAC,oDAAoD;CACvF;;AAGD,AAAA,SAAS,CAAC;EACN,KAAK,EAAE,OAAO;EACd,OAAO,EAAE,gBAAgB;EACzB,SAAS,EAAE,MAAM;EACjB,gBAAgB,EA9BT,OAAO;EA+Bd,KAAK,EA9BC,IAAI;EALV,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;CAoChB;;AAED,AAAA,YAAY,CAAA;EACR,KAAK,EAAE,OAAO;EACd,MAAM,EAAE,KAAK;EACb,gBAAgB,EAtCT,OAAO;EAuCd,SAAS,EAAE,IAAI;EACf,KAAK,EAvCC,IAAI;EALV,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EA6Cb,UAAU,EAAE,KAAK;EACjB,OAAO,EAAE,QAAQ;CACpB;;AAED,AAAA,OAAO,CAAC;EACJ,KAAK,EAAE,OAAO;EACd,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;CAC1B;;AAED,AAAA,OAAO,CAAC;EACJ,KAAK,EAAE,OAAO;EACd,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;CAC1B;;AAED,AAAA,KAAK,EAAE,MAAM,CAAA;EACT,IAAI,EAAE,CAAC;EACP,SAAS,EAAE,MAAM;EACjB,gBAAgB,EA/DT,OAAO;EAgEd,KAAK,EA/DC,IAAI;EALV,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EAqEb,MAAM,EAAE,mBAAmB;CAK9B;;AAXD,AAQI,KARC,AAQA,OAAO,EARL,MAAM,AAQR,OAAO,CAAC;EACL,gBAAgB,EAAE,SAAS;CAC9B;;AAGL,AAAA,SAAS,CAAC;EACN,gBAAgB,EA1ET,OAAO;EA2Ed,KAAK,EAAE,OAAO;CAKjB;;AAPD,AAII,SAJK,AAIJ,OAAO,CAAC;EACL,KAAK,EAAE,IAAI;CACd;;AAGL,AAAA,OAAO,CAAC;EACJ,aAAa,EAAE,GAAG;EAClB,gBAAgB,EAAE,OAAO;EACzB,KAAK,EApFC,IAAI;CAqFb", "sources": [ "style.scss" ], diff --git a/scss/style.scss b/scss/style.scss index d1c35d8..f5516d4 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -9,7 +9,7 @@ outline: none; } -$bg-color: #303030; +$bg-color: #121212; $bg-text: #fff; * { @@ -19,9 +19,7 @@ $bg-text: #fff; } body { - background: url('../img/img14.jpg'); - background-size: 100% 100%; - // background: radial-gradient(#00AAFF, #00FF6C); + background: #000; } .centercal { @@ -30,22 +28,20 @@ body { } form { - width: 400px; - height: 520px; - box-shadow: 0 0 20px 5px grey; - z-index: 10; - opacity: 0.9; + width: 360px; + height: 573px; + box-shadow: 0 0 10px 5px rgba(245, 122, 51, 0.76); + -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #00000057); } + #app_name { width: inherit; - padding: 2px 0px 2px 10px; + padding: 4px 0px 4px 10px; font-size: 0.8rem; background-color: $bg-color; color: $bg-text; @include line(); - font-family: sans-serif; - opacity: 1; } #display_ans{ @@ -68,29 +64,35 @@ form { .layer2 { width: inherit; - height: 40px; + height: 90px; display: flex; justify-content: center; } -input{ +input, button{ flex: 1; - font-size: 1.4rem; + font-size: 1.5rem; + background-color: $bg-color; color: $bg-text; @include line(); - border: 1px solid #504F4F; + border: 1px solid #504f4f1a; - &:hover { - background-color: #474747; + &:active { + background-color: #ff651dda; } } -.main_num { - background-color: #101010; -} - .operator { background-color: $bg-color; - + color: #FE7436; + + &:active { + color: #000; + } } +.circle { + border-radius: 50%; + background-color: #FE7436; + color: $bg-text; +} \ No newline at end of file