beenull/News-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Few adjustments

Browse source
This commit is contained in:
Nik Topler 2020-10-07 09:36:52 +02:00
parent 999858f79a
commit 9959c75a2a
38 changed files with 1678 additions and 500 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
CSS/*.css
View file

@ -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);

123
CSS/account.css
View file

@ -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;

173
CSS/index.css
View file

@ -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); }

344
CSS/profileImg.css
View file

@ -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); }

2
CSS/responsive.css
View file

@ -26,7 +26,7 @@
display: none;
}
.article-container {
grid-column: 1/13;
grid-column: 1/13 !important;
}
.main-content-section {
width: 100%;

BIN
Images/5f7c9d2f10f750.23675548.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 74 KiB

0
Images/5f7b8d76df9d60.00481097.png → Images/5f7c9e63c9ab76.22203358.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 47 KiB

51
JS/account.js
View file

@ -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)
})
}

393
JS/main.js
View file

@ -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 = []

186
JS/show.js
View file

@ -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)
}
}
}
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)
})
}

2
JS/signIn/signin.js
View file

@ -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')

2
JS/signIn/signup.js
View file

@ -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}`) }

5
JS/variables.js
View file

@ -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')

9
account/add-ons/side-bar.php
View file

@ -11,18 +11,19 @@
<div class="icon"><i class="far fa-id-card-alt fa-lg"></i></div>
<div><a href="#">Personal Information</a></div>
</div>
<?php
if($_SESSION['admin'] != 'no')
<?php
$admin = '';
$trending = '';
$disable = 'disable';
if($_SESSION['admin'] != 'no') $disable = '';
if(strpos($_SERVER['REQUEST_URI'], 'admin')) $admin = 'active';
if(strpos($_SERVER['REQUEST_URI'], 'trending')) $trending = 'active';
echo '<div class="sidebar-category '.$admin.'" onclick="openLinks(\'/account/admin.php\')">
echo '<div class="sidebar-category '.$admin.' '.$disable.'" onclick="openLinks(\'/account/admin.php\')">
<div class="icon"><i class="fas fa-users-crown fa-lg"></i></div>
<div><a href="#" class="side-menu-categories">Admin</a></div>
</div>
<div class="sidebar-category '.$trending.'" onclick="openLinks(\'/account/trending.php\')">
<div class="sidebar-category '.$trending.' '.$disable.'" onclick="openLinks(\'/account/trending.php\')">
<div class="icon"><i class="far fa-chart-line fa-lg"></i></div>
<div><a href="#" class="side-menu-categories">Trending Section</a></div>
</div>';

5
account/admin.php
View file

@ -122,10 +122,8 @@
}
}
$generateObj = new generateUsers();
$generateObj->generate();
?>
</tbody>
</table>
@ -135,7 +133,8 @@
</div>
</main>
<?php include '../add-ons/profileImg.php' ?>
<div class="fixed" id="overlay"></div>
</body>
</html>

13
account/home.php
View file

@ -22,25 +22,25 @@
<div class="main-content">
<div class="container">
<section class="header">
<div class="img-container">
<div class="img-container" onclick="showProfileImg()">
<?php
$path = '../';
if(strpos($_SERVER['REQUEST_URI'], 'search') || strpos($_SERVER['REQUEST_URI'], 'headlines')) $path = '';
if($_SESSION['profile_choice'] == 0)
echo ('<div class="img xxl" onclick="changeProfileImg()" ><img src="'.$path.$_SESSION['profile_img'].'" class="imga"></div>');
echo ('<div class="img xxl" onclick=""><img src="'.$path.$_SESSION['profile_img'].'" class="imga"></div>');
else if($_SESSION['profile_choice'] == 1)
echo ('<div class="img xxl" onclick="changeProfileImg()" style="background-color: '.$_SESSION['profile_color'].';">
echo ('<div class="img xxl" onclick="" style="background-color: '.$_SESSION['profile_color'].';">
<div class="letter">
<span>'.$_SESSION['letter'].'</span>
</div>
</div>');
else if($_SESSION['profile_choice'] == 2)
echo ('<div class="img xxl" onclick="changeProfileImg()"><img src="'.$_SESSION['google_profile_img'].'" class="imga"></div>');
echo ('<div class="img xxl" onclick=""><img src="'.$_SESSION['google_profile_img'].'" class="imga"></div>');
else if($_SESSION['profile_choice'] == 3)
echo ('<div class="img xxl" onclick="changeProfileImg()"><img src="'.$_SESSION['facebook_profile_img'].'" class="imga"></div>');
echo ('<div class="img xxl" onclick=""><img src="'.$_SESSION['facebook_profile_img'].'" class="imga"></div>');
else if($_SESSION['profile_choice'] == 4)
echo ('<div class="img xxl" onclick="changeProfileImg()"><img src="'.$_SESSION['github_profile_img'].'" class="imga"></div>');
echo ('<div class="img xxl" onclick=""><img src="'.$_SESSION['github_profile_img'].'" class="imga"></div>');
?>
<figure>
<div><i class="fas fa-camera fa-lg" aria-hidden="true"></i></div>
@ -122,6 +122,7 @@
</div>
</main>
<div class="fixed" id="overlay"></div>
<?php include '../add-ons/profileImg.php' ?>
</body>
</html>

2
account/settings.php
View file

@ -25,6 +25,8 @@
</div>
</main>
<?php include '../add-ons/profileImg.php' ?>
<div class="fixed" id="overlay"></div>
</body>

191
account/trending.php
View file

@ -1,5 +1,6 @@
<?php
include 'add-ons/head.php';
include_once '../include/db.inc.php';
if($_SESSION['admin'] == 'no') header("location:../headlines.php");
?>
<body>
@ -22,11 +23,197 @@
<?php include 'add-ons/side-bar.php' ?>
<div class="main-content">
<?php include 'add-ons/footer.php' ?>
<div class="container">
<section class="header">
<div class="h1">
<h1>
Welcome to Trending Section
</h1>
</div>
<div class="text">
<p>
Have full controll over trending page
</p>
</div>
<div class="trending-main-container">
<section class="all">
<div class="h1">
<h1>
All News
</h1>
</div>
<div class="text">
<p>
Here are all news articles that are not included in trending
</p>
</div>
<article class="table" onclick="">
<div class="col">
<div class="cell">
<h1>Author</h1>
</div>
<div class="cell">
<h1>Title</h1>
</div>
<div class="cell">
<h1>Text</h1>
</div>
<div class="cell">
<h1>Source</h1>
</div>
</div>
<?php
class generateNews extends Dbh {
public function generate() {
$sql = "SELECT * FROM news LIMIT 200";
$stmt = $this->connect()->prepare($sql);
$stmt->execute();
$row = $stmt->fetch();
while($row = $stmt->fetch()) {
$author = '/';
$title = '/';
$text = '/';
if($row['author'] != null) $author = $row['author'];
if($row['title'] != null) $title = $row['title'];
if($row['text'] != null) $text = $row['text'];
if($this->checkIfNewsIsInTrending($row['id']) == 'no') {
$source = $this->getSource($row['source_id']);
echo '<div class="col" onclick="showTrendingOptions(this)">';
echo '<div class="cell">';
echo '<span>'.$author.'</span>';
echo '<span class="disable id all">'.$row['id'].'</span>';
echo '</div>';
echo '<div class="cell">';
echo '<span>'.$title.'</span>';
echo '</div>';
echo '<div class="cell">';
echo '<span>'.$text.'</span>';
echo '</div>';
echo '<div class="cell">';
echo '<span>'.$source.'</span>';
echo '</div>';
echo '</div>';
}
}
}
public function getSource($id) {
$sql = "SELECT * FROM sources WHERE id = ?";
$stmt = $this->connect()->prepare($sql);
$stmt->execute([$id]);
$row = $stmt->fetch();
if($row['name'] == null) return 'No source';
else return $row['name'];
}
public function checkIfNewsIsInTrending($id) {
$sql = "SELECT * FROM trending WHERE news_id = ?";
$stmt = $this->connect()->prepare($sql);
$stmt->execute([$id]);
$row = $stmt->fetch();
if($row) return 'yes';
else return 'no';
}
}
$generateObj = new generateNews();
$generateObj->generate();
?>
</article>
</section>
<section class="trending">
<div class="h1">
<h1>
Trending Page
</h1>
</div>
<article class="table" onclick="">
<div class="col">
<div class="cell">
<h1>Author</h1>
</div>
<div class="cell">
<h1>Title</h1>
</div>
<div class="cell">
<h1>Text</h1>
</div>
<div class="cell">
<h1>Source</h1>
</div>
</div>
<?php
class generateTrendingNews extends Dbh {
public function generate() {
$sql = "SELECT n.id, n.author,n.title,n.text,n.source_id FROM trending t INNER JOIN news n ON n.id = t.news_id";
$stmt = $this->connect()->prepare($sql);
$stmt->execute();
while($row = $stmt->fetch()) {
$author = '/';
$title = '/';
$text = '/';
if($row['author'] != null) $author = $row['author'];
if($row['title'] != null) $title = $row['title'];
if($row['text'] != null) $text = $row['text'];
$source = $this->getSource($row['source_id']);
echo '<div class="col" onclick="showTrendingOptions(this)">';
echo '<div class="cell">';
echo '<span>'.$author.'</span>';
echo '<span class="disable id trending">'.$row['id'].'</span>';
echo '</div>';
echo '<div class="cell">';
echo '<span>'.$title.'</span>';
echo '</div>';
echo '<div class="cell">';
echo '<span>'.$text.'</span>';
echo '</div>';
echo '<div class="cell">';
echo '<span>'.$source.'</span>';
echo '</div>';
echo '</div>';
}
}
public function getSource($id) {
$sql = "SELECT * FROM sources WHERE id = ?";
$stmt = $this->connect()->prepare($sql);
$stmt->execute([$id]);
$row = $stmt->fetch();
if($row['name'] == null) return 'No source';
else return $row['name'];
}
}
$generateTrendingObj = new generateTrendingNews();
$generateTrendingObj->generate();
?>
</article>
</section>
</div>
</div>
</main>
<?php include '../add-ons/profileImg.php' ?>
<div class="fixed" id="overlay"></div>
</body>
</html>

1
add-ons/head.php
View file

@ -9,6 +9,7 @@
<link rel="stylesheet" href="../CSS/colors.css">
<link rel="stylesheet" href="../CSS/*.css">
<link rel="stylesheet" href="../CSS/profileImg.css">
<link rel="stylesheet" href="../CSS/index.css">
<link rel="stylesheet" href="../CSS/responsive.css">

18
add-ons/navigation-bar-right.php
View file

@ -12,19 +12,19 @@
else $str = '';
if($_SESSION['profile_choice'] == 0)
echo ('<div class="img small" '.$str.'><img src="'.$path.$_SESSION['profile_img'].'" class="imga"></div>');
echo ('<div class="img small test" '.$str.'><img src="'.$path.$_SESSION['profile_img'].'" class="imga"></div>');
else if($_SESSION['profile_choice'] == 1)
echo ('<div class="img small" '.$str.' style="background-color: '.$_SESSION['profile_color'].';">
echo ('<div class="img small test" '.$str.' style="background-color: '.$_SESSION['profile_color'].';">
<div class="letter">
<span>'.$_SESSION['letter'].'</span>
</div>
</div>');
else if($_SESSION['profile_choice'] == 2)
echo ('<div class="img small" '.$str.'><img src="'.$_SESSION['google_profile_img'].'" class="imga"></div>');
echo ('<div class="img small test" '.$str.'><img src="'.$_SESSION['google_profile_img'].'" class="imga"></div>');
else if($_SESSION['profile_choice'] == 3)
echo ('<div class="img small"'.$str.'><img src="'.$_SESSION['facebook_profile_img'].'" class="imga"></div>');
echo ('<div class="img small test"'.$str.'><img src="'.$_SESSION['facebook_profile_img'].'" class="imga"></div>');
else if($_SESSION['profile_choice'] == 4)
echo ('<div class="img small" '.$str.'><img src="'.$_SESSION['github_profile_img'].'" class="imga"></div>');
echo ('<div class="img small test" '.$str.'><img src="'.$_SESSION['github_profile_img'].'" class="imga"></div>');
?>
@ -104,7 +104,7 @@
</div>
<div class="middle-div">
<div class="container" <?php if($_SESSION['googleID'] == 0) echo 'onclick="logOut(\'#login\')"' ?>>
<div class="container" <?php if($_SESSION['googleID'] == 0) echo 'onclick="logout(\'#login\')"' ?>>
<div class="google">
<div>
<i class="fab fa-google icon"></i>
@ -117,7 +117,7 @@
</span>
</div>
</div>
<div class="container" <?php if($_SESSION['facebookID'] == 0) echo 'onclick="logOut(\'#login\')"' ?>>
<div class="container" <?php if($_SESSION['facebookID'] == 0) echo 'onclick="logout(\'#login\')"' ?>>
<div class="facebook">
<div>
<i class="fab fa-facebook icon"></i>
@ -130,7 +130,7 @@
</span>
</div>
</div>
<div class="container" <?php if($_SESSION['githubID'] == 0) echo 'onclick="logOut(\'#login\')"' ?>>
<div class="container" <?php if($_SESSION['githubID'] == 0) echo 'onclick="logout(\'#login\')"' ?>>
<div class="github">
<div>
<i class="fab fa-github icon"></i>
@ -146,7 +146,7 @@
</div>
<div class="bottom-div">
<div class="sign-out">
<div class="button-container" onclick="<?php if(strpos($_SERVER['REQUEST_URI'], 'account')) echo 'logout(\'\')'; else echo 'logOut(\'\')';?>">
<div class="button-container" onclick="<?php if(strpos($_SERVER['REQUEST_URI'], 'account')) echo 'logout(\'\')'; else echo 'logout(\'\')';?>">
<span>
Sign out
</span>

43
add-ons/profileImg.php
View file

@ -1,4 +1,4 @@
<div class="main-img-container disable" id="main-img-container">
<div class="main-img-container" id="main-img-container">
<header>
<h1>Change Profile Image</h1>
</header>
@ -19,12 +19,44 @@
</div>
</div>
</div>
<div class="container external" id="external-img-container">
<?php
$path = '../';
if(strpos($_SERVER['REQUEST_URI'], 'search') || strpos($_SERVER['REQUEST_URI'], 'headlines')) $path = '';
$check = '<div class="check-mark"> <i class="far fa-check"></i></div>';
if(isset($_SESSION['profile_img']) && $_SESSION['profile_img'] != null) {
if($_SESSION['profile_choice'] == 0) $checkC = $check;
else $checkC = '';
echo '<div style="display:flex; align-items:center; justify-content:center; position:relative;" class="costum" onclick="selectImg(this)"> <img src="'.$path.$_SESSION['profile_img'].'" alt="profile" class="img medium">
<span class="tooltiptext tooltiptextTop120">Costum Image</span>
'.$checkC.'
</div>';
}
if(isset($_SESSION['google_profile_img']) && $_SESSION['google_profile_img'] != null) {
if($_SESSION['profile_choice'] != 2) $checkG = '';
else $checkG = $check;
echo '<div style="display:flex; align-items:center; justify-content:center; position:relative;" class="google" onclick="selectImg(this)"> <img src="'.$_SESSION['google_profile_img'].'" alt="profile" class="img medium">
<span class="tooltiptext tooltiptextTop120">Google Image</span>
'.$checkG.'
</div>';
}
if(isset($_SESSION['facebook_profile_img']) && $_SESSION['facebook_profile_img'] != null) {
if($_SESSION['profile_choice'] != 3) $checkF = '';
else $checkF = $check;
echo '<div style="display:flex; align-items:center; justify-content:center; position:relative;" class="facebook" onclick="selectImg(this)"> <img src="'.$_SESSION['facebook_profile_img'].'" alt="profile" class="img medium add">
<span class="tooltiptext tooltiptextTop120">Facebook Image</span>
'.$checkF.'
</div>';
}
?>
</div>
<section class="insert-photo-container" id="insert-photo-container">
<div class="main-insert-photo-container">
<div class="img-text">
<p>Click on grey area and add image</p>
</div>
<div><span class="error-span-upload-image red-color" id="error-span-upload-image"></span></div>
<div><span class="error red-color" id="error-span-upload-image"></span></div>
<div class="select-img" onclick="openFolder()">
<div class="icon">
@ -36,7 +68,7 @@
<input type="file" hidden="hidden" id="file-upload" name="file" onChange='fileChange()'>
</form>
<div class="footer disable">
<div class="name"><span class="image-name-label" id="image-name-label">Ime</span></div>
<div class="name"><span class="image-name-label" id="image-name-label"></span></div>
<div class="button" onclick="submitProfileImageUploadForm()">
Submit
</div>
@ -52,6 +84,11 @@
<div class="color-container">
</div>
</section>
<div class="footer-container">
<div class="button" onclick="saveImg()">
<div class="blue-button">Save</div>
</div>
</div>
<div class="x" onclick="showProfileImg()" >
<div>
<i class="fal fa-times x-icon fa-lg"aria-hidden="true"></i>

179
headlines.php
View file

@ -9,6 +9,7 @@
<link rel="stylesheet" href="CSS/colors.css">
<link rel="stylesheet" href="CSS/*.css">
<link rel="stylesheet" href="CSS/profileImg.css">
<link rel="stylesheet" href="CSS/index.css">
<link rel="stylesheet" href="CSS/responsive.css">
<link rel="shortcut icon" href="">
@ -37,21 +38,113 @@
<section class="main-content-section single headlines" id="main-content-section">
<div class="main-content-container">
<div class="article-container">
<article class="news">
<div>
<h3>Hello World!</h3>
<div>
<!-- <article class="news a-1-a">
<div class="article-header">
<div class="article-heading-container">
<a href="">
<h1>Facebook removes Trump post falsely saying flu is more lethal than Covid - CNN</h1>
</a>
</div>
<div class="subtitle">
<div class="extra-content-container">
<div class="author">
<span>CNN • 12/4/2002</span>
</div>
<div class="extra-options-container">
<div class="save-container a-1-a">
<div class="save-circle" onclick="saveNews(1,this.parentElement)">
<i class="far fa-bookmark"></i>
</div>
<span class="tooltiptext tooltiptextTop90">Save</span>
</div>
<div class="extra-container">
<div class="extra-circle" onclick="openExtraOptions(this)">
<i class="far fa-ellipsis-v"></i>
</div>
<span class="tooltiptext tooltiptextTop120">More</span>
<aside class="extra-option-container disable a-1-a">
<div class="e-o-c-container" onclick="openNews(this)">
<div>
<i class="far fa-external-link-alt"></i>
</div>
<span>Open</span>
</div>
<div class="e-o-c-container" onclick="saveNews(2,this.parentElement)"><div><i class="far fa-bookmark"></i></div><span>Save</span></div>
<div class="e-o-c-container" onclick="hideArticle('a-1-a')"><div><i class="far fa-minus-circle"></i></div><span>Hide</span></div>
</aside>
</div>
</div>
</div>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, nulla odit
dolores totam eaque voluptate labore! Neque, eum nihil placeat,
veritatis voluptatum, magnam perferendis beatae ipsa minus iure iste deserunt.
<span class="disable a-1-t">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, nulla odit
dolores totam eaque voluptate labore! Neque, eum nihil placeat,
veritatis voluptatum, magnam perferendis beatae ipsa minus iure iste deserunt.
</span>
</p>
</div>
<div class="footer">
<div onclick="manageArticleText(this,'a-1-t')">
<i class="far fa-chevron-down"></i>
</div>
</div>
<div class="article-img">
<img src="https://cdn.cnn.com/cnnnext/dam/assets/201005192147-03-trump-arrives-white-house-1005-removes-mask-super-tease.jpg" alt="">
</div>
</article>
<article class="news a-2-a no-img">
<div class="article-header">
<div class="article-heading-container">
<a href="">
<h1>Facebook removes Trump post falsely saying flu is more lethal than Covid - CNN</h1>
</a>
</div>
<div class="extra-content-container">
<div class="author">
<span>CNN • 12/4/2002</span>
</div>
<div class="extra-options-container">
<div class="save-container a-2-a">
<div class="save-circle" onclick="saveNews(1,this.parentElement)">
<i class="far fa-bookmark"></i>
</div>
<span class="tooltiptext tooltiptextTop90">Save</span>
</div>
<div class="extra-container">
<div class="extra-circle" onclick="openExtraOptions(this)">
<i class="far fa-ellipsis-v"></i>
</div>
<span class="tooltiptext tooltiptextTop120">More</span>
<aside class="extra-option-container disable a-2-a">
<div class="e-o-c-container" onclick="openNews(this)"><div><i class="far fa-external-link-alt"></i></div><span>Open</span></div>
<div class="e-o-c-container" onclick="saveNews(2,this.parentElement)"><div><i class="far fa-bookmark"></i></div><span>Save</span></div>
<div class="e-o-c-container" onclick="hideArticle('a-2-a')"><div><i class="far fa-minus-circle"></i></div><span>Hide</span></div>
</aside>
</div>
</div>
</div>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, nulla odit
dolores totam eaque voluptate labore! Neque, eum nihil placeat,
veritatis voluptatum, magnam perferendis beatae ipsa minus iure iste deserunt.
<span class="disable a-2-t">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, nulla odit
dolores totam eaque voluptate labore! Neque, eum nihil placeat,
veritatis voluptatum, magnam perferendis beatae ipsa minus iure iste deserunt.
</span>
</p>
</div>
<div class="footer">
<div onclick="manageArticleText(this,'a-2-t')">
<i class="far fa-chevron-down"></i>
</div>
</div>
</article> -->
</div>
<aside id="main-side-content-container">
@ -109,31 +202,51 @@
</section>
</footer>
</article>
<article class="trending-page">
<div class="header">
<h1>Trending</h1>
</div>
<div class="trending-headlines-container">
<?php
include_once 'include/db.inc.php';
class generateTrendingNews extends Dbh {
public function generate() {
$sql = "SELECT n.id, n.author,n.title,n.text,n.source_id,n.URL_site FROM trending t INNER JOIN news n ON n.id = t.news_id LIMIT 20";
$stmt = $this->connect()->prepare($sql);
$stmt->execute();
while($row = $stmt->fetch()) {
echo '<div class="main" onclick="window.open(\''.$row['URL_site'].'\')">';
echo '<div><span>'.substr($row['title'], 0, 100).'...</span></div>';
echo '<div class="small"><span>'.$this->getSource($row['source_id']).'</span></div>';
echo '</div>';
}
}
public function getSource($id) {
$sql = "SELECT * FROM sources WHERE id = ?";
$stmt = $this->connect()->prepare($sql);
$stmt->execute([$id]);
$row = $stmt->fetch();
if($row['name'] == null) return 'No source';
else return $row['name'];
}
}
$generateObj = new generateTrendingNews();
$generateObj->generate();
?>
</div>
</article>
</aside>
</div>
</section>
<!-- <section class="main-content-section grid" id="main-content-section">
<header id="main-content-header" class="header-main-content search">
<h1 class="search">Headlines</h1>
</header> -->
<!-- <figure id="main-content-container">
<header id="main-content-header" class="section-main-header header-main-content">
<h1>Headlines</h1>
<a href="#" class="blue-link flex" onclick="showCategoryNews()">Categories</a>
</header>
<article class="coronavirus-article grid article-other" id="coronavirus-article">
<a href="#" class="blue-link" id="coronavirus-article-a">
COVID-19 information:
<span> See the lates coverage of coronavirus</span>
</a>
<i class="fas fa-chevron-right corona-arrow pointer"></i>
</article>
</figure> -->
</main>
<?php include 'add-ons/navigation-bar.php' ?>
@ -145,6 +258,8 @@
<div class="fixed" id="overlay"></div>
<?php include 'add-ons/footer-scripts.php' ?>
<?php include 'add-ons/profileImg.php' ?>
</body>

19
include/check.inc.php
View file

@ -1,4 +1,6 @@
<?php include_once 'db.inc.php';
session_start();
class Check extends Dbh {
@ -97,6 +99,21 @@ class Check extends Dbh {
</div>';
die;
}
public function isIdSet() {
if(isset($_SESSION['email'])) echo 'je';
else echo 'ni';
die;
}
public function newsSaveArticle($title) {
$sql = 'SELECT * FROM news n INNER JOIN saved_news sn ON n.id = sn.news_id INNER JOIN users u ON u.id = sn.user_id WHERE n.title = ?';
$stmt = $this->connect()->prepare($sql);
$stmt->execute([$title]);
$row = $stmt->fetch();
if($row) echo 'saved';
else echo 'not saved';
}
}
$checkObj = new Check();
@ -105,3 +122,5 @@ if($_SERVER['REQUEST_METHOD'] !== 'POST') return;
if(isset($_POST['email'])) $checkObj->email(json_decode($_POST['email']));
else if(isset($_POST['login'])) $checkObj->login(json_decode($_POST['login']));
else if(isset($_POST['pswSet'])) $checkObj->pswSet();
else if(isset($_POST['isIdSet'])) $checkObj->isIdSet();
else if(isset($_POST['newsSaveArticle'])) $checkObj->newsSaveArticle($_POST['newsSaveArticle']);

40
include/db.inc.php
View file

@ -1,26 +1,10 @@
<?php
class Dbh {
private $host = 'localhost';
private $dbName = 'NewsWebsite';
private $user = 'root';
private $pwd = '';
private $charset = 'utf8mb4';
protected function connect() {
$dsn = 'mysql:host=' .$this->host. ';dbname=' .$this->dbName. ';charset=' .$this->charset ;
$pdo = new PDO($dsn, $this->user, $this->pwd);
$pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
return $pdo;
}
}
// class Dbh {
// private $host = '';
// private $dbName = 'niktople_Fews';
// private $user = 'niktople_nik';
// private $pwd = 'niktopler2002';
// private $host = 'localhost';
// private $dbName = 'NewsWebsite';
// private $user = 'root';
// private $pwd = '';
// private $charset = 'utf8mb4';
// protected function connect() {
@ -32,3 +16,19 @@
// }
class Dbh {
private $host = '';
private $dbName = 'niktople_Fews';
private $user = 'niktople_nik';
private $pwd = 'niktopler2002';
private $charset = 'utf8mb4';
protected function connect() {
$dsn = 'mysql:host=' .$this->host. ';dbname=' .$this->dbName. ';charset=' .$this->charset ;
$pdo = new PDO($dsn, $this->user, $this->pwd);
$pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
return $pdo;
}
}

60
include/insert.inc.php
View file

@ -1,16 +1,15 @@
<?php include_once 'db.inc.php';
<?php include_once 'db.inc.php';
class Login extends Dbh{
class Login extends Dbh {
public function google($userInfo) {
require_once '../vendor/autoload.php';
$client = new Google_Client(['client_id' => $userInfo[2]]);
$payload = $client->verifyIdToken($userInfo[1]);
if (!$payload) {
echo 'error';
return;
}
// require_once '../vendor/autoload.php';
// $client = new Google_Client(['client_id' => $userInfo[2]]);
// $payload = $client->verifyIdToken($userInfo[1]);
// if (!$payload) {
// echo 'error';
// return;
// }
$userExist = $this->checkIfUserExistsExternal('google', $userInfo);
if($userExist == 'empty') $this->insert('google', $userInfo);
else if($userExist == 'ID') $this->updateID('googleID', $userInfo);
@ -154,11 +153,46 @@ class Login extends Dbh{
$i = array_rand($colors);
return $colors[$i];
}
public function news($array) {
echo $this->checkIfNewsIsInDB($array);
if($this->checkIfNewsIsInDB($array) == 'je') die;
$this->insertSource($array[4]);
$sql = 'INSERT INTO news(author,title,subtitle,URL_site,URL_img,date,text,source_id) VALUES(?,?,?,?,?,?,?,(SELECT id FROM sources WHERE name = ?))';
$stmt = $this->connect()->prepare($sql);
$stmt->execute([$array[0], $array[5], $array[1], $array[6], $array[7], $array[3], $array[2], $array[4]]);
}
public function checkIfNewsIsInDB($array) {
$sql = 'SELECT * FROM news WHERE title = ? AND author = ?';
$stmt = $this->connect()->prepare($sql);
$stmt->execute([$array[5], $array[0]]);
$row = $stmt->fetch();
if($row) return 'je';
else return 'ni';
}
public function insertSource($name) {
if($this->checkIfSourceIsInDB($name) == 'je') return;
$sql = 'INSERT INTO sources(name) VALUES (?)';
$stmt = $this->connect()->prepare($sql);
$stmt->execute([$name]);
}
public function checkIfSourceIsInDB($name) {
$sql = 'SELECT * FROM sources WHERE name = ?';
$stmt = $this->connect()->prepare($sql);
$stmt->execute([$name]);
$row = $stmt->fetch();
if($row) return 'je';
else return 'ni';
}
}
$loginObj = new Login();
if($_SERVER['REQUEST_METHOD'] !== 'POST') return;
if($_SERVER['REQUEST_METHOD'] !== 'POST') die;
else if(isset($_POST['google'])) $loginObj->google(json_decode($_POST['google']));
else if(isset($_POST['facebook'])) $loginObj->facebook(json_decode($_POST['facebook']));
else if(isset($_POST['standard'])) $loginObj->standard(json_decode($_POST['standard']));
else if(isset($_POST['standard'])) $loginObj->standard(json_decode($_POST['standard']));
else if(isset($_POST['news'])) $loginObj->news(json_decode($_POST['news']));

55
include/update.inc.php
View file

@ -127,24 +127,67 @@ class update extends Dbh {
if($info[0] == '0') {
$name = "profile_img";
$num = 0;
if($this->checkForImage($info[1],$info[0]) == 'true') die;
} else if($info[0] == '1') {
$name = "profile_color";
$num = 1;
} else if($info[0] == '2') {
$name = "google_profile_img";
$num = 2;
} else if($info[0] == '3') {
$name = "facebook_profile_img";
$num = 3;
} else if($info[0] == '4') {
$name = "github_profile_img";
$num = 4;
}
$this->checkForImage();
$sql = "UPDATE users SET profile_choice = ? WHERE email = ?";
$stmt = $this->connect()->prepare($sql);
$stmt->execute([$num, $_SESSION['email']]);
$sql = "UPDATE users SET ".$name." = ? WHERE email = ?";
$stmt = $this->connect()->prepare($sql);
$stmt->execute([$info[1], $_SESSION['email']]);
$this->setSessionVariables($_SESSION['email']);
echo 'success';
header("Refresh:0");
}
public function checkForImage() {
public function checkForImage($path, $num) {
$sql = 'SELECT * FROM users WHERE email = ?';
$stmt = $this->connect()->prepare($sql);
$stmt->execute([$_SESSION['email']]);
$row = $stmt->fetch();
if($row['profile_select'] == 0 && $row['profile_img'] != null) unlink('../'.$row['profile_img']);
if($row['profile_img'] == $path) die;
if($row['profile_img'] == $path) return 'true';
else return 'false';
}
public function deleteImg($path) { unlink($path); }
public function trendingIn($id) {
$sql = "INSERT INTO trending(news_id,admin_id) VALUES(?,(SELECT id FROM admins WHERE user_id = (SELECT id FROM users WHERE email = ?))) ";
$stmt = $this->connect()->prepare($sql);
$stmt->execute([$id, $_SESSION['email']]);
}
public function saveNews($info) {
if($this->checkIfAlreadySaved($info) == 'obstaja') die;
$sql = 'INSERT INTO saved_news(user_id,news_id) VALUES ((SELECT id FROM users WHERE email = ?), (SELECT id FROM news WHERE title = ?))';
$stmt = $this->connect()->prepare($sql);
$stmt->execute([$_SESSION['email'], $info[0]]);
}
public function unsaveNews($title) {
$sql = 'DELETE FROM saved_news WHERE user_id = (SELECT id FROM users WHERE email = ?) AND news_id = (SELECT id FROM news WHERE title = ?)';
$stmt = $this->connect()->prepare($sql);
$stmt->execute([$_SESSION['email'], $title[0]]);
}
public function checkIfAlreadySaved($info) {
$sql = 'SELECT * FROM news n inner join saved_news sn on n.id = sn.news_id inner join users u on u.id = sn.user_id WHERE sn.user_id = (SELECT id FROM users WHERE email = ?) AND sn.news_id = (SELECT id FROM news WHERE title = ?)';
$stmt = $this->connect()->prepare($sql);
$stmt->execute([$_SESSION['email'], $info[0]]);
$row = $stmt->fetch();
if($row) return 'obstaja';
else return 'neobstaj';
}
}
@ -159,4 +202,8 @@ else if(isset($_POST['oldPsw'])) $updateObj->oldPsw(json_decode($_POST['oldPsw']
else if(isset($_POST['addAdmin'])) $updateObj->addAdmin($_POST['addAdmin']);
else if(isset($_POST['removeAdmin'])) $updateObj->removeAdmin($_POST['removeAdmin']);
else if(isset($_POST['imageUpload'])) $updateObj->imageUpload(json_decode($_POST['imageUpload']));
else if(isset($_POST['deleteImg'])) $updateObj->deleteImg($_POST['deleteImg']);
else if(isset($_POST['trendingIn'])) $updateObj->trendingIn($_POST['trendingIn']);
else if(isset($_POST['saveNews'])) $updateObj->saveNews(json_decode($_POST['saveNews']));
else if(isset($_POST['unsaveNews'])) $updateObj->unsaveNews(json_decode($_POST['unsaveNews']));

43
personal/following.php
View file

@ -9,54 +9,15 @@
</main>
<?php include '../add-ons/navigation-bar.php' ?>
<?php include '../add-ons/login.php' ?>
<div class="login-option-div grid absolute fixed" id="login-option-div">
<header class="grid">
<span class="flex align-center justify-center ">Sign in to</span>
<h1 class="flex align-center justify-center ">News Website</h1>
</header>
<div class="google-facebook-links">
<div class="external-login-container" id="googleBtn">
<div class="external-login-botton google-login-button grid pointer">
<div class="icons8-google"></div>
<label class="flex align-center justify-center pointer">Google</label>
</div>
</div>
<!--! Facebook is curently unavailable-->
<!-- <div class="external-login-container facebook-login-container relative" onclick="showUnableAtTheMomentNotification()">
<div class="external-login-botton facebook-login-button grid pointer">
<i class="fab fa-facebook fa-2x flex align-center justify-center"></i>
<label class="flex align-center justify-center pointer">Facebook</label>
</div>
</div> -->
<div class="external-login-container" id="github-button">
<div class="external-login-botton github-login-button grid pointer">
<i class="fa fa-github fa-2x flex align-center justify-center"></i>
<label class="flex align-center justify-center pointer">GitHub</label>
</div>
</div>
</div>
<hr>
<span class="or-login absolute">or</span>
<figure class="x-icon absolute flex align-center justify-center border-radius-50">
<i class="fal fa-times fa-lg pointer" onclick="manageLoginOptions()"></i>
</figure>
<footer class="login-other-options">
<a href="signin.php" class="blue-link">Create Account</a>
<a href="login.php" class="blue-link">Log In</a>
</footer>
</div>
<?php include '../add-ons/select-country.php' ?>
<div class="fixed" id="overlay"></div>
<?php include '../add-ons/footer-scripts.php' ?>
<?php include '../add-ons/profileImg.php' ?>
</body>

45
personal/for-you.php
View file

@ -9,54 +9,15 @@
</main>
<?php include '../add-ons/navigation-bar.php' ?>
<?php include '../add-ons/login.php' ?>
<div class="login-option-div grid absolute fixed" id="login-option-div">
<header class="grid">
<span class="flex align-center justify-center ">Sign in to</span>
<h1 class="flex align-center justify-center ">News Website</h1>
</header>
<div class="google-facebook-links">
<div class="external-login-container" id="googleBtn">
<div class="external-login-botton google-login-button grid pointer">
<div class="icons8-google"></div>
<label class="flex align-center justify-center pointer">Google</label>
</div>
</div>
<!--! Facebook is curently unavailable-->
<!-- <div class="external-login-container facebook-login-container relative" onclick="showUnableAtTheMomentNotification()">
<div class="external-login-botton facebook-login-button grid pointer">
<i class="fab fa-facebook fa-2x flex align-center justify-center"></i>
<label class="flex align-center justify-center pointer">Facebook</label>
</div>
</div> -->
<div class="external-login-container" id="github-button">
<div class="external-login-botton github-login-button grid pointer">
<i class="fa fa-github fa-2x flex align-center justify-center"></i>
<label class="flex align-center justify-center pointer">GitHub</label>
</div>
</div>
</div>
<hr>
<span class="or-login absolute">or</span>
<figure class="x-icon absolute flex align-center justify-center border-radius-50">
<i class="fal fa-times fa-lg pointer" onclick="manageLoginOptions()"></i>
</figure>
<footer class="login-other-options">
<a href="signin.php" class="blue-link">Create Account</a>
<a href="login.php" class="blue-link">Log In</a>
</footer>
</div>
<?php include '../add-ons/select-country.php' ?>
<div class="fixed" id="overlay"></div>
<?php include '../add-ons/footer-scripts.php' ?>
<?php include '../add-ons/profileImg.php' ?>
</body>

139
personal/library.php
View file

@ -3,61 +3,112 @@
<body>
<main id="main" class="flex align-center justify-center">
<section class="main-content-section more library" id="main-content-section">
<?php include '../add-ons/side-bar.php' ?>
<div class="main-content-container">
<div class="article-container">
<?php include_once '../include/db.inc.php';
class generateUsers extends Dbh {
public function generate() {
$sql = "SELECT n.title, n.author, n.subtitle, n.URL_site, n.URL_img, n.date, n.text, n.source_id FROM news n INNER JOIN saved_news sn ON n.id = sn.id INNER JOIN users u ON u.id = sn.user_id WHERE u.email = ?";
$stmt = $this->connect()->prepare($sql);
$stmt->execute([$_SESSION['email']]);
$row = $stmt->fetch();
$n = 0;
while($row = $stmt->fetch()) {
if($row['URL_img'] == null) {
$img1 = 'no-img';
$img2 = '';
}else {
$img1 = '';
$img2 = '<div class="article-img">
<img src="'.$row['URL_img'].'" alt="">
</div>';
}
echo ('<article class="news a-'.$n.'-a '.$img1.'">
<div class="article-header">
<div class="article-heading-container">
<a href="'.$row['URL_site'].'">
<h1>'.$row['title'].'</h1>
</a>
</div>
<div class="extra-content-container">
<div class="author">
<span>'.$this->getSource($row['source_id']).' • '.$row['date'].'</span>
</div>
<div class="extra-options-container">
<div class="save-container a-'.$n.'-a">
<div class="save-circle" onclick="saveNews(1,this.parentElement)">
<i class="fas fa-bookmark yellow-color"></i>
</div>
<span class="tooltiptext tooltiptextTop90">Remove Bookmark</span>
</div>
<div class="extra-container">
<div class="extra-circle" onclick="openExtraOptions(this)">
<i class="fas fa-ellipsis-v"></i>
</div>
<span class="tooltiptext tooltiptextTop120">More</span>
<aside class="extra-option-container disable a-'.$n.'-a">
<div class="e-o-c-container" onclick="openNews(this)">
<div>
<i class="fas fa-external-link-alt"></i>
</div>
<span>Open</span>
</div>
<div class="e-o-c-container" onclick="saveNews(2,this.parentElement)"><div><i class="fas yellow-color fa-bookmark"></i></div><span>Save</span></div>
<div class="e-o-c-container" onclick="hideArticle(\'a-'.$n.'-a\')"><div><i class="fas fa-minus-circle"></i></div><span>Hide</span></div>
</aside>
</div>
</div>
</div>
</div>
<div class="text">
<p>'.$row['subtitle'].'
<span class="disable a-'.$n.'-t">'.$row['text'].'
</span>
</p>
</div>
<div class="footer">
<div onclick="manageArticleText(this,\'a-'.$n.'-t\')">
<i class="fas fa-chevron-down"></i>
</div>
</div>
'.$img2.'
</article>');
$n++;
}
}
public function getSource($id) {
$sql = "SELECT * FROM sources WHERE id = ?";
$stmt = $this->connect()->prepare($sql);
$stmt->execute([$id]);
$row = $stmt->fetch();
if($row['name'] == null) return 'No source';
else return $row['name'];
}
}
$generateObj = new generateUsers();
$generateObj->generate();
?>
</div>
</div>
</section>
</main>
<?php include '../add-ons/navigation-bar.php' ?>
<div class="login-option-div grid absolute fixed" id="login-option-div">
<header class="grid">
<span class="flex align-center justify-center ">Sign in to</span>
<h1 class="flex align-center justify-center ">News Website</h1>
</header>
<div class="google-facebook-links">
<div class="external-login-container" id="googleBtn">
<div class="external-login-botton google-login-button grid pointer">
<div class="icons8-google"></div>
<label class="flex align-center justify-center pointer">Google</label>
</div>
</div>
<!--! Facebook is curently unavailable-->
<!-- <div class="external-login-container facebook-login-container relative" onclick="showUnableAtTheMomentNotification()">
<div class="external-login-botton facebook-login-button grid pointer">
<i class="fab fa-facebook fa-2x flex align-center justify-center"></i>
<label class="flex align-center justify-center pointer">Facebook</label>
</div>
</div> -->
<div class="external-login-container" id="github-button">
<div class="external-login-botton github-login-button grid pointer">
<i class="fa fa-github fa-2x flex align-center justify-center"></i>
<label class="flex align-center justify-center pointer">GitHub</label>
</div>
</div>
</div>
<hr>
<span class="or-login absolute">or</span>
<figure class="x-icon absolute flex align-center justify-center border-radius-50">
<i class="fal fa-times fa-lg pointer" onclick="manageLoginOptions()"></i>
</figure>
<footer class="login-other-options">
<a href="signin.php" class="blue-link">Create Account</a>
<a href="login.php" class="blue-link">Log In</a>
</footer>
</div>
<?php include '../add-ons/login.php' ?>
<?php include '../add-ons/select-country.php' ?>
<div class="fixed" id="overlay"></div>
<?php include '../add-ons/footer-scripts.php' ?>
<?php include '../add-ons/profileImg.php' ?>
</body>
<?php include '../add-ons/footer-scripts.php' ?>

4
search.php
View file

@ -9,8 +9,10 @@
<link rel="stylesheet" href="CSS/colors.css">
<link rel="stylesheet" href="CSS/*.css">
<link rel="stylesheet" href="CSS/profileImg.css">
<link rel="stylesheet" href="CSS/index.css">
<link rel="stylesheet" href="CSS/responsive.css">
<link rel="shortcut icon" href="">
<script src="JS/variables.js" defer></script>
@ -95,6 +97,8 @@
<?php include 'add-ons/footer-scripts.php' ?>
<?php include 'add-ons/profileImg.php' ?>
</body>
<?php include 'add-ons/footer-scripts.php' ?>

3
topics/business.php
View file

@ -15,7 +15,7 @@
<i class="far fa-chart-line fa-lg"></i>
</div>
<div class="title">
<h2>Buisiness</h2>
<h2>Business</h2>
</div>
</div>
<div class="buttons">
@ -44,6 +44,7 @@
<div class="fixed" id="overlay"></div>
<?php include '../add-ons/footer-scripts.php' ?>
<?php include '../add-ons/profileImg.php' ?>
</body>

1
topics/categories.php
View file

@ -17,6 +17,7 @@
<div class="fixed" id="overlay"></div>
<?php include '../add-ons/footer-scripts.php' ?>
<?php include '../add-ons/profileImg.php' ?>
</body>

1
topics/covid-19.php
View file

@ -42,6 +42,7 @@
<?php include '../add-ons/select-country.php' ?>
<div class="fixed" id="overlay"></div>
<?php include '../add-ons/profileImg.php' ?>
<?php include '../add-ons/footer-scripts.php' ?>
</body>

1
topics/entertainment.php
View file

@ -42,6 +42,7 @@
<?php include '../add-ons/select-country.php' ?>
<div class="fixed" id="overlay"></div>
<?php include '../add-ons/profileImg.php' ?>
<?php include '../add-ons/footer-scripts.php' ?>

1
topics/health.php
View file

@ -42,6 +42,7 @@
<?php include '../add-ons/select-country.php' ?>
<div class="fixed" id="overlay"></div>
<?php include '../add-ons/profileImg.php' ?>
<?php include '../add-ons/footer-scripts.php' ?>

1
topics/sports.php
View file

@ -42,6 +42,7 @@
<?php include '../add-ons/select-country.php' ?>
<div class="fixed" id="overlay"></div>
<?php include '../add-ons/profileImg.php' ?>
<?php include '../add-ons/footer-scripts.php' ?>

1
topics/technology.php
View file

@ -44,6 +44,7 @@
<div class="fixed" id="overlay"></div>
<?php include '../add-ons/footer-scripts.php' ?>
<?php include '../add-ons/profileImg.php' ?>
</body>

1
topics/world.php
View file

@ -44,6 +44,7 @@
<div class="fixed" id="overlay"></div>
<?php include '../add-ons/footer-scripts.php' ?>
<?php include '../add-ons/profileImg.php' ?>
</body>