├── .gitignore ├── README.md ├── css ├── lib │ └── swapper.css └── style.css ├── files └── fonts │ ├── poppins400.woff2 │ ├── poppins500.woff2 │ ├── poppins600.woff2 │ ├── poppins700.woff2 │ └── poppins800.woff2 ├── image ├── icon │ ├── app_icon │ │ ├── icon192.png │ │ ├── icon196.png │ │ ├── icon512.png │ │ ├── logo.jpg │ │ └── logo.png │ ├── clear_black_48dp.svg │ ├── favicon.ico │ ├── favorite_black_48dp.svg │ ├── favorite_border_black_48dp.svg │ ├── favorite_border_color_48dp.svg │ ├── favorite_color_48dp.svg │ ├── home_black_48dp.svg │ ├── search_black_48dp.1.svg │ ├── search_black_48dp.svg │ ├── search_gray_48dp.svg │ ├── volume_up_color_48dp.svg │ └── widgets_black_48dp.svg └── illustrations │ ├── girl-sitting-on-floor-with-laptop-and-studying.png │ └── sad boy.png ├── index.html ├── js ├── animations.js ├── lib │ ├── debounce.js │ ├── fontawesome.js │ ├── scroll.js │ ├── scrollreveal.js │ └── swapper.js ├── main.js ├── s2.js └── script.js ├── manifest.json ├── package.json ├── scss ├── _screen1.scss ├── _screen2.scss ├── _screen3.scss ├── _screen4.scss ├── common │ ├── _animation.scss │ ├── _colors.scss │ ├── _font.scss │ ├── _index.scss │ ├── _layout.scss │ ├── _scrollbar.scss │ ├── _typo.scss │ └── _var.scss ├── lib │ └── swapper.scss └── style.scss └── sw.js /.gitignore: -------------------------------------------------------------------------------- 1 | **/.vscode 2 | **test.** -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [English Dictionary](https://codeabinash.github.io/english-dictionary/) 2 | 3 | ![English Dictionary](https://codeabinash.github.io/english-dictionary/image/icon/app_icon/logo.jpg) 4 | -------------------------------------------------------------------------------- /css/lib/swapper.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:swiper-icons;src:url("data:application/font-woff;charset=utf-8;base64, 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");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px, 0, 0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:"";flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:"";position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/44*27);height:var(--swiper-navigation-size);margin-top:calc(0px - var(--swiper-navigation-size)/2);z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color, var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none !important}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none !important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:"prev"}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:"next"}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0, 0, 0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none !important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(0.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(0.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(0.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(0.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(0.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));height:var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color, #000);opacity:var(--swiper-pagination-bullet-inactive-opacity, 0.2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none !important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color, var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px, -50%, 0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap, 6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap, 4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color, var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none !important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:rgba(0,0,0,0)}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:"";background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden} 2 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(../files/fonts/poppins400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(../files/fonts/poppins500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(../files/fonts/poppins600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(../files/fonts/poppins700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Poppins";font-style:normal;font-weight:800;font-display:swap;src:url(../files/fonts/poppins800.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}.color{color:#f44236 !important}html{scroll-behavior:smooth}*,*::after,*::before{font-family:"Poppins",sans-serif;box-sizing:border-box;margin:0;padding:0}i,i::before,i::after{font-family:"Font Awesome Kit"}body{overscroll-behavior-y:contain;print-color-adjust:exact}a{text-decoration:none}::selection{background:#f44236;color:#f1f1f1}.searchBar{width:100%;font-size:.85rem;padding:1em .5em 1em 3.1em;border-radius:var(--bdrs);border:1.2px solid rgba(0,0,0,0);background-color:#f1f1f1;outline:none;background-image:url("../image/icon/search_gray_48dp.svg");background-repeat:no-repeat;background-position:1.1em center;background-size:1.5em;font-weight:500;caret-color:var(--color)}.searchBar::-webkit-search-cancel-button{-webkit-appearance:none;height:2em;width:2em;background-size:1.6em;opacity:.9;background-image:url("../image/icon/clear_black_48dp.svg");background-repeat:no-repeat;background-position:center}.tap-ripple{position:relative}.tap-ripple::before{content:"";display:block;position:absolute;aspect-ratio:1/1;width:150%;top:var(--y);left:var(--x);background-color:#888;opacity:.4;translate:-50% -50%;scale:0;border-radius:50%}.pulse::before{animation:pulse 500ms}@keyframes pulse{100%{scale:1;opacity:0}}.press{transition:all 200ms}.press:active{scale:.95}:root{--color:#f44236;--text:#333;--bg-blur: #ffffffee;--blur: 10px;--bdrs: 10px;--border-color: #ddd;--gap-color: #f5f5f5;--gray:#666;--gray2:#555;--deep-gray: #444}#screen2 .search{width:100%;padding-inline:20px;padding-top:20px}#screen2 .hidden{display:none}#screen2>#search-results .result .word{width:100%;padding-inline:20px;padding-top:30px;display:flex;justify-content:space-between;gap:1em}#screen2>#search-results .result .word h2{word-break:break-all}#screen2>#search-results .result .word>.actions{display:flex;justify-content:center;align-items:center;user-select:none;gap:3px}#screen2>#search-results .result .word>.actions img{padding:7px;aspect-ratio:1/1;object-fit:contain;transition:all 200ms;width:2.5em;border-radius:50%}#screen2>#search-results .result .word>.actions img:active{scale:.9}#screen2>#search-results .result .word>.actions img:active{background-color:#eee}#screen2>#search-results .result .phonetics{padding-inline:20px;padding-bottom:20px}#screen2>#search-results .result .phonetics>p{font-size:.8em;color:var(--gray);font-weight:500}#screen2>#search-results .result>.meanings>.meaning{width:100%;padding-inline:20px;padding-block:15px}#screen2>#search-results .result>.meanings>.meaning>.type span{font-style:italic;font-weight:500;font-family:"Times New Roman",Times,serif;color:var(--gray)}#screen2>#search-results .result>.meanings>.meaning>.definitionss>.definitions{padding-left:10px;padding-block:.5em}#screen2>#search-results .result>.meanings>.meaning>.definitionss>.definitions .text{display:list-item;margin-left:.5em}#screen2>#search-results .result>.meanings>.meaning>.definitionss>.definitions .text span{font-size:.9em;font-weight:405;color:var(--deep-gray)}#screen2>#search-results .result>.meanings>.meaning>.definitionss>.definitions .synonyms,#screen2>#search-results .result>.meanings>.meaning>.definitionss>.definitions .antonyms,#screen2>#search-results .result>.meanings>.meaning>.definitionss>.definitions .example{padding-block:.2em;font-size:.9em}#screen2>#search-results .result>.meanings>.meaning>.definitionss>.definitions .synonyms>.name>span,#screen2>#search-results .result>.meanings>.meaning>.definitionss>.definitions .antonyms>.name>span,#screen2>#search-results .result>.meanings>.meaning>.definitionss>.definitions .example>.name>span{font-family:"Times New Roman",Times,serif;font-weight:500;color:var(--gray);font-style:italic}#screen2>#search-results .result>.meanings>.meaning>.definitionss>.definitions .synonyms>.words,#screen2>#search-results .result>.meanings>.meaning>.definitionss>.definitions .antonyms>.words,#screen2>#search-results .result>.meanings>.meaning>.definitionss>.definitions .example>.words{margin-top:.4em;font-size:.8em;color:var(--deep-gray);display:flex;flex-wrap:wrap;gap:.5em}#screen2>#search-results .result>.meanings>.meaning>.definitionss>.definitions .synonyms>.words span,#screen2>#search-results .result>.meanings>.meaning>.definitionss>.definitions .antonyms>.words span,#screen2>#search-results .result>.meanings>.meaning>.definitionss>.definitions .example>.words span{padding:.5em 1.1em;background-color:rgba(136,136,136,.1333333333);border-radius:100vmax;color:var(--deep-gray);font-weight:500}#screen2>#search-results .result>.meanings>.meaning>.definitionss>.definitions .example .ex{padding:.3em 0;font-style:italic;color:var(--deep-gray)}#screen2>#search-results .result>.meanings>.meaning>.synonyms,#screen2>#search-results .result>.meanings>.meaning>.antonyms{padding-block:.2em;font-size:.9em}#screen2>#search-results .result>.meanings>.meaning>.synonyms>span.name,#screen2>#search-results .result>.meanings>.meaning>.antonyms>span.name{font-family:"Times New Roman",Times,serif;font-weight:500;color:var(--gray);font-style:italic}#screen2>#search-results .result>.meanings>.meaning>.synonyms>.words,#screen2>#search-results .result>.meanings>.meaning>.antonyms>.words{margin-top:.4em;font-size:.8em;color:var(--deep-gray);display:flex;flex-wrap:wrap;gap:.5em}#screen2>#search-results .result>.meanings>.meaning>.synonyms>.words>span,#screen2>#search-results .result>.meanings>.meaning>.antonyms>.words>span{padding:.5em 1.1em;background-color:rgba(136,136,136,.1333333333);border-radius:100vmax;color:var(--deep-gray);font-weight:500}#screen2>#search-results .gap{height:10px;width:100%;background-color:var(--gap-color)}#screen2 #search-noResult .container{padding:7%;display:flex;min-height:calc(100vh - 200px);justify-content:center;align-items:center;flex-direction:column}#screen2 #search-noResult .container>img.illustration{width:65%}#screen2 #search-noResult .container>h1{color:var(--color);text-align:center}#screen2 #search-noResult .container>p{text-align:center;font-weight:500;font-size:.8em;color:var(--text)}#screen2 #search-loadingScreen{padding:20px}#screen2 #search-loadingScreen .bg{background-image:linear-gradient(100deg, rgba(119, 119, 119, 0.0823529412) 0%, rgba(119, 119, 119, 0.0823529412) 40%, rgba(119, 119, 119, 0.1450980392) 50%, rgba(119, 119, 119, 0.1450980392) 55%, rgba(119, 119, 119, 0.0823529412) 65%, rgba(119, 119, 119, 0.0823529412) 100%);background-size:200% 100%;background-position-x:180%;animation:loadSkeleton 1.3s infinite}@keyframes loadSkeleton{to{background-position-x:-20%}}#screen2 #search-loadingScreen .h1{height:4rem;border-radius:10px}#screen2 #search-loadingScreen .h2{height:2.5rem;border-radius:10px}#screen2 #search-loadingScreen .p{height:1rem;border-radius:100vmax;margin-block:.6rem}#screen2 #search-loadingScreen .code{width:100%;height:11rem;border-radius:10px;margin-block:1rem}#screen2 #search-loadingScreen .note{width:100%;height:7rem;border-radius:10px;margin-block:1rem}#screen2 #search-loadingScreen .w100{width:100%}#screen2 #search-loadingScreen .w70{width:80%}#screen2 #search-loadingScreen .blank{width:100%;height:1rem}#screen2 #search-loadingScreen .blanks{width:100%;height:.65rem}#screen2 #search-startScreen{padding:20px}#screen1{padding:20px}.screen3{padding:20px}#main{width:100%}#main .screen-container{height:calc(100vh - 65px + 2px);overflow-x:hidden}#main .screen-container .screen{width:100%;display:none}#main .screen-container .screen.active{display:block}#main>nav.bottom{width:100%;position:fixed;bottom:0;height:65px;display:flex;z-index:100;justify-content:space-around;align-items:center;border-top:1px solid rgba(136,136,136,.1254901961);background-color:var(--bg-blur);backdrop-filter:blur(var(--blur));--webkit-backdrop-filter: blur(var(--blur));user-select:none}#main>nav.bottom>.option{width:25%;height:100%;overflow:hidden;padding-inline:5%;display:flex;justify-content:center;align-items:center;flex-direction:column;opacity:.35;transition:all 150ms}#main>nav.bottom>.option:active{scale:.95}#main>nav.bottom>.option>img{width:25px}#main>nav.bottom>.option>span{font-size:.7rem}#main>nav.bottom>.option.active{opacity:.8} 2 | -------------------------------------------------------------------------------- /files/fonts/poppins400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/english-dictionary/63923ec1f2de60c410030160cdeb0a673212125a/files/fonts/poppins400.woff2 -------------------------------------------------------------------------------- /files/fonts/poppins500.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/english-dictionary/63923ec1f2de60c410030160cdeb0a673212125a/files/fonts/poppins500.woff2 -------------------------------------------------------------------------------- /files/fonts/poppins600.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/english-dictionary/63923ec1f2de60c410030160cdeb0a673212125a/files/fonts/poppins600.woff2 -------------------------------------------------------------------------------- /files/fonts/poppins700.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/english-dictionary/63923ec1f2de60c410030160cdeb0a673212125a/files/fonts/poppins700.woff2 -------------------------------------------------------------------------------- /files/fonts/poppins800.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/english-dictionary/63923ec1f2de60c410030160cdeb0a673212125a/files/fonts/poppins800.woff2 -------------------------------------------------------------------------------- /image/icon/app_icon/icon192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/english-dictionary/63923ec1f2de60c410030160cdeb0a673212125a/image/icon/app_icon/icon192.png -------------------------------------------------------------------------------- /image/icon/app_icon/icon196.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/english-dictionary/63923ec1f2de60c410030160cdeb0a673212125a/image/icon/app_icon/icon196.png -------------------------------------------------------------------------------- /image/icon/app_icon/icon512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/english-dictionary/63923ec1f2de60c410030160cdeb0a673212125a/image/icon/app_icon/icon512.png -------------------------------------------------------------------------------- /image/icon/app_icon/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/english-dictionary/63923ec1f2de60c410030160cdeb0a673212125a/image/icon/app_icon/logo.jpg -------------------------------------------------------------------------------- /image/icon/app_icon/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/english-dictionary/63923ec1f2de60c410030160cdeb0a673212125a/image/icon/app_icon/logo.png -------------------------------------------------------------------------------- /image/icon/clear_black_48dp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /image/icon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/english-dictionary/63923ec1f2de60c410030160cdeb0a673212125a/image/icon/favicon.ico -------------------------------------------------------------------------------- /image/icon/favorite_black_48dp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /image/icon/favorite_border_black_48dp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /image/icon/favorite_border_color_48dp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /image/icon/favorite_color_48dp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /image/icon/home_black_48dp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /image/icon/search_black_48dp.1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /image/icon/search_black_48dp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /image/icon/search_gray_48dp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /image/icon/volume_up_color_48dp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /image/icon/widgets_black_48dp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /image/illustrations/girl-sitting-on-floor-with-laptop-and-studying.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/english-dictionary/63923ec1f2de60c410030160cdeb0a673212125a/image/illustrations/girl-sitting-on-floor-with-laptop-and-studying.png -------------------------------------------------------------------------------- /image/illustrations/sad boy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/english-dictionary/63923ec1f2de60c410030160cdeb0a673212125a/image/illustrations/sad boy.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | English Dictionary 15 | 16 | 17 | 18 |
19 | 20 | 21 |
22 |
23 |

Welcome to Dictionary

24 | 26 |
27 |
28 |
29 | 31 |
32 | 160 | 161 | 168 | 169 | 210 | 211 |
212 |

Write any word

213 |
214 |
215 |
216 |

Favorite Words

217 |

Coming Soon

218 |
219 |
220 |

More Options

221 |

Coming Soon

222 |
223 |
224 | 225 | 226 | 244 |
245 | 246 | 247 | -------------------------------------------------------------------------------- /js/animations.js: -------------------------------------------------------------------------------- 1 | export default function animations() { 2 | const tap_ripple = document.querySelectorAll('.tap-ripple') 3 | 4 | tap_ripple.forEach(elem => { 5 | elem.addEventListener('mousedown', (e) => { 6 | addAnimation(e, elem) 7 | elem.classList.add('pulse') 8 | elem.addEventListener('animationend', ()=>{ 9 | elem.classList.remove('pulse') 10 | }) 11 | }) 12 | }) 13 | 14 | function addAnimation(event, element) { 15 | let posX = event.offsetX 16 | let posY = event.offsetY 17 | element.style.setProperty('--x', posX + 'px') 18 | element.style.setProperty('--y', posY + 'px') 19 | } 20 | 21 | } -------------------------------------------------------------------------------- /js/lib/debounce.js: -------------------------------------------------------------------------------- 1 | export default function debounce(func, wait, immediate) { 2 | var timeout 3 | return function executedFunction() { 4 | var context = this 5 | var args = arguments 6 | 7 | var later = function () { 8 | timeout = null 9 | if (!immediate) func.apply(context, args) 10 | clearTimeout(timeout) 11 | } 12 | 13 | var callNow = immediate && !timeout 14 | 15 | clearTimeout(timeout) 16 | 17 | timeout = setTimeout(later, wait) 18 | 19 | if (callNow) func.apply(context, args) 20 | } 21 | } -------------------------------------------------------------------------------- /js/lib/fontawesome.js: -------------------------------------------------------------------------------- 1 | export function fontawesome(){ 2 | let script = document.createElement('script') 3 | script.src = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/js/all.min.js' 4 | script.crossOrigin = 'anonymous' 5 | if(document.head) 6 | document.head.appendChild(script) 7 | else 8 | console.warn('Fontawsesome Icon is not loaded'); 9 | } 10 | 11 | fontawesome() -------------------------------------------------------------------------------- /js/lib/scroll.js: -------------------------------------------------------------------------------- 1 | export function scrollAnim() { 2 | 3 | var slideUp = { 4 | distance: '50%', 5 | origin: 'bottom', 6 | opacity: 0.3, 7 | delay: 200 8 | }; 9 | var interval = { 10 | interval: 200, 11 | delay: 200 12 | } 13 | var opacity = { 14 | distance: '6%', 15 | delay: 200, 16 | opacity: 0.5 17 | } 18 | 19 | ScrollReveal().reveal('.slide-up', slideUp); 20 | ScrollReveal().reveal('.opacity', opacity); 21 | ScrollReveal().reveal('.seq > *', interval); 22 | ScrollReveal().reveal('.seqitem', interval); 23 | } -------------------------------------------------------------------------------- /js/lib/scrollreveal.js: -------------------------------------------------------------------------------- 1 | /*! @license ScrollReveal v4.0.9 2 | 3 | Copyright 2021 Fisssion LLC. 4 | 5 | Licensed under the GNU General Public License 3.0 for 6 | compatible open source projects and non-commercial use. 7 | 8 | For commercial sites, themes, projects, and applications, 9 | keep your source code private/proprietary by purchasing 10 | a commercial license from https://scrollrevealjs.org/ 11 | */ 12 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).ScrollReveal=t()}(this,(function(){"use strict";var e={delay:0,distance:"0",duration:600,easing:"cubic-bezier(0.5, 0, 0, 1)",interval:0,opacity:0,origin:"bottom",rotate:{x:0,y:0,z:0},scale:1,cleanup:!1,container:document.documentElement,desktop:!0,mobile:!0,reset:!1,useDelay:"always",viewFactor:0,viewOffset:{top:0,right:0,bottom:0,left:0},afterReset:function(){},afterReveal:function(){},beforeReset:function(){},beforeReveal:function(){}};var t={success:function(){document.documentElement.classList.add("sr"),document.body?document.body.style.height="100%":document.addEventListener("DOMContentLoaded",(function(){document.body.style.height="100%"}))},failure:function(){return document.documentElement.classList.remove("sr"),{clean:function(){},destroy:function(){},reveal:function(){},sync:function(){},get noop(){return!0}}}}; 13 | /*! @license is-dom-node v1.0.4 14 | 15 | Copyright 2018 Fisssion LLC. 16 | 17 | Permission is hereby granted, free of charge, to any person obtaining a copy 18 | of this software and associated documentation files (the "Software"), to deal 19 | in the Software without restriction, including without limitation the rights 20 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 21 | copies of the Software, and to permit persons to whom the Software is 22 | furnished to do so, subject to the following conditions: 23 | 24 | The above copyright notice and this permission notice shall be included in all 25 | copies or substantial portions of the Software. 26 | 27 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 28 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 29 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 30 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 31 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 32 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 33 | SOFTWARE. 34 | 35 | */function n(e){return"object"==typeof window.Node?e instanceof window.Node:null!==e&&"object"==typeof e&&"number"==typeof e.nodeType&&"string"==typeof e.nodeName} 36 | /*! @license is-dom-node-list v1.2.1 37 | 38 | Copyright 2018 Fisssion LLC. 39 | 40 | Permission is hereby granted, free of charge, to any person obtaining a copy 41 | of this software and associated documentation files (the "Software"), to deal 42 | in the Software without restriction, including without limitation the rights 43 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 44 | copies of the Software, and to permit persons to whom the Software is 45 | furnished to do so, subject to the following conditions: 46 | 47 | The above copyright notice and this permission notice shall be included in all 48 | copies or substantial portions of the Software. 49 | 50 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 51 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 52 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 53 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 54 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 55 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 56 | SOFTWARE. 57 | 58 | */ 59 | /*! @license Tealight v0.3.6 60 | 61 | Copyright 2018 Fisssion LLC. 62 | 63 | Permission is hereby granted, free of charge, to any person obtaining a copy 64 | of this software and associated documentation files (the "Software"), to deal 65 | in the Software without restriction, including without limitation the rights 66 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 67 | copies of the Software, and to permit persons to whom the Software is 68 | furnished to do so, subject to the following conditions: 69 | 70 | The above copyright notice and this permission notice shall be included in all 71 | copies or substantial portions of the Software. 72 | 73 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 74 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 75 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 76 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 77 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 78 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 79 | SOFTWARE. 80 | 81 | */ 82 | function i(e,t){if(void 0===t&&(t=document),e instanceof Array)return e.filter(n);if(n(e))return[e];if(i=e,r=Object.prototype.toString.call(i),"object"==typeof window.NodeList?i instanceof window.NodeList:null!==i&&"object"==typeof i&&"number"==typeof i.length&&/^\[object (HTMLCollection|NodeList|Object)\]$/.test(r)&&(0===i.length||n(i[0])))return Array.prototype.slice.call(e);var i,r;if("string"==typeof e)try{var o=t.querySelectorAll(e);return Array.prototype.slice.call(o)}catch(e){return[]}return[]}function r(e){return null!==e&&e instanceof Object&&(e.constructor===Object||"[object Object]"===Object.prototype.toString.call(e))}function o(e,t){if(r(e))return Object.keys(e).forEach((function(n){return t(e[n],n,e)}));if(e instanceof Array)return e.forEach((function(n,i){return t(n,i,e)}));throw new TypeError("Expected either an array or object literal.")}function s(e){for(var t=[],n=arguments.length-1;n-- >0;)t[n]=arguments[n+1];if(this.constructor.debug&&console){var i="%cScrollReveal: "+e;t.forEach((function(e){return i+="\n — "+e})),console.log(i,"color: #ea654b;")}}function a(){var e=this,t={active:[],stale:[]},n={active:[],stale:[]},r={active:[],stale:[]};try{o(i("[data-sr-id]"),(function(e){var n=parseInt(e.getAttribute("data-sr-id"));t.active.push(n)}))}catch(e){throw e}o(this.store.elements,(function(e){-1===t.active.indexOf(e.id)&&t.stale.push(e.id)})),o(t.stale,(function(t){return delete e.store.elements[t]})),o(this.store.elements,(function(e){-1===r.active.indexOf(e.containerId)&&r.active.push(e.containerId),e.hasOwnProperty("sequence")&&-1===n.active.indexOf(e.sequence.id)&&n.active.push(e.sequence.id)})),o(this.store.containers,(function(e){-1===r.active.indexOf(e.id)&&r.stale.push(e.id)})),o(r.stale,(function(t){var n=e.store.containers[t].node;n.removeEventListener("scroll",e.delegate),n.removeEventListener("resize",e.delegate),delete e.store.containers[t]})),o(this.store.sequences,(function(e){-1===n.active.indexOf(e.id)&&n.stale.push(e.id)})),o(n.stale,(function(t){return delete e.store.sequences[t]}))} 83 | /*! @license Rematrix v0.3.0 84 | 85 | Copyright 2018 Julian Lloyd. 86 | 87 | Permission is hereby granted, free of charge, to any person obtaining a copy 88 | of this software and associated documentation files (the "Software"), to deal 89 | in the Software without restriction, including without limitation the rights 90 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 91 | copies of the Software, and to permit persons to whom the Software is 92 | furnished to do so, subject to the following conditions: 93 | 94 | The above copyright notice and this permission notice shall be included in 95 | all copies or substantial portions of the Software. 96 | 97 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 98 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 99 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 100 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 101 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 102 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 103 | THE SOFTWARE. 104 | */function c(e){if(e.constructor!==Array)throw new TypeError("Expected array.");if(16===e.length)return e;if(6===e.length){var t=l();return t[0]=e[0],t[1]=e[1],t[4]=e[2],t[5]=e[3],t[12]=e[4],t[13]=e[5],t}throw new RangeError("Expected array with either 6 or 16 values.")}function l(){for(var e=[],t=0;t<16;t++)t%5==0?e.push(1):e.push(0);return e}function d(e,t){for(var n=c(e),i=c(t),r=[],o=0;o<4;o++)for(var s=[n[o],n[o+4],n[o+8],n[o+12]],a=0;a<4;a++){var l=4*a,d=[i[l],i[l+1],i[l+2],i[l+3]],u=s[0]*d[0]+s[1]*d[1]+s[2]*d[2]+s[3]*d[3];r[o+l]=u}return r}function u(e){if("string"==typeof e){var t=e.match(/matrix(3d)?\(([^)]+)\)/);if(t)return c(t[2].split(", ").map(parseFloat))}return l()}function f(e,t){var n=l();return n[0]=e,n[5]="number"==typeof t?t:e,n}var h=function(){var e={},t=document.documentElement.style;function n(n,i){if(void 0===i&&(i=t),n&&"string"==typeof n){if(e[n])return e[n];if("string"==typeof i[n])return e[n]=n;if("string"==typeof i["-webkit-"+n])return e[n]="-webkit-"+n;throw new RangeError('Unable to find "'+n+'" style property.')}throw new TypeError("Expected a string.")}return n.clearCache=function(){return e={}},n}();function p(e){var t=window.getComputedStyle(e.node),n=t.position,i=e.config,r={},o=(e.node.getAttribute("style")||"").match(/[\w-]+\s*:\s*[^;]+\s*/gi)||[];r.computed=o?o.map((function(e){return e.trim()})).join("; ")+";":"",r.generated=o.some((function(e){return e.match(/visibility\s?:\s?visible/i)}))?r.computed:o.concat(["visibility: visible"]).map((function(e){return e.trim()})).join("; ")+";";var s,a,c,p=parseFloat(t.opacity),m=isNaN(parseFloat(i.opacity))?parseFloat(t.opacity):parseFloat(i.opacity),v={computed:p!==m?"opacity: "+p+";":"",generated:p!==m?"opacity: "+m+";":""},y=[];if(parseFloat(i.distance)){var g="top"===i.origin||"bottom"===i.origin?"Y":"X",b=i.distance;"top"!==i.origin&&"left"!==i.origin||(b=/^-/.test(b)?b.substr(1):"-"+b);var w=b.match(/(^-?\d+\.?\d?)|(em$|px$|%$)/g),E=w[0];switch(w[1]){case"em":b=parseInt(t.fontSize)*E;break;case"px":b=E;break;case"%":b="Y"===g?e.node.getBoundingClientRect().height*E/100:e.node.getBoundingClientRect().width*E/100;break;default:throw new RangeError("Unrecognized or missing distance unit.")}"Y"===g?y.push(function(e){var t=l();return t[13]=e,t}(b)):y.push(function(e){var t=l();return t[12]=e,t}(b))}i.rotate.x&&y.push((s=i.rotate.x,a=Math.PI/180*s,(c=l())[5]=c[10]=Math.cos(a),c[6]=c[9]=Math.sin(a),c[9]*=-1,c)),i.rotate.y&&y.push(function(e){var t=Math.PI/180*e,n=l();return n[0]=n[10]=Math.cos(t),n[2]=n[8]=Math.sin(t),n[2]*=-1,n}(i.rotate.y)),i.rotate.z&&y.push(function(e){var t=Math.PI/180*e,n=l();return n[0]=n[5]=Math.cos(t),n[1]=n[4]=Math.sin(t),n[4]*=-1,n}(i.rotate.z)),1!==i.scale&&(0===i.scale?y.push(f(2e-4)):y.push(f(i.scale)));var j={};if(y.length){j.property=h("transform"),j.computed={raw:t[j.property],matrix:u(t[j.property])},y.unshift(j.computed.matrix);var T=y.reduce(d);j.generated={initial:j.property+": matrix3d("+T.join(", ")+");",final:j.property+": matrix3d("+j.computed.matrix.join(", ")+");"}}else j.generated={initial:"",final:""};var k={};if(v.generated||j.generated.initial){k.property=h("transition"),k.computed=t[k.property],k.fragments=[];var O=i.delay,x=i.duration,R=i.easing;v.generated&&k.fragments.push({delayed:"opacity "+x/1e3+"s "+R+" "+O/1e3+"s",instant:"opacity "+x/1e3+"s "+R+" 0s"}),j.generated.initial&&k.fragments.push({delayed:j.property+" "+x/1e3+"s "+R+" "+O/1e3+"s",instant:j.property+" "+x/1e3+"s "+R+" 0s"}),k.computed&&!k.computed.match(/all 0s|none 0s/)&&k.fragments.unshift({delayed:k.computed,instant:k.computed});var q=k.fragments.reduce((function(e,t,n){return e.delayed+=0===n?t.delayed:", "+t.delayed,e.instant+=0===n?t.instant:", "+t.instant,e}),{delayed:"",instant:""});k.generated={delayed:k.property+": "+q.delayed+";",instant:k.property+": "+q.instant+";"}}else k.generated={delayed:"",instant:""};return{inline:r,opacity:v,position:n,transform:j,transition:k}}function m(e,t){t.split(";").forEach((function(t){var n=t.split(":"),i=n[0],r=n.slice(1);i&&r&&(e.style[i.trim()]=r.join(":"))}))}function v(e){var t,n=this;try{o(i(e),(function(e){var i=e.getAttribute("data-sr-id");if(null!==i){t=!0;var r=n.store.elements[i];r.callbackTimer&&window.clearTimeout(r.callbackTimer.clock),m(r.node,r.styles.inline.generated),e.removeAttribute("data-sr-id"),delete n.store.elements[i]}}))}catch(e){return s.call(this,"Clean failed.",e.message)}if(t)try{a.call(this)}catch(e){return s.call(this,"Clean failed.",e.message)}}function y(){var e=this;o(this.store.elements,(function(e){m(e.node,e.styles.inline.generated),e.node.removeAttribute("data-sr-id")})),o(this.store.containers,(function(t){var n=t.node===document.documentElement?window:t.node;n.removeEventListener("scroll",e.delegate),n.removeEventListener("resize",e.delegate)})),this.store={containers:{},elements:{},history:[],sequences:{}}}function g(e){for(var t=[],n=arguments.length-1;n-- >0;)t[n]=arguments[n+1];if(r(e))return o(t,(function(t){o(t,(function(t,n){r(t)?(e[n]&&r(e[n])||(e[n]={}),g(e[n],t)):e[n]=t}))})),e;throw new TypeError("Target must be an object literal.")}function b(e){return void 0===e&&(e=navigator.userAgent),/Android|iPhone|iPad|iPod/i.test(e)}var w,E=(w=0,function(){return w++});function j(){var e=this;a.call(this),o(this.store.elements,(function(e){var t=[e.styles.inline.generated];e.visible?(t.push(e.styles.opacity.computed),t.push(e.styles.transform.generated.final),e.revealed=!0):(t.push(e.styles.opacity.generated),t.push(e.styles.transform.generated.initial),e.revealed=!1),m(e.node,t.filter((function(e){return""!==e})).join(" "))})),o(this.store.containers,(function(t){var n=t.node===document.documentElement?window:t.node;n.addEventListener("scroll",e.delegate),n.addEventListener("resize",e.delegate)})),this.delegate(),this.initTimeout=null}function T(e,t){void 0===t&&(t={});var n=t.pristine||this.pristine,i="always"===e.config.useDelay||"onload"===e.config.useDelay&&n||"once"===e.config.useDelay&&!e.seen,r=e.visible&&!e.revealed,o=!e.visible&&e.revealed&&e.config.reset;return t.reveal||r?k.call(this,e,i):t.reset||o?O.call(this,e):void 0}function k(e,t){var n=[e.styles.inline.generated,e.styles.opacity.computed,e.styles.transform.generated.final];t?n.push(e.styles.transition.generated.delayed):n.push(e.styles.transition.generated.instant),e.revealed=e.seen=!0,m(e.node,n.filter((function(e){return""!==e})).join(" ")),x.call(this,e,t)}function O(e){var t=[e.styles.inline.generated,e.styles.opacity.generated,e.styles.transform.generated.initial,e.styles.transition.generated.instant];e.revealed=!1,m(e.node,t.filter((function(e){return""!==e})).join(" ")),x.call(this,e)}function x(e,t){var n=this,i=t?e.config.duration+e.config.delay:e.config.duration,r=e.revealed?e.config.beforeReveal:e.config.beforeReset,o=e.revealed?e.config.afterReveal:e.config.afterReset,s=0;e.callbackTimer&&(s=Date.now()-e.callbackTimer.start,window.clearTimeout(e.callbackTimer.clock)),r(e.node),e.callbackTimer={start:Date.now(),clock:window.setTimeout((function(){o(e.node),e.callbackTimer=null,e.revealed&&!e.config.reset&&e.config.cleanup&&v.call(n,e.node)}),i-s)}}function R(e,t){if(void 0===t&&(t=this.pristine),!e.visible&&e.revealed&&e.config.reset)return T.call(this,e,{reset:!0});var n=this.store.sequences[e.sequence.id],i=e.sequence.index;if(n){var r=new A(n,"visible",this.store),o=new A(n,"revealed",this.store);if(n.models={visible:r,revealed:o},!o.body.length){var s=n.members[r.body[0]],a=this.store.elements[s];if(a)return P.call(this,n,r.body[0],-1,t),P.call(this,n,r.body[0],1,t),T.call(this,a,{reveal:!0,pristine:t})}if(!n.blocked.head&&i===[].concat(o.head).pop()&&i>=[].concat(r.body).shift())return P.call(this,n,i,-1,t),T.call(this,e,{reveal:!0,pristine:t});if(!n.blocked.foot&&i===[].concat(o.foot).shift()&&i<=[].concat(r.body).pop())return P.call(this,n,i,1,t),T.call(this,e,{reveal:!0,pristine:t})}}function q(e){var t=Math.abs(e);if(isNaN(t))throw new RangeError("Invalid sequence interval.");this.id=E(),this.interval=Math.max(t,16),this.members=[],this.models={},this.blocked={head:!1,foot:!1}}function A(e,t,n){var i=this;this.head=[],this.body=[],this.foot=[],o(e.members,(function(e,r){var o=n.elements[e];o&&o[t]&&i.body.push(r)})),this.body.length&&o(e.members,(function(e,r){var o=n.elements[e];o&&!o[t]&&(r0;)t[n]=arguments[n+1];var i=null;return o(t,(function(t){o(t,(function(t){null===i&&t.node===e&&(i=t.id)}))})),i}(f,l,a.store.containers),null===u&&(u=E(),l.push({id:u,node:f})),r.config=d,r.containerId=u,r.styles=p(r),c&&(r.sequence={id:c.id,index:c.members.length},c.members.push(r.id)),e.push(r),e):e}),[]);o(f,(function(e){a.store.elements[e.id]=e,e.node.setAttribute("data-sr-id",e.id)}))}catch(e){return s.call(this,"Reveal failed.",e.message)}o(l,(function(e){a.store.containers[e.id]={id:e.id,node:e.node}})),c&&(this.store.sequences[c.id]=c),!0!==r&&(this.store.history.push({target:t,options:n}),this.initTimeout&&window.clearTimeout(this.initTimeout),this.initTimeout=window.setTimeout(j.bind(this),0))}function M(){var e=this;o(this.store.history,(function(t){L.call(e,t.target,t.options,!0)})),j.call(this)}var I,N=Math.sign||function(e){return(e>0)-(e<0)||+e},z=(I=Date.now(),function(e){var t=Date.now();t-I>16?(I=t,e(t)):setTimeout((function(){return z(e)}),0)}),F=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||z;function D(e,t){var n=t?e.node.clientHeight:e.node.offsetHeight,i=t?e.node.clientWidth:e.node.offsetWidth,r=0,o=0,s=e.node;do{isNaN(s.offsetTop)||(r+=s.offsetTop),isNaN(s.offsetLeft)||(o+=s.offsetLeft),s=s.offsetParent}while(s);return{bounds:{top:r,right:o+i,bottom:r+n,left:o},height:n,width:i}}function S(e){var t,n;return e.node===document.documentElement?(t=window.pageYOffset,n=window.pageXOffset):(t=e.node.scrollTop,n=e.node.scrollLeft),{top:t,left:n}}function C(e){void 0===e&&(e={});var t=this.store.containers[e.containerId];if(t){var n=Math.max(0,Math.min(1,e.config.viewFactor)),i=e.config.viewOffset,r=e.geometry.bounds.top+e.geometry.height*n,o=e.geometry.bounds.right-e.geometry.width*n,s=e.geometry.bounds.bottom-e.geometry.height*n,a=e.geometry.bounds.left+e.geometry.width*n,c=t.geometry.bounds.top+t.scroll.top+i.top,l=t.geometry.bounds.right+t.scroll.left-i.right,d=t.geometry.bounds.bottom+t.scroll.top-i.bottom,u=t.geometry.bounds.left+t.scroll.left+i.left;return ru&&s>c&&a { 44 | console.log("First Screen") 45 | }, 46 | () => { 47 | setTimeout(() => { 48 | searchInputMain.focus() 49 | }, 100); 50 | }, 51 | () => { 52 | 53 | console.log("Third Screen") 54 | }, 55 | () => { 56 | console.log("Forth Screen") 57 | 58 | } 59 | ] 60 | 61 | 62 | let lastScreen = 0 63 | let currentScreen = 0 64 | options.forEach(option => { 65 | option.onclick = (e) => { 66 | lastScreen = currentScreen 67 | currentScreen = option.getAttribute('data-screen') 68 | screenCallback[currentScreen]() 69 | activeScreen(currentScreen, lastScreen) 70 | } 71 | }) 72 | 73 | 74 | 75 | 76 | 77 | 78 | function activeScreen(currentScreen, lastScreen) { 79 | // console.log(currentScreen, lastScreen) 80 | currentScreen = Number(currentScreen) 81 | lastScreen = Number(lastScreen) 82 | if (currentScreen === lastScreen) 83 | return 84 | screens[currentScreen].classList.add('active') 85 | options[currentScreen].classList.add('active') 86 | screens[lastScreen].classList.remove('active') 87 | options[lastScreen].classList.remove('active') 88 | } 89 | 90 | 91 | 92 | pseudoSearchInput.onclick = () => { 93 | lastScreen = 1 94 | currentScreen = 1 95 | activeScreen(1, 0) 96 | searchInputMain.focus() 97 | } 98 | 99 | 100 | 101 | 102 | 103 | let lastInputData 104 | searchInputMain.oninput = debounce(e => searchWord(e), 350, false) 105 | 106 | searchInputMain.onsearch = () => { searchInputMain.blur() } 107 | 108 | function searchWord(e) { 109 | showScreen('loading') 110 | 111 | if (e.target.value) { 112 | let searchData = lastInputData = e.target.value.trim() 113 | if (!searchData) 114 | return 115 | 116 | // Everything is ok 117 | let controller = new AbortController() 118 | let signal = controller.signal 119 | const url = `https://api.dictionaryapi.dev/api/v2/entries/en/${searchData}` 120 | 121 | fetch(url, { signal }).then(res => { 122 | if (lastInputData !== searchData) 123 | controller.abort() 124 | return res.json() 125 | }) 126 | .then(data => { 127 | showData(data) 128 | // const elem_touch_hold_option = document.querySelectorAll('img') 129 | // elem_touch_hold_option.forEach(elem => elem.addEventListener('contextmenu', absorbEvent_)) 130 | controller.abort() 131 | }) 132 | } else { 133 | searchInputMain.focus() 134 | showScreen('start-screen') 135 | } 136 | // if (e.target.value == '') 137 | } 138 | 139 | 140 | 141 | let lastSearchScreen = searchScreens.searchStartScreen 142 | function showScreen(screen) { 143 | lastSearchScreen.style.display = 'none' 144 | switch (screen) { 145 | case 'start-screen': 146 | searchScreens.searchStartScreen.style.display = 'block' 147 | lastSearchScreen = searchScreens.searchStartScreen 148 | break 149 | case 'not-found': 150 | searchScreens.noResults.style.display = 'block' 151 | lastSearchScreen = searchScreens.noResults 152 | break 153 | case 'loading': 154 | searchScreens.loadingScreen.style.display = 'block' 155 | lastSearchScreen = searchScreens.loadingScreen 156 | break 157 | case 'results': 158 | searchScreens.results.style.display = 'block' 159 | lastSearchScreen = searchScreens.results 160 | break 161 | } 162 | } 163 | 164 | 165 | 166 | 167 | 168 | 169 | let currentWord 170 | 171 | function showData(data) { 172 | searchScreens.results.innerHTML = '' 173 | console.log(data) 174 | if (data instanceof Array) { 175 | showScreen('results') 176 | data.forEach(rootWords => { 177 | currentWord = rootWords.word 178 | const result = document.createElement('div') 179 | result.classList.add('result') 180 | result.append(makeWordTitle(rootWords.word)) 181 | result.append(makePhonetics(rootWords.phonetic)) 182 | // result.append(makeActionButtons(rootWords.word)) 183 | 184 | function makeWordTitle(title) { 185 | const words = document.createElement('div') 186 | words.classList.add('word') 187 | words.innerHTML = `

${title}

` 188 | words.append(makeActionButtons(title)) 189 | 190 | function makeActionButtons() { 191 | const actions = document.createElement('div') 192 | actions.classList.add('actions') 193 | 194 | const voice = document.createElement('img') 195 | voice.src = "./image/icon/volume_up_color_48dp.svg" 196 | voice.classList.add('voice-button') 197 | 198 | const favorite = document.createElement('img') 199 | favorite.src = "./image/icon/favorite_border_color_48dp.svg" 200 | favorite.classList.add('fav-button') 201 | 202 | actions.append(voice, favorite) 203 | return actions 204 | } 205 | return words 206 | } 207 | 208 | function makePhonetics(ph) { 209 | const phonetic = document.createElement('div') 210 | phonetic.classList.add('phonetics') 211 | phonetic.innerHTML = `

${ph || getPhoneticsText() || 'Phonetics is not available'}

` 212 | return phonetic 213 | function getPhoneticsText() { 214 | let phonetics = rootWords.phonetics 215 | for (let i = 0; i < phonetics.length; i++) 216 | if (phonetics[i].text) 217 | return phonetics[i].text 218 | } 219 | } 220 | result.append(makeMeanings(rootWords)) 221 | searchScreens.results.append(result) 222 | searchScreens.results.innerHTML += '
' 223 | }) 224 | setAudio(data) 225 | setClickToFav(data) 226 | } 227 | else { 228 | showScreen('not-found') 229 | searchScreens.results.innerHTML = `

No Result Found

` 230 | } 231 | 232 | function setClickToFav(wordData) { 233 | const favElements = document.querySelectorAll('#search-results .result .word >.actions img.fav-button') 234 | let countFav = 0 235 | favElements.forEach(elem => { 236 | const word = wordData[countFav].word 237 | elem.onclick = () => { 238 | // toggle icons 239 | addToFav(word) 240 | } 241 | countFav++ 242 | }) 243 | } 244 | 245 | function setAudio(data) { 246 | const audioElements = document.querySelectorAll('#search-results .result .word >.actions img.voice-button') 247 | let audioCount = 0 248 | audioElements.forEach(elem => { 249 | if (data[audioCount].phonetics.length) { 250 | const audio = new Audio(getAudioSource(data[audioCount].phonetics)) 251 | elem.onclick = () => { audio.play()} 252 | } 253 | audioCount++ 254 | }) 255 | 256 | function getAudioSource(phonetics) { 257 | for (let i = 0; i < phonetics.length; i++) 258 | if (phonetics[i].audio) 259 | return phonetics[i].audio 260 | // console.log(phonetics[i].audio) 261 | } 262 | } 263 | } 264 | 265 | /** 266 | * 267 | * @param {Array} meanings 268 | */ 269 | function makeMeanings(word) { 270 | let meanings = word.meanings 271 | const meaningDOM = document.createElement('div') 272 | meaningDOM.classList.add('meanings') 273 | meanings.forEach(meaning => { 274 | meaningDOM.innerHTML += `
` 275 | meaningDOM.append(makeMeaning(meaning)) 276 | }) 277 | 278 | function makeMeaning(meaning) { 279 | const meaningDOM = document.createElement('div') 280 | meaningDOM.classList.add('meaning') 281 | meaningDOM.innerHTML = `
${word.word} : ${meaning.partOfSpeech}
` 282 | meaningDOM.append(makeDefinitions(meaning.definitions)) 283 | if (meaning.synonyms.length) 284 | meaningDOM.append(makeSynonyms(meaning.synonyms)) 285 | if (meaning.antonyms.length) 286 | meaningDOM.append(makeAntonyms(meaning.antonyms)) 287 | 288 | return meaningDOM 289 | 290 | function makeAntonyms(ant) { 291 | const antDOM = document.createElement('div') 292 | antDOM.classList.add('antonyms') 293 | antDOM.innerHTML = `Antonyms` 294 | 295 | const words = document.createElement('div') 296 | words.classList.add('words') 297 | ant.forEach(a => { 298 | words.innerHTML += `${a}` 299 | }) 300 | antDOM.append(words) 301 | return antDOM 302 | } 303 | 304 | function makeSynonyms(syn) { 305 | const antDOM = document.createElement('div') 306 | antDOM.classList.add('synonyms') 307 | antDOM.innerHTML = `Synonyms` 308 | const words = document.createElement('div') 309 | words.classList.add('words') 310 | syn.forEach(a => { 311 | words.innerHTML += `${a}` 312 | }) 313 | antDOM.append(words) 314 | return antDOM 315 | } 316 | 317 | 318 | 319 | /** 320 | * 321 | * @param {Array} def 322 | */ 323 | function makeDefinitions(def) { 324 | const definitionsDOM = document.createElement('div') 325 | definitionsDOM.classList.add('definitionss') 326 | def.forEach(d => { 327 | definitionsDOM.append(makeDefinition(d)) 328 | }) 329 | return definitionsDOM 330 | 331 | function makeDefinition(d) { 332 | const dDOM = document.createElement('div') 333 | dDOM.classList.add('definitions') 334 | dDOM.innerHTML = `
${d.definition}
` 335 | if (d.example) { 336 | dDOM.append(makeExamples(d.example)) 337 | } 338 | if (d.synonyms.length) 339 | dDOM.append(makeSynonyms(d.synonyms)) 340 | if (d.antonyms.length) 341 | dDOM.append(makeAntonyms(d.antonyms)) 342 | 343 | return dDOM 344 | 345 | function makeSynonyms(syn) { 346 | const synDOM = document.createElement('div') 347 | synDOM.classList.add('synonyms') 348 | synDOM.innerHTML = `
Synonyms
` 349 | 350 | const words = document.createElement('div') 351 | words.classList.add('words') 352 | syn.forEach(s => { 353 | words.innerHTML += `${s}` 354 | }) 355 | synDOM.append(words) 356 | return synDOM 357 | } 358 | function makeAntonyms(ant) { 359 | const antDOM = document.createElement('div') 360 | antDOM.classList.add('antonyms') 361 | antDOM.innerHTML = `
Antonyms
` 362 | const words = document.createElement('div') 363 | words.classList.add('words') 364 | ant.forEach(s => { 365 | words.innerHTML += `${s}` 366 | }) 367 | antDOM.append(words) 368 | return antDOM 369 | } 370 | 371 | 372 | function makeExamples(ex) { 373 | const exDOM = document.createElement('div') 374 | exDOM.classList.add('example') 375 | exDOM.innerHTML = `
Example
` 376 | ex = highlightWord(ex) 377 | exDOM.innerHTML += `
${ex}
` 378 | return exDOM 379 | } 380 | } 381 | } 382 | 383 | } 384 | return meaningDOM 385 | } 386 | 387 | function highlightWord(e) { 388 | let w = 389 | `([^a-z]${currentWord}[^a-z])|(^${currentWord}[^a-z])|([^a-z]${currentWord}$)` 390 | return e.replace(new RegExp(w, 'gi'), replacer) 391 | function replacer(match) { 392 | return match.replace( 393 | new RegExp(`(${currentWord})`, 'gi'), 394 | `$1` 395 | ) 396 | } 397 | } 398 | 399 | 400 | function addToFav(w) { 401 | console.log(w) 402 | } 403 | 404 | 405 | // Disable press and hold options 406 | 407 | function absorbEvent_(event) { 408 | var e = event || window.event; 409 | e.preventDefault && e.preventDefault(); 410 | e.stopPropagation && e.stopPropagation(); 411 | e.cancelBubble = true; 412 | e.returnValue = false; 413 | return false; 414 | } 415 | document.body.addEventListener('contextmenu', absorbEvent_) -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "English Dictionary", 3 | "name": "English Dictionary", 4 | "start_url": ".", 5 | "display": "standalone", 6 | "background_color": "#fff", 7 | "description": "A simple and easy to use english dictionary", 8 | "theme_color": "#fff", 9 | "icons": [ 10 | { 11 | "src": "./image/icon/app_icon/icon192.png", 12 | "sizes": "192x192", 13 | "type": "image/png", 14 | "purpose": "any" 15 | }, 16 | { 17 | "src": "./image/icon/app_icon/icon512.png", 18 | "sizes": "512x512", 19 | "type": "image/png", 20 | "purpose": "maskable" 21 | }, 22 | { 23 | "src": "./image/icon/app_icon/icon196.png", 24 | "sizes": "196x196", 25 | "type": "image/png", 26 | "purpose": "any" 27 | }, 28 | { 29 | "src": "./image/icon/favicon.ico", 30 | "sizes": "16x16 32x32 48x48 64x64 128x128 256x256", 31 | "type": "image/png", 32 | "purpose": "any" 33 | } 34 | ], 35 | "screenshots": [ 36 | { 37 | "src": "./image/icon/favicon.ico", 38 | "type": "image/png", 39 | "sizes": "358x730" 40 | }, 41 | { 42 | "src": "./image/icon/favicon.ico", 43 | "type": "image/jpg", 44 | "sizes": "358x730" 45 | }, 46 | { 47 | "src": "./image/icon/favicon.ico", 48 | "type": "image/jpg", 49 | "sizes": "358x730" 50 | }, 51 | { 52 | "src": "./image/icon/favicon.ico", 53 | "type": "image/jpg", 54 | "sizes": "358x730" 55 | } 56 | ], 57 | "shortcuts": [ 58 | { 59 | "name": "This is Shortcut 1", 60 | "short_name": "Shortcut 1", 61 | "description": "Detailed Description Shortcut 1", 62 | "url": "./shortcut1.html", 63 | "icons": [ 64 | { 65 | "src": "./image/icon/favicon.ico", 66 | "sizes": "96x96" 67 | } 68 | ] 69 | }, 70 | { 71 | "name": "This is Shortcut 2", 72 | "short_name": "Shortcut 2", 73 | "description": "Detailed Description Shortcut 2", 74 | "url": "./shortcut2.html", 75 | "icons": [ 76 | { 77 | "src": "./image/icon/favicon.ico", 78 | "sizes": "96x96" 79 | } 80 | ] 81 | }, 82 | { 83 | "name": "This is Shortcut 3", 84 | "short_name": "Shortcut 1", 85 | "description": "Detailed Description Shortcut 3", 86 | "url": "./shortcut3.html", 87 | "icons": [ 88 | { 89 | "src": "./image/icon/favicon.ico", 90 | "sizes": "96x96" 91 | } 92 | ] 93 | } 94 | ] 95 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "scss": "^0.2.4" 4 | }, 5 | "scripts": { 6 | "scss watch": "npx sass --no-source-map --watch scss:css", 7 | "scss watch compress": "npx sass --no-source-map --watch scss:css --style compressed", 8 | "scss all": "npx sass --no-source-map scss:css", 9 | "scss compress all": "npx sass --no-source-map scss:css --style compressed" 10 | } 11 | } -------------------------------------------------------------------------------- /scss/_screen1.scss: -------------------------------------------------------------------------------- 1 | #screen1{ 2 | padding: 20px; 3 | } -------------------------------------------------------------------------------- /scss/_screen2.scss: -------------------------------------------------------------------------------- 1 | @use './common/animation' as anim; 2 | 3 | 4 | #screen2 { 5 | 6 | // padding-bottom: 100vh; 7 | // $navbar-height : 65px; 8 | // padding-bottom: $navbar-height; 9 | .search { 10 | width: 100%; 11 | padding-inline: 20px; 12 | padding-top: 20px; 13 | // padding-bottom: 20px; 14 | } 15 | 16 | .hidden { 17 | display: none; 18 | } 19 | 20 | >#search-results { 21 | 22 | // padding: 20px; 23 | .result { 24 | .word { 25 | width: 100%; 26 | padding-inline: 20px; 27 | padding-top: 30px; 28 | display: flex; 29 | justify-content: space-between; 30 | gap: 1em; 31 | 32 | h2 { 33 | word-break: break-all; 34 | } 35 | 36 | >.actions { 37 | // user-select: none; 38 | display: flex; 39 | justify-content: center; 40 | align-items: center; 41 | user-select: none; 42 | // outline: 1px solid var(--color); 43 | gap: 3px; 44 | 45 | img { 46 | padding: 7px; 47 | aspect-ratio: 1 / 1; 48 | object-fit: contain; 49 | @include anim.press(200, 90); 50 | width: 2.5em; 51 | border-radius: 50%; 52 | 53 | // transition: background-color 300ms; 54 | &:active { 55 | background-color: #eee; 56 | } 57 | } 58 | } 59 | } 60 | 61 | .phonetics { 62 | padding-inline: 20px; 63 | padding-bottom: 20px; 64 | 65 | >p { 66 | font-size: 0.8em; 67 | color: var(--gray); 68 | font-weight: 500; 69 | } 70 | } 71 | 72 | >.meanings { 73 | >.meaning { 74 | width: 100%; 75 | padding-inline: 20px; 76 | padding-block: 15px; 77 | 78 | >.type { 79 | span { 80 | font-style: italic; 81 | font-weight: 500; 82 | font-family: 'Times New Roman', Times, serif; 83 | color: var(--gray); 84 | } 85 | } 86 | 87 | >.definitionss { 88 | >.definitions { 89 | padding-left: 10px; 90 | padding-block: 0.5em; 91 | 92 | .text { 93 | // margin-top: 1em; 94 | display: list-item; 95 | margin-left: 0.5em; 96 | 97 | span { 98 | font-size: 0.9em; 99 | font-weight: 405; 100 | color: var(--deep-gray); 101 | // list-style-type: square; 102 | // color: var(--color); 103 | } 104 | } 105 | 106 | .synonyms, 107 | .antonyms, 108 | .example { 109 | padding-block: 0.2em; 110 | font-size: 0.9em; 111 | 112 | >.name>span { 113 | // font-size: 0.7em; 114 | font-family: 'Times New Roman', Times, serif; 115 | font-weight: 500; 116 | color: var(--gray); 117 | font-style: italic; 118 | } 119 | 120 | >.words { 121 | margin-top: 0.4em; 122 | font-size: 0.8em; 123 | color: var(--deep-gray); 124 | display: flex; 125 | flex-wrap: wrap; 126 | gap: 0.5em; 127 | 128 | span { 129 | padding: 0.5em 1.1em; 130 | background-color: #88888822; 131 | border-radius: 100vmax; 132 | color: var(--deep-gray); 133 | font-weight: 500; 134 | 135 | } 136 | } 137 | } 138 | 139 | .example .ex { 140 | padding: 0.3em 0; 141 | // font-weight: 500; 142 | font-style: italic; 143 | color: var(--deep-gray); 144 | } 145 | 146 | } 147 | } 148 | 149 | >.synonyms, 150 | >.antonyms { 151 | padding-block: 0.2em; 152 | font-size: 0.9em; 153 | 154 | >span.name { 155 | // font-size: 0.7em; 156 | font-family: 'Times New Roman', Times, serif; 157 | font-weight: 500; 158 | color: var(--gray); 159 | font-style: italic; 160 | } 161 | 162 | >.words { 163 | margin-top: 0.4em; 164 | font-size: 0.8em; 165 | color: var(--deep-gray); 166 | display: flex; 167 | flex-wrap: wrap; 168 | gap: 0.5em; 169 | 170 | >span { 171 | padding: 0.5em 1.1em; 172 | background-color: #88888822; 173 | border-radius: 100vmax; 174 | color: var(--deep-gray); 175 | font-weight: 500; 176 | } 177 | } 178 | } 179 | } 180 | } 181 | 182 | } 183 | 184 | .gap { 185 | height: 10px; 186 | width: 100%; 187 | background-color: var(--gap-color); 188 | } 189 | } 190 | 191 | #search-noResult { 192 | .container { 193 | 194 | padding: 7%; 195 | display: flex; 196 | min-height: calc(100vh - 200px); 197 | justify-content: center; 198 | align-items: center; 199 | flex-direction: column; 200 | 201 | >img.illustration { 202 | width: 65%; 203 | } 204 | 205 | >h1 { 206 | color: var(--color); 207 | text-align: center; 208 | } 209 | 210 | >p { 211 | text-align: center; 212 | font-weight: 500; 213 | font-size: 0.8em; 214 | color: var(--text); 215 | } 216 | } 217 | } 218 | 219 | #search-loadingScreen { 220 | padding: 20px; 221 | 222 | .bg { 223 | background-image: linear-gradient(100deg, 224 | #77777715 0%, #77777715 40%, 225 | #77777725 50%, #77777725 55%, 226 | #77777715 65%, #77777715 100%); 227 | background-size: 200% 100%; 228 | background-position-x: 180%; 229 | animation: loadSkeleton 1.3s infinite; 230 | } 231 | 232 | @keyframes loadSkeleton { 233 | to { 234 | background-position-x: -20%; 235 | } 236 | } 237 | 238 | .h1 { 239 | height: 4rem; 240 | border-radius: 10px; 241 | } 242 | 243 | .h2 { 244 | height: 2.5rem; 245 | border-radius: 10px; 246 | } 247 | 248 | .p { 249 | height: 1rem; 250 | border-radius: 100vmax; 251 | margin-block: 0.6rem; 252 | } 253 | 254 | .code { 255 | width: 100%; 256 | height: 11rem; 257 | border-radius: 10px; 258 | margin-block: 1rem; 259 | } 260 | 261 | .note { 262 | width: 100%; 263 | height: 7rem; 264 | border-radius: 10px; 265 | margin-block: 1rem; 266 | } 267 | 268 | .w100 { 269 | width: 100%; 270 | } 271 | 272 | .w70 { 273 | width: 80%; 274 | } 275 | 276 | .blank { 277 | width: 100%; 278 | height: 1rem; 279 | } 280 | 281 | .blanks { 282 | width: 100%; 283 | height: 0.65rem; 284 | } 285 | } 286 | 287 | #search-startScreen { 288 | padding: 20px; 289 | } 290 | } -------------------------------------------------------------------------------- /scss/_screen3.scss: -------------------------------------------------------------------------------- 1 | .screen3{ 2 | padding: 20px; 3 | } -------------------------------------------------------------------------------- /scss/_screen4.scss: -------------------------------------------------------------------------------- 1 | .screen4{ 2 | padding: 20px; 3 | } -------------------------------------------------------------------------------- /scss/common/_animation.scss: -------------------------------------------------------------------------------- 1 | // Hover effect and 2 | @use "sass:math"; 3 | 4 | @mixin press($dur : 200, $scale : 90) { 5 | transition:all #{$dur}ms; 6 | &:active { 7 | scale: math.div($scale, 100); 8 | } 9 | } 10 | 11 | .press{ 12 | @include press(200,95); 13 | } -------------------------------------------------------------------------------- /scss/common/_colors.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @use "sass:math"; 3 | 4 | 5 | $accent : #f44236; 6 | $bg : #f1f1f1; 7 | $text : #111; 8 | 9 | 10 | $colors : ( 11 | "accent" : $accent, 12 | "bg" : $bg, 13 | "text" : $text 14 | ); 15 | 16 | @function color($color : "accent", $mix : 100, $opacity : 100, $mix-color : white) { 17 | @return mix(rgba(map.get($colors, $color), math.div($opacity , 100)), $mix-color, $mix) 18 | } 19 | 20 | .color{ 21 | color: $accent !important; 22 | } -------------------------------------------------------------------------------- /scss/common/_font.scss: -------------------------------------------------------------------------------- 1 | // @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap"); 2 | /*font-family: 'Poppins', sans-serif;*/ 3 | 4 | // /* latin-ext */ 5 | // @font-face { 6 | // font-family: 'Poppins'; 7 | // font-style: normal; 8 | // font-weight: 400; 9 | // font-display: swap; 10 | // src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2'); 11 | // unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; 12 | // } 13 | 14 | /* latin */ 15 | @font-face { 16 | font-family: 'Poppins'; 17 | font-style: normal; 18 | font-weight: 400; 19 | font-display: swap; 20 | src: url(../files/fonts/poppins400.woff2) format('woff2'); 21 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 22 | } 23 | 24 | // /* latin-ext */ 25 | // @font-face { 26 | // font-family: 'Poppins'; 27 | // font-style: normal; 28 | // font-weight: 500; 29 | // font-display: swap; 30 | // src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2'); 31 | // unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; 32 | // } 33 | 34 | /* latin */ 35 | @font-face { 36 | font-family: 'Poppins'; 37 | font-style: normal; 38 | font-weight: 500; 39 | font-display: swap; 40 | src: url(../files/fonts/poppins500.woff2) format('woff2'); 41 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 42 | } 43 | 44 | /* latin-ext */ 45 | // @font-face { 46 | // font-family: 'Poppins'; 47 | // font-style: normal; 48 | // font-weight: 600; 49 | // font-display: swap; 50 | // src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2'); 51 | // unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; 52 | // } 53 | 54 | /* latin */ 55 | @font-face { 56 | font-family: 'Poppins'; 57 | font-style: normal; 58 | font-weight: 600; 59 | font-display: swap; 60 | src: url(../files/fonts/poppins600.woff2) format('woff2'); 61 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 62 | } 63 | 64 | /* latin-ext */ 65 | // @font-face { 66 | // font-family: 'Poppins'; 67 | // font-style: normal; 68 | // font-weight: 700; 69 | // font-display: swap; 70 | // src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2'); 71 | // unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; 72 | // } 73 | 74 | /* latin */ 75 | @font-face { 76 | font-family: 'Poppins'; 77 | font-style: normal; 78 | font-weight: 700; 79 | font-display: swap; 80 | src: url(../files/fonts/poppins700.woff2) format('woff2'); 81 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 82 | } 83 | 84 | /* latin-ext */ 85 | // @font-face { 86 | // font-family: 'Poppins'; 87 | // font-style: normal; 88 | // font-weight: 800; 89 | // font-display: swap; 90 | // src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDD4Z1JlFc-K.woff2) format('woff2'); 91 | // unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; 92 | // } 93 | 94 | /* latin */ 95 | @font-face { 96 | font-family: 'Poppins'; 97 | font-style: normal; 98 | font-weight: 800; 99 | font-display: swap; 100 | src: url(../files/fonts/poppins800.woff2) format('woff2'); 101 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 102 | } -------------------------------------------------------------------------------- /scss/common/_index.scss: -------------------------------------------------------------------------------- 1 | @forward './font'; 2 | @use './colors' as color; 3 | @use './scrollbar'; 4 | html{ 5 | scroll-behavior: smooth; 6 | } 7 | *, 8 | *::after, 9 | *::before { 10 | font-family: 'Poppins', sans-serif; 11 | box-sizing: border-box; 12 | margin: 0; 13 | padding: 0; 14 | } 15 | 16 | // Font Awesome Style 17 | i, 18 | i::before, 19 | i::after { 20 | font-family: "Font Awesome Kit"; 21 | } 22 | 23 | body { 24 | overscroll-behavior-y: contain; 25 | print-color-adjust: exact; 26 | } 27 | 28 | a { 29 | text-decoration: none; 30 | } 31 | 32 | ::selection { 33 | background: color.color('accent'); 34 | color: color.$bg; 35 | } -------------------------------------------------------------------------------- /scss/common/_layout.scss: -------------------------------------------------------------------------------- 1 | @mixin flex($jc : center, $dir : column) { 2 | display: flex; 3 | justify-content: $jc; 4 | align-items: center; 5 | flex-direction: $dir; 6 | } 7 | 8 | .searchBar { 9 | width: 100%; 10 | font-size: 0.85rem; 11 | padding: 1em 0.5em 1em 3.1em; 12 | border-radius: var(--bdrs); 13 | // border-radius: 100vmax; 14 | // border: 1.5px solid var(--border-color); 15 | border: 1.2px solid transparent; 16 | background-color: #f1f1f1; 17 | outline: none; 18 | background-image: url('../image/icon/search_gray_48dp.svg'); 19 | background-repeat: no-repeat; 20 | background-position: 1.1em center; 21 | background-size: 1.5em; 22 | font-weight: 500; 23 | caret-color: var(--color); 24 | // transition: 300ms border, 300ms background-color; 25 | // &:focus { 26 | // border-color: var(--color); 27 | // // background-color: transparent; 28 | // } 29 | &::-webkit-search-cancel-button{ 30 | -webkit-appearance: none; 31 | height: 2em; 32 | width: 2em; 33 | background-size: 1.6em; 34 | opacity: 0.9; 35 | // outline: 1px solid red; 36 | background-image: url('../image/icon/clear_black_48dp.svg'); 37 | background-repeat: no-repeat; 38 | background-position: center; 39 | } 40 | } 41 | 42 | 43 | .tap-ripple{ 44 | position: relative; 45 | &::before{ 46 | content: ''; 47 | display: block; 48 | position: absolute; 49 | aspect-ratio: 1 / 1; 50 | width: 150%; 51 | top: var(--y); 52 | left: var(--x); 53 | background-color: #888; 54 | opacity: 0.4; 55 | translate: -50% -50%; 56 | scale: 0; 57 | border-radius: 50%; 58 | } 59 | } 60 | .pulse::before { 61 | animation: pulse 500ms; 62 | } 63 | 64 | 65 | @keyframes pulse { 66 | 100%{ 67 | scale: 1; 68 | opacity: 0; 69 | } 70 | } -------------------------------------------------------------------------------- /scss/common/_scrollbar.scss: -------------------------------------------------------------------------------- 1 | // Style Scrollbar 2 | @use './colors' as color; 3 | 4 | ::-webkit-scrollbar { 5 | // width: 8px; 6 | } 7 | 8 | ::-webkit-scrollbar-track { 9 | // background: color.color(); 10 | } 11 | 12 | ::-webkit-scrollbar-thumb { 13 | // background: color.color('bg'); 14 | } 15 | 16 | ::-webkit-scrollbar-thumb:hover { 17 | // background: color.color('bg', $opacity : 90); 18 | } -------------------------------------------------------------------------------- /scss/common/_typo.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/english-dictionary/63923ec1f2de60c410030160cdeb0a673212125a/scss/common/_typo.scss -------------------------------------------------------------------------------- /scss/common/_var.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --color:#f44236; 3 | --text:#333; 4 | --bg-blur: #ffffffee; 5 | --blur: 10px; 6 | --bdrs: 10px; 7 | --border-color: #ddd; 8 | --gap-color: #f5f5f5; 9 | --gray:#666; 10 | --gray2:#555; 11 | --deep-gray: #444; 12 | } 13 | 14 | $navbar-height : 65px; 15 | $screenMinHeight : calc(100vh - $navbar-height + 2px); -------------------------------------------------------------------------------- /scss/lib/swapper.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Swiper 8.3.2 3 | * Most modern mobile touch slider and framework with hardware accelerated transitions 4 | * https://swiperjs.com 5 | * 6 | * Copyright 2014-2022 Vladimir Kharlampidi 7 | * 8 | * Released under the MIT License 9 | * 10 | * Released on: July 26, 2022 11 | */ 12 | 13 | @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, 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');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden} -------------------------------------------------------------------------------- /scss/style.scss: -------------------------------------------------------------------------------- 1 | @use './common'; 2 | @use './common/layout' as ui; 3 | @use './common/animation' as anim; 4 | @use './common/colors' as color; 5 | @use './common/var' as var; 6 | @use './screen2'; 7 | @use './screen1'; 8 | @use './screen3'; 9 | @use './screen4'; 10 | 11 | #main { 12 | width: 100%; 13 | .screen-container { 14 | // max-width: 600px; 15 | // margin-inline: auto; 16 | height: var.$screenMinHeight; 17 | overflow-x: hidden; 18 | // height: 100vh; 19 | .screen{ 20 | width: 100%; 21 | display: none; 22 | &.active{ 23 | display: block; 24 | } 25 | } 26 | } 27 | 28 | >nav.bottom { 29 | width: 100%; 30 | position: fixed; 31 | bottom: 0; 32 | height: var.$navbar-height; 33 | // padding-block: 3px; 34 | display: flex; 35 | z-index: 100; 36 | // display: none; 37 | justify-content: space-around; 38 | align-items: center; 39 | border-top: 1px solid #88888820; 40 | background-color: var(--bg-blur); 41 | backdrop-filter: blur(var(--blur)); 42 | --webkit-backdrop-filter: blur(var(--blur)); 43 | user-select: none; 44 | >.option { 45 | // height: 100%; 46 | // background-color: lime; 47 | width: 25%; 48 | height: 100%; 49 | overflow: hidden; 50 | // border: 1px solid red; 51 | padding-inline: 5%; 52 | display: flex; 53 | justify-content: center; 54 | align-items: center; 55 | flex-direction: column; 56 | opacity: 0.35; 57 | @include anim.press(150, 95); 58 | 59 | >img { 60 | width: 25px; 61 | } 62 | 63 | >span { 64 | font-size: 0.7rem; 65 | } 66 | 67 | &.active { 68 | opacity: 0.8; 69 | } 70 | } 71 | } 72 | } -------------------------------------------------------------------------------- /sw.js: -------------------------------------------------------------------------------- 1 | // const staticCacheName = 2 | const cacheData = { 3 | static: { 4 | name: 'static-eng-dictionary', 5 | urls: [ 6 | './files/fonts/poppins400.woff2', 7 | './files/fonts/poppins500.woff2', 8 | './files/fonts/poppins600.woff2', 9 | './files/fonts/poppins700.woff2', 10 | './files/fonts/poppins800.woff2' 11 | ] 12 | }, 13 | dynamic: { 14 | name: 'dynamic-eng-dictionary' 15 | }, 16 | noUpdate: { 17 | name: "no-update-eng-dictionary", 18 | urls: [ 19 | 20 | ] 21 | } 22 | } 23 | 24 | 25 | self.addEventListener('install', event => { 26 | event.waitUntil( 27 | caches.open(cacheData.static.name).then(cache => { 28 | cache.addAll(cacheData.static.urls) 29 | }) 30 | ) 31 | }) 32 | 33 | 34 | self.addEventListener('fetch', event => { 35 | if (cacheData.static.urls.includes(event.request.url)) 36 | event.respondWith( 37 | caches.match(event.request).then(cacheResponse => { 38 | return cacheResponse || fetch(event.request) 39 | }) 40 | ) 41 | 42 | // Only Load for the first time 43 | else if (event.request.url.includes('/images/illustration/')) { 44 | // console.log("Illustration Load") 45 | event.respondWith( 46 | caches.match(event.request).then(cacheResponse => { 47 | const fetchUrl = fetch(event.request).then(fetchResponse => { 48 | return caches.open(cacheData.static.name).then(cache => { 49 | cache.put(event.request, fetchResponse.clone()) 50 | return fetchResponse 51 | }) 52 | }) 53 | return cacheResponse || fetchUrl 54 | }) 55 | ) 56 | } 57 | else 58 | event.respondWith( 59 | caches.match(event.request).then(cacheResponse => { 60 | const fetchUrl = fetch(event.request).then(fetchResponse => { 61 | return caches.open(cacheData.dynamic.name).then(cache => { 62 | cache.put(event.request, fetchResponse.clone()) 63 | return fetchResponse 64 | }) 65 | }) 66 | return cacheResponse || fetchUrl 67 | }) 68 | ) 69 | }) --------------------------------------------------------------------------------