diff --git a/CSS/*.css b/CSS/*.css new file mode 100644 index 0000000..e4aa39b --- /dev/null +++ b/CSS/*.css @@ -0,0 +1,283 @@ +* { + margin: 0; + padding: 0; + -moz-user-select: none; + -ms-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -webkit-touch-callout: none; + +} +body{ + width: 100vw; + height: 100vh; + font-family: 'Noto Sans', sans-serif; +} + + +.select-div{ + position: relative; + padding: 10px; + cursor: pointer; + height: 20%; + display: flex; + align-items: center; + margin: auto 0; +} +.select-div label { + text-align: center; + width: fit-content; + cursor: pointer; + color: var(--userTextInput); +} + +.select-options { + padding: 10px 0px; + box-shadow: 0px 1px 4px rgb(122, 122, 122); + background-color: var(--bg); + top: 39px; + overflow: auto; + z-index: 10; +} + +.select-options::-webkit-scrollbar { + display: none; +} +.select-options div { + font-size: 1rem; + padding: 10px; + color: var(--userTextInput); +} +.selected-option { + background-color: var(--hover-light); +} +/* .selected-option:active { + transition: all ease-in .18s; +} */ + +/*? Reusable classes */ + + /** Display */ + .grid { + display: grid; + } + .flex { + display: flex; + } + .disable { + display: none !important; + } + + /** Position of elements */ + .align-center{ + align-items: center; + } + .justify-center{ + justify-content: center; + } + + /** Position */ + .relative{ + position: relative; + } + .absolute{ + position: absolute; + } + .fixed{ + position: fixed; + } + + /** Border */ + .border-radius-50{ + border-radius: 50%; + } + + /** Cursor */ + .pointer{ + cursor: pointer; + } + .default-pointer{ + cursor: default; + } + .pointer-events-none{ + pointer-events: none; + } + + /** Link */ + a{ + text-decoration: none; + } + + /** Img */ + .img{ + width: calc(var(--imageDefaultSize) * var(--times)); + height: calc(var(--imageDefaultSize) * var(--times)); + } + + /** Tooltiptext */ + .nav-right-side .first-profile-div:hover + .tooltiptext, + .search-icon:hover + .tooltiptext, + .article-other-info .test:hover + .tooltiptext, + .article-extra-option-icon:hover + .tooltiptext, + .company-date:hover .tooltiptext{ + visibility: visible; + opacity: 1; + font-size: 0.7em; + } + .tooltiptext{ + position: absolute; + height: fit-content; + width: fit-content; + border-radius: 3px; + padding: 4px 6px; + z-index: 12; + white-space: nowrap; + transition: opacity 0.3s; + font-size: 0.8rem !important; + font-style: normal; + visibility: hidden; + opacity: 0; + background-color: var(--tooltiptext-bg); + color: var(--bg); + font-family: 'Noto Sans', sans-serif; + } + .tooltiptextTop180 { + top: 180%; + } + .tooltiptextTop150 { + top: 150%; + } + .tooltiptextTop120 { + top: 120%; + } + .tooltiptextTop90 { + top: 90%; + } + .nav-right-side .tooltiptext{ + right: 10px; + } + .search-icon-figure .tooltiptext{ + left: 0; + } + .company-date .tooltiptext{ + left: 0; + } + + + span { + font-style: normal; + } + hr{ + margin: auto; + width: 90%; + border: none; + } + .activeProfile{ + background-color: var(--hover-medium) !important; + } + .underline-input-animation{ + display: inline-block; + width: 0px; + height: 2px; + background: var(--blue-light); + position: relative; + -webkit-transition: all ease-in-out .2s; + -o-transition: all ease-in-out .2s; + transition: all ease-in-out .2s; + } + + .background-shadow{ + box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.328); + } + + #overlay{ + opacity: 0; + transition: 200ms ease-in-out; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.666); + pointer-events: none; + z-index: 9; + } + #overlay.active{ + opacity: 1; + pointer-events: all; + } + + .visible{ + visibility: hidden; + } + .position-center{ + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + } + .fal { + display: flex; + align-items: center; + justify-content: center; + } + h1{ + font-size: 1.4rem; + font-weight: 500; + color: var(--title); + display: block; + } + .blue-link{ + font-size: 0.9rem; + color: var(--blue-light); + } + .green-link{ + color: var(--green-light); + } + + .radio-button{ + width: 2rem; + height: 2rem; + border-radius: 50%; + pointer-events: none; + } + .radio-button-border{ + width: 14px; + height: 14px; + border-radius: 50%; + pointer-events: auto; + border: 2px solid var(--font-dark); + } + .radio-button:hover{ + background-color: var(--hover-light); + } + .radio-button.active{ + background-color: var(--side-bar-active); + } + .radio-button-border.active{ + border: 2px solid var(--blue-light); + } + .radio-button-center{ + width: 10px; + height: 10px; + background-color: var(--blue-light); + border-radius: 50%; + transform: scale(0); + transition: ease-in-out .1s all; + } + .radio-button-center.active{ + transform: scale(1); + } + + article{ + padding: 15px; + margin-top: 20px; + border-radius: 9px; + border: 1px solid var(--border-medium); + background-color: var(--bg); + } + + .red-color { + color: var(--red-medium); + } + .yellow-color{ + color: var(--yellow-medium); + } \ No newline at end of file diff --git a/CSS/colors.css b/CSS/colors.css new file mode 100644 index 0000000..91cf6f5 --- /dev/null +++ b/CSS/colors.css @@ -0,0 +1,36 @@ +:root{ + --bg: #ffffff; + --hover-light: #f2f3f4; + --hover-medium: #dddddd; + --hover-dark: #c4c4c4; + + --blue-light:#2d7de9; + --blue-medium:rgb(27, 122, 231); + --blue-dark: #1967d2; + --google-blue: #4486f7; + + --red-medium: rgb(253,29,29); + --yellow-medium: rgb(255,205,0); + --green-light: rgb(6, 146, 6); + + --title: #1f2024; + + --font-light: rgb(187, 183, 183) ; + --font-medium: rgb(122, 122, 122); + --font-dark: #5F6368; + --font-very-dark: #212224; + + --tooltiptext-bg: rgba(89, 93, 97, 0.89); + + --userTextInput:#090a0ab2; + + --shadow: rgb(211, 211, 211); + --border-light: rgba(0,0,0,.16); + --border-medium: #D1D1D1; + --border-dark: rgba(0,0,0,.26); + --border-input: #E0E0E0; + + --imageDefaultSize: 1rem; + + --side-bar-active: #e3edfd; +} diff --git a/CSS/index.css b/CSS/index.css new file mode 100644 index 0000000..563b869 --- /dev/null +++ b/CSS/index.css @@ -0,0 +1,1148 @@ +body{ + display: grid; + grid-template-rows: 65px 1fr; +} + +/*? Navigation Bar */ + + .navigation-bar{ + grid-row: 1/2; + grid-template-columns: 1fr 730px 1fr; + background-color: var(--bg); + box-shadow: 0px 1px 8px var(--font-medium); + border: none; + width: 100%; + height: 65px; + z-index: 0; + } + + /** Navigation Bar Left Side */ + + .nav-left-side{ + grid-column: 1/2; + padding-left: 12px; + } + + /** Menu Burger Icon */ + + .menu-icon{ + width: 48px; + height: 48px; + margin-right: 5px; + } + .menu-icon:hover{ + background-color: var(--hover-light); + } + .menu-burger-icon{ + width: 18px; + height: 2px; + background-color: var(--font-dark); + border-radius: 1px; + } + .menu-burger-icon::before, + .menu-burger-icon::after{ + width: 18px; + height: 2px; + background-color: var(--font-dark); + content: ''; + position: absolute; + border-radius: 1px; + } + .menu-burger-icon::before{ + transform: translateY(-5px); + } + .menu-burger-icon::after{ + transform: translateY(5px); + } + + /** Logo */ + + .logo{ + text-decoration: none; + font-size: 1.35rem; + color: var(--font-dark); + } + + /** Main Search Input */ + + .nav-search{ + grid-column: 2/3; + padding: 0 12px; + } + .main-search-bar-input-div{ + width: 100%; + grid-template-columns: 48px 1fr 48px; + z-index: 0; + } + .main-search-input{ + grid-column: 1/4; + grid-row: 1/2; + height: 48px; + width: 100%; + border-radius: 6px; + background-color: var(--hover-light); + border: none; + padding-left: 50px; + padding-right: 50px; + font-size: 1.1rem; + outline-width: 0; + color: var(--userTextInput); + box-sizing: border-box; + } + .main-search-input::placeholder{ + color: var(--font-light); + } + .main-search-input:focus{ + background-color: var(--bg); + box-shadow: 2px 2px 1px var(--hover-light), + 1px 1px 1px var(--hover-light) inset; + } + + /** Search Bar Icon */ + + i{ + color: var(--font-medium); + } + .search-icon-figure{ + grid-column: 1/2; + grid-row: 1/2; + width: 100%; + height: 100%; + } + .search-icon{ + width: 40px; + height: 40px; + } + .search-icon:hover{ + background-color: var(--hover-medium); + } + + .extra-option-icon{ + grid-row: 1/2; + grid-column: 3/4; + width: 100%; + border-radius: 6px; + } + .extra-option-icon::after{ + content: ''; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-top: 7px solid var(--font-dark); + filter: brightness(1.3); + } + + /** Extra Options */ + + .extra-search,.search-words { + background-color: var(--bg); + border: none; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .extra-search { + grid-template-rows: 0.8fr 1fr 1fr 1fr 0.8fr 0.7fr; + } + .extra-search-options { + --value: 530%; + padding: 0 20px 20px 20px; + bottom: calc((var(--value) * (-1) - 20px)); + width: calc(100% - 64px); + height: var(--value); + box-shadow: 0 1px 5px 0 var(--border-light), + 0 1px 2px 0 var(--border-dark); + } + .search-words { + width: calc(100% - 24px); + height: fit-content; + top: 100%; + box-shadow: 2px 2px 1px var(--hover-light), + 1px 0px 1px var(--hover-light) inset; + + } + .extra-search-options div { + grid-template-columns: 0.28fr 1fr; + grid-template-rows: 1fr; + } + .extra-search-options .extra-search-options-div { + padding: 10px 0; + } + .extra-search-options dt { + font-weight: 300; + } + .extra-search-options div label { + display: flex; + align-items: center; + } + .underline-input-animation { + grid-column: 2/3; + bottom: 1px; + } + .extra-search-options input:active, + .extra-search-options input:focus { + border: none; + transition: ease-in-out all .25s; + } + .extra-search-options input:active + .underline-input-animation, + .extra-search-options input:focus + .underline-input-animation { + width: 100%; + } + .extra-option-select { + width: 20%; + height: 70%; + margin: auto 0; + padding-left: 10px ; + font-size: 0.8rem; + background-color: transparent; + border: none; + outline: none; + -webkit-appearance: none; + -moz-appearance: none; + box-shadow: none; + } + .option-icon-select { + top: calc(50% - 3px); + bottom: calc(50% - 3px); + left: 85%; + pointer-events: none; + } + .option-icon-select::after { + content: ''; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 6px solid var(--font-dark); + filter: brightness(1.3); + } + .extra-search-options input { + width: 100%; + border: none; + border-bottom: 1px solid var(--border-input); + background-color: transparent; + outline-width: 0px; + font-size: 1.07rem; + } + .extra-option-button-div { + justify-content: flex-end; + } + .extra-option-btn { + height: 100%; + width: 68px; + border: none; + font-size: 0.89rem; + outline: none; + padding: 8px; + border-radius: 6px; + } + .ext-opt-submit { + background-color: var(--blue-medium); + color: var(--bg); + } + .ext-opt-submit-disable { + background-color: var(--shadow) !important; + color: var(--bg) !important; + cursor: default !important; + } + .ext-opt-reset { + margin-right: 12px; + color: var(--font-dark); + background-color: var(--bg); + } + .extra-search-options, + .extra-option-label1, + .extra-option-label2, + .extra-option-label3, + .extra-option-label4 { + color: var(--font-dark); + font-weight: normal; + font-size: 0.9rem; + } + .extra-search-options .select-div { + width: 80px; + } + .time-select { + width: 120%; + padding: 0; + top: 0; + left: 0; + box-shadow: 0px 1px 6px 2px var(--shadow); + } + .time-select div { + font-size: 0.87rem; + padding: 8px; + } + + .search-words div { + height: 2rem; + padding: 0 20px; + } + .search-words div.active { + background-color: var(--hover-light); + } + .search-words div:last-child { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .search-words span { + margin: auto 0; + } + .search-words hr { + border-top: 1px solid var(--hover-medium); + left: 0; + right: 0; + top: 0; + width: 96%; + margin: auto; + } + + /** Navigation Right Side */ + + .nav-right-side > * { + float: right; + } + .link { + padding: 9px 13px; + margin-right: 15px; + } + .login { + background-color: var(--blue-medium); + border-radius: 7px; + color: var(--bg); + } + .login:hover { + filter: brightness(1.06); + } + + .navigation-profile-img{ + --times: 2.2; + } + .first-profile-div{ + width: 2.8rem; + height: 2.8rem; + margin-right: 15px; + } + .first-profile-div:hover{ + background-color: var(--hover-light); + } + .first-profile-div-active{ + background-color: var(--hover-medium); + } + .tooltiptext-name{ + color: var(--hover-dark); + } + + /** Profile Options */ + + .profile-extra-options{ + right: 0px; + top: 100%; + grid-template-rows: 230px 10px 1fr 1fr; + width: 260px; + height: 360px; + border-radius: 6px; + text-align: center; + background-color: var(--bg); + border: none; + box-shadow: 1px 1px 2px 0px var(--border-medium), + 1px 1px 1px 0px var(--border-medium) inset; + border-radius: 2px; + right: 10px; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + .profile-options-profile-img { + --times: 5.625; + } + .profile-extra-options .profile-img-link span{ + font-size: 3.5rem; + } + .change-profile-picture{ + width: 1.8rem; + height: 1.8rem; + right: 5.3rem; + bottom: 0.4rem; + background-color: var(--bg); + border: 1px solid var(--border-medium); + z-index: 11; + } + .emailProfile{ + padding-top: 5px; + color: var(--font-dark); + } + .manage-profile-extra-options > *{ + padding: 10px 20px; + border: 1px solid var(--border-medium); + border-radius: 10px; + color: var(--userTextInput); + } + .manage-profile-extra-options a:hover{ + background-color: var(--hover-light); + } + .profile-extra-options hr { + border-top: 1px solid var(--hover-medium); + } + .extra-options-logout a,.extra-options-settings a{ + color: var(--font-dark); + } + .extra-options-logout a { + padding: 10px 20px; + border: 1px solid var(--hover-medium); + border-radius: 2px; + transition: all ease-in-out .2s; + } + .extra-options-logout a:hover{ + background-color: var(--hover-light); + } + #profile-extra-options .grid .profile-img-link .img:hover{ + filter: brightness(0.96); + } + + + +/*? Main Content */ + + main { + grid-row: 2/3; + background-color: var(--bg); + overflow: auto; + } + .side-bar{ + left: 0; + top: 65px; + height: 100%; + width: 17.5rem; + overflow: hidden; + } + .side-bar-content{ + font-size: 0.875rem; + height: 100%; + width: 17.5rem; + padding: 15px 0; + left: 0px; + transition: all ease-in-out 0.3s; + grid-template-rows: 3rem 3rem 3rem 3rem 0.9rem 3rem 0.9rem 3rem 3rem 3rem 3rem 3rem 3rem 0.9rem 3rem 3rem 3rem 3rem 1fr; + } + .side-bar-content a, .side-bar-content .language{ + padding-left: 30px; + } + .side-bar-content a{ + display: flex; + align-items: center; + color: var(--font-dark); + } + .side-bar-content a.active{ + color: var(--blue-light); + } + .side-menu-categories{ + border-top-right-radius: 25px; + border-bottom-right-radius: 25px; + } + .side-bar-content hr{ + border-top: 1px solid var(--hover-medium); + } + .side-bar-content a{ + cursor: pointer; + } + .language{ + margin: auto 0; + } + .language > *{ + display: block; + color: #3c4043; + text-decoration: none; + } + + .language:hover > *{ + color: var(--blue-light); + } + .side-bar i{ + color: var(--font); + padding-right: 0.5rem; + width: 1.3rem; + } + .side-bar span{ + font-weight: 400; + } + .side-bar strong{ + font-weight: 600; + } + .side-bar a:hover i,.side-bar a:hover{ + color: var(--blue-light); + } + .side-bar footer{ + color: var(--font-medium); + } + .side-bar footer span{ + width: 1px; + } + #main .side-bar footer a{ + font-size: 0.85rem; + } + .side-bar footer a:hover{ + color: var(--font-dark); + } + .side-menu-active, a .side-menu-active { + background-color: var(--side-bar-active) !important; + color: var(--blue-light) !important; + } + .side-bar-content footer{ + grid-template-rows: calc(100% - 107px) 6%; + padding-bottom: 15px; + } + .side-bar-content footer div{ + grid-row: 2/3; + padding-left: 2rem; + display: flex; + align-items: flex-start; + justify-content: flex-start; + } + .side-bar-content footer div > *{ + padding: 5px; + text-decoration: none; + font-size: 0.9rem; + text-decoration: none; + color: var(--font-dark); + transition: ease-in-out .12s; + } + .side-bar-content footer div a:hover { + text-decoration: underline; + } + .sidebar-help i{ + padding-left: 0.5rem; + } + + .about-sidebar-content{ + left: -100%; + transition: all ease-in-out .3s; + border-right: 1px solid var(--border-medium); + border-top: 1px solid var(--border-medium); + background-color: var(--bg); + } + + .about-sidebar-content.active{ + left: 0%; + } + .header-about > *{ + font-size: 1.1rem; + font-weight: 400; + } + .header-about a{ + width: fit-content; + } + .header-about i{ + padding-right: 5px; + } + .about-container{ + grid-column: 1/4; + } + /** Main Section */ + .main-content-section { + width: 1180px; + min-width: 500px; + height: 100%; + margin-top: 3rem; + grid-template-columns: 750px 1fr; + } + .main-content-section figure article:last-child { + margin-bottom: 5rem; + } + main section #main-content-container, + main section #main-side-content-container{ + margin: 12px; + } + .header-main-content{ + display: flex; + justify-content: space-between; + } + .header-main-content a{ + align-items: flex-end; + justify-content: flex-end; + } + #coronavirus-article{ + grid-template-columns: 1fr 15px 10px; + } + #coronavirus-article > *{ + padding: 5px; + } + .coronavirus-article .blue-link span{ + color: var(--font-dark); + } + .coronavirus-article:hover{ + transition: all ease-in-out 0.3s; + box-shadow: 0px 0px 3px 2px var(--hover-light); + } + + .main-article { + grid-template-columns: 1fr; + grid-template-rows: 1fr 2.4rem; + } + + .main-article.img { + grid-template-columns: 1fr 18px 150px; + grid-template-rows: 1fr 2.4rem; + } + + .main-article.img header { + grid-row: 1/2; + grid-column: 1/2; + } + .main-article.img footer { + grid-row: 2/3; + grid-column: 1/4; + + } + .main-article header h1:not(.category) { + font-size: 1.3rem; + font-weight: bold; + } + .main-article header:hover h1 { + text-decoration: underline; + } + .main-article header aside, + article.category header aside { + display: inline-flex; + } + .main-article header aside{ + height: 2rem; + } + .article-ext-icon-save,.article-ext-icon-more { + padding: 0 4px; + } + .company-date{ + color: var(--font-medium); + display: flex; + align-items: center; + justify-content: center; + padding: 0 10px 0 0; + } + section.category .company-date{ + font-size: 0.9em; + } + .main-article header:hover aside .article-ext-icon-save, + .main-article header:hover aside .article-ext-icon-more, + article.category header:hover aside .article-ext-icon-save, + article.category header:hover aside .article-ext-icon-more { + visibility: visible; + } + .article-ext-icon-save,.article-ext-icon-more { + visibility: hidden; + } + .article-ext-icon-save .article-extra-option-icon, + .article-ext-icon-more .article-extra-option-icon { + display: flex; + width: 1.5rem; + height: 1.5rem; + border-radius: 50%; + } + + .article-ext-icon-save i:hover, + .article-ext-icon-more i:hover{ + box-shadow: 1px 2px 3px 1px var(--shadow); + } + + .main-article.img img { + grid-row: 1/3; + grid-column: 3/4; + } + .main-article img{ + width: 100%; + height: auto; + border-radius: 10px; + margin: 0 auto; + } + .article-extra-option { + width: 1.5rem; + height: 1.5rem; + border-radius: 50%; + margin-left: 8px; + } + .article-other-info { + padding-right: 10px; + } + .article-extra-option{ + width: 9rem; + height: 7rem; + top: 26px; + left: 60%; + background-color: var(--bg); + border: 1px solid var(--border-medium); + border-radius: 4px; + grid-template-rows: 1fr 1fr 1fr; + padding: 10px 0px; + z-index: 1; + } + .article-extra-option-icon{ + align-items: center; + justify-content: center; + } + .article-extra-option div:hover{ + background-color: var(--hover-light); + } + .article-extra-option div i { + padding: 10px 12px; + width: 10px; + height: 10px; + box-shadow: none; + display: flex; + align-items: center; + justify-content: center; + } + .article-extra-option div i:hover { + box-shadow: none; + } + .article-extra-option div { + color: var(--font-dark); + } + .article-main-content { + color: var(--font-very-dark); + font-size: 1.1rem; + font-weight: 500; + text-align: justify; + } + .main-article footer { + justify-content: space-between; + } + .main-article footer a { + margin: auto 0; + bottom: 0; + left: 0; + padding: 8px 8px 8px 0; + } + .main-article footer i{ + justify-content: flex-end; + align-self: flex-end; + margin: auto 0; + padding: 8px; + bottom: 0; + right: 0; + transition: all ease-in-out .3s; + } + .main-article footer a i { + padding: 8px 8px 8px 0; + } + article.category { + grid-template-columns: 1fr 18px 110px; + grid-template-rows: 5.8rem 10px 1fr 10px 0.9rem; + } + article.category header { + grid-column: 1/2; + } + h1.category { + height: 3rem; + font-size: 2rem; + } + article.category header span:nth-child(3) { + color: var(--font-medium); + font-size: 0.9rem; + } + i.category.img { + font-size: 90px; + padding-top: 1rem; + grid-row: 1/5; + grid-column: 3/4; + display: flex; + justify-content: center; + } + article.category section { + grid-row: 3/4; + grid-column: 1/2; + } + section.category header { + grid-template-rows: 1.1rem 1fr 2rem 10px; + grid-template-columns: 20px 1fr; + } + section.category header h1 { + font-weight: bold; + font-size: 1rem; + padding: 0; + margin: auto 0; + cursor: pointer; + grid-row: 1/3; + grid-column: 2/3; + } + section.category header:hover h1 { + text-decoration: underline; + } + section.category header figure { + grid-template-rows: 1rem 1fr; + } + section.category header .dot { + font-size: 0.2rem; + color: var(--title); + margin: auto; + grid-row: 1/2; + grid-column: 1/2; + } + section.category .article-other-info { + grid-row: 3/4; + grid-column: 2/3; + } + section.category header .news-category { + height: auto; + max-height: 3.5rem; + } + section.category header .news-category { + margin-bottom: 15px; + } + section.category header .news-category, + section.category header .news-category h1, + section.category header .news-category aside { + display: inline; + } + section.category header .news-category aside { + padding: 8px 5px; + } + article.category footer { + grid-row: 5/6; + margin: auto 0; + } + article.category footer a { + padding: 8px 0; + } + + /** Main Aside */ + #main-side-content-container{ + padding-top: 25px; + } + + .weather-article{ + height: 232px; + width: calc(100% - 40px); + grid-template-rows: 4.2rem 15px 1fr 15px 1.5rem; + padding-bottom: 0; + } + .weather-article .weather-main-header{ + grid-template-columns: 88px 1fr 100px; + } + + .weather-article header > * { + grid-row: 1/2; + margin: auto; + } + .weather-article header label{ + font-size: 1.3rem; + color: var(--font-dark); + text-align: center; + } + .weather-article header span { + font-size: 1.8rem; + font-weight: 300; + color: var(--font-dark); + } + .weather-article .weather-3-days{ + grid-row: 3/4; + grid-template-columns: 1fr 1fr 1fr; + } + .weather-3-days section{ + grid-row: 1/2; + } + + .weather-3-days section:not(:nth-child(3)){ + border-right: 1px solid var(--border-medium); + } + .weather-3-days header{ + text-align: center; + font-weight: 300; + + } + .weather-3-days div{ + grid-template-columns: 60px 1fr; + } + .weather-3-days div span { + margin: auto; + color: var(--font-very-dark); + font-weight: 300; + } + .far,.fa,.fas { + display: flex; + } + .weather-3-days img, .weather-3-days i{ + width: 40px; + height: 40px; + margin: auto; + } + .weather-article footer{ + grid-row: 5/6; + grid-template-columns: 1fr 1fr 1fr; + } + .weather-article footer section > *{ + grid-row: 1/2; + } + .weather-article footer section:first-child { + grid-template-columns: 1fr 1fr 1fr 1fr; + } + .weather-article footer section:first-child div { + display: flex; + align-items: center; + justify-content: center; + color: var(--font-medium); + } + .weather-article footer section:first-child div.active { + background-color: var(--hover-light); + } + .weather-article footer section:first-child div:first-child { + border-left: 1px solid var(--border-medium); + } + .weather-article footer section:first-child div { + border-right: 1px solid var(--border-medium); + } + .weather-article footer section:last-child { + grid-column: 3/4; + } + .weather-article footer section:last-child a { + padding-left: 10px; + color: var(--font-medium); + margin: auto; + font-size: 0.85rem; + } + /* Other */ + /** Search Countries */ + .select-country{ + top: 50%; + left: 50%; + transform: translate(-50%,-50%) scale(0.9); + transition: all ease-in-out .1s; + border: 1px solid var(--hover-medium); + border-radius: 5px; + z-index: -10; + background-color: var(--bg); + width: 550px; + max-width: 90%; + height: 580px; + grid-template-rows: 4rem 4rem 2.8rem 0.1fr 2.8rem 1fr 2.5rem; + padding: 20px 0; + } + .select-country.active{ + z-index: 10; + transform: translate(-50%,-50%) scale(1); + } + .x-icon{ + top: 10px; + right: 10px; + width: 40px; + height: 40px; + } + .x-icon:active{ + background-color: var(--hover-light); + } + .select-country .blue-link{ + font-weight: 500; + } + .select-country h3{ + font-size:1.6rem; + font-weight: 400; + margin-bottom: 10px; + margin: auto 20px; + } + .select-country h4{ + font-size: 1.2rem; + font-weight: 300; + margin-bottom: 25px; + margin: 5px 20px; + color: var(--font-medium); + } + .select-country h5{ + font-size: 1rem; + font-weight: 500; + margin-bottom: 12px; + } + .country-search-input-div{ + margin: 0 20px; + grid-template-columns: 20px 1fr; + } + .select-country input[type=text]{ + grid-column: 1/3; + grid-row: 1/2; + height: 2.3rem; + width: 100%; + border-radius: 6px; + background-color: var(--bg); + border: 1px solid var(--shadow); + padding-left: 36px; + font-size: 1rem; + outline-width: 0; + color: var(--userTextInput); + box-sizing: border-box; + } + .search-icon-country{ + grid-column: 1/2; + grid-row: 1/2; + width: 35px; + height: 35px; + border-radius: 50%; + left: 21px; + } + .select-country h6 { + font-size: 1rem; + padding: 0 20px; + } + .radio-button-container{ + height: 2.5rem; + grid-template-columns: 2rem 1fr; + align-items: center; + justify-content: center; + } + .select-country .radio-button-container{ + padding: 0 20px; + } + .select-country .radio-button-container p{ + width: fit-content; + margin-left: 8px; + color: var(--font-very-dark); + } + .select-country .list-of-countries{ + height: 98%; + width: 100%; + overflow: auto; + } + .select-country footer button{ + font-size: 1rem; + border: none; + outline-width: 0; + background-color: transparent; + padding: 8px 10px; + } + .select-country footer{ + justify-content: flex-end; + margin: 0 20px; + } + .about-h1{ + height: 3rem; + font-size: 2rem; + font-weight: 200; + } + + /** Login Options */ + .login-option-div{ + width: 250px; + height: 300px; + top: 50%; + left: 50%; + transform: translate(-50%,-50%) scale(0.8); + padding: 20px; + background-color: var(--bg); + border-radius: 5px; + border: 1px solid var(--shadow); + z-index: -10; + grid-template-rows: 3.4rem 1fr 2rem 20px 2.5rem; + } + .login-option-div.active{ + z-index: 10; + transform: translate(-50%,-50%) scale(1); + } + .login-option-div header{ + grid-row: 1/2; + grid-template-columns: 20px 1fr 20px; + grid-template-rows: 1fr 1fr; + } + .login-option-div header h1{ + grid-row: 2/3; + grid-column: 2/3; + font-size: 1.6rem; + color: var(--font-very-dark); + } + .login-option-div header span{ + grid-row: 1/2; + grid-column: 2/3; + font-size: 1.2rem; + color: var(--font-very-dark); + } + .google-facebook-links{ + grid-row: 2/4; + margin: auto 0; + } + .google-facebook-links div { + margin: auto; + } + .google-facebook-links .external-login-container:not(:last-child){ + margin-bottom: 8px; + } + .login-option-div hr{ + border-bottom: 1px solid var(--hover-medium); + width: 100%; + } + .login-option-div .or-login{ + background-color: var(--bg); + padding: 4px 12px; + left: 128px; + bottom: 57px; + color: var(--font-dark); + } + .fa.fa-github,.fab.fa-facebook{ + display: flex; + } + .github-login-button{ + --color: var(--font-very-dark); + background-color: var(--font-very-dark); + } + .facebook-login-button{ + background-color: #4267B2; + } + .external-login-container label,.github-login-button .fa,.fa-facebook{ + color: var(--bg); + } + .login-other-options{ + margin: auto 0; + } + .login-other-options a:first-child{ + float: left; + } + .login-other-options a:last-child{ + float: right; + } + + .external-login-container{ + width: 100%; + padding-top: 3px; + padding-bottom: 0; + transition: all ease-in .2s; + } + .external-login-container:hover { + padding-top: 0; + padding-bottom: 3px; + } + .external-login-botton { + width: 96%; + height: 50px; + border-radius: 4px; + border: 1px solid var(--color); + transition: all ease-in-out .1s; + grid-template-columns: 50px 1fr; + } + .external-login-container:hover .external-login-botton{ + box-shadow: 0px 1px 10px var(--font-medium); + } + + .google-login-button { + --color: var(--google-blue); + } + .google-login-button label{ + background-color: var(--google-blue); + font-weight: 500; + } + .icons8-google { + display: inline-block; + width: 22px; + height: 22px; + background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iNDIiIGhlaWdodD0iNDIiCnZpZXdCb3g9IjAgMCA0OCA0OCIKc3R5bGU9IiBmaWxsOiMwMDAwMDA7Ij48cGF0aCBmaWxsPSIjRkZDMTA3IiBkPSJNNDMuNjExLDIwLjA4M0g0MlYyMEgyNHY4aDExLjMwM2MtMS42NDksNC42NTctNi4wOCw4LTExLjMwMyw4Yy02LjYyNywwLTEyLTUuMzczLTEyLTEyYzAtNi42MjcsNS4zNzMtMTIsMTItMTJjMy4wNTksMCw1Ljg0MiwxLjE1NCw3Ljk2MSwzLjAzOWw1LjY1Ny01LjY1N0MzNC4wNDYsNi4wNTMsMjkuMjY4LDQsMjQsNEMxMi45NTUsNCw0LDEyLjk1NSw0LDI0YzAsMTEuMDQ1LDguOTU1LDIwLDIwLDIwYzExLjA0NSwwLDIwLTguOTU1LDIwLTIwQzQ0LDIyLjY1OSw0My44NjIsMjEuMzUsNDMuNjExLDIwLjA4M3oiPjwvcGF0aD48cGF0aCBmaWxsPSIjRkYzRDAwIiBkPSJNNi4zMDYsMTQuNjkxbDYuNTcxLDQuODE5QzE0LjY1NSwxNS4xMDgsMTguOTYxLDEyLDI0LDEyYzMuMDU5LDAsNS44NDIsMS4xNTQsNy45NjEsMy4wMzlsNS42NTctNS42NTdDMzQuMDQ2LDYuMDUzLDI5LjI2OCw0LDI0LDRDMTYuMzE4LDQsOS42NTYsOC4zMzcsNi4zMDYsMTQuNjkxeiI+PC9wYXRoPjxwYXRoIGZpbGw9IiM0Q0FGNTAiIGQ9Ik0yNCw0NGM1LjE2NiwwLDkuODYtMS45NzcsMTMuNDA5LTUuMTkybC02LjE5LTUuMjM4QzI5LjIxMSwzNS4wOTEsMjYuNzE1LDM2LDI0LDM2Yy01LjIwMiwwLTkuNjE5LTMuMzE3LTExLjI4My03Ljk0NmwtNi41MjIsNS4wMjVDOS41MDUsMzkuNTU2LDE2LjIyNyw0NCwyNCw0NHoiPjwvcGF0aD48cGF0aCBmaWxsPSIjMTk3NkQyIiBkPSJNNDMuNjExLDIwLjA4M0g0MlYyMEgyNHY4aDExLjMwM2MtMC43OTIsMi4yMzctMi4yMzEsNC4xNjYtNC4wODcsNS41NzFjMC4wMDEtMC4wMDEsMC4wMDItMC4wMDEsMC4wMDMtMC4wMDJsNi4xOSw1LjIzOEMzNi45NzEsMzkuMjA1LDQ0LDM0LDQ0LDI0QzQ0LDIyLjY1OSw0My44NjIsMjEuMzUsNDMuNjExLDIwLjA4M3oiPjwvcGF0aD48L3N2Zz4=') 50% 50% no-repeat; + background-size: 100%; + } + + /** Responsiveness */ + @media screen and (max-width: 930px) { + .navigation-bar{ + grid-template-columns: 120px 1fr 85px; + } + .main-search-input,.extra-option-icon{ + display: none; + } + .search-icon-figure{ + grid-column: 3/4; + } + .side-bar-content { + background-color: var(--bg); + border: 1px solid var(--border-medium); + overflow: auto; + z-index: 2; + } + + } + \ No newline at end of file diff --git a/JS/icon.js b/JS/icon.js new file mode 100644 index 0000000..afc1a97 --- /dev/null +++ b/JS/icon.js @@ -0,0 +1,187 @@ +window.FontAwesomeKitConfig = { + "asyncLoading": { + "enabled": false + }, + "autoA11y": { + "enabled": true + }, + "baseUrl": "https://kit-pro.fontawesome.com", + "detectConflictsUntil": null, + "license": "pro", + "method": "css", + "minify": { + "enabled": true + }, + "v4FontFaceShim": { + "enabled": true + }, + "v4shim": { + "enabled": true + }, + "version": "latest" +}; +! function () { + function r(e) { + var t, n = [], + i = document, + o = i.documentElement.doScroll, + r = "DOMContentLoaded", + a = (o ? /^loaded|^c/ : /^loaded|^i|^c/).test(i.readyState); + a || i.addEventListener(r, t = function () { + for (i.removeEventListener(r, t), a = 1; t = n.shift();) t() + }), a ? setTimeout(e, 0) : n.push(e) + }! function () { + if (!(void 0 === window.Element || "classList" in document.documentElement)) { + var e, t, n, i = Array.prototype, + o = i.push, + r = i.splice, + a = i.join; + d.prototype = { + add: function (e) { + this.contains(e) || (o.call(this, e), this.el.className = this.toString()) + }, + contains: function (e) { + return -1 != this.el.className.indexOf(e) + }, + item: function (e) { + return this[e] || null + }, + remove: function (e) { + if (this.contains(e)) { + for (var t = 0; t < this.length && this[t] != e; t++); + r.call(this, t, 1), this.el.className = this.toString() + } + }, + toString: function () { + return a.call(this, " ") + }, + toggle: function (e) { + return this.contains(e) ? this.remove(e) : this.add(e), this.contains(e) + } + }, window.DOMTokenList = d, e = Element.prototype, t = "classList", n = function () { + return new d(this) + }, Object.defineProperty ? Object.defineProperty(e, t, { + get: n + }) : e.__defineGetter__(t, n) + } + + function d(e) { + for (var t = (this.el = e).className.replace(/^\s+|\s+$/g, "").split(/\s+/), n = 0; n < t.length; n++) o.call(this, t[n]) + } + }(); + + function a(e) { + var t, n, i, o; + prefixesArray = e || ["fa"], prefixesSelectorString = "." + Array.prototype.join.call(e, ",."), t = document.querySelectorAll(prefixesSelectorString), Array.prototype.forEach.call(t, function (e) { + n = e.getAttribute("title"), e.setAttribute("aria-hidden", "true"), i = !e.nextElementSibling || !e.nextElementSibling.classList.contains("sr-only"), n && i && ((o = document.createElement("span")).innerHTML = n, o.classList.add("sr-only"), e.parentNode.insertBefore(o, e.nextSibling)) + }) + } + var d = function (e, t) { + var n = document.createElement("link"); + n.href = e, n.media = "all", n.rel = "stylesheet", t && t.detectingConflicts && t.detectionIgnoreAttr && n.setAttributeNode(document.createAttribute(t.detectionIgnoreAttr)), document.getElementsByTagName("head")[0].appendChild(n) + }, + c = function (e, t) { + ! function (e, t) { + var n, i = t && t.before || void 0, + o = t && t.media || void 0, + r = window.document, + a = r.createElement("link"); + if (t && t.detectingConflicts && t.detectionIgnoreAttr && a.setAttributeNode(document.createAttribute(t.detectionIgnoreAttr)), i) n = i; + else { + var d = (r.body || r.getElementsByTagName("head")[0]).childNodes; + n = d[d.length - 1] + } + var c = r.styleSheets; + a.rel = "stylesheet", a.href = e, a.media = "only x", + function e(t) { + if (r.body) return t(); + setTimeout(function () { + e(t) + }) + }(function () { + n.parentNode.insertBefore(a, i ? n : n.nextSibling) + }); + var s = function (e) { + for (var t = a.href, n = c.length; n--;) + if (c[n].href === t) return e(); + setTimeout(function () { + s(e) + }) + }; + + function l() { + a.addEventListener && a.removeEventListener("load", l), a.media = o || "all" + } + a.addEventListener && a.addEventListener("load", l), (a.onloadcssdefined = s)(l) + }(e, t) + }, + e = function (e, t, n) { + var i = t && void 0 !== t.autoFetchSvg ? t.autoFetchSvg : void 0, + o = t && void 0 !== t.async ? t.async : void 0, + r = t && void 0 !== t.autoA11y ? t.autoA11y : void 0, + a = document.createElement("script"), + d = document.scripts[0]; + a.src = e, void 0 !== r && a.setAttribute("data-auto-a11y", r ? "true" : "false"), i && (a.setAttributeNode(document.createAttribute("data-auto-fetch-svg")), a.setAttribute("data-fetch-svg-from", t.fetchSvgFrom)), o && a.setAttributeNode(document.createAttribute("defer")), n && n.detectingConflicts && n.detectionIgnoreAttr && a.setAttributeNode(document.createAttribute(n.detectionIgnoreAttr)), d.parentNode.appendChild(a) + }; + + function s(e, t) { + var n = t && t.addOn || "", + i = t && t.baseFilename || e.license + n, + o = t && t.minify ? ".min" : "", + r = t && t.fileSuffix || e.method, + a = t && t.subdir || e.method; + return e.baseUrl + "/releases/" + ("latest" === e.version ? "latest" : "v".concat(e.version)) + "/" + a + "/" + i + o + "." + r + } + var t, n, i, o, l; + try { + if (window.FontAwesomeKitConfig) { + var u, f = window.FontAwesomeKitConfig, + m = { + detectingConflicts: f.detectConflictsUntil && new Date <= new Date(f.detectConflictsUntil), + detectionIgnoreAttr: "data-fa-detection-ignore", + detectionTimeoutAttr: "data-fa-detection-timeout", + detectionTimeout: null + }; + "js" === f.method && (o = m, l = { + async: (i = f).asyncLoading.enabled, + autoA11y: i.autoA11y.enabled + }, "pro" === i.license && (l.autoFetchSvg = !0, l.fetchSvgFrom = i.baseUrl + "/releases/" + ("latest" === i.version ? "latest" : "v".concat(i.version)) + "/svgs"), i.v4shim.enabled && e(s(i, { + addOn: "-v4-shims", + minify: i.minify.enabled + })), e(s(i, { + minify: i.minify.enabled + }), l, o)), "css" === f.method && function (e, t) { + var n, i = a.bind(a, ["fa", "fab", "fas", "far", "fal", "fad"]); + e.autoA11y.enabled && (r(i), n = i, "undefined" != typeof MutationObserver && new MutationObserver(n).observe(document, { + childList: !0, + subtree: !0 + })), e.v4shim.enabled && (e.license, e.asyncLoading.enabled ? c(s(e, { + addOn: "-v4-shims", + minify: e.minify.enabled + }), t) : d(s(e, { + addOn: "-v4-shims", + minify: e.minify.enabled + }), t)); + e.v4FontFaceShim.enabled && (e.asyncLoading.enabled ? c(s(e, { + addOn: "-v4-font-face", + minify: e.minify.enabled + }), t) : d(s(e, { + addOn: "-v4-font-face", + minify: e.minify.enabled + }), t)); + var o = s(e, { + minify: e.minify.enabled + }); + e.asyncLoading.enabled ? c(o, t) : d(o, t) + }(f, m), m.detectingConflicts && ((u = document.currentScript.getAttribute(m.detectionTimeoutAttr)) && (m.detectionTimeout = u), document.currentScript.setAttributeNode(document.createAttribute(m.detectionIgnoreAttr)), t = f, n = m, r(function () { + var e = document.createElement("script"); + n && n.detectionIgnoreAttr && e.setAttributeNode(document.createAttribute(n.detectionIgnoreAttr)), n && n.detectionTimeoutAttr && n.detectionTimeout && e.setAttribute(n.detectionTimeoutAttr, n.detectionTimeout), e.src = s(t, { + baseFilename: "conflict-detection", + fileSuffix: "js", + subdir: "js", + minify: t.minify.enabled + }), e.async = !0, document.body.appendChild(e) + })) + } + } catch (e) {} +}(); \ No newline at end of file diff --git a/JS/main.js b/JS/main.js new file mode 100644 index 0000000..9fb998b --- /dev/null +++ b/JS/main.js @@ -0,0 +1,640 @@ +window.onload = async () => { + + await getuserLocationInformationValue() + removeActiveSidebarCategory() + if (window.location.pathname.includes('headlines')) headlines() + else if (window.location.pathname.includes('for-you')) forYou() + else if (window.location.pathname.includes('following')) following() + else if (window.location.pathname.includes('library')) library() + else if (window.location.pathname.includes('covid')) category('fa-shield-cross') + else if (window.location.pathname.includes('world')) category('fa-globe-europe') + else if (window.location.pathname.includes('business')) category('fa-building') + else if (window.location.pathname.includes('technology')) category('fa-microchip') + else if (window.location.pathname.includes('entertainment')) category('fa-camera-movie') + else if (window.location.pathname.includes('sports')) category('fa-tennis-ball') + else if (window.location.pathname.includes('health')) category('fa-heartbeat') + else if (window.location.pathname.includes('setings')) setings() + else if (window.location.pathname.includes('about')) about() + else if (window.location.pathname.includes('help')) help() + else if (window.location.pathname.includes('search')) search() + + // changeBackgroundColor() + let selectedCountryAcronym = getCountryAcronym(selectedCountry.innerHTML) + + if(!window.location.search.match(regularExpressions.url.country)) historyPushState(window.location.origin + window.location.pathname, '', `?cou=${selectedCountryAcronym}&`,`bg=${backgroundColor}`) + else { + urlCountryAcronym = window.location.search.match(regularExpressions.url.country)[0].slice(5,7) + if(getAcronymCountry(urlCountryAcronym) === undefined) return openLinks(filePath.headlines) + urlCountry = getAcronymCountry(urlCountryAcronym) + updateCountrySelect(urlCountry) + } + + if(!window.location.search.match(regularExpressions.url.query)) return + + let query = location.search.match(regularExpressions.url.query)[0] + query = removeCharactersInString(query, 3, query.length - 1) + /* Search news */ + +} + +window.onclick = (e) => { + + if(logInOptions.classList.contains('active')) clickInOutCheck(logInOptions,e.target) + else if(!extOptProfile.classList.contains('disable')) clickInOutCheck(extOptProfile,e.target) + else if(selectCountryDiv.classList.contains('active')) clickInOutCheck(selectCountryDiv,e.target) + else if(!extraSearchOptions.classList.contains('disable')) clickInOutCheck(extraSearchOptions,e.target) +} + +window.onkeydown = (e) => { + // console.log(e.keyCode === 91 || e.keyCode === 93) +} + +for(let i = 0; i < document.querySelectorAll('a').length; i++) + document.querySelectorAll('a')[i].addEventListener('click', (e) => { e.preventDefault() }) + +function openLinks(string) { window.location.replace(websiteURL + string) } + +function historyPushState(webiste, string, country, background) { history.pushState({}, null, webiste + string + country + background) } + +function changeBackgroundColor() { document.body.className = window.location.search.match(regularExpressions.url.backgroundColor)[0].slice(4,10) } + +let userLocationInformationValue +async function getuserLocationInformationValue() { userLocationInformationValue = await getUsersCountry() } + +async function getUsersCountry() { + const response = await fetch('https://ipinfo.io?token=ea08233c62eaef') + const data = await response.json() + const userCountryAcronym = data.country.toLowerCase() + const userCountry = getAcronymCountry(userCountryAcronym) + const userCity = data.city + const userRegion = data.region + const userLocation = data.loc + const userTimeZone = data.timezone + return [userCountry,userCountryAcronym,userCity,userRegion,userLocation,userTimeZone] +} +async function getWeather() { + city = changeDiacritics(userLocationInformationValue[3]) + const response = await fetch(`https://cors-anywhere.herokuapp.com/https://api.weatherapi.com/v1/forecast.json?key=4d93fac43abe41dda15152718201307&q=${city}&days=7`) + const data = await response.json() + weatherArrayToday = data.forecast.forecastday[0] + weatherArrayTommorow = data.forecast.forecastday[1] + weatherArray2Days = data.forecast.forecastday[2] +} +function changeDiacritics(string) { + const regexDiacritics = /č|ć|đ|š|ž/g + string = string.split('') + for(let i = 0; i < string.length; i++) + if(regexDiacritics.test(string[i])) + string[i] = diacriticsReplacement[string[i]] + return string +} + +function getLanguageAcronym(target) { + for(let i = 0; i < language.length; i++) + if(language[i] === target) + return languageAcronyms[i] +} + +function getCountryAcronym(target) { + for(let i = 0; i < countries.length; i++) + if(countries[i] === target) + return countryAcronyms[i] +} + +function getAcronymCountry(acronym) { + for(let i = 0; i < countries.length; i++) + if(countryAcronyms[i] === acronym) + return countries[i] +} +function getAcronymLanguage(acronym) { + for(let i = 0; i < language.length; i++) + if(languageAcronyms[i] === acronym) + return language[i] +} + +function updateWeather() { + let header = document.querySelectorAll('.weather-main-header')[0] + header.children[0].src = weatherArrayToday.day.condition.icon + header.children[1].innerHTML = userLocationInformationValue[3] + header.children[2].innerHTML = `${Math.round(weatherArrayToday.day.avgtemp_c) }°C` + + let weatherDate = new Date(weatherArrayToday.date) + let tommorowNumber = weatherDate.getDay() + let dayAfterTomorrow = weatherDate.getDay() + + if(tommorowNumber == 6) tommorowNumber = tommorowNumber - 7 + if(dayAfterTomorrow == 5 || dayAfterTomorrow == 6) dayAfterTomorrow = dayAfterTomorrow - 7 + + let dayAcronymTommorow = daysAcronyms[tommorowNumber + 1] + let dayAcronymIn2Days = daysAcronyms[dayAfterTomorrow + 2] + + let mainWeatherContent = document.querySelectorAll('.weather-3-days')[0] + mainWeatherContent.children[0].firstElementChild.innerHTML = 'Today' + mainWeatherContent.children[1].firstElementChild.innerHTML = dayAcronymTommorow + mainWeatherContent.children[2].firstElementChild.innerHTML = dayAcronymIn2Days + + mainWeatherContent.children[0].children[1].firstElementChild.src = weatherArrayToday.day.condition.icon + mainWeatherContent.children[1].children[1].firstElementChild.src = weatherArrayTommorow.day.condition.icon + mainWeatherContent.children[2].children[1].firstElementChild.src = weatherArray2Days.day.condition.icon + + mainWeatherContent.children[0].children[2].firstElementChild.src = 'http://cdn.weatherapi.com/weather/64x64/day/302.png' + mainWeatherContent.children[1].children[2].firstElementChild.src = 'http://cdn.weatherapi.com/weather/64x64/day/302.png' + mainWeatherContent.children[2].children[2].firstElementChild.src = 'http://cdn.weatherapi.com/weather/64x64/day/302.png' + + mainWeatherContent.children[0].children[1].lastElementChild.innerHTML = `${weatherArrayToday.day.avgtemp_c}°C` + mainWeatherContent.children[1].children[1].lastElementChild.innerHTML = `${weatherArrayTommorow.day.avgtemp_c}°C` + mainWeatherContent.children[2].children[1].lastElementChild.innerHTML = `${weatherArray2Days.day.avgtemp_c}°C` + + mainWeatherContent.children[0].children[2].lastElementChild.innerHTML = `${weatherArrayToday.day.daily_chance_of_rain}%` + mainWeatherContent.children[1].children[2].lastElementChild.innerHTML = `${weatherArrayTommorow.day.daily_chance_of_rain}%` + mainWeatherContent.children[2].children[2].lastElementChild.innerHTML = `${weatherArray2Days.day.daily_chance_of_rain}%` +} + +function changeTemperatureUnit(element) { + const unit = element.innerHTML + const temperatureElements = document.querySelectorAll('.temperature') + let numberString + let number + let newUnit + let convertMethod + if(unit === temperatureElements[0].innerHTML.charAt(temperatureElements[0].innerHTML.length - 1)) return + if(unit === 'F' && temperatureElements[0].innerHTML.charAt(temperatureElements[0].innerHTML.length - 1) === 'C') { + newUnit = '°F' + convertMethod = celsiusToFahrenheit + numberString = -2 + } else if(unit === 'K' && temperatureElements[0].innerHTML.charAt(temperatureElements[0].innerHTML.length - 1) === 'C') { + newUnit = 'K' + convertMethod = celsiusToKelvin + numberString = -2 + } else if(unit === 'F' && temperatureElements[0].innerHTML.charAt(temperatureElements[0].innerHTML.length - 1) === 'K') { + newUnit = '°F' + convertMethod = kelvinToFahrenheit + numberString = -1 + } else if(unit === 'C' && temperatureElements[0].innerHTML.charAt(temperatureElements[0].innerHTML.length - 1) === 'K') { + newUnit = '°C' + convertMethod = kelvinToCelsius + numberString = -1 + } else if(unit === 'C' && temperatureElements[0].innerHTML.charAt(temperatureElements[0].innerHTML.length - 1) === 'F') { + newUnit = '°C' + convertMethod = fahrenheitToCelsius + numberString = -2 + } else if(unit === 'K' && temperatureElements[0].innerHTML.charAt(temperatureElements[0].innerHTML.length - 1) === 'F') { + newUnit = 'K' + convertMethod = fahrenheitToKelvin + numberString = -2 + } + for(let i = 0; i < temperatureElements.length; i ++) { + number = removeCharactersInString(temperatureElements[i].innerHTML, 0, numberString) + number = convertMethod(number) + temperatureElements[i].innerHTML = Math.round(number) + newUnit + } + document.querySelectorAll('.weather-article .active')[0].classList.remove('active') + element.classList.add('active') +} + +function removeCharactersInString(string, frontNumber, backNumber) { return string.slice(frontNumber, backNumber)} + +function celsiusToFahrenheit(number) { return number * 9/5 + 32 } +function celsiusToKelvin(number) { return Number(number) + 273 } +function kelvinToFahrenheit(number) { return (number - 273) * 9/5 + 32 } +function kelvinToCelsius(number) { return number - 273 } +function fahrenheitToCelsius(number) { return (number - 32) * 5/9 } +function fahrenheitToKelvin(number) { return (number - 32) * 5/9 + 273 } + + +/* HEADLINES */ + +async function headlines() { + await getWeather() + updateWeather() + sidebarCategorySelect(document.querySelector('.fa-newspaper').parentElement) +} + +/* SEARCH */ + + function searchArticles() { + + if(!mainSearchIcon.classList.contains('disable') && window.innerWidth < 930) mobileVersionNavigationBar() + else if(mainSearchIcon.classList.contains('disable') && window.innerWidth > 930) desktopVersionNavigationBar() + + if(mainSearchInput.value.length === 0) return + let selectedCountryAcronym = getCountryAcronym(selectedCountry.innerHTML) + if(extraSearchOptions.classList.contains('disable')) searchQuery = addCharacterBetweenSpaceInString(mainSearchInput.value, ' ','+') + if(window.location.pathname.includes('search')) historyPushState(location.origin + location.pathname, `?q=${searchQuery}&`, `cou=${selectedCountryAcronym}&`,`bg=${backgroundColor}`) + else createUrlPath('search', searchQuery) + } + function search() { + searchInputValue = window.location.search.match(regularExpressions.url.query)[0].slice(3, -1) + mainSearchInput.value = addCharacterBetweenSpaceInString(searchInputValue, '+', ' ') + /* Search news articles */ + } + function mobileVersionNavigationBar() { + mainSearchIcon.classList.add('disable') + mainSearchBackLeftIcon.classList.remove('disable') + navigationBarLeft.classList.add('disable') + navigationBarRight.classList.add('disable') + navigationBarMiddle.style.gridColumn = '1/4' + mainSearchFigure.style.gridColumn = '1/2' + mainSearchBackLeftTooltiptext.classList.remove('disable') + mainSearchInput.style.display = 'grid' + extOptIcon.style.display = 'flex' + mainSearchInput.focus() + sideBarContent.style.left = '-100%' + sideMenuCounter = 1 + } + function desktopVersionNavigationBar() { + mainSearchIcon.classList.remove('disable') + mainSearchBackLeftIcon.classList.add('disable') + navigationBarLeft.classList.remove('disable') + navigationBarRight.classList.remove('disable') + navigationBarMiddle.style.gridColumn = '2/3' + mainSearchFigure.style.gridColumn = '3/4' + mainSearchBackLeftTooltiptext.classList.add('disable') + mainSearchInput.style.display = 'none' + extOptIcon.style.display = 'none' + } + +/* FOR YOU */ + +function forYou() { + sidebarCategorySelect(document.querySelector('.fa-user-alt').parentElement) +} + +/* FOLLOWING */ + +function following() { + sidebarCategorySelect(document.querySelector('.fa-star').parentElement) +} + +/* LIBRARY */ + +function library() { + sidebarCategorySelect(document.querySelector('.fa-bookmark').parentElement) +} + +/* CATEGORIES */ + +function category(word) { + sidebarCategorySelect(document.querySelector(`.${word}`).parentElement) +} + +/* SETTINGS */ + +function settings() { +} + +/* ABOUT */ + +function about() { +} + +const regularExpressions = { + url : { + query : /[\?|\&]+[q]+[=].*?[&]/g, + country : /[\?|\&]+[c]+[o]+[u]+[=].{2}/g, + backgroundColor : /[\&]+[b]+[g]+[=].*/g + } +} + + +function sidebarCategorySelect(selectedElement) { + if(selectedElement.classList.contains('side-menu-active')) return + selectedElement.classList.add('side-menu-active') + selectedElement.firstElementChild.classList.add('side-menu-active') + /* Search news articles */ +} +function removeActiveSidebarCategory() { + let oldSelectedElements = document.querySelectorAll('.side-menu-active') + for(let i = 0; i < oldSelectedElements.length; i++) + oldSelectedElements[i].classList.remove('side-menu-active') +} + +mainSearchInput.onfocus = () => { + if(!extraSearchOptions.classList.contains('disable')) manageExtraSearchOptions() + else if(mainSearchInput.value.length !== 0) showSuggestWords() +} + +mainSearchInput.oninput = () => { + if(mainSearchInput.value.length === 0) return hideSuggestWords() + else if(suggestMainInput.classList.contains('disable')) showSuggestWords() + manageSuggestWords() +} +let place = 0 +mainSearchInput.onkeyup = (e) => { + if(e.keyCode === 13) return searchArticles() + if(suggestMainInput.classList.contains('disable') || suggestMainInput.querySelectorAll('div').length === 0) return + + let suggestDivs = suggestMainInput.querySelectorAll('div') + + if(suggestMainInput.querySelectorAll('div.active').length === 0 && (e.keyCode === 40 || e.keyCode === 38)) { + mainSearchInput.value = suggestDivs[place].firstElementChild.innerHTML + return suggestDivs[place].classList.add('active') + } + if(suggestMainInput.querySelectorAll('div.active').length === 1) suggestMainInput.querySelectorAll('div .active')[0].classList.remove('active') + if(e.keyCode === 40) { + if(place === suggestDivs.length - 1) place = - 1 + suggestDivs[place + 1].classList.add('active') + place ++ + mainSearchInput.value = suggestDivs[place].firstElementChild.innerHTML + } + else if(e.keyCode === 38) { + if(place === 0) place = suggestDivs.length + suggestDivs[place - 1].classList.add('active') + place -- + mainSearchInput.value = suggestDivs[place].firstElementChild.innerHTML + } +} + +let mouseSuggestHover = false +function mouseSuggestHoverChange(parameter) { + mouseSuggestHover = parameter +} + +let searchSuggestOptionsArray = [] +let resultArray = [] +let searchSuggestOptionSelectedWord +const maxNumberSuggestWords = 6 + +async function fetchWords() { + const res = await fetch(`https://api.datamuse.com/sug?s=${mainSearchInput.value}`) + return words = await res.json() +} +async function manageSuggestWords() { + let suggestWordsArray = await fetchWords() + if(suggestWordsArray.length === 0) return hideSuggestWords() + + if(suggestWordsArray.length > 6) suggestWordsArray = removeCharactersInString(suggestWordsArray, 4, suggestWordsArray.length) + + suggestBox(suggestWordsArray) + + for(let i = 0; i < suggestMainInput.getElementsByTagName('div').length; i++) { + suggestMainInput.getElementsByTagName('div')[i].onmouseover = () => { + place = i + if(suggestMainInput.querySelectorAll('div.active').length === 1) suggestMainInput.querySelectorAll('div.active')[0].classList.remove('active') + suggestMainInput.getElementsByTagName('div')[i].classList.add('active') + } + suggestMainInput.getElementsByTagName('div')[i].onmouseleave = () => { suggestMainInput.getElementsByTagName('div')[i].classList.remove('active') } + } +} + +const suggestBox = words => { + let wordBoxes = words.map(word => `
+ ${word.word} +
`).join('') + const html = `
${wordBoxes}` + suggestMainInput.innerHTML = html +} + +function removeAllSuggestWordBoxes() { + let numberOfBoxes = suggestMainInput.querySelectorAll('div').length + for(let i = 0; i < numberOfBoxes; i++) + suggestMainInput.querySelector('div').remove() +} + +function selectSuggestedSearchOption(element) { + removeActiveSidebarCategory() + hideSuggestWords() + let elementInnerHTML = addCharacterBetweenSpaceInString(element.firstElementChild.innerHTML, ' ', '+') + mainSearchInput.value = element.firstElementChild.innerHTML + searchArticles() + +} + +function addCharacterBetweenSpaceInString(word ,replace ,character) { return word.replace(replace, character) } + +function updateCountrySelect(country) { + selectedCountry.innerHTML = country + if(location.pathname.includes('search')) string = '&' + else string = '?' + historyPushState(location.origin + location.pathname, location.search.replace(regularExpressions.url.country,`${string}cou=${getCountryAcronym(country)}`), '', '') + hideSelectCountry() +} + +function createUrlPath(type,search) { + let path + let query = '' + if(type === 'headlines') path = filePath.headlines + else if(type === 'search') { + path = filePath.search + query = `q=${search}&` + } + else if(type === 'following') path = filePath.following + else if(type === 'forYou') path = filePath.forYou + else if(type === 'library') path = filePath.library + else if(type === 'covid19') path = filePath.covid19 + else if(type === 'world') path = filePath.world + else if(type === 'business') path = filePath.business + else if(type === 'technology') path = filePath.technology + else if(type === 'entertainment') path = filePath.entertainment + else if(type === 'sports') path = filePath.sports + else if(type === 'health') path = filePath.health + + path = `${path}?${query}cou=${getCountryAcronym(selectedCountry.innerHTML)}&bg=${backgroundColor}` + openLinks(path) +} + +let activeCountry +let suggestCountriesArray = [] +function generateCountries() { + listOfCountries.innerHTML = '' + suggestCountryCountainer.innerHTML = '' + if(selectedCountry.innerHTML.trim() !== userLocationInformationValue[0]) { + if(checkForDoubleCountriesSuggest(userLocationInformationValue[0]) === false) suggestCountriesArray.push(userLocationInformationValue[0]) + } else suggestCountriesArray.push(userLocationInformationValue[0]) + + if(selectedC !== null) suggestCountriesArray.push(selectedC) + + while(suggestCountriesArray.length > 3) { + if(userLocationInformationValue[0] !== suggestCountriesArray[suggestCountriesArray.length - 1] && selectedC !== suggestCountriesArray[suggestCountriesArray.length - 1]) suggestCountriesArray.pop() + else if(userLocationInformationValue[0] !== suggestCountriesArray[suggestCountriesArray.length - 1] || selectedC !== suggestCountriesArray[suggestCountriesArray.length - 1]) suggestCountriesArray.splice(suggestCountriesArray.length - 3,1) + else suggestCountriesArray.splice(suggestCountriesArray.length - 2, 1) + } + suggestCountriesArray.unshift(selectedCountry.innerHTML.trim()) + + removeDuplicates(suggestCountriesArray) + + + for(let i = 0; i < suggestCountriesArray.length; i++) { + if(i === 0 && selectedC == null) createElementsForCountry(suggestCountriesArray[i], 'active', 'suggested-countries') + else if(i === suggestCountriesArray.length - 1 && selectedC !== null) createElementsForCountry(suggestCountriesArray[i], 'active', 'suggested-countries') + else if(suggestCountriesArray[i] !== undefined) createElementsForCountry(suggestCountriesArray[i], 'not-active', 'suggested-countries') + } + selectedC = null + + let newCountriesArray = removeSelectedValuesFromArray(suggestCountriesArray, countries) + for(let i = 0; i < newCountriesArray.length; i++) + createElementsForCountry(newCountriesArray[i],'not-active','normal') +} +function removeDuplicates(array) { array.splice(0, array.length, ...(new Set(array))) } +function removeSelectedValuesFromArray(array, target) { return target.filter(val => !array.includes(val)) } +function checkForDoubleCountriesSuggest(country) { + for(let i = 0; i < suggestCountriesArray.length; i++) + if(suggestCountriesArray[i] === country) + return true + return false +} + +function createElementsForCountry(country, activeCountry, location) { + let aside = document.createElement('aside') + aside.classList.add('radio-button-container','grid') + let figure = document.createElement('figure') + figure.classList.add('radio-button','flex','align-center','justify-center', activeCountry) + let divBorder = document.createElement('div') + divBorder.classList.add('radio-button-border','flex','align-center','justify-center','pointer', activeCountry) + divBorder.onclick = () => {changeSelectedCountry(divBorder)} + let divCenter = document.createElement('div') + divCenter.classList.add('radio-button-center', activeCountry) + + let p = document.createElement('p') + p.innerHTML = country + p.onclick = () => { changeSelectedCountry(p) } + + divBorder.appendChild(divCenter) + figure.appendChild(divBorder) + aside.appendChild(figure) + aside.appendChild(p) + location === 'suggested-countries' ? suggestCountryCountainer.appendChild(aside) : listOfCountries.appendChild(aside) + +} +function changeSelectedCountry(element) { + let aside = element.parentElement + if(element.firstElementChild) aside = aside.parentElement + if(aside.firstElementChild.classList.contains('active')) return + let oldSelect = document.querySelector('.radio-button-container > .active') + if(oldSelect) { + oldSelect.classList.remove('active') + oldSelect.firstElementChild.classList.remove('active') + oldSelect.firstElementChild.firstElementChild.classList.remove('active') + } + aside.firstElementChild.classList.add('active') + aside.firstElementChild.firstElementChild.classList.add('active') + aside.firstElementChild.firstElementChild.firstElementChild.classList.add('active') +} + +let lastSelectedCountry = null +let selectedC = null +let newCountriesArray = [] +searchCountriesInput.oninput = () => { + let input = searchCountriesInput.value + selectedC = document.querySelector('.radio-button-container > .active') + if(selectedC !== null) { + selectedC = selectedC.parentElement.lastElementChild.innerHTML + lastSelectedCountry = selectedC + } + listOfCountries.innerHTML = '' + suggestCountryCountainer.innerHTML = '' + if(!input.trim()){ + elementAdjustmentsSearchCountries() + return generateCountries() + } + elementAdjustmentsSearchCountries('change') + newCountriesArray = [] + for(let i = 0; i < countries.length; i++) + if(countries[i].toLowerCase().includes(input.toLowerCase()) > 0) + newCountriesArray[i] = countries[i] + + newCountriesArray = newCountriesArray.filter((e) => { return e != null }) + for(let i = 0; i < newCountriesArray.length; i++) { + if(newCountriesArray[i] === lastSelectedCountry) createElementsForCountry(newCountriesArray[i],'active','list') + else createElementsForCountry(newCountriesArray[i],'no','list') + } +} + +function elementAdjustmentsSearchCountries(order) { + if(order == 'change') { + document.querySelectorAll('#select-country > h6')[0].classList.add('disable') + document.querySelectorAll('#select-country > h6')[1].classList.add('disable') + listOfCountries.style.gridRow = '3/8' + } else { + document.querySelectorAll('#select-country > h6')[0].classList.remove('disable') + document.querySelectorAll('#select-country > h6')[1].classList.remove('disable') + listOfCountries.style.gridRow = 'auto' + } +} + +let children = [] +let hasChildren = [] +let noChildren = [] +let clickOnOpenedElement +function clickInOutCheck(parent,target) { + + clickOnOpenedElement = false + doesElementHaveChildren(parent) + + while(children.length !== 0) { + doesElementHaveChildren(children[0]) + children.shift() + } + + if(parent === selectCountryDiv || parent === logInOptions){ + if(target === overlay) clickOnOpenedElement = false + else clickOnOpenedElement = true + } else { + if(target.lastElementChild == document.querySelectorAll('script').lastElementChild) clickOnOpenedElement = true + else clickOnOpenedElement = false + } + + checkIfClickIsOnElement(hasChildren,target) + checkIfClickIsOnElement(noChildren,target) + + if(clickOnOpenedElement == false && parent == extraSearchOptions) manageExtraSearchOptions() + else if(clickOnOpenedElement == false && parent == extOptProfile) manageExtraProfileOptions() + else if(clickOnOpenedElement == false && parent == selectCountryDiv) hideSelectCountry() + else if(clickOnOpenedElement == false && parent == logInOptions) manageLoginOptions() + + children = [] + hasChildren = [] + noChildren = [] +} +function doesElementHaveChildren(parent) { + if(parent.children.length > 0){ + hasChildren.push(parent) + for(let i = 0; i < parent.children.length; i++) + children.push(parent.children[i]) + } + else noChildren.push(parent) +} +function checkIfClickIsOnElement(array,target) { + for(let i = 0; i < array.length; i++) + if(array[i] === target) + return clickOnOpenedElement = true +} + + +exactPhrase.oninput = () => { inputExtraSearchOptionChange() } +hasWords.oninput = () => { inputExtraSearchOptionChange() } +excludeWords.oninput = () => { inputExtraSearchOptionChange() } + +function inputExtraSearchOptionChange() { + if(hasWords.value.length === 0 && exactPhrase.value.length === 0 && excludeWords.value.length === 0){ + submitButton.disabled = true + submitButton.classList.add('ext-opt-submit-disable') + submitButton.classList.remove('ext-opt-submit') + } else if (hasWords.value.length !== 0 || exactPhrase.value.length !== 0 || excludeWords.value.length !== 0){ + submitButton.disabled = false + submitButton.classList.remove('ext-opt-submit-disable') + submitButton.classList.add('ext-opt-submit') + } +} + +/* API */ + +// fetchNewsArticles() +// async function fetchNewsArticles() { + + +// const response = await fetch(`http://cors-anywhere.herokuapp.com/`).catch(() => { +// noArticlesFoundNotification() +// }) +// // const response = await fetch(newsApiLoadUrl).catch(err => { +// // noArticlesFoundNotification() +// // }) +// const json = await response.json() +// const articles = await json.articles + +// console.log(articles) + + +// } + + diff --git a/JS/show.js b/JS/show.js new file mode 100644 index 0000000..871fe85 --- /dev/null +++ b/JS/show.js @@ -0,0 +1,130 @@ + +let sideMenuCounter = 0 +function manageSideMenu() { + if(checkWindowWidth900() === true && sideMenuCounter === 0){ + sideBarContent.style.left = '-100%' + sideMenuCounter = 1 + } else if(checkWindowWidth900() === true && sideMenuCounter === 1){ + sideBarContent.style.left = '0%' + sideMenuCounter = 0 + } else if(checkWindowWidth900() === false && sideMenuCounter === 0){ + sideBarContent.style.left = '-100%' + sideMenuCounter = 1 + } else if(checkWindowWidth900() === false && sideMenuCounter === 1) { + sideBarContent.classList.remove('disable') + sideBarContent.style.left = '0%' + sideMenuCounter = 0 + } +} + +function checkWindowWidth900() { + if(window.innerWidth > 930) return true + else return false +} + +function manageExtraSearchOptions() { + if(extraSearchOptions.classList.contains('disable')) { + hideSuggestWords() + extraSearchOptions.classList.remove('disable') + mainSearchInput.style.borderBottomLeftRadius = '0' + mainSearchInput.style.borderBottomRightRadius = '0' + extOptIcon.style.transform = 'rotate(180deg)' + if(!indexTimeSelect.classList.contains('disable')) indexTimeSelect.classList.add('disable') + } else { + extraSearchOptions.classList.add('disable') + mainSearchInput.style.borderBottomLeftRadius = '6px' + mainSearchInput.style.borderBottomRightRadius = '6px' + extOptIcon.style.transform = 'rotate(0deg)' + } +} +function resetExtraSearchOptions() { + indexTimeLabel.innerHTML = 'Anytime' + for(let i = 0; i < 3; i++) + document.querySelectorAll('.extra-search-options > div > input')[i].value = '' +} + +function manageTimeOptionSelect() { + if(indexTimeSelect.classList.contains('disable')){ + indexTimeSelect.classList.remove('disable') + let selectedValue = -32 * showTimeOptionSelect() + indexTimeSelect.style.top = `${selectedValue}px` + } + else indexTimeSelect.classList.add('disable') +} +function showTimeOptionSelect() { + let selectedValue + for(let i = 0; i < 4; i++) { + if(indexTimeSelect.children[i].innerHTML === indexTimeLabel.innerHTML) { + indexTimeSelect.children[i].classList.add('selected-option') + selectedValue = i + } + indexTimeSelect.children[i].onmouseenter = () => { eventHandelerForTimeOptionSelect(indexTimeSelect.children[i],'enter') } + indexTimeSelect.children[i].onmouseleave = () => { eventHandelerForTimeOptionSelect(indexTimeSelect.children[i],'leave') } + } + return selectedValue +} + +let timeOptionSelectValueArray = [] +function eventHandelerForTimeOptionSelect(element,command) { + timeOptionSelectValueArray.push(command) + removeEveryChildsClass(element.parentElement,'selected-option') + if(command == 'enter' || timeOptionSelectValueArray[timeOptionSelectValueArray.length - 1] == 'leave') element.classList.add('selected-option') +} + +function removeEveryChildsClass(parent,className) { + for(let i = 0; i < parent.children.length; i++) + parent.children[i].classList.remove(className) +} + +function selectValue(selectedElement) { + event.stopPropagation() + indexTimeLabel.innerHTML = selectedElement.innerHTML + selectedElement.parentElement.classList.add('disable') +} + +function showSuggestWords() { + mainSearchInput.style.borderBottomLeftRadius = '0' + mainSearchInput.style.borderBottomRightRadius = '0' + suggestMainInput.classList.remove('disable') +} +function hideSuggestWords() { + mainSearchInput.style.borderBottomLeftRadius = '6px' + mainSearchInput.style.borderBottomRightRadius = '6px' + suggestMainInput.classList.add('disable') + removeAllSuggestWordBoxes() +} + +function hideSelectCountry() { + selectCountryDiv.classList.remove('active') + overlay.classList.remove('active') + searchCountriesInput.value = '' +} + +function showSelectCountry() { + selectCountryDiv.classList.add('active') + overlay.classList.add('active') + elementAdjustmentsSearchCountries() + generateCountries() +} +function hideSelectCountry() { + selectCountryDiv.classList.remove('active') + overlay.classList.remove('active') + searchCountriesInput.value = '' + selectedC = null +} + +function manageLoginOptions() { + if(!logInOptions.classList.contains('active')) { + logInOptions.classList.add('active') + overlay.classList.add('active') + } else { + logInOptions.classList.remove('active') + overlay.classList.remove('active') + } +} + +function resetExtraSearchOptions() { + indexTimeLabel.innerHTML = 'Anytime' + for(let i = 0; i < 3; i++) + document.querySelectorAll('.extra-search-options > div > input')[i].value = '' +} \ No newline at end of file diff --git a/JS/sign.js b/JS/sign.js new file mode 100644 index 0000000..5e87db5 --- /dev/null +++ b/JS/sign.js @@ -0,0 +1,113 @@ +// /** Google */ +// function onSignIn(googleUser) { +// console.log('Logged in as: ' + JSON.stringify(googleUser.getBasicProfile())) + +// let profile = googleUser.getBasicProfile() +// // console.log('ID: ' + profile.getId()) // Do not send to your backend! Use an ID token instead. +// // console.log('Name: ' + profile.getName()) +// // console.log('Image URL: ' + profile.getImageUrl()) +// // console.log('Email: ' + profile.getEmail()) +// } + +// function onFailure(error) { +// console.log(error) +// } +// var googleUser = {}; +// var startApp = function() { +// gapi.load('auth2', function(){ +// auth2 = gapi.auth2.init({ +// client_id: '571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com', +// cookiepolicy: 'single_host_origin', +// }); +// attachSignin(document.getElementById('googleBtn')); +// }); +// }; +// function attachSignin(element) { +// auth2.attachClickHandler(element, {}, +// (googleUser) =>{ +// console.log(googleUser.getBasicProfile())}, +// (error) => { +// // alert(JSON.stringify(error, undefined, 2)); +// }); +// } +// startApp() +// function signOut() { +// var auth2 = gapi.auth2.getAuthInstance() +// auth2.signOut().then(function () { +// console.log('User signed out.') +// }) +// } + + + +// /** GitHub */ + +// document.getElementById('github-button').addEventListener('click', () => { +// // Initialize with your OAuth.io app public key +// OAuth.initialize('_nPRfzTNGplyDCW0vD9dmek5QAg'); +// // Use popup for oauth +// // Alternative is redirect +// OAuth.popup('github').then(github => { +// console.log('github:', github); +// // Retrieves user data from oauth provider +// // Prompts 'welcome' message with User's email on successful login +// // #me() is a convenient method to retrieve user data without requiring you +// // to know which OAuth provider url to call +// github.me().then(data => { +// console.log('me data:', data); +// // alert('GitHub says your email is:' + data.email + ".\nView browser 'Console Log' for more details"); +// }); +// // Retrieves user data from OAuth provider by using #get() and +// // OAuth provider url +// github.get('/user').then(data => { +// console.log('self data:', data); +// }) +// }); +// }) + + +// /** FaceBook */ + +// // function statusChangeCallback(response) { // Called with the results from FB.getLoginStatus(). +// // console.log('statusChangeCallback'); +// // console.log(response); // The current login status of the person. +// // if (response.status === 'connected') { // Logged into your webpage and Facebook. +// // testAPI(); +// // } else { // Not logged into your webpage or we are unable to tell. +// // document.getElementById('status').innerHTML = 'Please log ' + +// // 'into this webpage.'; +// // } +// // } + + +// // function checkLoginState() { // Called when a person is finished with the Login Button. +// // FB.getLoginStatus(function(response) { // See the onlogin handler +// // statusChangeCallback(response); +// // }); +// // } + + +// // window.fbAsyncInit = function() { +// // FB.init({ +// // appId : '1318555625202480', +// // cookie : true, // Enable cookies to allow the server to access the session. +// // xfbml : true, // Parse social plugins on this webpage. +// // version : '' // Use this Graph API version for this call. +// // }); + + +// // FB.getLoginStatus(function(response) { // Called after the JS SDK has been initialized. +// // statusChangeCallback(response); // Returns the login status. +// // }); +// // }; + +// // function testAPI() { // Testing Graph API after login. See statusChangeCallback() for when this call is made. +// // console.log('Welcome! Fetching your information.... '); +// // FB.api('/me', function(response) { +// // console.log('Successful login for: ' + response.name); +// // document.getElementById('status').innerHTML = +// // 'Thanks for logging in, ' + response.name + '!'; +// // }); +// // } + + \ No newline at end of file diff --git a/JS/variables.js b/JS/variables.js new file mode 100644 index 0000000..6c98c13 --- /dev/null +++ b/JS/variables.js @@ -0,0 +1,144 @@ +/* News API */ + + const countries = ['Arab Emirates','Argentina','Australia','Austria','Belgium','Brasil','Bulgaria','Canada','China','Colombia','Cuba','Czech Republic','Egypt','England','France','Germany','Greece','Hong Kong','Hungary','Indonesia','Ireland','Israel','Italy','Japan','Latvia','Lithuania','Malaysia','Mexico','Morocco','Netherlands','New Zealand','Nigeria','Norway','Philippines','Poland','Portugal','Romania','Russia','Saudia Arabia','Serbia','Singapore','Slovakia','Slovenia','South Africa','South Korea','Sweden','Switzerland','Taiwan','Thailand','Turkey','Ukraine','United States','Venezuela'] + const countryAcronyms = ['ae','ar','au','at','be','br','bg','ca','cn','co','cu','cz','eg','gb','fr','de','gr','hk','hu','id','it','il','it','jp','lt','lv','my','mx','ma','nl','nz','ng','no','ph','pl','pt','ro','ru','sa','rs','sg','sk','si','za','kr','se','ch','tw','th','tr','ua','us','ve'] + const categories = ['all','Tbusiness','entertainment','general','health','science','sports','technology'] + const language = ['All','Arabic','German','English','Spanish','French','Italian','Dutch','Norwegian','Portuguese','Russian','Swedish','Chinese'] + const languageAcronyms = ['all','ar','de','en','es','fr','it','nl','no','pt','ru','se','zh'] + const colors = ['rgb(211, 47, 47)','rgb(123, 31, 162)','rgb(81, 45, 168)','rgb(48, 63, 159)','rgb(25, 118, 210)','rgb(2, 136, 209)','rgb(0, 151, 167)','rgb(0, 121, 107)','rgb(56, 142, 60)','rgb(104, 159, 56)','rgb(175, 180, 43)','rgb(251, 192, 45)','rgb(255, 160, 0)','rgb(245, 124, 0)','rgb(230, 74, 25)','rgb(93, 64, 55)','rgb(97, 97, 97)'] + const days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'] + const daysAcronyms = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'] + const websiteURL = 'http://localhost:8080/newsWebiste/' + // const websiteURL = 'https://news.niktopler.com' + + + const topStoriesURL = '&t=topstories&' + const everythingURL = '&t=everything&' + const sourcesURL = '&t=sources&' + +/* Index */ + + /** Navigation Bar Left */ + const burgerMenuFigure = document.getElementById('menu-burger-button') + + /** Navigation Bar Middle */ + const navigationBar = document.getElementById('navigation-bar') + const navigationBarLeft = document.getElementById('navigation-bar-left') + const navigationBarMiddle = document.getElementById('navigation-bar-middle') + const navigationBarRight = document.getElementById('navigation-bar-right') + + const extraSearchOptions = document.getElementById('extra-search-options') + const extOptIcon = document.getElementById('option-icon-search-bar') + const mainSearchIcon = document.getElementById('main-search-icon') + const mainSearchInput = document.getElementById('main-search-input') + const mainSearchFigure = document.getElementById('search-icon-figure') + const suggestMainInput = document.getElementById('search-words') + const mainSearchBackLeftIcon = document.getElementById('main-search-icon-back-left') + const mainSearchBackLeftTooltiptext = document.getElementById('main-search-back-left-tooltiptext') + const exactPhrase = document.getElementById('extra-option-input1') + const hasWords = document.getElementById('extra-option-input2') + const excludeWords = document.getElementById('extra-option-input3') + const submitButton = document.getElementById('extraOptionsSearchButton') + const date = document.getElementById('extra-option-select') + + + /** Extra Search Options */ + let indexTimeSelect = document.getElementById('index-time-select') + let indexTimeLabel = document.getElementById('index-time-label') + + /* Navigation Bar Right */ + const logInOptions = document.getElementById('login-option-div') + + /** Main Content */ + /** Side Menu */ + let sideBarContent = document.getElementById('side-bar-content') + const selectCountryDiv = document.getElementById('select-country') + const listOfCountries = document.getElementById('list-of-countries') + const selectedCountry = document.getElementById('country-name-side-menu') + const suggestCountryCountainer = document.getElementById('suggest-country') + const searchCountriesInput = document.getElementById('search-country-input') + let mainContentSection = document.getElementById('main-content-section') + let mainAsideContent = document.getElementById('main-side-content-container') + let aboutContentSection = document.getElementById('about-content-section') + const sideBarAboutContent = document.getElementById('about-sidebar-content') + const mainContentContainer = document.getElementById('main-content-container') + let mainContentHeader = document.getElementById('main-content-header') + + + const overlay = document.getElementById('overlay') + let navigationBarProfileImageDiv = document.getElementById('navigation-bar-profile-img-div') + let extOptProfile = document.getElementById('profile-extra-options') + + + let currentNewsArticles = [ + { + "title" : "Naslov1", + "subtitle" : "Podnaslov1", + "description" : 'Opis1', + "date" : "20-20-2020", + "source" : "CNN1", + "author" : "Nik Topler1" + }, + { + "title" : "Naslov2", + "subtitle" : "Podnaslov2", + "description" : 'Opis2', + "date" : "20-20-2020", + "source" : "CNN2", + "author" : "Nik Topler2" + }, + { + "title" : "Naslov3", + "subtitle" : "Podnaslov3", + "description" : 'Opis3', + "date" : "20-20-2020", + "source" : "CNN3", + "author" : "Nik Topler3" + }, + { + "title" : "Naslov4", + "subtitle" : "Podnaslov4", + "description" : 'Opis4', + "date" : "20-20-2020", + "source" : "CNN4", + "author" : "Nik Topler4" + }, + { + "title" : "Naslov5", + "subtitle" : "Podnaslov5", + "description" : 'Opis5', + "date" : "20-20-2020", + "source" : "CNN5", + "author" : "Nik Topler5" + } + ] + + currentNewsArticles.push( + { + "title" : "Naslov6", + "subtitle" : "Podnaslov6", + "description" : 'Opis6', + "date" : "20-20-2020", + "source" : "CNN6", + "author" : "Nik Topler6" + } + ) + + const filePath = { + headlines : 'headlines.php', + search : 'search.php', + following : 'personal/following.php', + forYou : 'personal/for-you.php', + library : 'personal/library.php', + covid19 : 'topics/covid-19.php', + world : 'topics/world.php', + business : 'topics/business.php', + technology : 'topics/technology.php', + entertainment : 'topics/entertainment.php', + sports : 'topics/sports.php', + health : 'topics/health.php' + } + +/* Personal */ + + let backgroundColor = 'light' \ No newline at end of file diff --git a/README.md b/README.md index 48932da..0a6954f 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ # News-website School Project -Hello world \ No newline at end of file +Hello world + +plenty enact all cheat though donate author tour skill opera candy bread next cling stair \ No newline at end of file diff --git a/add-ons/footer-scripts.php b/add-ons/footer-scripts.php new file mode 100644 index 0000000..b53d23d --- /dev/null +++ b/add-ons/footer-scripts.php @@ -0,0 +1,3 @@ + + + diff --git a/add-ons/head.php b/add-ons/head.php new file mode 100644 index 0000000..307ee4a --- /dev/null +++ b/add-ons/head.php @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + News Website + + diff --git a/add-ons/navigation-bar.php b/add-ons/navigation-bar.php new file mode 100644 index 0000000..de8cc6b --- /dev/null +++ b/add-ons/navigation-bar.php @@ -0,0 +1,129 @@ + \ No newline at end of file diff --git a/add-ons/select-country.php b/add-ons/select-country.php new file mode 100644 index 0000000..db1f7c4 --- /dev/null +++ b/add-ons/select-country.php @@ -0,0 +1,30 @@ +
+
+

Region of interest

+

See latest news based on region

+
+ +
+ +
+ +
+
+
Suggested
+
+
+ +
All available regions
+ +
+
+ + +
+ +
+
\ No newline at end of file diff --git a/add-ons/side-bar.php b/add-ons/side-bar.php new file mode 100644 index 0000000..d508843 --- /dev/null +++ b/add-ons/side-bar.php @@ -0,0 +1,48 @@ + \ No newline at end of file diff --git a/headlines.php b/headlines.php new file mode 100644 index 0000000..4457bf0 --- /dev/null +++ b/headlines.php @@ -0,0 +1,176 @@ + + + + + + + + + + + + + + + + + + + + + News Website + + + + + +
+ + + +
+ +
+
+

Headlines

+ Categories +
+ + +
+ + + +
+ +
+ + + +
+
+ Sign in to +

News Website

+
+ +
+ + + + +
+
+ or + + + +
+ +
+ + +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/other/help.php b/other/help.php new file mode 100644 index 0000000..e939d06 --- /dev/null +++ b/other/help.php @@ -0,0 +1,63 @@ + + + + +
+ + + +
+ + + +
+
+ Sign in to +

News Website

+
+ +
+ + + + +
+
+ or + + + +
+ +
+ + +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/other/settings.php b/other/settings.php new file mode 100644 index 0000000..e939d06 --- /dev/null +++ b/other/settings.php @@ -0,0 +1,63 @@ + + + + +
+ + + +
+ + + +
+
+ Sign in to +

News Website

+
+ +
+ + + + +
+
+ or + + + +
+ +
+ + +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/other/sources.php b/other/sources.php new file mode 100644 index 0000000..e939d06 --- /dev/null +++ b/other/sources.php @@ -0,0 +1,63 @@ + + + + +
+ + + +
+ + + +
+
+ Sign in to +

News Website

+
+ +
+ + + + +
+
+ or + + + +
+ +
+ + +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/personal/following.php b/personal/following.php new file mode 100644 index 0000000..e939d06 --- /dev/null +++ b/personal/following.php @@ -0,0 +1,63 @@ + + + + +
+ + + +
+ + + +
+
+ Sign in to +

News Website

+
+ +
+ + + + +
+
+ or + + + +
+ +
+ + +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/personal/for-you.php b/personal/for-you.php new file mode 100644 index 0000000..e939d06 --- /dev/null +++ b/personal/for-you.php @@ -0,0 +1,63 @@ + + + + +
+ + + +
+ + + +
+
+ Sign in to +

News Website

+
+ +
+ + + + +
+
+ or + + + +
+ +
+ + +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/personal/library.php b/personal/library.php new file mode 100644 index 0000000..e939d06 --- /dev/null +++ b/personal/library.php @@ -0,0 +1,63 @@ + + + + +
+ + + +
+ + + +
+
+ Sign in to +

News Website

+
+ +
+ + + + +
+
+ or + + + +
+ +
+ + +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/search.php b/search.php new file mode 100644 index 0000000..e58b9e3 --- /dev/null +++ b/search.php @@ -0,0 +1,86 @@ + + + + + + + + + + + + + + + + + + + + + News Website + + + + + +
+ + + +
+ + + +
+
+ Sign in to +

News Website

+
+ +
+ + + + +
+
+ or + + + +
+ +
+ + +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/topics/business.php b/topics/business.php new file mode 100644 index 0000000..e939d06 --- /dev/null +++ b/topics/business.php @@ -0,0 +1,63 @@ + + + + +
+ + + +
+ + + +
+
+ Sign in to +

News Website

+
+ +
+ + + + +
+
+ or + + + +
+ +
+ + +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/topics/categories.php b/topics/categories.php new file mode 100644 index 0000000..e939d06 --- /dev/null +++ b/topics/categories.php @@ -0,0 +1,63 @@ + + + + +
+ + + +
+ + + +
+
+ Sign in to +

News Website

+
+ +
+ + + + +
+
+ or + + + +
+ +
+ + +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/topics/covid-19.php b/topics/covid-19.php new file mode 100644 index 0000000..1b492d1 --- /dev/null +++ b/topics/covid-19.php @@ -0,0 +1,68 @@ + + + + +
+ + + +
+ +
+ +
+ +
+ + + +
+
+ Sign in to +

News Website

+
+ +
+ + + + +
+
+ or + + + +
+ +
+ + +
+ + + +
+ + + + + \ No newline at end of file diff --git a/topics/entertainment.php b/topics/entertainment.php new file mode 100644 index 0000000..e939d06 --- /dev/null +++ b/topics/entertainment.php @@ -0,0 +1,63 @@ + + + + +
+ + + +
+ + + +
+
+ Sign in to +

News Website

+
+ +
+ + + + +
+
+ or + + + +
+ +
+ + +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/topics/health.php b/topics/health.php new file mode 100644 index 0000000..e939d06 --- /dev/null +++ b/topics/health.php @@ -0,0 +1,63 @@ + + + + +
+ + + +
+ + + +
+
+ Sign in to +

News Website

+
+ +
+ + + + +
+
+ or + + + +
+ +
+ + +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/topics/sports.php b/topics/sports.php new file mode 100644 index 0000000..e939d06 --- /dev/null +++ b/topics/sports.php @@ -0,0 +1,63 @@ + + + + +
+ + + +
+ + + +
+
+ Sign in to +

News Website

+
+ +
+ + + + +
+
+ or + + + +
+ +
+ + +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/topics/technology.php b/topics/technology.php new file mode 100644 index 0000000..e939d06 --- /dev/null +++ b/topics/technology.php @@ -0,0 +1,63 @@ + + + + +
+ + + +
+ + + +
+
+ Sign in to +

News Website

+
+ +
+ + + + +
+
+ or + + + +
+ +
+ + +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/topics/world.php b/topics/world.php new file mode 100644 index 0000000..e939d06 --- /dev/null +++ b/topics/world.php @@ -0,0 +1,63 @@ + + + + +
+ + + +
+ + + +
+
+ Sign in to +

News Website

+
+ +
+ + + + +
+
+ or + + + +
+ +
+ + +
+ + + +
+ + + + + + \ No newline at end of file