diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..3481b42 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,247 @@ +.switch, +.search .search__input, +.search .search__button { + transition: background-color 0.5s ease-out; +} + +.nav { + transition: box-shadow 0.5s ease-out, background-color 0.5s ease-out; +} + +.definition { + transition: background-color 0.5s ease-out, color 0.5s ease-out; +} +.definition__title { + transition: border 0.5s ease-out; +} +.definition__meaning { + transition: border-color 0.5s ease-out; +} + +.card { + transition: background-color 0.5s ease-out; +} +.card__title { + transition: border 0.5s ease-out, color 0.5s ease-out; +} + +.slider::after { + transition: transform 0.5s ease-out; +} + +.search__input__validation-message { + transition: opacity 0.25s ease-out; +} + +.nav__dropdown { + transition: background-color 0.5s ease-out; +} + +.nav__dropdown__list { + transition: background-color 0.5s ease-out; +} +.nav__dropdown__list__item { + transition: color 0.5s ease-out; +} + +@font-face { + font-family: Roboto; + src: url("../../assets/fonts/Roboto/Roboto-Regular.ttf") format("truetype"); + font-weight: 400; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: Roboto; + src: url("../../assets/fonts/Roboto/Roboto-Bold.ttf") format("truetype"); + font-weight: 700; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: Roboto; + src: url("../../assets/fonts/Roboto/Roboto-Italic.ttf") format("truetype"); + font-weight: 400; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: Roboto; + src: url("../../assets/fonts/Roboto/Roboto-BoldItalic.ttf") format("truetype"); + font-weight: 700; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: Roboto; + src: url("../../assets/fonts/Roboto/Roboto-Light.ttf") format("truetype"); + font-weight: 300; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: Roboto; + src: url("../../assets/fonts/Roboto/Roboto-LightItalic.ttf") format("truetype"); + font-weight: 300; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: Roboto; + src: url("../../assets/fonts/Roboto/Roboto-Medium.ttf") format("truetype"); + font-weight: 500; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: Roboto; + src: url("../../assets/fonts/Roboto/Roboto-MediumItalic.ttf") format("truetype"); + font-weight: 500; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: Roboto; + src: url("../../assets/fonts/Roboto/Roboto-Black.ttf") format("truetype"); + font-weight: 900; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: Roboto; + src: url("../../assets/fonts/Roboto/Roboto-BlackItalic.ttf") format("truetype"); + font-weight: 900; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: Roboto; + src: url("../../assets/fonts/Roboto/Roboto-Thin.ttf") format("truetype"); + font-weight: 100; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: Roboto; + src: url("../../assets/fonts/Roboto/Roboto-ThinItalic.ttf") format("truetype"); + font-weight: 100; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: Roboto Mono; + src: url("../../assets/fonts/Roboto_Mono/static/RobotoMono-Medium.ttf") format("truetype"); + font-weight: 500; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: Roboto Mono; + src: url("../../assets/fonts/Roboto_Mono/static/RobotoMono-MediumItalic.ttf") format("truetype"); + font-weight: 500; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: Roboto Mono; + src: url("../../assets/fonts/Roboto_Mono/static/RobotoMono-Regular.ttf") format("truetype"); + font-weight: 400; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: Roboto Mono; + src: url("../../assets/fonts/Roboto_Mono/static/RobotoMono-Bold.ttf") format("truetype"); + font-weight: 700; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: Roboto Mono; + src: url("../../assets/fonts/Roboto_Mono/static/RobotoMono-BoldItalic.ttf") format("truetype"); + font-weight: 700; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: Roboto Mono; + src: url("../../assets/fonts/Roboto_Mono/static/RobotoMono-Italic.ttf") format("truetype"); + font-weight: 400; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: Roboto Mono; + src: url("../../assets/fonts/Roboto_Mono/static/RobotoMono-Light.ttf") format("truetype"); + font-weight: 300; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: Roboto Mono; + src: url("../../assets/fonts/Roboto_Mono/static/RobotoMono-LightItalic.ttf") format("truetype"); + font-weight: 300; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: Inconsolata; + font-style: normal; + font-weight: 400; + src: local(Inter), url(../../assets/fonts/Inconsolata/Inconsolata-Regular.ttf) format("truetype"); + font-display: swap; +} +@font-face { + font-family: Inconsolata; + font-style: normal; + font-weight: 700; + src: local(Inter), url(../../assets/fonts/Inconsolata/Inconsolata-Bold.ttf) format("truetype"); + font-display: swap; +} +/* You can add global styles to this file, and also import other style files */ +*, +*::after, +*::before { + box-sizing: border-box; +} + +:root { + --main-bg-color: rgba(238, 238, 238, 97%); + --main-color: #0f0f0f; + --grey: #393E46; + --color-scheme: light; + --secondary-bg-color: #f5f5f5; + --primary-purple: #a545ef; + --font-family: sans-serif; + --primary-shadow-color: var(--grey); + --card-shadow: none; + --navbar-shadow: 0px 1px 5px 0px var(--primary-shadow-color); + --navbar-bg: var(--main-bg-color); + --radius-size: 10px; +} + +.dark-mode { + --main-bg-color: #0f0f0f; + --main-color: rgba(238, 238, 238, 87%); + --secondary-bg-color: #1f1f1f; + --color-scheme: dark; + --primary-shadow-color: var(--secondary-bg-color); + --card-shadow: none; + --navbar-shadow: 0px 1px 1px 0px var(--primary-shadow-color); + --navbar-bg: var(--main-bg-color); +} + +body { + margin: 0; + padding: 0; + background-color: var(--main-bg-color); + color: var(--main-color); + color-scheme: var(--color-scheme); + transition: background-color 0.5s ease-out, color 0.5s ease-out; + font-family: var(--font-family); +} + +.container { + width: min(1200px, 90%); + margin-inline: auto; +}/*# sourceMappingURL=styles.css.map */ \ No newline at end of file diff --git a/css/styles.css.map b/css/styles.css.map new file mode 100644 index 0000000..a1073ca --- /dev/null +++ b/css/styles.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../src/app/partials/_transitions.scss","styles.css","../src/app/partials/_font-families.scss","../src/styles.scss"],"names":[],"mappings":"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","file":"styles.css"} \ No newline at end of file diff --git a/src/app/components/css/main.component.css b/src/app/components/css/main.component.css new file mode 100644 index 0000000..e7b23e4 --- /dev/null +++ b/src/app/components/css/main.component.css @@ -0,0 +1 @@ +/*# sourceMappingURL=main.component.css.map */ \ No newline at end of file diff --git a/src/app/components/css/main.component.css.map b/src/app/components/css/main.component.css.map new file mode 100644 index 0000000..a589e9d --- /dev/null +++ b/src/app/components/css/main.component.css.map @@ -0,0 +1 @@ +{"version":3,"sources":[],"names":[],"mappings":"","file":"main.component.css"} \ No newline at end of file diff --git a/src/app/components/main/css/daily-word-and-phrase.component.css b/src/app/components/main/css/daily-word-and-phrase.component.css new file mode 100644 index 0000000..95c8bdf --- /dev/null +++ b/src/app/components/main/css/daily-word-and-phrase.component.css @@ -0,0 +1,43 @@ +.daily-word-and-phrase { + display: grid; + grid-template-columns: 1fr; + gap: 4rem; + justify-content: space-around; + margin-top: 4rem; + margin-bottom: 4rem; + font-size: clamp(1.25rem, 5vw, 1.75rem); +} + +.card { + border-radius: var(--radius-size); + text-align: center; + box-shadow: var(--card-shadow); + padding: 2rem 1rem; + background-color: var(--secondary-bg-color); +} +.card__title { + margin: 0; + padding-bottom: 10px; + font-weight: 700; + background: -webkit-linear-gradient(45deg, var(--primary-purple) 10%, var(--main-color) 90%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + border-bottom: 2px solid var(--main-bg-color); +} +.card__definition { + font-size: clamp(1.25rem, 5vw, 1.5rem); +} +.card__word a { + transition: color 0.5s ease-out; + color: var(--main-color); +} +.card__word a:hover { + color: var(--primary-purple); +} + +@media (min-width: 780px) { + .daily-word-and-phrase { + grid-template-columns: repeat(2, minmax(300px, 600px)); + } +}/*# sourceMappingURL=daily-word-and-phrase.component.css.map */ \ No newline at end of file diff --git a/src/app/components/main/css/daily-word-and-phrase.component.css.map b/src/app/components/main/css/daily-word-and-phrase.component.css.map new file mode 100644 index 0000000..c934986 --- /dev/null +++ b/src/app/components/main/css/daily-word-and-phrase.component.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../daily-word-and-phrase/daily-word-and-phrase.component.scss","daily-word-and-phrase.component.css"],"names":[],"mappings":"AAAA;EACI,aAAA;EACA,0BAAA;EACA,SAAA;EACA,6BAAA;EACA,gBAAA;EACA,mBAAA;EACA,uCAAA;ACCJ;;ADEA;EACI,iCAAA;EACA,kBAAA;EACA,8BAAA;EACA,kBAAA;EACA,2CAAA;ACCJ;ADCI;EACI,SAAA;EACA,oBAAA;EAEA,gBAAA;EACA,4FAAA;EACA,6BAAA;UAAA,qBAAA;EACA,oCAAA;EACA,6CAAA;ACAR;ADGI;EACI,sCAAA;ACDR;ADII;EACI,+BAAA;EACA,wBAAA;ACFR;ADIQ;EACI,4BAAA;ACFZ;;ADOA;EACI;IACI,sDAAA;ECJN;AACF","file":"daily-word-and-phrase.component.css"} \ No newline at end of file diff --git a/src/app/components/main/css/definition.component.css b/src/app/components/main/css/definition.component.css new file mode 100644 index 0000000..5582eae --- /dev/null +++ b/src/app/components/main/css/definition.component.css @@ -0,0 +1,49 @@ +.definition { + padding-inline: clamp(0.25rem, 2vw, 1rem); + padding-block: clamp(1rem, 2vw, 4rem); + box-shadow: var(--card-shadow); + background-color: var(--secondary-bg-color); + font-size: clamp(1rem, 5vw, 1.75rem); + border-radius: var(--radius-size); + color: var(--main-color); +} +.definition__title, .definition__example, .definition--error { + text-align: center; +} +.definition__item:not(:first-child) { + border-top: 2px solid var(--main-bg-color); +} +.definition__title { + margin: 0; + padding-bottom: 0.5rem; +} +.definition__types { + padding: 0rem 1rem; + margin: 0; + display: flex; + align-items: center; +} +.definition__play-button--wrapper { + position: relative; + margin-left: auto; + border-radius: 100%; + aspect-ratio: 1; + background-color: var(--primary-purple); +} +.definition__play-button { + position: absolute; + border-style: solid; + border-width: 12px 12px 12px 24px; + cursor: pointer; + background-color: transparent; + width: 0; + height: 0; + border-color: transparent transparent transparent yellow; +} +.definition__meaning { + margin-block: 2rem; +} +.definition__example { + font-size: clamp(0.5rem, 4vw, 1.5rem); + margin: 0.25rem 1rem 1rem 1rem; +}/*# sourceMappingURL=definition.component.css.map */ \ No newline at end of file diff --git a/src/app/components/main/css/definition.component.css.map b/src/app/components/main/css/definition.component.css.map new file mode 100644 index 0000000..a5065f0 --- /dev/null +++ b/src/app/components/main/css/definition.component.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../definition/definition.component.scss","definition.component.css"],"names":[],"mappings":"AAAA;EACI,yCAAA;EACA,qCAAA;EACA,8BAAA;EACA,2CAAA;EACA,oCAAA;EACA,iCAAA;EACA,wBAAA;ACCJ;ADCI;EAGI,kBAAA;ACDR;ADKQ;EACI,0CAAA;ACHZ;ADOI;EACI,SAAA;EACA,sBAAA;ACLR;ADQI;EACI,kBAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;ACNR;ADSI;EACI,kBAAA;EACA,iBAAA;EACA,mBAAA;EACA,eAAA;EACA,uCAAA;ACPR;ADUI;EACI,kBAAA;EACA,mBAAA;EACA,iCAAA;EACA,eAAA;EACA,6BAAA;EACA,QAAA;EACA,SAAA;EACA,wDAAA;ACRR;ADWI;EACI,kBAAA;ACTR;ADYI;EACI,qCAAA;EACA,8BAAA;ACVR","file":"definition.component.css"} \ No newline at end of file diff --git a/src/app/components/main/css/navbar.component.css b/src/app/components/main/css/navbar.component.css new file mode 100644 index 0000000..33bd05c --- /dev/null +++ b/src/app/components/main/css/navbar.component.css @@ -0,0 +1,105 @@ +.nav { + display: flex; + flex-direction: row; + align-items: center; + padding: 1rem; + background-color: var(--navbar-bg); + box-shadow: var(--navbar-shadow); + position: sticky; + top: 0; + z-index: 99; +} +.nav--wrapper { + width: min(98%, 1200px); + margin-inline: auto; + display: flex; + flex-direction: row; + align-items: center; +} +.nav__settings { + margin-left: auto; + display: flex; + gap: 1rem; + align-items: center; +} +.nav__dropdown { + padding: 0.25rem 1rem; + border-right: 1px solid rgb(117, 117, 117); + position: relative; + min-width: 155px; +} +.nav__dropdown__selected { + text-align: center; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + cursor: pointer; +} +.nav__dropdown__selected #selected__font { + margin-right: 0.5rem; +} +.nav__dropdown__list { + list-style: none; + border-radius: 10px; + padding: 1rem 1.5rem; + right: 5px; + transform: scaleY(0); + opacity: 0; + transform-origin: top; + z-index: 99; + position: absolute; + background: var(--secondary-bg-color); + transition: transform 0.5s, opacity 0.5s; +} +.nav__dropdown__list__item { + margin-bottom: 0.5rem; + display: block; + cursor: pointer; +} +.nav__dropdown__list__item:hover { + color: var(--primary-purple); +} +.nav__dropdown__list.active { + display: grid; + transform: scaleY(1); + opacity: 1; + gap: 0.5rem; +} +.nav__dark-toggler { + display: flex; + gap: 0.5rem; +} +.nav .switch { + position: relative; + font-size: 17px; + display: inline-block; + width: 65px; + height: 26px; + border-radius: 100px; + background-color: #757575; +} +.nav .switch:hover { + background-color: var(--primary-purple); +} +.nav .switch input[type=checkbox] { + display: none; +} +.nav .switch .slider { + position: absolute; + inset: 0; + cursor: pointer; +} +.nav .switch .slider::after { + position: absolute; + width: 20px; + height: 20px; + border-radius: 100%; + inset: 0; + margin: auto 0; + transform: translateX(5px); + content: ""; + background-color: var(--main-bg-color); +} +.nav .switch input:checked + .slider::after { + transform: translateX(40px); +}/*# sourceMappingURL=navbar.component.css.map */ \ No newline at end of file diff --git a/src/app/components/main/css/navbar.component.css.map b/src/app/components/main/css/navbar.component.css.map new file mode 100644 index 0000000..91564bb --- /dev/null +++ b/src/app/components/main/css/navbar.component.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../navbar/navbar.component.scss","navbar.component.css"],"names":[],"mappings":"AAAA;EACI,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,aAAA;EACA,kCAAA;EACA,gCAAA;EACA,gBAAA;EACA,MAAA;EACA,WAAA;ACCJ;ADCI;EACI,uBAAA;EACA,mBAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACCR;ADEI;EACI,iBAAA;EACA,aAAA;EACA,SAAA;EACA,mBAAA;ACAR;ADGI;EACI,qBAAA;EACA,0CAAA;EACA,kBAAA;EACA,gBAAA;ACDR;ADGQ;EACI,kBAAA;EACA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;EACA,eAAA;ACDZ;ADGY;EACI,oBAAA;ACDhB;ADKQ;EACI,gBAAA;EACA,mBAAA;EAEA,oBAAA;EACA,UAAA;EACA,oBAAA;EACA,UAAA;EACA,qBAAA;EACA,WAAA;EACA,kBAAA;EACA,qCAAA;EACA,wCAAA;ACJZ;ADMY;EACI,qBAAA;EACA,cAAA;EACA,eAAA;ACJhB;ADMgB;EACI,4BAAA;ACJpB;ADSQ;EACI,aAAA;EACA,oBAAA;EACA,UAAA;EACA,WAAA;ACPZ;ADWI;EACI,aAAA;EACA,WAAA;ACTR;ADYI;EACI,kBAAA;EACA,eAAA;EACA,qBAAA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,yBAAA;ACVR;ADYQ;EACI,uCAAA;ACVZ;ADaQ;EACI,aAAA;ACXZ;ADcQ;EACI,kBAAA;EACA,QAAA;EACA,eAAA;ACZZ;ADcY;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,QAAA;EACA,cAAA;EACA,0BAAA;EACA,WAAA;EACA,sCAAA;ACZhB;ADgBQ;EACI,2BAAA;ACdZ","file":"navbar.component.css"} \ No newline at end of file diff --git a/src/app/components/main/css/search-input.component.css b/src/app/components/main/css/search-input.component.css new file mode 100644 index 0000000..59064b9 --- /dev/null +++ b/src/app/components/main/css/search-input.component.css @@ -0,0 +1,61 @@ +.search { + z-index: 0; + margin-top: 4rem; + margin-bottom: 2.5rem; +} +.search__label { + position: relative; +} +.search__button { + position: absolute; + border: 0; + bottom: 7.5px; + transform: translateY(50%); + background-color: transparent; + right: 20px; + border-radius: var(--radius-size); + cursor: pointer; + z-index: 0; +} +.search__button:disabled { + cursor: auto; +} +.search__input { + font-size: clamp(1rem, 2vw, 1.25rem); + width: 100%; + border: 0; + outline: none; + padding: clamp(1rem, 2vw, 1.25rem); + border-radius: 10px; + position: relative; +} +.search__input:focus::-moz-placeholder { + position: absolute; + transform: translateY(-17px); +} +.search__input:focus::placeholder { + position: absolute; + transform: translateY(-17px); +} +.search__input::-moz-placeholder { + -moz-transition: transform 0.5s; + transition: transform 0.5s; +} +.search__input::placeholder { + transition: transform 0.5s; +} +.search__input__validation-message { + position: absolute; + inset: 0; + color: red; + font-style: italic; + font-weight: bold; + font-size: clamp(1rem, 2vw, 1.25rem); + transform: translate(0.25rem, clamp(2.45rem, 4vw, 2.55rem)); +} +.search__input__validation-message--hidden { + opacity: 0; +} +.search__input__validation-message--visible { + opacity: 1; +}/*# sourceMappingURL=search-input.component.css.map */ \ No newline at end of file diff --git a/src/app/components/main/css/search-input.component.css.map b/src/app/components/main/css/search-input.component.css.map new file mode 100644 index 0000000..a038b8c --- /dev/null +++ b/src/app/components/main/css/search-input.component.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../search-input/search-input.component.scss","search-input.component.css"],"names":[],"mappings":"AAAA;EACI,UAAA;EACA,gBAAA;EACA,qBAAA;ACCJ;ADCI;EACI,kBAAA;ACCR;ADEI;EACI,kBAAA;EACA,SAAA;EACA,aAAA;EACA,0BAAA;EACA,6BAAA;EACA,WAAA;EACA,iCAAA;EACA,eAAA;EACA,UAAA;ACAR;ADEQ;EACI,YAAA;ACAZ;ADII;EACI,oCAAA;EACA,WAAA;EACA,SAAA;EACA,aAAA;EACA,kCAAA;EACA,mBAAA;EACA,kBAAA;ACFR;ADIQ;EACI,kBAAA;EACA,4BAAA;ACFZ;ADAQ;EACI,kBAAA;EACA,4BAAA;ACFZ;ADKQ;EACI,+BAAA;EAAA,0BAAA;ACHZ;ADEQ;EACI,0BAAA;ACHZ;ADMQ;EACI,kBAAA;EACA,QAAA;EACA,UAAA;EACA,kBAAA;EACA,iBAAA;EACA,oCAAA;EACA,2DAAA;ACJZ;ADMY;EACI,UAAA;ACJhB;ADOY;EACI,UAAA;ACLhB","file":"search-input.component.css"} \ No newline at end of file diff --git a/src/app/components/main/definition/definition.component.html b/src/app/components/main/definition/definition.component.html index 7a506ec..62aed5d 100644 --- a/src/app/components/main/definition/definition.component.html +++ b/src/app/components/main/definition/definition.component.html @@ -6,28 +6,38 @@

{{word.madde }}

-

- - Çokluk, - - - ({{word.telaffuz}}), - - - {{word.lisan}} - -

+
+

+ + Çokluk, + + + ({{word.telaffuz}}), + + + {{word.lisan}} + +

+ +
+ +
+ +
-

+

{{anlamIndex+1}}. - {{anlam}}: - , özel + özel, + {{anlam}}: + {{ word.anlamlarListe[anlamIndex].anlam }}

diff --git a/src/app/components/main/definition/definition.component.scss b/src/app/components/main/definition/definition.component.scss index a8f49c6..c46aaee 100644 --- a/src/app/components/main/definition/definition.component.scss +++ b/src/app/components/main/definition/definition.component.scss @@ -27,14 +27,61 @@ &__types { padding: 0rem 1rem; margin: 0; + display: flex; + align-items: center; + } + + &__play-button--wrapper { + position: relative; + margin-left: auto; + border-radius: 100%; + aspect-ratio: 1; + background-color: var(--secondary-purple); + padding: 1.5rem; + } + + &__play-button { + position: absolute; + border-style: solid; + border-width: 10px 10px 10px 20px; + cursor: pointer; + background-color: transparent; + width: 0; + height: 0; + border-color: transparent transparent transparent var(--primary-purple); + transform: translate(-9px, -10px); + transition: border-color var(--primary-transition-duration) ease-out; + + &:hover { + border-color: transparent transparent transparent #6f07be; + } } &__meaning { margin-block: 2rem; + + &__types { + padding: 0rem 1rem; + } } &__example { font-size: clamp(.5rem, 4vw, 1.5rem); margin: .25rem 1rem 1rem 1rem; } +} + +@media screen and (max-width: 768px) { + .definition { + &__play-button--wrapper { + padding: 1.1rem; + + + } + + &__play-button { + border-width: 7px 7px 7px 14px; + transform: translate(-6px, -7px); + } + } } \ No newline at end of file diff --git a/src/app/components/main/definition/definition.component.ts b/src/app/components/main/definition/definition.component.ts index 9ba018f..46ea3b2 100644 --- a/src/app/components/main/definition/definition.component.ts +++ b/src/app/components/main/definition/definition.component.ts @@ -2,6 +2,8 @@ import { animate, state, style, transition, trigger } from '@angular/animations' import { Component, OnInit, inject } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { Observable, map, of, switchMap } from 'rxjs'; +import { environment } from 'src/app/environments/environment'; +import VoiceCodeResponse from 'src/app/models/voice-code-response'; import { WordErrorResponse } from 'src/app/models/word-error-response'; import { WordResponse } from 'src/app/models/word-response'; import { WordRequestService } from 'src/app/services/word-request.service'; @@ -35,6 +37,12 @@ export class DefinitionComponent implements OnInit { words !: WordResponse[]; wordErrorResponse = new WordErrorResponse(); anlamList: Array = []; + voiceSource !: string | undefined; + playSound() { + if (!this.voiceSource) return + const audio = new Audio(this.voiceSource); + audio.play(); + } searchedWord = this.activatedRoute.paramMap.pipe( map((param) => param.get('word')!), switchMap((word) => { @@ -42,6 +50,11 @@ export class DefinitionComponent implements OnInit { word = word.toLowerCase() return of(word) })).subscribe((word) => { + this.wordService.requestVoiceCode(word).subscribe((responses) => { + const voiceCode = responses.filter((response) => response.seskod).at(0)?.seskod + this.voiceSource = voiceCode ? `${environment.apiUrl}/ses/${voiceCode}.wav` : undefined + } + ) this.wordService.requestWordMeaning(word).subscribe((response: WordResponse[] | WordErrorResponse) => { this.loadWordDefinition(response) this.isRendering = false diff --git a/src/app/models/voice-code-response.ts b/src/app/models/voice-code-response.ts new file mode 100644 index 0000000..d2b3ec7 --- /dev/null +++ b/src/app/models/voice-code-response.ts @@ -0,0 +1,6 @@ +export default interface VoiceCodeResponse { + yazim_id: string + sozu: string + ekler: string + seskod: string +} \ No newline at end of file diff --git a/src/app/partials/_transitions.scss b/src/app/partials/_transitions.scss index 33e60da..5270db4 100644 --- a/src/app/partials/_transitions.scss +++ b/src/app/partials/_transitions.scss @@ -1,50 +1,50 @@ .switch, .search .search__input, .search .search__button { - transition: background-color 0.5s ease-out; + transition: background-color var(--primary-transition-duration) ease-out; } .nav { - transition: box-shadow 0.5s ease-out, background-color 0.5s ease-out; + transition: box-shadow var(--primary-transition-duration) ease-out, background-color var(--primary-transition-duration) ease-out; } .definition { - transition: background-color 0.5s ease-out, color .5s ease-out; + transition: background-color var(--primary-transition-duration) ease-out, color .5s ease-out; &__title { - transition: border .5s ease-out; + transition: border var(--primary-transition-duration) ease-out; } &__meaning { - transition: border-color .5s ease-out; + transition: border-color var(--primary-transition-duration) ease-out; } } .card { - transition: background-color .5s ease-out; + transition: background-color var(--primary-transition-duration) ease-out; &__title { - transition: border .5s ease-out, color .5s ease-out; + transition: border var(--primary-transition-duration) ease-out, color var(--primary-transition-duration) ease-out; } } .slider::after { - transition: transform 0.5s ease-out; + transition: transform var(--primary-transition-duration) ease-out; } .search__input__validation-message { - transition: opacity 0.25s ease-out; + transition: opacity var(--secondary-transition-duration) ease-out; } .nav__dropdown { - transition: background-color .5s ease-out; + transition: background-color var(--primary-transition-duration) ease-out; } .nav__dropdown__list { - transition: background-color .5s ease-out; + transition: background-color var(--primary-transition-duration) ease-out; &__item { - transition: color 0.5s ease-out; + transition: color var(--primary-transition-duration) ease-out; } } \ No newline at end of file diff --git a/src/app/services/word-request.service.ts b/src/app/services/word-request.service.ts index 463dbb8..af6ae73 100644 --- a/src/app/services/word-request.service.ts +++ b/src/app/services/word-request.service.ts @@ -2,6 +2,7 @@ import { HttpClient } from '@angular/common/http'; import { Injectable, inject } from '@angular/core'; import { environment } from '../environments/environment'; import { WordResponse } from '../models/word-response'; +import VoiceCodeResponse from '../models/voice-code-response'; @Injectable({ providedIn: 'root' @@ -11,4 +12,9 @@ export class WordRequestService { requestWordMeaning = (word: string) => this.client .get(`${environment.apiUrl}/gts?ara=${word}`) + + + requestVoiceCode = (word: string) => + this.client + .get(`${environment.apiUrl}/yazim?ara=${word}`) } \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index fdf775c..79d8608 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -15,12 +15,15 @@ --color-scheme: light; --secondary-bg-color: #f5f5f5; --primary-purple: #a545ef; + --secondary-purple: #dabfff; --font-family: sans-serif; --primary-shadow-color: var(--grey); --card-shadow: none; --navbar-shadow: 0px 1px 5px 0px var(--primary-shadow-color); --navbar-bg: var(--main-bg-color); --radius-size: 10px; + --primary-transition-duration: 0.5s; + --secondary-transition-duration: 0.25s; }