├── .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 | 
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 |
33 |
158 |
159 |
160 |
161 |
162 |
163 |

164 |
Word Not Found!
165 |
The word you are searching for is not found!
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
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 | })
--------------------------------------------------------------------------------