diff --git a/CSS/*.css b/CSS/*.css
index 83b0bad..a7f279f 100644
--- a/CSS/*.css
+++ b/CSS/*.css
@@ -89,7 +89,13 @@ body{
.company-date:hover .tooltiptext,
.outter-container:hover .tooltiptext,
.plus-icon-container:hover .tooltiptext,
- .trash-icon-container:hover .tooltiptext{
+ .trash-icon-container:hover .tooltiptext,
+ .google:hover .tooltiptext,
+ .facebook:hover .tooltiptext,
+ .costum:hover .tooltiptext,
+ .extra-circle:hover +.tooltiptext,
+ .save-circle:hover +.tooltiptext,
+ .author:hover .tooltiptext{
visibility: visible;
opacity: 1;
font-size: 0.7em;
@@ -100,7 +106,7 @@ body{
width: fit-content;
border-radius: 3px;
padding: 4px 6px;
- z-index: 12;
+ z-index: 100000;
white-space: nowrap;
transition: opacity 0.3s;
font-size: 0.8rem !important;
@@ -156,6 +162,17 @@ body{
-o-transition: all ease-in-out .2s;
transition: all ease-in-out .2s;
}
+ .blue-button {
+ padding: 8px 18px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: var(--blue-medium);
+ border-radius: 0.25rem;
+ color: var(--bg);
+ transition: all ease-in-out .15;
+ cursor: pointer;
+ }
.background-shadow{
box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.328);
diff --git a/CSS/account.css b/CSS/account.css
index e768711..93b32d3 100644
--- a/CSS/account.css
+++ b/CSS/account.css
@@ -115,71 +115,7 @@ body {
}
.nav-right-side .outter-container:hover { background-color: var(--hover-light); }
.nav-right-side .outter-container.active { background-color: var(--hover-medium); }
- .img {
- position: relative;
- border-radius: 50%;
- width: var(--num);
- height: var(--num);
- }
- .img-settings {
- background-repeat: no-repeat;
- background-size: cover;
- }
- .img.xxl {
- --num: 7.5rem;
- --letter: 3.25rem;
- cursor: pointer;
- }
- .img.big {
- --num: 5.5rem;
- --letter: 2.75rem;
- cursor: pointer;
- }
- .img.medium {
- --num: 3.25rem;
- --letter: 2rem;
- cursor: pointer;
- }
- .img.small {
- --num: 2.25rem;
- --letter: 1rem;
- cursor: pointer;
- }
- .img .letter {
- position: absolute;
- left: calc(50% - 1.5rem);
- right: calc(50% - 1.5rem);
- top: calc(50% - 1.5rem);
- bottom: calc(50% - 1.5rem);
- width: 3rem;
- height: 3rem;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .img .letter span{
- font-size: var(--letter);
- color: var(--bg);
- }
- .img:hover { filter: brightness(1.1); }
-
- .camera-container {
- position: absolute;
- bottom: -3px;
- right: 0;
- background-color: yellow;
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- width: 1.25rem;
- height: 1.25rem;
- padding: 5px;
- border: 1px solid var(--border-light);
- background-color: var(--bg);
- cursor: pointer;
- }
- .camera-container:hover i{ color: var(--google-blue); }
+
.top-div .personal-info {
padding: 12px 10px;
@@ -799,17 +735,6 @@ body {
.main-content.change .button-container .inner-container:first-of-type {
flex-grow: 1;
}
- .blue-button {
- padding: 8px 18px;
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: var(--blue-medium);
- border-radius: 0.25rem;
- color: var(--bg);
- transition: all ease-in-out .15;
- cursor: pointer;
- }
.name-container,.surname-container { margin-bottom: 1rem; }
.main-content.change .button-container a {
color: var(--google-blue);
@@ -880,6 +805,52 @@ body {
}
.eye-icon-container i { color: var(--font-medium); }
+
+ .trending-main-container {
+ display: flex;
+ flex-direction: column;
+ }
+ .trending-main-container section:last-of-type { margin-top: 5rem; }
+ .trending-main-container section {
+ margin-top: 1.5rem;
+ }
+ .trending-main-container section .table {
+ display: flex;
+ flex-direction: column;
+ min-width: 200px;
+ box-shadow: 0px 0px 10px 0 var(--hover-medium);
+ }
+ .trending-main-container section .table .col{
+ width: 100%;
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 12rem));
+ }
+ .trending-main-container section .table .col .cell {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 10px;
+ overflow: auto;
+ max-height: 8rem;
+ padding: 10px;
+ border: 1px solid var(--border-light);
+ }
+ .table .col:hover {
+ background-color: var(--hover-light);
+ cursor: pointer;
+ }
+ .trending-main-container section .table .col .cell span {
+ font-size: 0.9rem;
+ color: var(--font-dark);
+ }
+ .trending-main-container section .table .col div h1 {
+ font-size: 1.2rem;
+ font-weight: 600;
+ }
+
+
+
+
@media screen and (max-width: 1486px) {
.main-content {
margin-left: 280px;
diff --git a/CSS/index.css b/CSS/index.css
index 7c46e52..3892799 100644
--- a/CSS/index.css
+++ b/CSS/index.css
@@ -2,6 +2,7 @@ body{
display: grid;
grid-template-rows: 65px 1fr;
overflow: auto;
+ position: relative;
}
/* Navigation Bar */
@@ -631,11 +632,15 @@ body{
margin: auto;
transition: all ease-in-out .3s;
}
+ .main-content-section .library {
+ max-width: 700px !important;
+ }
.main-content-section.full { width: 760px; }
.main-content-section.full .article-container {
display: flex;
flex-direction: column;
- grid-column: 1/13;
+ grid-column: 1/13 !important;
+ padding-bottom: 5rem;
}
.main-content-section.full .main-header {
padding: 2rem 0;
@@ -696,7 +701,9 @@ body{
}
.main-content-section.headlines .main-content-container .article-container { grid-column: 1/9; }
.main-content-section.headlines .main-content-container .main-side-content-container { grid-column: 9/13 ; }
-
+ .library .main-content-container .article-container {
+ grid-column: 3/11;
+ }
.article-container { grid-column: 1/9; }
#main-side-content-container { grid-column: 9/13; }
article.aside { border: none; }
@@ -1163,6 +1170,8 @@ body{
width: calc(100% - 40px);
grid-template-rows: 4.2rem 15px 1fr 15px 1.5rem;
padding-bottom: 0;
+ margin: 0;
+ margin-top: 20px;
}
.weather-article .weather-main-header{
grid-template-columns: 88px 1fr 100px;
@@ -1487,3 +1496,163 @@ body{
width: inherit;
border-bottom: 1px solid var(--font-medium);
}
+
+
+ /* Article */
+
+ article.news {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ padding-right: 185px;
+ padding-bottom: 2.5rem;
+ }
+ article.news.no-img { padding-right: 15px; }
+ article.news .article-header {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 0.75rem;
+ }
+ article.news .article-heading-container:hover h1 {
+ text-decoration: underline;
+ cursor: pointer;
+ }
+ article.news .article-header h1 {
+ font-weight: 600;
+ }
+ article.news .extra-content-container {
+ display: flex;
+ flex-direction: row;
+ padding: 5px 0;
+ min-height: 1.2rem;
+ }
+ article.news .extra-content-container .author {
+ display: flex;
+ align-items: center;
+ padding-right: 1rem;
+ }
+ article.news .author {
+ font-size: 0.9rem;
+ color: var(--font-medium);
+ }
+ article.news .extra-options-container {
+ display: flex;
+ flex-direction: row;
+ }
+ .save-container,
+ .extra-container {
+ position: relative;
+ margin-right: 0.5rem;
+ }
+ .save-circle,
+ .extra-circle {
+ width: 1.75rem;
+ height: 1.75rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ box-shadow: 2px 2px 1px 0px var(--border-light),
+ 0 0 0 1px var(--hover-light) inset;
+ cursor: pointer;
+ }
+ .save-circle:hover,
+ .extra-circle:hover {
+ box-shadow: 2px 2px 2px 0px var(--border-medium),
+ 0 0 0 0.4px var(--hover-medium) inset;
+ }
+ .save-circle:active,
+ .extra-circle:active {
+ box-shadow: 2px 3px 2px 0px var(--border-medium);
+ background-color: var(--hover-light);
+ }
+
+ .extra-option-container {
+ position: absolute;
+ min-width: 10rem;
+ border-radius: 4px;
+ padding: 10px 0;
+ border: 1px solid var(--border-light);
+ background-color: var(--bg);
+ z-index: 7;
+ top: 2rem;
+ left: 0.5rem;
+ }
+ .extra-option-container .e-o-c-container {
+ padding: 10px 5px;
+ }
+ .e-o-c-container {
+ display: flex;
+ flex-direction: row;
+ cursor: pointer;
+ }
+ .e-o-c-container:hover { background-color: var(--hover-light); }
+ .e-o-c-container:active { background-color: var(--hover-medium); }
+ .e-o-c-container div {
+ width: 1.25rem;
+ height: 1.25rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0 1rem 0 0.5rem;
+ }
+ article.news .text {
+ display: inline-flex;
+ font-size: 1rem;
+ color: var(--font-dark);
+ }
+ article.news .footer {
+ height: 2rem;
+ width: 2rem;
+ position: absolute;
+ bottom: 15px;
+ right: 15px;
+ width: calc(100% -30px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ }
+ article.news .footer div {
+ transition: all ease-in-out .3s;
+ }
+ .r180 { transform: rotate(180deg); }
+ article.news .article-img {
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ article.news .article-img img{
+ border-radius: 0.5rem;
+ max-width: 150px;
+ max-height: 150px;
+ }
+
+
+.trending-page {
+ display: flex;
+ flex-direction: column;
+ background-color: var(--hover-light);
+ padding: 0;
+}
+.trending-page .header {
+ margin-bottom: 0.5rem;
+ padding: 10px;
+}
+.trending-page .main {
+ border-top: 1px solid var(--border-light);
+ padding: 10px 0;
+ cursor: pointer;
+ color: var(--font-dark);
+}
+.trending-page .main div {
+ padding: 0 10px;
+ margin-bottom: 7px;
+}
+.trending-page .small {
+ font-size: 0.8rem;
+}
+.trending-page .main:hover { background-color: var(--hover-medium); }
\ No newline at end of file
diff --git a/CSS/profileImg.css b/CSS/profileImg.css
index d5307da..4ef9edf 100644
--- a/CSS/profileImg.css
+++ b/CSS/profileImg.css
@@ -1,172 +1,274 @@
.main-img-container {
- visibility: hidden;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%,-50%) scale(0.9);
- border: 1px solid var(--hover-medium);
- border-radius: 5px;
- background-color: var(--bg);
- padding: 20px;
- z-index: -10;
- height: 0;
+ visibility: hidden !important;
+ position: absolute !important;
+ top: 50% !important;
+ left: 50% !important;
+ transform: translate(-50%,-50%) scale(0.9) !important;
+ border: 1px solid var(--hover-medium) !important;
+ border-radius: 5px !important;
+ background-color: var(--bg) !important;
+ padding: 20px !important;
+ z-index: -10 !important;
+ height: 0 !important;
}
.main-img-container.active {
- z-index: 1000;
- visibility: visible;
- transform: translate(-50%,-50%) scale(1);
- min-width: 320px;
- max-width: 370px;
- height: auto;
+ z-index: 1000000000 !important;
+ visibility: visible !important;
+ transform: translate(-50%,-50%) scale(1) !important;
+ min-width: 320px !important;
+ max-width: 370px !important;
+ height: auto !important;
}
.main-img-container .container {
- margin-top: 0.75rem;
- margin-bottom: 0.75rem;
- display: flex;
+ margin-top: 0.75rem !important;
+ margin-bottom: 0.75rem !important;
+ display: flex !important;
}
-.main-img-container .container .img { margin-right: 1rem; }
-.color-img { margin-top: 0; }
-.color-img.active { margin-top: 1rem; }
+.main-img-container .google,
+.main-img-container .facebook,
+.main-img-container .selected,
+.main-img-container .add,
+.main-img-container .costum
+ { margin-right: 1rem !important; }
+.color-img { margin-top: 0 !important; }
+.color-img.active { margin-top: 1rem !important; }
.main-img-container section {
- margin: 1rem 0 2rem 0;
- padding: 0 5px;
+ margin: 1rem 0 2rem 0 !important;
+ padding: 0 5px !important;
}
-.main-img-container.active section:nth-of-type(2) { margin-top: 0; }
+.main-img-container.active section:nth-of-type(2) { margin-top: 0 !important; }
.main-img-container section .img-text{
- display: flex;
- align-items: center;
- margin-bottom: 0.75rem;
+ display: flex !important;
+ align-items: center !important;
+ margin-bottom: 0.75rem !important;
}
-.main-img-container section .img-text p { color: var(--font-medium); }
+.main-img-container section .img-text p { color: var(--font-medium) !important; }
.main-img-container .img {
- transition: all ease-in-out .12;
+ transition: all ease-in-out .12 !important;
}
-.main-img-container .img:hover { filter: brightness(0.97); }
+.main-img-container .img:hover { filter: brightness(0.97) !important; }
.img.medium.add {
- background-color: var(--hover-light);
+ background-color: var(--hover-light) !important;
}
.img.medium.add div {
- height: 100%;
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
+ height: 100% !important;
+ width: 100% !important;
+ display: flex !important;
+ align-items: center !important;
+ justify-content: center !important;
}
.img.medium.add div i {
- font-size: 1.7rem;
- color: var(--font-medium);
+ font-size: 1.7rem !important;
+ color: var(--font-medium) !important;
}
.select-img {
- background-color: var(--hover-medium);
- border-radius: 4px;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- transition: all ease-in-out .12s;
- height: 0;
+ background-color: var(--hover-medium) !important;
+ border-radius: 4px !important;
+ display: flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+ cursor: pointer !important;
+ transition: all ease-in-out .12s !important;
+ height: 0 !important;
}
.select-img .icon {
- display: flex;
- align-items: center;
- justify-content: center;
+ display: flex !important;
+ align-items: center !important;
+ justify-content: center !important;
}
.select-img .icon i {
- font-size: 3rem;
- color: var(--font-medium);
+ font-size: 3rem !important;
+ color: var(--font-medium) !important;
}
-.select-img:hover { background-color: var(--hover-dark); }
+.select-img:hover { background-color: var(--hover-dark) !important; }
.main-img-container .x {
- position: absolute;
- top: 0;
- right: 0;
- padding: 5px;
+ position: absolute !important;
+ top: 0 !important;
+ right: 0 !important;
+ padding: 5px !important;
}
.main-img-container .x div {
- width: 2.5rem;
- height: 2.5rem;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 50%;
- cursor: pointer;
+ width: 2.5rem !important;
+ height: 2.5rem !important;
+ display: flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+ border-radius: 50% !important;
+ cursor: pointer !important;
}
-.main-img-container .x div:hover { background-color: var(--hover-light); }
-.main-img-container .x div:active { background-color: var(--hover-medium); }
+.main-img-container .x div:hover { background-color: var(--hover-light) !important; }
+.main-img-container .x div:active { background-color: var(--hover-medium) !important; }
.main-img-container .x div i {
- font-size: 1.25rem;
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--font-dark);
+ font-size: 1.25rem !important;
+ display: flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+ color: var(--font-dark) !important;
}
.insert-photo-container {
- padding: 0;
- margin: 0;
- height: 0;
- visibility: hidden;
- transition: all ease-in-out .2s;
- position: relative;
+ padding: 0 !important;
+ margin: 0 !important;
+ height: 0 !important;
+ visibility: hidden !important;
+ transition: all ease-in-out .2s !important;
+ position: relative !important;
}
.insert-photo-container.active {
- visibility: visible;
- height: 14rem;
+ visibility: visible !important;
+ height: 14rem !important;
}
.main-insert-photo-container {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- visibility: hidden;
+ position: absolute !important;
+ top: 0 !important;
+ left: 0 !important;
+ width: 100% !important;
+ height: 100% !important;
+ visibility: hidden !important;
}
-.insert-photo-container.active .main-insert-photo-container { visibility: visible; }
-.insert-photo-container.active .main-insert-photo-container .select-img { height: 10rem; }
-.insert-photo-container + section { margin-top: 0; }
+.insert-photo-container.active .main-insert-photo-container { visibility: visible !important; }
+.insert-photo-container.active .main-insert-photo-container .select-img { height: 10rem !important; }
+.insert-photo-container + section { margin-top: 0 !important; }
.main-insert-photo-container .footer {
+ height: 3rem !important;
+ display: flex !important;
+ align-items: center !important;
+ width: 100% !important;
+}
+.main-insert-photo-container .footer div:first-of-type {
+ display: flex !important;
+ align-items: center !important;
+ justify-self: flex-start !important;
+ flex-grow: 1 !important;
+}
+.main-insert-photo-container .footer div:first-of-type span {
+ color: var(--font-dark) !important;
+ font-size: 0.8rem !important;
+}
+.main-insert-photo-container .footer .button {
+ display: flex !important;
+ padding: 2px 5px !important;
+ align-items: center !important;
+ justify-content: center !important;
+ height: 50% !important;
+ background-color: var(--bg) !important;
+ border: 1px solid var(--border-light) !important;
+ border-radius: 3px !important;
+ cursor: pointer !important;
+ transition: all ease-in-out .15s !important;
+ color: var(--font-dark) !important;
+}
+.main-insert-photo-container .footer .button:hover { background-color: var(--hover-light) !important; }
+
+.color-container {
+ min-height: 4rem !important;
+ align-items: center !important;
+ justify-content: center !important;
+}
+.color-container .box-container {
+ display: inline-flex !important;
+ padding: 0.5rem 0.5rem !important;
+ position: relative !important;
+}
+.color-container div:last-of-type { margin-right: 0 !important;}
+
+.check-mark {
+ position: absolute !important;
+ width: 100% !important;
+ height: 100% !important;
+ top: 0 !important;
+ display: flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+ cursor: pointer !important;
+}
+.check-mark i {
+ color: var(--bg) !important;
+ font-size: 1.25rem !important;
+}
+
+.footer-container {
+ display: flex !important;
+ justify-content: flex-end !important;
+}
+.footer-container .button {
+ width: 5rem !important;
+ height: 2.5rem !important;
+ display: flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+}
+.google { position: relative !important; }
+.main-img-container .error,
+.main-img-container .error i
+ { font-size: 0.9rem !important; }
+
+
+ .img {
+ position: relative;
+ border-radius: 50%;
+ width: var(--num);
+ height: var(--num);
+}
+.img-settings {
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+.img.xxl {
+ --num: 7.5rem;
+ --letter: 3.25rem;
+ cursor: pointer;
+}
+.img.big {
+ --num: 5.5rem;
+ --letter: 2.75rem;
+ cursor: pointer;
+}
+.img.medium {
+ --num: 3.25rem;
+ --letter: 2rem;
+ cursor: pointer;
+}
+.img.small {
+ --num: 2.25rem;
+ --letter: 1rem;
+ cursor: pointer;
+}
+.img .letter {
+ position: absolute;
+ left: calc(50% - 1.5rem);
+ right: calc(50% - 1.5rem);
+ top: calc(50% - 1.5rem);
+ bottom: calc(50% - 1.5rem);
+ width: 3rem;
height: 3rem;
display: flex;
align-items: center;
- width: 100%;
-}
-.main-insert-photo-container .footer div:first-of-type {
- display: flex;
- align-items: center;
- justify-self: flex-start;
- flex-grow: 1;
-}
-.main-insert-photo-container .footer div:first-of-type span {
- color: var(--font-dark);
- font-size: 0.8rem;
-}
-.main-insert-photo-container .footer .button {
- display: flex;
- padding: 2px 5px;
- align-items: center;
justify-content: center;
- height: 50%;
- background-color: var(--bg);
- border: 1px solid var(--border-light);
- border-radius: 3px;
- cursor: pointer;
- transition: all ease-in-out .15s;
- color: var(--font-dark);
}
-.main-insert-photo-container .footer .button:hover { background-color: var(--hover-light); }
+.img .letter span{
+ font-size: var(--letter);
+ color: var(--bg);
+}
+.img:hover { filter: brightness(1.1); }
-.color-container {
- min-height: 4rem;
+.camera-container {
+ position: absolute;
+ bottom: -3px;
+ right: 0;
+ border-radius: 50%;
+ display: flex;
align-items: center;
justify-content: center;
+ width: 1.25rem;
+ height: 1.25rem;
+ padding: 5px;
+ border: 1px solid var(--border-light);
+ background-color: var(--bg);
+ cursor: pointer;
}
-.color-container .box-container {
- display: inline-flex;
- padding: 0.5rem 0.5rem;
- /* margin: auto 1rem 1rem auto; */
-}
-.color-container div:last-of-type { margin-right: 0;}
+.camera-container:hover i{ color: var(--google-blue); }
\ No newline at end of file
diff --git a/CSS/responsive.css b/CSS/responsive.css
index 75de87c..164d820 100644
--- a/CSS/responsive.css
+++ b/CSS/responsive.css
@@ -26,7 +26,7 @@
display: none;
}
.article-container {
- grid-column: 1/13;
+ grid-column: 1/13 !important;
}
.main-content-section {
width: 100%;
diff --git a/Images/5f7c9d2f10f750.23675548.png b/Images/5f7c9d2f10f750.23675548.png
new file mode 100644
index 0000000..ff7604c
Binary files /dev/null and b/Images/5f7c9d2f10f750.23675548.png differ
diff --git a/Images/5f7b8d76df9d60.00481097.png b/Images/5f7c9e63c9ab76.22203358.png
similarity index 100%
rename from Images/5f7b8d76df9d60.00481097.png
rename to Images/5f7c9e63c9ab76.22203358.png
diff --git a/JS/account.js b/JS/account.js
index d0c5bf3..f1be63f 100644
--- a/JS/account.js
+++ b/JS/account.js
@@ -229,7 +229,6 @@ const check = {
body: createFormData(string, array)
})
const data = await res.text()
- console.log(data)
if(data === 'success') openLinks('/account/personal.php')
else error.passwordOldAfter()
}
@@ -390,10 +389,11 @@ async function admin(action, email) {
let imageUploadActive = false
let currentImageUploadLocation
+let newImg = false
async function submitProfileImageUploadForm() {
if(document.getElementById('file-upload').value) {
-
+ errorSpanUploadImage.classList.remove('light-green-color')
let photo = document.getElementById("file-upload").files[0]
let formData = new FormData()
@@ -408,30 +408,55 @@ async function submitProfileImageUploadForm() {
else if(text === 'error') errorSpanUploadImage.innerHTML = `${icon} There have been some sort of an error`
else if(text === 'extension not allowed') errorSpanUploadImage.innerHTML = `${icon} Only jpeg, jpg, png are allowed`
else {
+ newImg = true
imageUploadActive = true
errorSpanUploadImage.classList.remove('red-color')
errorSpanUploadImage.classList.add('light-green-color')
errorSpanUploadImage.innerHTML = 'Image has been successfully added'
-
currentImageUploadLocation = text.split(' ')[1]
-
- array = JSON.stringify(['0', currentImageUploadLocation])
- const res = await fetch('../include/update.inc.php', {
- method: "POST",
- body: createFormData('imageUpload', array)
- })
- const data = await res.text()
- console.log(data)
+ console.log(currentImageUploadLocation)
+ if(document.querySelector('#external-img-container div.costum')) {
+ document.querySelector('#external-img-container div.costum').remove()
+ removeImg('../' + currentImageUploadLocation)
+ }
+ let div = document.createElement('div')
+ div.style.display = 'flex'
+ div.style.alignItems = 'center'
+ div.style.justifyContent = 'center'
+ div.classList.add('google','costum')
+ div.onclick = () => { selectImg(div) }
+ let img = document.createElement('img')
+ img.src = '../' + currentImageUploadLocation
+ img.alt = 'profile'
+ img.classList.add('img','medium')
+ div.appendChild(img)
+ document.querySelector('#external-img-container').insertBefore(div , document.querySelector('#external-img-container').children[0])
}
- document.getElementById('file-upload').value = ''
+ document.getElementById('file-upload').value = null
} else imageNameLabel.innerHTML = 'No file selected'
}
function fileChange() {
- console.log(document.querySelector('.insert-photo-container .footer'))
document.querySelector('.insert-photo-container .footer .footer').classList.remove('disable')
let a = document.getElementById('file-upload').value.split(`fakepath`).pop().replace(/\\/g, '')
a = a.substring(0, 20)+'...'
imageNameLabel.innerHTML = a
}
+
+function selectImg(element) {
+ if(document.querySelector('.check-mark')) document.querySelector('.check-mark').remove()
+ let div = document.createElement('div')
+ div.classList.add('check-mark')
+ let i = document.createElement('i')
+ i.classList.add('far','fa-check')
+ div.appendChild(i)
+ element.appendChild(div)
+}
+
+async function removeImg(name) {
+ await fetch('../include/update.inc.php', {
+ method: "POST",
+ body: createFormData('deleteImg', name)
+ })
+}
\ No newline at end of file
diff --git a/JS/main.js b/JS/main.js
index 810e281..cef7a8e 100644
--- a/JS/main.js
+++ b/JS/main.js
@@ -222,7 +222,6 @@ const php = {
const error = {
window : () => {
- // Checkes if correct country acronym is in URL
if(window.location.search.match(regularExpressions.url.country)) {
let countryAcronym = window.location.search.match(regularExpressions.url.country)[0].slice(5, 7)
let country = getAcronymCountry(countryAcronym)
@@ -299,7 +298,6 @@ window.onload = async () => {
else if (window.location.pathname.includes('help')) help()
else if (window.location.pathname.includes('search')) mainSearch()
await user.location()
- // changeBackgroundColor()
}
window.onclick = (e) => {
@@ -398,10 +396,212 @@ async function headlines() {
sidebarCategorySelect(document.querySelector('.fa-newspaper').parentElement.parentElement)
historyPushState(window.location.origin + window.location.pathname, '', `?cou=${getCountryAcronym(selectedCountry.innerHTML.trim())}`,`&bg=${backgroundColor}`)
+ apiString = await getApiString()
+ await fetchNewsArticles(apiString)
+ generatArticles(publicArticleArray)
+}
+async function getApiString() {
+ const key = await php.info('news')
+ return apiString = `https://newsapi.org/v2/top-headlines?country=${getCountryAcronym(selectedCountry.innerHTML.trim())}&apiKey=${key}`;
+}
+
+async function generatArticles(array) {
+ if(array == null) return
+ for(let i = 0; i < array.length; i++) {
+
+ let authors = array[i].author
+ let content = array[i].content
+ let description = array[i].description
+ let date = getDate(array[i].publishedAt)
+ let source = array[i].source.name
+ let title = array[i].title
+ let url = array[i].url
+ let imgUrl = array[i].urlToImage
+
+ let bookmarkcolor = 'aaaaa'
+ let defaultClass = 'far'
+ if(checkIfUserIsLoggedIn() !== 'ni') {
+ const res = await isSaved(title)
+ if(res === 'saved') {
+ bookmarkcolor = 'yellow-color'
+ defaultClass = 'fas'
+ }
+ }
+
+ dbArray = [authors, content, description, date, source, title, url, imgUrl]
+
+ insertIntoDB(dbArray)
+
+ let article = document.createElement('article')
+ article.classList.add('news', `a-${i}-a`)
+ let div = document.createElement('div')
+ div.classList.add('article-header')
+ let headingContainer = document.createElement('div')
+ headingContainer.classList.add('article-heading-container')
+ let a = document.createElement('a')
+ a.href = array[i].url.trim()
+ let h1 = document.createElement('h1')
+ h1.innerHTML = array[i].title.trim()
+ a.appendChild(h1)
+ headingContainer.appendChild(a)
+ let extraContentContainer = document.createElement('extra-content-containe')
+ extraContentContainer.classList.add('extra-content-container')
+ let author = document.createElement('div')
+ author.classList.add('author')
+ author.style.position = 'relative'
+ let span = document.createElement('span')
+ span.innerHTML = `${array[i].source.name.trim()} • ${getDate(array[i].publishedAt)}`
+ author.appendChild(span)
+ if(array[i].author != null) {
+ let tooltiptext = document.createElement('span')
+ tooltiptext.classList.add('tooltiptext','tooltiptextTop90')
+ tooltiptext.innerHTML = array[i].author
+ author.appendChild(tooltiptext)
+ }
+ let extraOptionsContainer = document.createElement('div')
+ extraOptionsContainer.classList.add('extra-options-container')
+ let saveContainer = document.createElement('div')
+ saveContainer.classList.add('save-container', `a-${i}-a`)
+ let saveCircle = document.createElement('div')
+ saveCircle.classList.add('save-circle')
+ saveCircle.onclick = () => { saveNews(1, saveContainer) }
+ let bookmark1 = document.createElement('i')
+ bookmark1.classList.add(defaultClass,'fa-bookmark', bookmarkcolor)
+ let tooltiptextSave1 = document.createElement('span')
+ tooltiptextSave1.classList.add('tooltiptext','tooltiptextTop130')
+ tooltiptextSave1.innerHTML = 'Save'
+ saveCircle.appendChild(bookmark1)
+ saveContainer.appendChild(saveCircle)
+ saveContainer.appendChild(tooltiptextSave1)
+ let extraContaner = document.createElement('div')
+ extraContaner.classList.add('extra-container')
+ let extraCircle = document.createElement('div')
+ extraCircle.classList.add('extra-circle')
+ extraCircle.onclick = () => { openExtraOptions(extraCircle) }
+ let extraI = document.createElement('i')
+ extraI.classList.add('far', 'fa-ellipsis-v')
+ extraCircle.appendChild(extraI)
+ let tooltiptextextra1 = document.createElement('span')
+ tooltiptextextra1.classList.add('tooltiptext','tooltiptextTop130')
+ tooltiptextextra1.innerHTML = 'Extra options'
+ let aside = document.createElement('aside')
+ aside.classList.add('extra-option-container', 'disable', `a-${i}-a`)
+ let aDiv1 = document.createElement('div')
+ aDiv1.classList.add('e-o-c-container')
+ aDiv1.onclick = () => { openNews(aDiv1) }
+ let div11 = document.createElement('div')
+ let i11 = document.createElement('i')
+ i11.classList.add('far', 'fa-external-link-alt')
+ div11.appendChild(i11)
+ let span11 = document.createElement('span')
+ span11.innerHTML = 'Open'
+ div11.appendChild(i11)
+ aDiv1.appendChild(div11)
+ aDiv1.appendChild(span11)
+ let aDiv2 = document.createElement('div')
+ aDiv2.classList.add('e-o-c-container')
+ aDiv2.onclick = () => { saveNews(2, aside) }
+ let div22 = document.createElement('div')
+ let i22 = document.createElement('i')
+ i22.classList.add(bookmarkcolor, 'fa-bookmark', defaultClass)
+ div22.appendChild(i22)
+ let span22 = document.createElement('span')
+ span22.innerHTML = 'Save'
+ div22.appendChild(i22)
+ aDiv2.appendChild(div22)
+ aDiv2.appendChild(span22)
+ let aDiv3 = document.createElement('div')
+ aDiv3.classList.add('e-o-c-container')
+ aDiv3.onclick = () => { hideArticle(`a-${i}-a`) }
+ let div33 = document.createElement('div')
+ let i33 = document.createElement('i')
+ i33.classList.add('far', 'fa-minus-circle')
+ div33.appendChild(i33)
+ let span33 = document.createElement('span')
+ span33.innerHTML = 'Hide'
+ div33.appendChild(i33)
+ aDiv3.appendChild(div33)
+ aDiv3.appendChild(span33)
+ aside.appendChild(aDiv1)
+ aside.appendChild(aDiv2)
+ aside.appendChild(aDiv3)
+ extraContaner.appendChild(extraCircle)
+ extraContaner.appendChild(tooltiptextextra1)
+ extraContaner.appendChild(aside)
+ extraOptionsContainer.appendChild(saveContainer)
+ extraOptionsContainer.appendChild(extraContaner)
+ extraContentContainer.appendChild(author)
+ extraContentContainer.appendChild(extraOptionsContainer)
+ div.appendChild(headingContainer)
+ div.appendChild(extraContentContainer)
+ article.appendChild(div)
+ if(array[i].content !== null) {
+ let text = document.createElement('div')
+ text.classList.add('text')
+ let p = document.createElement('p')
+ p.innerHTML = array[i].content.slice(0, -18)
+ if(array[i].description != null) {
+ let spanT = document.createElement('span')
+ spanT.classList.add('disable' ,`a-${i}-t`)
+ spanT.innerHTML = array[i].description.trim()
+ p.appendChild(spanT)
+ }
+ text.appendChild(p)
+ article.appendChild(text)
+ }
+
+
+ if(array[i].description !== null) {
+ let footer = document.createElement('div')
+ footer.classList.add('footer')
+ let divF = document.createElement('div')
+ divF.onclick = () => { manageArticleText(divF, `a-${i}-t`) }
+ let iF = document.createElement('i')
+ iF.classList.add('far', 'fa-chevron-down')
+ divF.appendChild(iF)
+ footer.appendChild(divF)
+ article.appendChild(footer)
+ }
+
+
+ if(array[i].urlToImage === null) article.classList.add('no-img')
+ else {
+ let imgD = document.createElement('div')
+ imgD.classList.add('article-img')
+ let img = document.createElement('img')
+ img.src = array[i].urlToImage
+ img.alt = 'img'
+
+ imgD.appendChild(img)
+ article.appendChild(imgD)
+ }
+
+ document.querySelector('.article-container').appendChild(article)
+ }
+
+}
+
+function getDate(date) { return date.slice(0, -10) }
+
+async function insertIntoDB(arrayVal) {
+
+ array = JSON.stringify(arrayVal)
+ const res = await fetch(`${locationOrganiser}include/insert.inc.php`, {
+ method: "POST",
+ body: createFormData('news', array)
+ })
+}
+async function isSaved(title) {
+ const res = await fetch(`${locationOrganiser}include/check.inc.php`, {
+ method: "POST",
+ body: createFormData('newsSaveArticle', title)
+ })
+ const data = await res.text()
+ return data
}
/* SEARCH */
- function mainSearch(extra, type) {
+ async function mainSearch(extra, type) {
let url = ''
let newSearch = false
pathLocation = ''
@@ -433,13 +633,26 @@ async function headlines() {
let searchInputValue = window.location.search.match(regularExpressions.url.query)[0].slice(3, -1)
mainSearchInput.value = urlEdit(searchInputValue)
+ let n = 0
+ let mainArticleContainer = document.querySelector('.article-container')
+ const num = mainArticleContainer.children.length
+
+ for(let i = 0; i < num; i++) {
+ if(mainArticleContainer.children[n].tagName === 'ARTICLE') mainArticleContainer.children[n].remove()
+ else n = 1
+ }
+
+ const key = await php.info('news')
+ apiString = await getApiString()
+ await fetchNewsArticles(`https://newsapi.org/v2/everything?q=${mainSearchInput.value}&apiKey=${key}`)
+ generatArticles(publicArticleArray)
+
+
searchBox.update(mainSearchInput.value.trim())
hideExtraSearchOptions()
hideSuggestWords()
suggest.suggest()
- /* Search news articles */
- // console.log(url[4])
}
function createUrlExtraOptions(option) {
let url
@@ -490,8 +703,21 @@ function library() {
/* CATEGORIES */
-function category(word) {
+async function category(word) {
sidebarCategorySelect(document.querySelector(`.${word}`).parentElement.parentElement)
+ let string = ''
+ const key = await php.info('news')
+
+ if(word == 'fa-shield-cross') string = `https://newsapi.org/v2/everything?q=covid&apiKey=${key}`
+ else if(word == 'fa-globe-europe') string = `https://newsapi.org/v2/everything?q=world&apiKey=${key}`
+ else if(word == 'fa-building') string = `https://newsapi.org/v2/top-headlines?country=${getCountryAcronym(selectedCountry.innerHTML.trim())}&category=business&apiKey=${key}`
+ else if(word == 'fa-microchip') string = `https://newsapi.org/v2/top-headlines?country=${getCountryAcronym(selectedCountry.innerHTML.trim())}&category=technology&apiKey=${key}`
+ else if(word == 'fa-camera-movie') string = `https://newsapi.org/v2/top-headlines?country=${getCountryAcronym(selectedCountry.innerHTML.trim())}&category=entertainment&apiKey=${key}`
+ else if(word == 'fa-tennis-ball') string = `https://newsapi.org/v2/top-headlines?country=${getCountryAcronym(selectedCountry.innerHTML.trim())}&category=sport&apiKey=${key}`
+ else if(word == 'fa-heartbeat') string = `https://newsapi.org/v2/top-headlines?country=${getCountryAcronym(selectedCountry.innerHTML.trim())}&category=health&apiKey=${key}`
+
+ await fetchNewsArticles(string)
+ generatArticles(publicArticleArray)
}
/* SETTINGS */
@@ -553,12 +779,23 @@ mainSearchInput.onkeyup = (e) => {
}
}
-function updateCountrySelect(country) {
+async 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()
+ let mainArticleContainer = document.querySelector('.article-container')
+ const num = mainArticleContainer.children.length
+ let n = 0
+ for(let i = 0; i < num; i++) {
+ if(mainArticleContainer.children[n].tagName === 'ARTICLE') mainArticleContainer.children[n].remove()
+ else n = 1
+ }
+ apiString = await getApiString()
+ await fetchNewsArticles(apiString)
+ generatArticles(publicArticleArray)
+
}
function createUrlPath(type, search) {
@@ -752,52 +989,6 @@ function inputExtraSearchOptionChange() {
function addDisableSideElements() { mainAsideContent.querySelectorAll('article').forEach(article => article.classList.add('disable')) }
function removeDisableSideElements() { mainAsideContent.querySelectorAll('article.disable').forEach(article => article.classList.remove('disable')) }
-function follow(element) {
- if(element.lastElementChild.textContent === 'Follow') fillIcons(element.firstElementChild, element.lastElementChild, 'Following')
- else emptyIcons(element.firstElementChild, element.lastElementChild, 'Follow')
-
- if(window.location.pathname.includes('search')) followNews()
- else followCategory()
-}
-function saveNews(element) {
- if(element.lastElementChild.textContent === 'Save') fillIcons(element.firstElementChild, element.lastElementChild, 'Saved')
- else emptyIcons(element.firstElementChild, element.lastElementChild, 'Save')
- //PHP
-}
-function followNews() {
- //PHP
-}
-function followCategory() {
-
-}
-
-function fillIcons(icon, text, string) {
- icon.classList.remove('far')
- icon.classList.add('fas')
- text.textContent = string
-}
-function emptyIcons(icon, text, string) {
- icon.classList.add('far')
- icon.classList.remove('fas')
- text.textContent = string
-}
-
-/* API */
-
-// fetchNewsArticles()
-async function fetchNewsArticles() {
-
- const key = await php.info('news')
- const response = await fetch(`http://cors-anywhere.herokuapp.com/http://newsapi.org/v2/everything?q=-velenje america "coronavirus"&sortBy=popularity&apiKey=${key}`).catch(() => {
- // noArticlesFoundNotification()
- })
- // const response = await fetch(newsApiLoadUrl).catch(err => {
- // noArticlesFoundNotification()
- // })
- const json = await response.json()
- const articles = await json.articles
-}
-
function createFormData(word, data) {
let formData = new FormData
formData.append(word, data)
@@ -814,10 +1005,102 @@ function checkIfCategoriesAreOpen() {
return true
return false
}
-// string.trim().replace(/\s\s+/g, ' ').replace(/%20/g, ' ').replace(/%22/g, '"')
-async function logOut(string) {
+async function logout(string) {
const res = await fetch(`include/logout.inc.php`)
const data = res.text()
openLinks(filePath.headlines + string);
}
+
+
+
+
+
+let imageUploadActive = false
+let currentImageUploadLocation
+let newImg = false
+async function submitProfileImageUploadForm() {
+
+ if(document.getElementById('file-upload').value) {
+ errorSpanUploadImage.classList.remove('light-green-color')
+ let photo = document.getElementById("file-upload").files[0]
+ let formData = new FormData()
+
+ formData.append('file', photo)
+
+ const response = await fetch('../include/uploadFile.inc.php', {
+ method: "POST",
+ body: formData
+ })
+ const text = await response.text()
+ if(text === 'too big') errorSpanUploadImage.innerHTML = `${icon} Max file size is 1MB`
+ else if(text === 'error') errorSpanUploadImage.innerHTML = `${icon} There have been some sort of an error`
+ else if(text === 'extension not allowed') errorSpanUploadImage.innerHTML = `${icon} Only jpeg, jpg, png are allowed`
+ else {
+ newImg = true
+ imageUploadActive = true
+ errorSpanUploadImage.classList.remove('red-color')
+ errorSpanUploadImage.classList.add('light-green-color')
+ errorSpanUploadImage.innerHTML = 'Image has been successfully added'
+ currentImageUploadLocation = text.split(' ')[1]
+ console.log(currentImageUploadLocation)
+ if(document.querySelector('#external-img-container div.costum')) {
+ document.querySelector('#external-img-container div.costum').remove()
+ removeImg('../' + currentImageUploadLocation)
+ }
+ let div = document.createElement('div')
+ div.style.display = 'flex'
+ div.style.alignItems = 'center'
+ div.style.justifyContent = 'center'
+ div.classList.add('google','costum')
+ div.onclick = () => { selectImg(div) }
+ let img = document.createElement('img')
+ img.src = '../' + currentImageUploadLocation
+ img.alt = 'profile'
+ img.classList.add('img','medium')
+ div.appendChild(img)
+ document.querySelector('#external-img-container').insertBefore(div , document.querySelector('#external-img-container').children[0])
+ }
+ document.getElementById('file-upload').value = null
+
+ } else imageNameLabel.innerHTML = 'No file selected'
+
+}
+function fileChange() {
+ document.querySelector('.insert-photo-container .footer .footer').classList.remove('disable')
+ let a = document.getElementById('file-upload').value.split(`fakepath`).pop().replace(/\\/g, '')
+ a = a.substring(0, 20)+'...'
+ imageNameLabel.innerHTML = a
+}
+
+function selectImg(element) {
+ if(document.querySelector('.check-mark')) document.querySelector('.check-mark').remove()
+ let div = document.createElement('div')
+ div.classList.add('check-mark')
+ let i = document.createElement('i')
+ i.classList.add('far','fa-check')
+ div.appendChild(i)
+ element.appendChild(div)
+}
+
+async function removeImg(name) {
+ await fetch('../include/update.inc.php', {
+ method: "POST",
+ body: createFormData('deleteImg', name)
+ })
+}
+
+
+
+/* API */
+
+
+async function fetchNewsArticles(url) {
+
+ const response = await fetch(url)
+ const json = await response.json()
+ const articles = await json.articles
+ publicArticleArray = articles
+}
+
+let publicArticleArray = []
diff --git a/JS/show.js b/JS/show.js
index cf5881f..09741d3 100644
--- a/JS/show.js
+++ b/JS/show.js
@@ -170,11 +170,193 @@ function generateColors () {
if(!parent) return
for(let i = 0; i < colors.length; i++) {
let divP = document.createElement('div')
+ divP.style.position = 'realtive'
divP.classList.add('box-container')
let div = document.createElement('div')
div.classList.add('img','medium')
div.style.backgroundColor = colors[i]
- divP.appendChild(div)
+ divP.onclick = () => { selectImg(div) }
+ divP.appendChild(div)
+ if(document.querySelector('.img.small.test').style.backgroundColor === colors[i]) {
+ let div1 = document.createElement('div')
+ div1 .classList.add('check-mark')
+ let i = document.createElement('i')
+ i.classList.add('far', 'fa-check')
+ div1.appendChild(i)
+ div.appendChild(div1)
+ }
parent.appendChild(divP)
}
-}
\ No newline at end of file
+}
+function saveImg() {
+ selectedImg = document.querySelector('.check-mark')
+ if(!selectedImg) return
+ let num
+ if(selectedImg.parentElement.classList.contains('costum')) num = 0
+ else if(selectedImg.parentElement.classList.contains('img')) num = 1
+ else if(selectedImg.parentElement.classList.contains('google')) num = 2
+ else if(selectedImg.parentElement.classList.contains('facebook')) num = 3
+ else if(selectedImg.parentElement.classList.contains('github')) num = 4
+ if (selectedImg.parentElement.firstElementChild.tagName == 'IMG') {
+ if(num == 0 && newImg == true) img = currentImageUploadLocation
+ else if(num == 0 && newImg == false) img = selectedImg.parentElement.firstElementChild.src.replace(websiteURL, '')
+ else img = selectedImg.parentElement.firstElementChild.src
+ }
+ else img = selectedImg.parentElement.firstElementChild.parentElement.style.backgroundColor
+ uploadImg(num, img)
+ newImg = false
+
+}
+let locationOrganiser = '../'
+if(window.location.pathname.includes('headlines') || window.location.pathname.includes('search')) locationOrganiser = ''
+async function uploadImg(num, img) {
+ array = JSON.stringify([num, img])
+ console.log(num,img)
+ await fetch(`${locationOrganiser}include/update.inc.php`, {
+ method: "POST",
+ body: createFormData('imageUpload', array)
+ })
+ location.reload()
+}
+
+
+
+function openExtraOptions(element) {
+ if(element.parentElement.lastElementChild.classList.contains('disable')) {
+ element.parentElement.lastElementChild.classList.remove('disable')
+ } else {
+ element.parentElement.lastElementChild.classList.add('disable')
+ }
+}
+function hideArticle(c) {
+ document.querySelector(`article.${c}`).remove()
+ //Php
+}
+function openNews(element) { element.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.firstElementChild.firstElementChild.firstElementChild.click() }
+
+
+function follow(element) {
+ if(element.lastElementChild.textContent === 'Follow') fillIcons(element.firstElementChild, element.lastElementChild, 'Following')
+ else emptyIcons(element.firstElementChild, element.lastElementChild, 'Follow')
+
+ if(window.location.pathname.includes('search')) followNews()
+ else followCategory()
+}
+async function saveNews(num, element) {
+ let i1
+ let i2
+ let res = await checkIfUserIsLoggedIn()
+ if(res == 'ni') return manageLoginOptions()
+ if(num == 1) {
+ i1 = element.firstElementChild.firstElementChild
+ i2 = document.querySelectorAll('.'+element.classList[1])[2].children[1].firstElementChild.firstElementChild
+ } else {
+ i1 = element.children[1].firstElementChild.firstElementChild
+ i2 = element.parentElement.parentElement.firstElementChild.querySelector('i')
+ let n = 0
+ for(let i = 0; i < publicArticleArray.length; i++) {
+ if(element.parentElement.parentElement.parentElement.parentElement.classList[1].includes(i)) n = i
+ }
+ let array = JSON.stringify([publicArticleArray[n].title])
+
+ const res = await fetch(`${locationOrganiser}include/update.inc.php`, {
+ method: "POST",
+ body: createFormData('unsaveNews', array)
+ })
+ const data = await res.text()
+ console.log(data)
+ }
+ if(i1.classList.contains('fas')) {
+ i1.classList.remove('fas')
+ i1.classList.add('far')
+ i1.classList.remove('yellow-color')
+ i2.classList.remove('fas')
+ i2.classList.add('far')
+ i2.classList.remove('yellow-color')
+ string = 'unsaveNews'
+ } else {
+ i1.classList.add('fas')
+ i1.classList.remove('far')
+ i1.classList.add('yellow-color')
+ i2.classList.add('fas')
+ i2.classList.remove('far')
+ i2.classList.add('yellow-color')
+ string = 'saveNews'
+ }
+ let n = 0
+ let array
+ if(publicArticleArray !== null && publicArticleArray !== undefined && publicArticleArray.length !== 0) {
+ for(let i = 0; i < publicArticleArray.length; i++) {
+ if(element.parentElement.parentElement.parentElement.parentElement.classList[1].includes(i)) n = i
+ }
+ array = JSON.stringify([publicArticleArray[n].title])
+ } else array = JSON.stringify([element.parentElement.parentElement.parentElement.firstElementChild.firstElementChild.firstElementChild.innerHTML.trim()])
+ const res2 = await fetch(`${locationOrganiser}include/update.inc.php`, {
+ method: "POST",
+ body: createFormData(string, array)
+ })
+ const data2 = await res2.text()
+ console.log(data2)
+}
+async function manageNews() {
+ const res = await fetch(`${locationOrganiser}include/check.inc.php`, {
+ method: "POST",
+ body: createFormData('isIdSet', '')
+ })
+ const data = await res.text()
+ return data;
+}
+
+function followNews() {
+ //PHP
+}
+function followCategory() {
+
+}
+
+function fillIcons(icon, text, string) {
+ icon.classList.remove('far')
+ icon.classList.add('fas')
+ text.textContent = string
+}
+function emptyIcons(icon, text, string) {
+ icon.classList.add('far')
+ icon.classList.remove('fas')
+ text.textContent = string
+}
+
+function manageArticleText(element,c) {
+ if(document.querySelector('.'+c).classList.contains('disable')) {
+ document.querySelector('.'+c).classList.remove('disable')
+ element.classList.add('r180')
+ }
+ else {
+ document.querySelector('.'+c).classList.add('disable')
+ element.classList.remove('r180')
+ }
+}
+
+async function checkIfUserIsLoggedIn() {
+ const res = await fetch(`${locationOrganiser}include/check.inc.php`, {
+ method: "POST",
+ body: createFormData('isIdSet', '')
+ })
+ const data = await res.text()
+ return data;
+}
+
+async function showTrendingOptions(element) {
+ let keyword
+ if(element.parentElement.parentElement.classList.contains('trending')) {
+ keyword = 'trendingOut'
+ document.querySelector('section.all article').appendChild(element)
+ } else if(element.parentElement.parentElement.classList.contains('all')) {
+ document.querySelector('section.trending article').appendChild(element)
+ keyword = 'trendingIn'
+ } else location.reload()
+ if(!element.querySelector('.id').innerHTML) location.reload()
+ const res = await fetch('../include/update.inc.php', {
+ method: "POST",
+ body: createFormData(keyword, element.querySelector('.id').innerHTML)
+ })
+}
diff --git a/JS/signIn/signin.js b/JS/signIn/signin.js
index 338f10a..ca239de 100644
--- a/JS/signIn/signin.js
+++ b/JS/signIn/signin.js
@@ -4,7 +4,7 @@ const password = document.querySelector('.password-container')
const emailInput = document.getElementById('email-input')
const passwordInput = document.getElementById('password-input')
-const websiteURL = 'http://localhost:8080/News-website/'
+const websiteURL = 'https://news.niktopler.com/'
emailInput.onfocus = () => {
email.querySelector('.label-container').classList.add('active')
diff --git a/JS/signIn/signup.js b/JS/signIn/signup.js
index 8efd7df..7947b4a 100644
--- a/JS/signIn/signup.js
+++ b/JS/signIn/signup.js
@@ -152,7 +152,7 @@ function managePasswordVisibility(element) {
pswRepeatInput.type = 'password'
}
}
-const websiteURL = 'http://localhost:8080/News-website/'
+const websiteURL = 'https://news.niktopler.com/'
function urlOpen(string) { window.location.replace(`${websiteURL}headlines.php${string}`) }
diff --git a/JS/variables.js b/JS/variables.js
index 170bd21..12c0e2c 100644
--- a/JS/variables.js
+++ b/JS/variables.js
@@ -8,8 +8,8 @@
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/News-website'
- // const websiteURL = 'https://news.niktopler.com'
+ // const websiteURL = 'http://localhost:8080/News-website'
+ const websiteURL = 'https://news.niktopler.com'
const topStoriesURL = '&t=topstories&'
const everythingURL = '&t=everything&'
@@ -48,6 +48,7 @@
/* Navigation Bar Right */
const logInOptions = document.getElementById('login-option-div')
+ const CORS = 'https://cors-anywhere.herokuapp.com/'
/** Main Content */
/** Side Menu */
let sideBarContent = document.getElementById('side-bar-content')
diff --git a/account/add-ons/side-bar.php b/account/add-ons/side-bar.php
index 821c6e4..fff35b3 100644
--- a/account/add-ons/side-bar.php
+++ b/account/add-ons/side-bar.php
@@ -11,18 +11,19 @@
-
+ echo '
-
-
+
+