New files

This commit is contained in:
Nik Topler 2020-08-30 14:24:11 +02:00
parent f27832daa8
commit b6508e4849
30 changed files with 4067 additions and 1 deletions

283
CSS/*.css Normal file
View file

@ -0,0 +1,283 @@
* {
margin: 0;
padding: 0;
-moz-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
body{
width: 100vw;
height: 100vh;
font-family: 'Noto Sans', sans-serif;
}
.select-div{
position: relative;
padding: 10px;
cursor: pointer;
height: 20%;
display: flex;
align-items: center;
margin: auto 0;
}
.select-div label {
text-align: center;
width: fit-content;
cursor: pointer;
color: var(--userTextInput);
}
.select-options {
padding: 10px 0px;
box-shadow: 0px 1px 4px rgb(122, 122, 122);
background-color: var(--bg);
top: 39px;
overflow: auto;
z-index: 10;
}
.select-options::-webkit-scrollbar {
display: none;
}
.select-options div {
font-size: 1rem;
padding: 10px;
color: var(--userTextInput);
}
.selected-option {
background-color: var(--hover-light);
}
/* .selected-option:active {
transition: all ease-in .18s;
} */
/*? Reusable classes */
/** Display */
.grid {
display: grid;
}
.flex {
display: flex;
}
.disable {
display: none !important;
}
/** Position of elements */
.align-center{
align-items: center;
}
.justify-center{
justify-content: center;
}
/** Position */
.relative{
position: relative;
}
.absolute{
position: absolute;
}
.fixed{
position: fixed;
}
/** Border */
.border-radius-50{
border-radius: 50%;
}
/** Cursor */
.pointer{
cursor: pointer;
}
.default-pointer{
cursor: default;
}
.pointer-events-none{
pointer-events: none;
}
/** Link */
a{
text-decoration: none;
}
/** Img */
.img{
width: calc(var(--imageDefaultSize) * var(--times));
height: calc(var(--imageDefaultSize) * var(--times));
}
/** Tooltiptext */
.nav-right-side .first-profile-div:hover + .tooltiptext,
.search-icon:hover + .tooltiptext,
.article-other-info .test:hover + .tooltiptext,
.article-extra-option-icon:hover + .tooltiptext,
.company-date:hover .tooltiptext{
visibility: visible;
opacity: 1;
font-size: 0.7em;
}
.tooltiptext{
position: absolute;
height: fit-content;
width: fit-content;
border-radius: 3px;
padding: 4px 6px;
z-index: 12;
white-space: nowrap;
transition: opacity 0.3s;
font-size: 0.8rem !important;
font-style: normal;
visibility: hidden;
opacity: 0;
background-color: var(--tooltiptext-bg);
color: var(--bg);
font-family: 'Noto Sans', sans-serif;
}
.tooltiptextTop180 {
top: 180%;
}
.tooltiptextTop150 {
top: 150%;
}
.tooltiptextTop120 {
top: 120%;
}
.tooltiptextTop90 {
top: 90%;
}
.nav-right-side .tooltiptext{
right: 10px;
}
.search-icon-figure .tooltiptext{
left: 0;
}
.company-date .tooltiptext{
left: 0;
}
span {
font-style: normal;
}
hr{
margin: auto;
width: 90%;
border: none;
}
.activeProfile{
background-color: var(--hover-medium) !important;
}
.underline-input-animation{
display: inline-block;
width: 0px;
height: 2px;
background: var(--blue-light);
position: relative;
-webkit-transition: all ease-in-out .2s;
-o-transition: all ease-in-out .2s;
transition: all ease-in-out .2s;
}
.background-shadow{
box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.328);
}
#overlay{
opacity: 0;
transition: 200ms ease-in-out;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.666);
pointer-events: none;
z-index: 9;
}
#overlay.active{
opacity: 1;
pointer-events: all;
}
.visible{
visibility: hidden;
}
.position-center{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.fal {
display: flex;
align-items: center;
justify-content: center;
}
h1{
font-size: 1.4rem;
font-weight: 500;
color: var(--title);
display: block;
}
.blue-link{
font-size: 0.9rem;
color: var(--blue-light);
}
.green-link{
color: var(--green-light);
}
.radio-button{
width: 2rem;
height: 2rem;
border-radius: 50%;
pointer-events: none;
}
.radio-button-border{
width: 14px;
height: 14px;
border-radius: 50%;
pointer-events: auto;
border: 2px solid var(--font-dark);
}
.radio-button:hover{
background-color: var(--hover-light);
}
.radio-button.active{
background-color: var(--side-bar-active);
}
.radio-button-border.active{
border: 2px solid var(--blue-light);
}
.radio-button-center{
width: 10px;
height: 10px;
background-color: var(--blue-light);
border-radius: 50%;
transform: scale(0);
transition: ease-in-out .1s all;
}
.radio-button-center.active{
transform: scale(1);
}
article{
padding: 15px;
margin-top: 20px;
border-radius: 9px;
border: 1px solid var(--border-medium);
background-color: var(--bg);
}
.red-color {
color: var(--red-medium);
}
.yellow-color{
color: var(--yellow-medium);
}

36
CSS/colors.css Normal file
View file

@ -0,0 +1,36 @@
:root{
--bg: #ffffff;
--hover-light: #f2f3f4;
--hover-medium: #dddddd;
--hover-dark: #c4c4c4;
--blue-light:#2d7de9;
--blue-medium:rgb(27, 122, 231);
--blue-dark: #1967d2;
--google-blue: #4486f7;
--red-medium: rgb(253,29,29);
--yellow-medium: rgb(255,205,0);
--green-light: rgb(6, 146, 6);
--title: #1f2024;
--font-light: rgb(187, 183, 183) ;
--font-medium: rgb(122, 122, 122);
--font-dark: #5F6368;
--font-very-dark: #212224;
--tooltiptext-bg: rgba(89, 93, 97, 0.89);
--userTextInput:#090a0ab2;
--shadow: rgb(211, 211, 211);
--border-light: rgba(0,0,0,.16);
--border-medium: #D1D1D1;
--border-dark: rgba(0,0,0,.26);
--border-input: #E0E0E0;
--imageDefaultSize: 1rem;
--side-bar-active: #e3edfd;
}

1148
CSS/index.css Normal file

File diff suppressed because it is too large Load diff

187
JS/icon.js Normal file
View file

@ -0,0 +1,187 @@
window.FontAwesomeKitConfig = {
"asyncLoading": {
"enabled": false
},
"autoA11y": {
"enabled": true
},
"baseUrl": "https://kit-pro.fontawesome.com",
"detectConflictsUntil": null,
"license": "pro",
"method": "css",
"minify": {
"enabled": true
},
"v4FontFaceShim": {
"enabled": true
},
"v4shim": {
"enabled": true
},
"version": "latest"
};
! function () {
function r(e) {
var t, n = [],
i = document,
o = i.documentElement.doScroll,
r = "DOMContentLoaded",
a = (o ? /^loaded|^c/ : /^loaded|^i|^c/).test(i.readyState);
a || i.addEventListener(r, t = function () {
for (i.removeEventListener(r, t), a = 1; t = n.shift();) t()
}), a ? setTimeout(e, 0) : n.push(e)
}! function () {
if (!(void 0 === window.Element || "classList" in document.documentElement)) {
var e, t, n, i = Array.prototype,
o = i.push,
r = i.splice,
a = i.join;
d.prototype = {
add: function (e) {
this.contains(e) || (o.call(this, e), this.el.className = this.toString())
},
contains: function (e) {
return -1 != this.el.className.indexOf(e)
},
item: function (e) {
return this[e] || null
},
remove: function (e) {
if (this.contains(e)) {
for (var t = 0; t < this.length && this[t] != e; t++);
r.call(this, t, 1), this.el.className = this.toString()
}
},
toString: function () {
return a.call(this, " ")
},
toggle: function (e) {
return this.contains(e) ? this.remove(e) : this.add(e), this.contains(e)
}
}, window.DOMTokenList = d, e = Element.prototype, t = "classList", n = function () {
return new d(this)
}, Object.defineProperty ? Object.defineProperty(e, t, {
get: n
}) : e.__defineGetter__(t, n)
}
function d(e) {
for (var t = (this.el = e).className.replace(/^\s+|\s+$/g, "").split(/\s+/), n = 0; n < t.length; n++) o.call(this, t[n])
}
}();
function a(e) {
var t, n, i, o;
prefixesArray = e || ["fa"], prefixesSelectorString = "." + Array.prototype.join.call(e, ",."), t = document.querySelectorAll(prefixesSelectorString), Array.prototype.forEach.call(t, function (e) {
n = e.getAttribute("title"), e.setAttribute("aria-hidden", "true"), i = !e.nextElementSibling || !e.nextElementSibling.classList.contains("sr-only"), n && i && ((o = document.createElement("span")).innerHTML = n, o.classList.add("sr-only"), e.parentNode.insertBefore(o, e.nextSibling))
})
}
var d = function (e, t) {
var n = document.createElement("link");
n.href = e, n.media = "all", n.rel = "stylesheet", t && t.detectingConflicts && t.detectionIgnoreAttr && n.setAttributeNode(document.createAttribute(t.detectionIgnoreAttr)), document.getElementsByTagName("head")[0].appendChild(n)
},
c = function (e, t) {
! function (e, t) {
var n, i = t && t.before || void 0,
o = t && t.media || void 0,
r = window.document,
a = r.createElement("link");
if (t && t.detectingConflicts && t.detectionIgnoreAttr && a.setAttributeNode(document.createAttribute(t.detectionIgnoreAttr)), i) n = i;
else {
var d = (r.body || r.getElementsByTagName("head")[0]).childNodes;
n = d[d.length - 1]
}
var c = r.styleSheets;
a.rel = "stylesheet", a.href = e, a.media = "only x",
function e(t) {
if (r.body) return t();
setTimeout(function () {
e(t)
})
}(function () {
n.parentNode.insertBefore(a, i ? n : n.nextSibling)
});
var s = function (e) {
for (var t = a.href, n = c.length; n--;)
if (c[n].href === t) return e();
setTimeout(function () {
s(e)
})
};
function l() {
a.addEventListener && a.removeEventListener("load", l), a.media = o || "all"
}
a.addEventListener && a.addEventListener("load", l), (a.onloadcssdefined = s)(l)
}(e, t)
},
e = function (e, t, n) {
var i = t && void 0 !== t.autoFetchSvg ? t.autoFetchSvg : void 0,
o = t && void 0 !== t.async ? t.async : void 0,
r = t && void 0 !== t.autoA11y ? t.autoA11y : void 0,
a = document.createElement("script"),
d = document.scripts[0];
a.src = e, void 0 !== r && a.setAttribute("data-auto-a11y", r ? "true" : "false"), i && (a.setAttributeNode(document.createAttribute("data-auto-fetch-svg")), a.setAttribute("data-fetch-svg-from", t.fetchSvgFrom)), o && a.setAttributeNode(document.createAttribute("defer")), n && n.detectingConflicts && n.detectionIgnoreAttr && a.setAttributeNode(document.createAttribute(n.detectionIgnoreAttr)), d.parentNode.appendChild(a)
};
function s(e, t) {
var n = t && t.addOn || "",
i = t && t.baseFilename || e.license + n,
o = t && t.minify ? ".min" : "",
r = t && t.fileSuffix || e.method,
a = t && t.subdir || e.method;
return e.baseUrl + "/releases/" + ("latest" === e.version ? "latest" : "v".concat(e.version)) + "/" + a + "/" + i + o + "." + r
}
var t, n, i, o, l;
try {
if (window.FontAwesomeKitConfig) {
var u, f = window.FontAwesomeKitConfig,
m = {
detectingConflicts: f.detectConflictsUntil && new Date <= new Date(f.detectConflictsUntil),
detectionIgnoreAttr: "data-fa-detection-ignore",
detectionTimeoutAttr: "data-fa-detection-timeout",
detectionTimeout: null
};
"js" === f.method && (o = m, l = {
async: (i = f).asyncLoading.enabled,
autoA11y: i.autoA11y.enabled
}, "pro" === i.license && (l.autoFetchSvg = !0, l.fetchSvgFrom = i.baseUrl + "/releases/" + ("latest" === i.version ? "latest" : "v".concat(i.version)) + "/svgs"), i.v4shim.enabled && e(s(i, {
addOn: "-v4-shims",
minify: i.minify.enabled
})), e(s(i, {
minify: i.minify.enabled
}), l, o)), "css" === f.method && function (e, t) {
var n, i = a.bind(a, ["fa", "fab", "fas", "far", "fal", "fad"]);
e.autoA11y.enabled && (r(i), n = i, "undefined" != typeof MutationObserver && new MutationObserver(n).observe(document, {
childList: !0,
subtree: !0
})), e.v4shim.enabled && (e.license, e.asyncLoading.enabled ? c(s(e, {
addOn: "-v4-shims",
minify: e.minify.enabled
}), t) : d(s(e, {
addOn: "-v4-shims",
minify: e.minify.enabled
}), t));
e.v4FontFaceShim.enabled && (e.asyncLoading.enabled ? c(s(e, {
addOn: "-v4-font-face",
minify: e.minify.enabled
}), t) : d(s(e, {
addOn: "-v4-font-face",
minify: e.minify.enabled
}), t));
var o = s(e, {
minify: e.minify.enabled
});
e.asyncLoading.enabled ? c(o, t) : d(o, t)
}(f, m), m.detectingConflicts && ((u = document.currentScript.getAttribute(m.detectionTimeoutAttr)) && (m.detectionTimeout = u), document.currentScript.setAttributeNode(document.createAttribute(m.detectionIgnoreAttr)), t = f, n = m, r(function () {
var e = document.createElement("script");
n && n.detectionIgnoreAttr && e.setAttributeNode(document.createAttribute(n.detectionIgnoreAttr)), n && n.detectionTimeoutAttr && n.detectionTimeout && e.setAttribute(n.detectionTimeoutAttr, n.detectionTimeout), e.src = s(t, {
baseFilename: "conflict-detection",
fileSuffix: "js",
subdir: "js",
minify: t.minify.enabled
}), e.async = !0, document.body.appendChild(e)
}))
}
} catch (e) {}
}();

640
JS/main.js Normal file
View file

@ -0,0 +1,640 @@
window.onload = async () => {
await getuserLocationInformationValue()
removeActiveSidebarCategory()
if (window.location.pathname.includes('headlines')) headlines()
else if (window.location.pathname.includes('for-you')) forYou()
else if (window.location.pathname.includes('following')) following()
else if (window.location.pathname.includes('library')) library()
else if (window.location.pathname.includes('covid')) category('fa-shield-cross')
else if (window.location.pathname.includes('world')) category('fa-globe-europe')
else if (window.location.pathname.includes('business')) category('fa-building')
else if (window.location.pathname.includes('technology')) category('fa-microchip')
else if (window.location.pathname.includes('entertainment')) category('fa-camera-movie')
else if (window.location.pathname.includes('sports')) category('fa-tennis-ball')
else if (window.location.pathname.includes('health')) category('fa-heartbeat')
else if (window.location.pathname.includes('setings')) setings()
else if (window.location.pathname.includes('about')) about()
else if (window.location.pathname.includes('help')) help()
else if (window.location.pathname.includes('search')) search()
// changeBackgroundColor()
let selectedCountryAcronym = getCountryAcronym(selectedCountry.innerHTML)
if(!window.location.search.match(regularExpressions.url.country)) historyPushState(window.location.origin + window.location.pathname, '', `?cou=${selectedCountryAcronym}&`,`bg=${backgroundColor}`)
else {
urlCountryAcronym = window.location.search.match(regularExpressions.url.country)[0].slice(5,7)
if(getAcronymCountry(urlCountryAcronym) === undefined) return openLinks(filePath.headlines)
urlCountry = getAcronymCountry(urlCountryAcronym)
updateCountrySelect(urlCountry)
}
if(!window.location.search.match(regularExpressions.url.query)) return
let query = location.search.match(regularExpressions.url.query)[0]
query = removeCharactersInString(query, 3, query.length - 1)
/* Search news */
}
window.onclick = (e) => {
if(logInOptions.classList.contains('active')) clickInOutCheck(logInOptions,e.target)
else if(!extOptProfile.classList.contains('disable')) clickInOutCheck(extOptProfile,e.target)
else if(selectCountryDiv.classList.contains('active')) clickInOutCheck(selectCountryDiv,e.target)
else if(!extraSearchOptions.classList.contains('disable')) clickInOutCheck(extraSearchOptions,e.target)
}
window.onkeydown = (e) => {
// console.log(e.keyCode === 91 || e.keyCode === 93)
}
for(let i = 0; i < document.querySelectorAll('a').length; i++)
document.querySelectorAll('a')[i].addEventListener('click', (e) => { e.preventDefault() })
function openLinks(string) { window.location.replace(websiteURL + string) }
function historyPushState(webiste, string, country, background) { history.pushState({}, null, webiste + string + country + background) }
function changeBackgroundColor() { document.body.className = window.location.search.match(regularExpressions.url.backgroundColor)[0].slice(4,10) }
let userLocationInformationValue
async function getuserLocationInformationValue() { userLocationInformationValue = await getUsersCountry() }
async function getUsersCountry() {
const response = await fetch('https://ipinfo.io?token=ea08233c62eaef')
const data = await response.json()
const userCountryAcronym = data.country.toLowerCase()
const userCountry = getAcronymCountry(userCountryAcronym)
const userCity = data.city
const userRegion = data.region
const userLocation = data.loc
const userTimeZone = data.timezone
return [userCountry,userCountryAcronym,userCity,userRegion,userLocation,userTimeZone]
}
async function getWeather() {
city = changeDiacritics(userLocationInformationValue[3])
const response = await fetch(`https://cors-anywhere.herokuapp.com/https://api.weatherapi.com/v1/forecast.json?key=4d93fac43abe41dda15152718201307&q=${city}&days=7`)
const data = await response.json()
weatherArrayToday = data.forecast.forecastday[0]
weatherArrayTommorow = data.forecast.forecastday[1]
weatherArray2Days = data.forecast.forecastday[2]
}
function changeDiacritics(string) {
const regexDiacritics = /č|ć|đ|š|ž/g
string = string.split('')
for(let i = 0; i < string.length; i++)
if(regexDiacritics.test(string[i]))
string[i] = diacriticsReplacement[string[i]]
return string
}
function getLanguageAcronym(target) {
for(let i = 0; i < language.length; i++)
if(language[i] === target)
return languageAcronyms[i]
}
function getCountryAcronym(target) {
for(let i = 0; i < countries.length; i++)
if(countries[i] === target)
return countryAcronyms[i]
}
function getAcronymCountry(acronym) {
for(let i = 0; i < countries.length; i++)
if(countryAcronyms[i] === acronym)
return countries[i]
}
function getAcronymLanguage(acronym) {
for(let i = 0; i < language.length; i++)
if(languageAcronyms[i] === acronym)
return language[i]
}
function updateWeather() {
let header = document.querySelectorAll('.weather-main-header')[0]
header.children[0].src = weatherArrayToday.day.condition.icon
header.children[1].innerHTML = userLocationInformationValue[3]
header.children[2].innerHTML = `${Math.round(weatherArrayToday.day.avgtemp_c) }°C`
let weatherDate = new Date(weatherArrayToday.date)
let tommorowNumber = weatherDate.getDay()
let dayAfterTomorrow = weatherDate.getDay()
if(tommorowNumber == 6) tommorowNumber = tommorowNumber - 7
if(dayAfterTomorrow == 5 || dayAfterTomorrow == 6) dayAfterTomorrow = dayAfterTomorrow - 7
let dayAcronymTommorow = daysAcronyms[tommorowNumber + 1]
let dayAcronymIn2Days = daysAcronyms[dayAfterTomorrow + 2]
let mainWeatherContent = document.querySelectorAll('.weather-3-days')[0]
mainWeatherContent.children[0].firstElementChild.innerHTML = 'Today'
mainWeatherContent.children[1].firstElementChild.innerHTML = dayAcronymTommorow
mainWeatherContent.children[2].firstElementChild.innerHTML = dayAcronymIn2Days
mainWeatherContent.children[0].children[1].firstElementChild.src = weatherArrayToday.day.condition.icon
mainWeatherContent.children[1].children[1].firstElementChild.src = weatherArrayTommorow.day.condition.icon
mainWeatherContent.children[2].children[1].firstElementChild.src = weatherArray2Days.day.condition.icon
mainWeatherContent.children[0].children[2].firstElementChild.src = 'http://cdn.weatherapi.com/weather/64x64/day/302.png'
mainWeatherContent.children[1].children[2].firstElementChild.src = 'http://cdn.weatherapi.com/weather/64x64/day/302.png'
mainWeatherContent.children[2].children[2].firstElementChild.src = 'http://cdn.weatherapi.com/weather/64x64/day/302.png'
mainWeatherContent.children[0].children[1].lastElementChild.innerHTML = `${weatherArrayToday.day.avgtemp_c}°C`
mainWeatherContent.children[1].children[1].lastElementChild.innerHTML = `${weatherArrayTommorow.day.avgtemp_c}°C`
mainWeatherContent.children[2].children[1].lastElementChild.innerHTML = `${weatherArray2Days.day.avgtemp_c}°C`
mainWeatherContent.children[0].children[2].lastElementChild.innerHTML = `${weatherArrayToday.day.daily_chance_of_rain}%`
mainWeatherContent.children[1].children[2].lastElementChild.innerHTML = `${weatherArrayTommorow.day.daily_chance_of_rain}%`
mainWeatherContent.children[2].children[2].lastElementChild.innerHTML = `${weatherArray2Days.day.daily_chance_of_rain}%`
}
function changeTemperatureUnit(element) {
const unit = element.innerHTML
const temperatureElements = document.querySelectorAll('.temperature')
let numberString
let number
let newUnit
let convertMethod
if(unit === temperatureElements[0].innerHTML.charAt(temperatureElements[0].innerHTML.length - 1)) return
if(unit === 'F' && temperatureElements[0].innerHTML.charAt(temperatureElements[0].innerHTML.length - 1) === 'C') {
newUnit = '°F'
convertMethod = celsiusToFahrenheit
numberString = -2
} else if(unit === 'K' && temperatureElements[0].innerHTML.charAt(temperatureElements[0].innerHTML.length - 1) === 'C') {
newUnit = 'K'
convertMethod = celsiusToKelvin
numberString = -2
} else if(unit === 'F' && temperatureElements[0].innerHTML.charAt(temperatureElements[0].innerHTML.length - 1) === 'K') {
newUnit = '°F'
convertMethod = kelvinToFahrenheit
numberString = -1
} else if(unit === 'C' && temperatureElements[0].innerHTML.charAt(temperatureElements[0].innerHTML.length - 1) === 'K') {
newUnit = '°C'
convertMethod = kelvinToCelsius
numberString = -1
} else if(unit === 'C' && temperatureElements[0].innerHTML.charAt(temperatureElements[0].innerHTML.length - 1) === 'F') {
newUnit = '°C'
convertMethod = fahrenheitToCelsius
numberString = -2
} else if(unit === 'K' && temperatureElements[0].innerHTML.charAt(temperatureElements[0].innerHTML.length - 1) === 'F') {
newUnit = 'K'
convertMethod = fahrenheitToKelvin
numberString = -2
}
for(let i = 0; i < temperatureElements.length; i ++) {
number = removeCharactersInString(temperatureElements[i].innerHTML, 0, numberString)
number = convertMethod(number)
temperatureElements[i].innerHTML = Math.round(number) + newUnit
}
document.querySelectorAll('.weather-article .active')[0].classList.remove('active')
element.classList.add('active')
}
function removeCharactersInString(string, frontNumber, backNumber) { return string.slice(frontNumber, backNumber)}
function celsiusToFahrenheit(number) { return number * 9/5 + 32 }
function celsiusToKelvin(number) { return Number(number) + 273 }
function kelvinToFahrenheit(number) { return (number - 273) * 9/5 + 32 }
function kelvinToCelsius(number) { return number - 273 }
function fahrenheitToCelsius(number) { return (number - 32) * 5/9 }
function fahrenheitToKelvin(number) { return (number - 32) * 5/9 + 273 }
/* HEADLINES */
async function headlines() {
await getWeather()
updateWeather()
sidebarCategorySelect(document.querySelector('.fa-newspaper').parentElement)
}
/* SEARCH */
function searchArticles() {
if(!mainSearchIcon.classList.contains('disable') && window.innerWidth < 930) mobileVersionNavigationBar()
else if(mainSearchIcon.classList.contains('disable') && window.innerWidth > 930) desktopVersionNavigationBar()
if(mainSearchInput.value.length === 0) return
let selectedCountryAcronym = getCountryAcronym(selectedCountry.innerHTML)
if(extraSearchOptions.classList.contains('disable')) searchQuery = addCharacterBetweenSpaceInString(mainSearchInput.value, ' ','+')
if(window.location.pathname.includes('search')) historyPushState(location.origin + location.pathname, `?q=${searchQuery}&`, `cou=${selectedCountryAcronym}&`,`bg=${backgroundColor}`)
else createUrlPath('search', searchQuery)
}
function search() {
searchInputValue = window.location.search.match(regularExpressions.url.query)[0].slice(3, -1)
mainSearchInput.value = addCharacterBetweenSpaceInString(searchInputValue, '+', ' ')
/* Search news articles */
}
function mobileVersionNavigationBar() {
mainSearchIcon.classList.add('disable')
mainSearchBackLeftIcon.classList.remove('disable')
navigationBarLeft.classList.add('disable')
navigationBarRight.classList.add('disable')
navigationBarMiddle.style.gridColumn = '1/4'
mainSearchFigure.style.gridColumn = '1/2'
mainSearchBackLeftTooltiptext.classList.remove('disable')
mainSearchInput.style.display = 'grid'
extOptIcon.style.display = 'flex'
mainSearchInput.focus()
sideBarContent.style.left = '-100%'
sideMenuCounter = 1
}
function desktopVersionNavigationBar() {
mainSearchIcon.classList.remove('disable')
mainSearchBackLeftIcon.classList.add('disable')
navigationBarLeft.classList.remove('disable')
navigationBarRight.classList.remove('disable')
navigationBarMiddle.style.gridColumn = '2/3'
mainSearchFigure.style.gridColumn = '3/4'
mainSearchBackLeftTooltiptext.classList.add('disable')
mainSearchInput.style.display = 'none'
extOptIcon.style.display = 'none'
}
/* FOR YOU */
function forYou() {
sidebarCategorySelect(document.querySelector('.fa-user-alt').parentElement)
}
/* FOLLOWING */
function following() {
sidebarCategorySelect(document.querySelector('.fa-star').parentElement)
}
/* LIBRARY */
function library() {
sidebarCategorySelect(document.querySelector('.fa-bookmark').parentElement)
}
/* CATEGORIES */
function category(word) {
sidebarCategorySelect(document.querySelector(`.${word}`).parentElement)
}
/* SETTINGS */
function settings() {
}
/* ABOUT */
function about() {
}
const regularExpressions = {
url : {
query : /[\?|\&]+[q]+[=].*?[&]/g,
country : /[\?|\&]+[c]+[o]+[u]+[=].{2}/g,
backgroundColor : /[\&]+[b]+[g]+[=].*/g
}
}
function sidebarCategorySelect(selectedElement) {
if(selectedElement.classList.contains('side-menu-active')) return
selectedElement.classList.add('side-menu-active')
selectedElement.firstElementChild.classList.add('side-menu-active')
/* Search news articles */
}
function removeActiveSidebarCategory() {
let oldSelectedElements = document.querySelectorAll('.side-menu-active')
for(let i = 0; i < oldSelectedElements.length; i++)
oldSelectedElements[i].classList.remove('side-menu-active')
}
mainSearchInput.onfocus = () => {
if(!extraSearchOptions.classList.contains('disable')) manageExtraSearchOptions()
else if(mainSearchInput.value.length !== 0) showSuggestWords()
}
mainSearchInput.oninput = () => {
if(mainSearchInput.value.length === 0) return hideSuggestWords()
else if(suggestMainInput.classList.contains('disable')) showSuggestWords()
manageSuggestWords()
}
let place = 0
mainSearchInput.onkeyup = (e) => {
if(e.keyCode === 13) return searchArticles()
if(suggestMainInput.classList.contains('disable') || suggestMainInput.querySelectorAll('div').length === 0) return
let suggestDivs = suggestMainInput.querySelectorAll('div')
if(suggestMainInput.querySelectorAll('div.active').length === 0 && (e.keyCode === 40 || e.keyCode === 38)) {
mainSearchInput.value = suggestDivs[place].firstElementChild.innerHTML
return suggestDivs[place].classList.add('active')
}
if(suggestMainInput.querySelectorAll('div.active').length === 1) suggestMainInput.querySelectorAll('div .active')[0].classList.remove('active')
if(e.keyCode === 40) {
if(place === suggestDivs.length - 1) place = - 1
suggestDivs[place + 1].classList.add('active')
place ++
mainSearchInput.value = suggestDivs[place].firstElementChild.innerHTML
}
else if(e.keyCode === 38) {
if(place === 0) place = suggestDivs.length
suggestDivs[place - 1].classList.add('active')
place --
mainSearchInput.value = suggestDivs[place].firstElementChild.innerHTML
}
}
let mouseSuggestHover = false
function mouseSuggestHoverChange(parameter) {
mouseSuggestHover = parameter
}
let searchSuggestOptionsArray = []
let resultArray = []
let searchSuggestOptionSelectedWord
const maxNumberSuggestWords = 6
async function fetchWords() {
const res = await fetch(`https://api.datamuse.com/sug?s=${mainSearchInput.value}`)
return words = await res.json()
}
async function manageSuggestWords() {
let suggestWordsArray = await fetchWords()
if(suggestWordsArray.length === 0) return hideSuggestWords()
if(suggestWordsArray.length > 6) suggestWordsArray = removeCharactersInString(suggestWordsArray, 4, suggestWordsArray.length)
suggestBox(suggestWordsArray)
for(let i = 0; i < suggestMainInput.getElementsByTagName('div').length; i++) {
suggestMainInput.getElementsByTagName('div')[i].onmouseover = () => {
place = i
if(suggestMainInput.querySelectorAll('div.active').length === 1) suggestMainInput.querySelectorAll('div.active')[0].classList.remove('active')
suggestMainInput.getElementsByTagName('div')[i].classList.add('active')
}
suggestMainInput.getElementsByTagName('div')[i].onmouseleave = () => { suggestMainInput.getElementsByTagName('div')[i].classList.remove('active') }
}
}
const suggestBox = words => {
let wordBoxes = words.map(word => `<div class="grid pointer" onclick="selectSuggestedSearchOption(this)">
<span>${word.word}</span>
</div>`).join('')
const html = `<hr class="absolute">${wordBoxes}`
suggestMainInput.innerHTML = html
}
function removeAllSuggestWordBoxes() {
let numberOfBoxes = suggestMainInput.querySelectorAll('div').length
for(let i = 0; i < numberOfBoxes; i++)
suggestMainInput.querySelector('div').remove()
}
function selectSuggestedSearchOption(element) {
removeActiveSidebarCategory()
hideSuggestWords()
let elementInnerHTML = addCharacterBetweenSpaceInString(element.firstElementChild.innerHTML, ' ', '+')
mainSearchInput.value = element.firstElementChild.innerHTML
searchArticles()
}
function addCharacterBetweenSpaceInString(word ,replace ,character) { return word.replace(replace, character) }
function updateCountrySelect(country) {
selectedCountry.innerHTML = country
if(location.pathname.includes('search')) string = '&'
else string = '?'
historyPushState(location.origin + location.pathname, location.search.replace(regularExpressions.url.country,`${string}cou=${getCountryAcronym(country)}`), '', '')
hideSelectCountry()
}
function createUrlPath(type,search) {
let path
let query = ''
if(type === 'headlines') path = filePath.headlines
else if(type === 'search') {
path = filePath.search
query = `q=${search}&`
}
else if(type === 'following') path = filePath.following
else if(type === 'forYou') path = filePath.forYou
else if(type === 'library') path = filePath.library
else if(type === 'covid19') path = filePath.covid19
else if(type === 'world') path = filePath.world
else if(type === 'business') path = filePath.business
else if(type === 'technology') path = filePath.technology
else if(type === 'entertainment') path = filePath.entertainment
else if(type === 'sports') path = filePath.sports
else if(type === 'health') path = filePath.health
path = `${path}?${query}cou=${getCountryAcronym(selectedCountry.innerHTML)}&bg=${backgroundColor}`
openLinks(path)
}
let activeCountry
let suggestCountriesArray = []
function generateCountries() {
listOfCountries.innerHTML = ''
suggestCountryCountainer.innerHTML = ''
if(selectedCountry.innerHTML.trim() !== userLocationInformationValue[0]) {
if(checkForDoubleCountriesSuggest(userLocationInformationValue[0]) === false) suggestCountriesArray.push(userLocationInformationValue[0])
} else suggestCountriesArray.push(userLocationInformationValue[0])
if(selectedC !== null) suggestCountriesArray.push(selectedC)
while(suggestCountriesArray.length > 3) {
if(userLocationInformationValue[0] !== suggestCountriesArray[suggestCountriesArray.length - 1] && selectedC !== suggestCountriesArray[suggestCountriesArray.length - 1]) suggestCountriesArray.pop()
else if(userLocationInformationValue[0] !== suggestCountriesArray[suggestCountriesArray.length - 1] || selectedC !== suggestCountriesArray[suggestCountriesArray.length - 1]) suggestCountriesArray.splice(suggestCountriesArray.length - 3,1)
else suggestCountriesArray.splice(suggestCountriesArray.length - 2, 1)
}
suggestCountriesArray.unshift(selectedCountry.innerHTML.trim())
removeDuplicates(suggestCountriesArray)
for(let i = 0; i < suggestCountriesArray.length; i++) {
if(i === 0 && selectedC == null) createElementsForCountry(suggestCountriesArray[i], 'active', 'suggested-countries')
else if(i === suggestCountriesArray.length - 1 && selectedC !== null) createElementsForCountry(suggestCountriesArray[i], 'active', 'suggested-countries')
else if(suggestCountriesArray[i] !== undefined) createElementsForCountry(suggestCountriesArray[i], 'not-active', 'suggested-countries')
}
selectedC = null
let newCountriesArray = removeSelectedValuesFromArray(suggestCountriesArray, countries)
for(let i = 0; i < newCountriesArray.length; i++)
createElementsForCountry(newCountriesArray[i],'not-active','normal')
}
function removeDuplicates(array) { array.splice(0, array.length, ...(new Set(array))) }
function removeSelectedValuesFromArray(array, target) { return target.filter(val => !array.includes(val)) }
function checkForDoubleCountriesSuggest(country) {
for(let i = 0; i < suggestCountriesArray.length; i++)
if(suggestCountriesArray[i] === country)
return true
return false
}
function createElementsForCountry(country, activeCountry, location) {
let aside = document.createElement('aside')
aside.classList.add('radio-button-container','grid')
let figure = document.createElement('figure')
figure.classList.add('radio-button','flex','align-center','justify-center', activeCountry)
let divBorder = document.createElement('div')
divBorder.classList.add('radio-button-border','flex','align-center','justify-center','pointer', activeCountry)
divBorder.onclick = () => {changeSelectedCountry(divBorder)}
let divCenter = document.createElement('div')
divCenter.classList.add('radio-button-center', activeCountry)
let p = document.createElement('p')
p.innerHTML = country
p.onclick = () => { changeSelectedCountry(p) }
divBorder.appendChild(divCenter)
figure.appendChild(divBorder)
aside.appendChild(figure)
aside.appendChild(p)
location === 'suggested-countries' ? suggestCountryCountainer.appendChild(aside) : listOfCountries.appendChild(aside)
}
function changeSelectedCountry(element) {
let aside = element.parentElement
if(element.firstElementChild) aside = aside.parentElement
if(aside.firstElementChild.classList.contains('active')) return
let oldSelect = document.querySelector('.radio-button-container > .active')
if(oldSelect) {
oldSelect.classList.remove('active')
oldSelect.firstElementChild.classList.remove('active')
oldSelect.firstElementChild.firstElementChild.classList.remove('active')
}
aside.firstElementChild.classList.add('active')
aside.firstElementChild.firstElementChild.classList.add('active')
aside.firstElementChild.firstElementChild.firstElementChild.classList.add('active')
}
let lastSelectedCountry = null
let selectedC = null
let newCountriesArray = []
searchCountriesInput.oninput = () => {
let input = searchCountriesInput.value
selectedC = document.querySelector('.radio-button-container > .active')
if(selectedC !== null) {
selectedC = selectedC.parentElement.lastElementChild.innerHTML
lastSelectedCountry = selectedC
}
listOfCountries.innerHTML = ''
suggestCountryCountainer.innerHTML = ''
if(!input.trim()){
elementAdjustmentsSearchCountries()
return generateCountries()
}
elementAdjustmentsSearchCountries('change')
newCountriesArray = []
for(let i = 0; i < countries.length; i++)
if(countries[i].toLowerCase().includes(input.toLowerCase()) > 0)
newCountriesArray[i] = countries[i]
newCountriesArray = newCountriesArray.filter((e) => { return e != null })
for(let i = 0; i < newCountriesArray.length; i++) {
if(newCountriesArray[i] === lastSelectedCountry) createElementsForCountry(newCountriesArray[i],'active','list')
else createElementsForCountry(newCountriesArray[i],'no','list')
}
}
function elementAdjustmentsSearchCountries(order) {
if(order == 'change') {
document.querySelectorAll('#select-country > h6')[0].classList.add('disable')
document.querySelectorAll('#select-country > h6')[1].classList.add('disable')
listOfCountries.style.gridRow = '3/8'
} else {
document.querySelectorAll('#select-country > h6')[0].classList.remove('disable')
document.querySelectorAll('#select-country > h6')[1].classList.remove('disable')
listOfCountries.style.gridRow = 'auto'
}
}
let children = []
let hasChildren = []
let noChildren = []
let clickOnOpenedElement
function clickInOutCheck(parent,target) {
clickOnOpenedElement = false
doesElementHaveChildren(parent)
while(children.length !== 0) {
doesElementHaveChildren(children[0])
children.shift()
}
if(parent === selectCountryDiv || parent === logInOptions){
if(target === overlay) clickOnOpenedElement = false
else clickOnOpenedElement = true
} else {
if(target.lastElementChild == document.querySelectorAll('script').lastElementChild) clickOnOpenedElement = true
else clickOnOpenedElement = false
}
checkIfClickIsOnElement(hasChildren,target)
checkIfClickIsOnElement(noChildren,target)
if(clickOnOpenedElement == false && parent == extraSearchOptions) manageExtraSearchOptions()
else if(clickOnOpenedElement == false && parent == extOptProfile) manageExtraProfileOptions()
else if(clickOnOpenedElement == false && parent == selectCountryDiv) hideSelectCountry()
else if(clickOnOpenedElement == false && parent == logInOptions) manageLoginOptions()
children = []
hasChildren = []
noChildren = []
}
function doesElementHaveChildren(parent) {
if(parent.children.length > 0){
hasChildren.push(parent)
for(let i = 0; i < parent.children.length; i++)
children.push(parent.children[i])
}
else noChildren.push(parent)
}
function checkIfClickIsOnElement(array,target) {
for(let i = 0; i < array.length; i++)
if(array[i] === target)
return clickOnOpenedElement = true
}
exactPhrase.oninput = () => { inputExtraSearchOptionChange() }
hasWords.oninput = () => { inputExtraSearchOptionChange() }
excludeWords.oninput = () => { inputExtraSearchOptionChange() }
function inputExtraSearchOptionChange() {
if(hasWords.value.length === 0 && exactPhrase.value.length === 0 && excludeWords.value.length === 0){
submitButton.disabled = true
submitButton.classList.add('ext-opt-submit-disable')
submitButton.classList.remove('ext-opt-submit')
} else if (hasWords.value.length !== 0 || exactPhrase.value.length !== 0 || excludeWords.value.length !== 0){
submitButton.disabled = false
submitButton.classList.remove('ext-opt-submit-disable')
submitButton.classList.add('ext-opt-submit')
}
}
/* API */
// fetchNewsArticles()
// async function fetchNewsArticles() {
// const response = await fetch(`http://cors-anywhere.herokuapp.com/`).catch(() => {
// noArticlesFoundNotification()
// })
// // const response = await fetch(newsApiLoadUrl).catch(err => {
// // noArticlesFoundNotification()
// // })
// const json = await response.json()
// const articles = await json.articles
// console.log(articles)
// }

130
JS/show.js Normal file
View file

@ -0,0 +1,130 @@
let sideMenuCounter = 0
function manageSideMenu() {
if(checkWindowWidth900() === true && sideMenuCounter === 0){
sideBarContent.style.left = '-100%'
sideMenuCounter = 1
} else if(checkWindowWidth900() === true && sideMenuCounter === 1){
sideBarContent.style.left = '0%'
sideMenuCounter = 0
} else if(checkWindowWidth900() === false && sideMenuCounter === 0){
sideBarContent.style.left = '-100%'
sideMenuCounter = 1
} else if(checkWindowWidth900() === false && sideMenuCounter === 1) {
sideBarContent.classList.remove('disable')
sideBarContent.style.left = '0%'
sideMenuCounter = 0
}
}
function checkWindowWidth900() {
if(window.innerWidth > 930) return true
else return false
}
function manageExtraSearchOptions() {
if(extraSearchOptions.classList.contains('disable')) {
hideSuggestWords()
extraSearchOptions.classList.remove('disable')
mainSearchInput.style.borderBottomLeftRadius = '0'
mainSearchInput.style.borderBottomRightRadius = '0'
extOptIcon.style.transform = 'rotate(180deg)'
if(!indexTimeSelect.classList.contains('disable')) indexTimeSelect.classList.add('disable')
} else {
extraSearchOptions.classList.add('disable')
mainSearchInput.style.borderBottomLeftRadius = '6px'
mainSearchInput.style.borderBottomRightRadius = '6px'
extOptIcon.style.transform = 'rotate(0deg)'
}
}
function resetExtraSearchOptions() {
indexTimeLabel.innerHTML = 'Anytime'
for(let i = 0; i < 3; i++)
document.querySelectorAll('.extra-search-options > div > input')[i].value = ''
}
function manageTimeOptionSelect() {
if(indexTimeSelect.classList.contains('disable')){
indexTimeSelect.classList.remove('disable')
let selectedValue = -32 * showTimeOptionSelect()
indexTimeSelect.style.top = `${selectedValue}px`
}
else indexTimeSelect.classList.add('disable')
}
function showTimeOptionSelect() {
let selectedValue
for(let i = 0; i < 4; i++) {
if(indexTimeSelect.children[i].innerHTML === indexTimeLabel.innerHTML) {
indexTimeSelect.children[i].classList.add('selected-option')
selectedValue = i
}
indexTimeSelect.children[i].onmouseenter = () => { eventHandelerForTimeOptionSelect(indexTimeSelect.children[i],'enter') }
indexTimeSelect.children[i].onmouseleave = () => { eventHandelerForTimeOptionSelect(indexTimeSelect.children[i],'leave') }
}
return selectedValue
}
let timeOptionSelectValueArray = []
function eventHandelerForTimeOptionSelect(element,command) {
timeOptionSelectValueArray.push(command)
removeEveryChildsClass(element.parentElement,'selected-option')
if(command == 'enter' || timeOptionSelectValueArray[timeOptionSelectValueArray.length - 1] == 'leave') element.classList.add('selected-option')
}
function removeEveryChildsClass(parent,className) {
for(let i = 0; i < parent.children.length; i++)
parent.children[i].classList.remove(className)
}
function selectValue(selectedElement) {
event.stopPropagation()
indexTimeLabel.innerHTML = selectedElement.innerHTML
selectedElement.parentElement.classList.add('disable')
}
function showSuggestWords() {
mainSearchInput.style.borderBottomLeftRadius = '0'
mainSearchInput.style.borderBottomRightRadius = '0'
suggestMainInput.classList.remove('disable')
}
function hideSuggestWords() {
mainSearchInput.style.borderBottomLeftRadius = '6px'
mainSearchInput.style.borderBottomRightRadius = '6px'
suggestMainInput.classList.add('disable')
removeAllSuggestWordBoxes()
}
function hideSelectCountry() {
selectCountryDiv.classList.remove('active')
overlay.classList.remove('active')
searchCountriesInput.value = ''
}
function showSelectCountry() {
selectCountryDiv.classList.add('active')
overlay.classList.add('active')
elementAdjustmentsSearchCountries()
generateCountries()
}
function hideSelectCountry() {
selectCountryDiv.classList.remove('active')
overlay.classList.remove('active')
searchCountriesInput.value = ''
selectedC = null
}
function manageLoginOptions() {
if(!logInOptions.classList.contains('active')) {
logInOptions.classList.add('active')
overlay.classList.add('active')
} else {
logInOptions.classList.remove('active')
overlay.classList.remove('active')
}
}
function resetExtraSearchOptions() {
indexTimeLabel.innerHTML = 'Anytime'
for(let i = 0; i < 3; i++)
document.querySelectorAll('.extra-search-options > div > input')[i].value = ''
}

113
JS/sign.js Normal file
View file

@ -0,0 +1,113 @@
// /** Google */
// function onSignIn(googleUser) {
// console.log('Logged in as: ' + JSON.stringify(googleUser.getBasicProfile()))
// let profile = googleUser.getBasicProfile()
// // console.log('ID: ' + profile.getId()) // Do not send to your backend! Use an ID token instead.
// // console.log('Name: ' + profile.getName())
// // console.log('Image URL: ' + profile.getImageUrl())
// // console.log('Email: ' + profile.getEmail())
// }
// function onFailure(error) {
// console.log(error)
// }
// var googleUser = {};
// var startApp = function() {
// gapi.load('auth2', function(){
// auth2 = gapi.auth2.init({
// client_id: '571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com',
// cookiepolicy: 'single_host_origin',
// });
// attachSignin(document.getElementById('googleBtn'));
// });
// };
// function attachSignin(element) {
// auth2.attachClickHandler(element, {},
// (googleUser) =>{
// console.log(googleUser.getBasicProfile())},
// (error) => {
// // alert(JSON.stringify(error, undefined, 2));
// });
// }
// startApp()
// function signOut() {
// var auth2 = gapi.auth2.getAuthInstance()
// auth2.signOut().then(function () {
// console.log('User signed out.')
// })
// }
// /** GitHub */
// document.getElementById('github-button').addEventListener('click', () => {
// // Initialize with your OAuth.io app public key
// OAuth.initialize('_nPRfzTNGplyDCW0vD9dmek5QAg');
// // Use popup for oauth
// // Alternative is redirect
// OAuth.popup('github').then(github => {
// console.log('github:', github);
// // Retrieves user data from oauth provider
// // Prompts 'welcome' message with User's email on successful login
// // #me() is a convenient method to retrieve user data without requiring you
// // to know which OAuth provider url to call
// github.me().then(data => {
// console.log('me data:', data);
// // alert('GitHub says your email is:' + data.email + ".\nView browser 'Console Log' for more details");
// });
// // Retrieves user data from OAuth provider by using #get() and
// // OAuth provider url
// github.get('/user').then(data => {
// console.log('self data:', data);
// })
// });
// })
// /** FaceBook */
// // function statusChangeCallback(response) { // Called with the results from FB.getLoginStatus().
// // console.log('statusChangeCallback');
// // console.log(response); // The current login status of the person.
// // if (response.status === 'connected') { // Logged into your webpage and Facebook.
// // testAPI();
// // } else { // Not logged into your webpage or we are unable to tell.
// // document.getElementById('status').innerHTML = 'Please log ' +
// // 'into this webpage.';
// // }
// // }
// // function checkLoginState() { // Called when a person is finished with the Login Button.
// // FB.getLoginStatus(function(response) { // See the onlogin handler
// // statusChangeCallback(response);
// // });
// // }
// // window.fbAsyncInit = function() {
// // FB.init({
// // appId : '1318555625202480',
// // cookie : true, // Enable cookies to allow the server to access the session.
// // xfbml : true, // Parse social plugins on this webpage.
// // version : '' // Use this Graph API version for this call.
// // });
// // FB.getLoginStatus(function(response) { // Called after the JS SDK has been initialized.
// // statusChangeCallback(response); // Returns the login status.
// // });
// // };
// // function testAPI() { // Testing Graph API after login. See statusChangeCallback() for when this call is made.
// // console.log('Welcome! Fetching your information.... ');
// // FB.api('/me', function(response) {
// // console.log('Successful login for: ' + response.name);
// // document.getElementById('status').innerHTML =
// // 'Thanks for logging in, ' + response.name + '!';
// // });
// // }

144
JS/variables.js Normal file
View file

@ -0,0 +1,144 @@
/* News API */
const countries = ['Arab Emirates','Argentina','Australia','Austria','Belgium','Brasil','Bulgaria','Canada','China','Colombia','Cuba','Czech Republic','Egypt','England','France','Germany','Greece','Hong Kong','Hungary','Indonesia','Ireland','Israel','Italy','Japan','Latvia','Lithuania','Malaysia','Mexico','Morocco','Netherlands','New Zealand','Nigeria','Norway','Philippines','Poland','Portugal','Romania','Russia','Saudia Arabia','Serbia','Singapore','Slovakia','Slovenia','South Africa','South Korea','Sweden','Switzerland','Taiwan','Thailand','Turkey','Ukraine','United States','Venezuela']
const countryAcronyms = ['ae','ar','au','at','be','br','bg','ca','cn','co','cu','cz','eg','gb','fr','de','gr','hk','hu','id','it','il','it','jp','lt','lv','my','mx','ma','nl','nz','ng','no','ph','pl','pt','ro','ru','sa','rs','sg','sk','si','za','kr','se','ch','tw','th','tr','ua','us','ve']
const categories = ['all','Tbusiness','entertainment','general','health','science','sports','technology']
const language = ['All','Arabic','German','English','Spanish','French','Italian','Dutch','Norwegian','Portuguese','Russian','Swedish','Chinese']
const languageAcronyms = ['all','ar','de','en','es','fr','it','nl','no','pt','ru','se','zh']
const colors = ['rgb(211, 47, 47)','rgb(123, 31, 162)','rgb(81, 45, 168)','rgb(48, 63, 159)','rgb(25, 118, 210)','rgb(2, 136, 209)','rgb(0, 151, 167)','rgb(0, 121, 107)','rgb(56, 142, 60)','rgb(104, 159, 56)','rgb(175, 180, 43)','rgb(251, 192, 45)','rgb(255, 160, 0)','rgb(245, 124, 0)','rgb(230, 74, 25)','rgb(93, 64, 55)','rgb(97, 97, 97)']
const days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']
const daysAcronyms = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
const websiteURL = 'http://localhost:8080/newsWebiste/'
// const websiteURL = 'https://news.niktopler.com'
const topStoriesURL = '&t=topstories&'
const everythingURL = '&t=everything&'
const sourcesURL = '&t=sources&'
/* Index */
/** Navigation Bar Left */
const burgerMenuFigure = document.getElementById('menu-burger-button')
/** Navigation Bar Middle */
const navigationBar = document.getElementById('navigation-bar')
const navigationBarLeft = document.getElementById('navigation-bar-left')
const navigationBarMiddle = document.getElementById('navigation-bar-middle')
const navigationBarRight = document.getElementById('navigation-bar-right')
const extraSearchOptions = document.getElementById('extra-search-options')
const extOptIcon = document.getElementById('option-icon-search-bar')
const mainSearchIcon = document.getElementById('main-search-icon')
const mainSearchInput = document.getElementById('main-search-input')
const mainSearchFigure = document.getElementById('search-icon-figure')
const suggestMainInput = document.getElementById('search-words')
const mainSearchBackLeftIcon = document.getElementById('main-search-icon-back-left')
const mainSearchBackLeftTooltiptext = document.getElementById('main-search-back-left-tooltiptext')
const exactPhrase = document.getElementById('extra-option-input1')
const hasWords = document.getElementById('extra-option-input2')
const excludeWords = document.getElementById('extra-option-input3')
const submitButton = document.getElementById('extraOptionsSearchButton')
const date = document.getElementById('extra-option-select')
/** Extra Search Options */
let indexTimeSelect = document.getElementById('index-time-select')
let indexTimeLabel = document.getElementById('index-time-label')
/* Navigation Bar Right */
const logInOptions = document.getElementById('login-option-div')
/** Main Content */
/** Side Menu */
let sideBarContent = document.getElementById('side-bar-content')
const selectCountryDiv = document.getElementById('select-country')
const listOfCountries = document.getElementById('list-of-countries')
const selectedCountry = document.getElementById('country-name-side-menu')
const suggestCountryCountainer = document.getElementById('suggest-country')
const searchCountriesInput = document.getElementById('search-country-input')
let mainContentSection = document.getElementById('main-content-section')
let mainAsideContent = document.getElementById('main-side-content-container')
let aboutContentSection = document.getElementById('about-content-section')
const sideBarAboutContent = document.getElementById('about-sidebar-content')
const mainContentContainer = document.getElementById('main-content-container')
let mainContentHeader = document.getElementById('main-content-header')
const overlay = document.getElementById('overlay')
let navigationBarProfileImageDiv = document.getElementById('navigation-bar-profile-img-div')
let extOptProfile = document.getElementById('profile-extra-options')
let currentNewsArticles = [
{
"title" : "Naslov1",
"subtitle" : "Podnaslov1",
"description" : 'Opis1',
"date" : "20-20-2020",
"source" : "CNN1",
"author" : "Nik Topler1"
},
{
"title" : "Naslov2",
"subtitle" : "Podnaslov2",
"description" : 'Opis2',
"date" : "20-20-2020",
"source" : "CNN2",
"author" : "Nik Topler2"
},
{
"title" : "Naslov3",
"subtitle" : "Podnaslov3",
"description" : 'Opis3',
"date" : "20-20-2020",
"source" : "CNN3",
"author" : "Nik Topler3"
},
{
"title" : "Naslov4",
"subtitle" : "Podnaslov4",
"description" : 'Opis4',
"date" : "20-20-2020",
"source" : "CNN4",
"author" : "Nik Topler4"
},
{
"title" : "Naslov5",
"subtitle" : "Podnaslov5",
"description" : 'Opis5',
"date" : "20-20-2020",
"source" : "CNN5",
"author" : "Nik Topler5"
}
]
currentNewsArticles.push(
{
"title" : "Naslov6",
"subtitle" : "Podnaslov6",
"description" : 'Opis6',
"date" : "20-20-2020",
"source" : "CNN6",
"author" : "Nik Topler6"
}
)
const filePath = {
headlines : 'headlines.php',
search : 'search.php',
following : 'personal/following.php',
forYou : 'personal/for-you.php',
library : 'personal/library.php',
covid19 : 'topics/covid-19.php',
world : 'topics/world.php',
business : 'topics/business.php',
technology : 'topics/technology.php',
entertainment : 'topics/entertainment.php',
sports : 'topics/sports.php',
health : 'topics/health.php'
}
/* Personal */
let backgroundColor = 'light'

View file

@ -1,3 +1,5 @@
# News-website
School Project
Hello world
Hello world
plenty enact all cheat though donate author tour skill opera candy bread next cling stair

View file

@ -0,0 +1,3 @@
<script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
<script src="https://apis.google.com/js/api:client.js"></script>
<script src="https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js" async defer></script>

24
add-ons/head.php Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google-signin-client_id"
content="571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com">
<link rel="stylesheet" href="../CSS/colors.css">
<link rel="stylesheet" href="../CSS/*.css">
<link rel="stylesheet" href="../CSS/index.css">
<script src="../JS/variables.js" defer></script>
<script src="../JS/show.js" defer></script>
<script src="../JS/main.js" defer></script>
<script src="../JS/sign.js" defer></script>
<script src="https://kit.fontawesome.com/89923351fd.js" crossorigin="anonymous" defer></script>
<script src="../JS/icon.js" defer></script>
<title>News Website</title>
</head>

129
add-ons/navigation-bar.php Normal file
View file

@ -0,0 +1,129 @@
<nav class="navigation-bar grid align-center fixed active" id="navigation-bar">
<div class="nav-left-side flex align-center" id="navigation-bar-left">
<figure class="menu-icon flex relative align-center justify-center border-radius-50 pointer"
onclick="manageSideMenu()" id="menu-burger-button">
<div class="menu-burger-icon">
</div>
</figure>
<a href="#" onclick="openLinks('headlines.php')" class="logo">Logo</a>
</div>
<div class="nav-search flex align-center justify-center relative" id="navigation-bar-middle">
<div class="main-search-bar-input-div grid" id="main-search-bar-input-div">
<input type="text" class="main-search-input" id="main-search-input"
placeholder="Search for latest news articles" autocomplete="off" value="">
<figure class="search-icon-figure flex align-center justify-center relative" id="search-icon-figure">
<a href="#" class="search-icon flex align-center justify-center border-radius-50"
id="main-search-icon-a" onclick="searchArticles()">
<i class="far fa-search" id="main-search-icon"></i>
<i class="far fa-arrow-left back-icon disable" id="main-search-icon-back-left"></i>
</a>
<span class="tooltiptext tooltiptextTop120 disable" id="main-search-back-left-tooltiptext">
Close Search
</span>
</figure>
<i class="extra-option-icon option-icon-search-bar flex align-center justify-center pointer"
id="option-icon-search-bar" onclick="manageExtraSearchOptions()"></i>
</div>
<aside class="extra-search-options extra-search grid absolute disable" id="extra-search-options">
<dt class="extra-option-dt1 flex align-center">Narrow your search results</dt>
<div class="grid extra-search-options-div">
<label class="extra-option-label1">Exact Phrase</label>
<input type="text" class="extra-option-input1" id="extra-option-input1" onchange="">
<span class="underline-input-animation"></span>
</div>
<div class="grid extra-search-options-div">
<label class="extra-option-label2">Has words</label>
<input type="text" class="extra-option-input2" id="extra-option-input2" onchange="">
<span class="underline-input-animation"></span>
</div>
<div class="grid extra-search-options-div">
<label class="extra-option-label3">Exclude Words</label>
<input type="text" class="extra-option-input3" id="extra-option-input3" onchange="">
<span class="underline-input-animation"></span>
</div>
<div class="grid relative">
<label class="extra-option-label4">Date</label>
<div class="select-div" onclick="manageTimeOptionSelect()">
<label id="index-time-label">Anytime</label>
<i class="option-icon-select flex align-center justify-center absolute"></i>
<aside class="select-options time-select absolute disable" id="index-time-select">
<div onclick="selectValue(this)">Anytime</div>
<div onclick="selectValue(this)">Today</div>
<div onclick="selectValue(this)">Yesterday</div>
<div onclick="selectValue(this)">Last week</div>
</aside>
</div>
</div>
<footer class="extra-option-button-div flex align-center">
<button class="extra-option-btn ext-opt-reset pointer" id="extraOptionsClearButton"
onclick="resetExtraSearchOptions()">Clear</button>
<button class="extra-option-btn ext-opt-submit-disable pointer" id="extraOptionsSearchButton"
onclick="">Search</button>
</footer>
</aside>
<aside class="search-words absolute disable" id="search-words" onmouseover="mouseSuggestHoverChange(true)" onmouseout="mouseSuggestHoverChange(false)">
<hr class="absolute">
</aside>
</div>
<div class="nav-right-side" id="navigation-bar-right">
<a href="#" class="login link" id="login-button" onclick="manageLoginOptions()">Log in</a>
<!-- <i class="profile-img-link relative">
<span>
</span>
<figure class="img border-radius-50"></figure>
<div class="first-profile-div flex align-center justify-center border-radius-50 pointer"
onclick="manageExtraProfileOptions()" id="navigation-bar-profile-img-div">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg"
class="img border-radius-50 navigation-profile-img">
</div>
<span class="tooltiptext tooltiptextTop120">
<strong>Personal Information</strong><br>
<span class="tooltiptext-name">Nik Topler</span><br>
<span class="tooltiptext-name">nik.topler@gmail.com</span>
</span>
</i> -->
</div>
<aside class="profile-extra-options grid absolute disable" id="profile-extra-options">
<div class="grid">
<aside class="profile-img-link relative flex align-center justify-center">
<!-- <span>
</span> -->
<!-- <figure class="img border-radius-50"></figure> -->
<!-- <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg"
class="img border-radius-50 profile-options-profile-img pointer" alt="img"> -->
<figure
class="change-profile-picture grid flex align-center justify-center absolute border-radius-50 pointer">
<i class="fal fa-camera"></i>
</figure>
</aside>
<div>
<strong>Nik Topler</strong>
<p class="emailProfile">
nik.topler@gmail.com
</p>
</div>
<div class="manage-profile-extra-options flex align-center justify-center">
<a href="account.php">Manage your account</a>
</div>
</div>
<hr>
<div class="extra-options-settings flex align-center justify-center">
<a href="account.php#settings">Settings</a>
</div>
<div class="extra-options-logout flex align-center justify-center">
<a href="#" onclick="signOut()">Sign Out</a>
</div>
</aside>
</nav>

View file

@ -0,0 +1,30 @@
<div class="select-country absolute fixed grid" id="select-country">
<header>
<h3>Region of interest</h3>
<h4>See latest news based on region</h4>
</header>
<div class="country-search-input-div grid align-center justify-center">
<input type="text" placeholder="Search for country" id="search-country-input">
<figure class="search-icon-country flex align-center justify-center default-pointer">
<i class="far fa-search"></i>
</figure>
</div>
<h6 class="blue-link flex align-center">Suggested</h6>
<div id="suggest-country">
</div>
<h6 class="blue-link flex align-center">All available regions</h6>
<div class="list-of-countries" id="list-of-countries">
</div>
<footer class="flex align-center">
<button class="blue-link pointer" onclick="hideSelectCountry()">Cancel</button>
<button class="blue-link pointer" onclick="updateCountrySelect(document.querySelector('.radio-button-container > .active').parentElement.lastElementChild.innerHTML)">Update</button>
</footer>
<figure class="x-icon absolute flex align-center justify-center border-radius-50"
onclick="hideSelectCountry()">
<i class="fal fa-times fa-lg pointer"></i>
</figure>
</div>

48
add-ons/side-bar.php Normal file
View file

@ -0,0 +1,48 @@
<aside class="side-bar absolute">
<div class="side-bar-content grid fixed" id="side-bar-content">
<a href="#" class="side-menu-categories" onclick="createUrlPath('headlines')"><i
class="fal fa-newspaper fa-lg"></i>Top Stories</a>
<a href="#" class="side-menu-categories" onclick="createUrlPath('forYou')"><i
class="fas fa-user-alt fa-lg"></i>For you</a>
<a href="#" class="side-menu-categories" onclick="createUrlPath('following')"><i
class="fal fa-star fa-lg"></i>Following</a>
<a href="#" class="side-menu-categories" onclick="createUrlPath('library')"><i
class="fas fa-bookmark fa-lg"></i>Saved news</a>
<hr>
<a href="#" class="side-menu-categories" onclick="createUrlPath('covid19')"><i
class="fad fa-shield-cross fa-lg"></i>COVID-19</a>
<hr>
<a href="#" class="side-menu-categories" onclick="createUrlPath('world')"><i
class="fad fa-globe-europe fa-lg"></i>World</a>
<a href="#" class="side-menu-categories" onclick="createUrlPath('business')"><i
class="fad fa-building fa-lg"></i>Business</a>
<a href="#" class="side-menu-categories" onclick="createUrlPath('technology')"><i
class="fad fa-microchip fa-lg"></i>Technology</a>
<a href="#" class="side-menu-categories" onclick="createUrlPath('entertainment')"><i
class="fas fa-camera-movie" ></i>Entertainment</a>
<a href="#" class="side-menu-categories" onclick="createUrlPath('sports')"><i
class="fas fa-tennis-ball fa-lg"></i>Sports</a>
<a href="#" class="side-menu-categories" onclick="createUrlPath('health')"><i
class="fas fa-heartbeat fa-lg"></i>Health</a>
<hr>
<div class="language extra-side-menu pointer" id="show-countries-button"
onclick="showSelectCountry()">
<span>Language & Region</span>
<strong id="country-name-side-menu">United States</strong>
</div>
<a href="#" class="side-menu-categories" onclick="createUrlPath('sources')">Sources</a>
<a href="#" onclick="createUrlPath('settings')">Settings</a>
<a href="#" class="sidebar-help" onclick="createUrlPath('help')">Help<i class="far fa-external-link-alt fa-sm"></i></a>
<footer class="grid">
<div>
<a href="#" onclick="createUrlPath('about')">About</a>
<span class="flex align-center justify-center"></span>
<a href="https://newsapi.org/" target="_blank" id="news-api-link">News API</a>
</div>
</footer>
</div>
<div class="side-bar-content about-sidebar-content grid fixed" id="about-sidebar-content">
<!-- <a href="#" class="active" onclick="sidebarCategorySelect(this)">About</a>
<a href="#" class="" onclick="sidebarCategorySelect(this)">Terms of service</a> -->
</div>
</aside>

176
headlines.php Normal file
View file

@ -0,0 +1,176 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google-signin-client_id"
content="571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com">
<link rel="stylesheet" href="CSS/colors.css">
<link rel="stylesheet" href="CSS/*.css">
<link rel="stylesheet" href="CSS/index.css">
<script src="JS/variables.js" defer></script>
<script src="JS/show.js" defer></script>
<script src="JS/main.js" defer></script>
<script src="JS/sign.js" defer></script>
<script src="https://kit.fontawesome.com/89923351fd.js" crossorigin="anonymous" defer></script>
<script src="JS/icon.js" defer></script>
<title>News Website</title>
</head>
<body>
<main id="main" class="flex align-center justify-center">
<?php include 'add-ons/side-bar.php' ?>
<section class="main-content-section grid" id="main-content-section">
<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>
<aside id="main-side-content-container">
<article class="weather-article grid relative">
<header class="weather-main-header grid">
<img src="" alt="" class="flex align-center justify-center">
<label class="pointer"></label>
<span class="temperature flex"></span>
</header>
<div class="weather-3-days grid">
<section>
<header></header>
<div class="grid">
<img src="" alt="" class="flex align-center justify-center">
<span class="temperature flex"></span>
</div>
<div class="grid">
<img src="" alt="" class="flex align-center justify-center">
<span class="flex"></span>
</div>
</section>
<section>
<header></header>
<div class="grid">
<img src="" alt="" class="flex align-center justify-center">
<span class="temperature flex"></span>
</div>
<div class="grid">
<img src="" alt="" class="flex align-center justify-center">
<span class="flex"></span>
</div>
</section>
<section>
<header></header>
<div class="grid">
<img src="" alt="" class="flex align-center justify-center">
<span class="temperature flex"></span>
</div>
<div class="grid">
<img src="" alt="" class="flex align-center justify-center">
<span class="flex"></span>
</div>
</section>
</div>
<footer class="grid">
<section class="grid">
<div class="pointer active" onclick="changeTemperatureUnit(this)">C</div>
<div class="pointer" onclick="changeTemperatureUnit(this)">F</div>
<div class="pointer" onclick="changeTemperatureUnit(this)">K</div>
</section>
<section>
<a href="https://www.weatherapi.com/" target="_blank"
class="flex align-center justify-center">WeatherAPI</a>
</section>
</footer>
</article>
<!-- <article>
<header>
<h1>Popular news articles</h1>
</header>
<section>
<div></div>
<hr>
<div></div>
<hr>
</section>
</article> -->
</aside>
</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/select-country.php' ?>
<div class="fixed" id="overlay"></div>
<?php include 'add-ons/footer-scripts.php' ?>
</body>
</html>

63
other/help.php Normal file
View file

@ -0,0 +1,63 @@
<?php include '../add-ons/head.php' ?>
<body>
<main id="main" class="flex align-center justify-center">
<?php include '../add-ons/side-bar.php' ?>
</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/select-country.php' ?>
<div class="fixed" id="overlay"></div>
<?php include '../add-ons/footer-scripts.php' ?>
</body>
<?php include '../add-ons/footer-scripts.php' ?>

63
other/settings.php Normal file
View file

@ -0,0 +1,63 @@
<?php include '../add-ons/head.php' ?>
<body>
<main id="main" class="flex align-center justify-center">
<?php include '../add-ons/side-bar.php' ?>
</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/select-country.php' ?>
<div class="fixed" id="overlay"></div>
<?php include '../add-ons/footer-scripts.php' ?>
</body>
<?php include '../add-ons/footer-scripts.php' ?>

63
other/sources.php Normal file
View file

@ -0,0 +1,63 @@
<?php include '../add-ons/head.php' ?>
<body>
<main id="main" class="flex align-center justify-center">
<?php include '../add-ons/side-bar.php' ?>
</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/select-country.php' ?>
<div class="fixed" id="overlay"></div>
<?php include '../add-ons/footer-scripts.php' ?>
</body>
<?php include '../add-ons/footer-scripts.php' ?>

63
personal/following.php Normal file
View file

@ -0,0 +1,63 @@
<?php include '../add-ons/head.php' ?>
<body>
<main id="main" class="flex align-center justify-center">
<?php include '../add-ons/side-bar.php' ?>
</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/select-country.php' ?>
<div class="fixed" id="overlay"></div>
<?php include '../add-ons/footer-scripts.php' ?>
</body>
<?php include '../add-ons/footer-scripts.php' ?>

63
personal/for-you.php Normal file
View file

@ -0,0 +1,63 @@
<?php include '../add-ons/head.php' ?>
<body>
<main id="main" class="flex align-center justify-center">
<?php include '../add-ons/side-bar.php' ?>
</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/select-country.php' ?>
<div class="fixed" id="overlay"></div>
<?php include '../add-ons/footer-scripts.php' ?>
</body>
<?php include '../add-ons/footer-scripts.php' ?>

63
personal/library.php Normal file
View file

@ -0,0 +1,63 @@
<?php include '../add-ons/head.php' ?>
<body>
<main id="main" class="flex align-center justify-center">
<?php include '../add-ons/side-bar.php' ?>
</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/select-country.php' ?>
<div class="fixed" id="overlay"></div>
<?php include '../add-ons/footer-scripts.php' ?>
</body>
<?php include '../add-ons/footer-scripts.php' ?>

86
search.php Normal file
View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google-signin-client_id"
content="571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com">
<link rel="stylesheet" href="CSS/colors.css">
<link rel="stylesheet" href="CSS/*.css">
<link rel="stylesheet" href="CSS/index.css">
<script src="JS/variables.js" defer></script>
<script src="JS/show.js" defer></script>
<script src="JS/main.js" defer></script>
<script src="JS/sign.js" defer></script>
<script src="https://kit.fontawesome.com/89923351fd.js" crossorigin="anonymous" defer></script>
<script src="JS/icon.js" defer></script>
<title>News Website</title>
</head>
<body>
<main id="main" class="flex align-center justify-center">
<?php include 'add-ons/side-bar.php' ?>
</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/select-country.php' ?>
<div class="fixed" id="overlay"></div>
<?php include 'add-ons/footer-scripts.php' ?>
</body>
<?php include 'add-ons/footer-scripts.php' ?>

63
topics/business.php Normal file
View file

@ -0,0 +1,63 @@
<?php include '../add-ons/head.php' ?>
<body>
<main id="main" class="flex align-center justify-center">
<?php include '../add-ons/side-bar.php' ?>
</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/select-country.php' ?>
<div class="fixed" id="overlay"></div>
<?php include '../add-ons/footer-scripts.php' ?>
</body>
<?php include '../add-ons/footer-scripts.php' ?>

63
topics/categories.php Normal file
View file

@ -0,0 +1,63 @@
<?php include '../add-ons/head.php' ?>
<body>
<main id="main" class="flex align-center justify-center">
<?php include '../add-ons/side-bar.php' ?>
</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/select-country.php' ?>
<div class="fixed" id="overlay"></div>
<?php include '../add-ons/footer-scripts.php' ?>
</body>
<?php include '../add-ons/footer-scripts.php' ?>

68
topics/covid-19.php Normal file
View file

@ -0,0 +1,68 @@
<?php include '../add-ons/head.php' ?>
<body>
<main id="main" class="flex align-center justify-center">
<?php include '../add-ons/side-bar.php' ?>
<section class="main-content-section grid" id="main-content-section">
<figure></figure>
</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/select-country.php' ?>
<div class="fixed" id="overlay"></div>
<?php include '../add-ons/footer-scripts.php' ?>
</body>
</html>

63
topics/entertainment.php Normal file
View file

@ -0,0 +1,63 @@
<?php include '../add-ons/head.php' ?>
<body>
<main id="main" class="flex align-center justify-center">
<?php include '../add-ons/side-bar.php' ?>
</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/select-country.php' ?>
<div class="fixed" id="overlay"></div>
<?php include '../add-ons/footer-scripts.php' ?>
</body>
<?php include '../add-ons/footer-scripts.php' ?>

63
topics/health.php Normal file
View file

@ -0,0 +1,63 @@
<?php include '../add-ons/head.php' ?>
<body>
<main id="main" class="flex align-center justify-center">
<?php include '../add-ons/side-bar.php' ?>
</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/select-country.php' ?>
<div class="fixed" id="overlay"></div>
<?php include '../add-ons/footer-scripts.php' ?>
</body>
<?php include '../add-ons/footer-scripts.php' ?>

63
topics/sports.php Normal file
View file

@ -0,0 +1,63 @@
<?php include '../add-ons/head.php' ?>
<body>
<main id="main" class="flex align-center justify-center">
<?php include '../add-ons/side-bar.php' ?>
</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/select-country.php' ?>
<div class="fixed" id="overlay"></div>
<?php include '../add-ons/footer-scripts.php' ?>
</body>
<?php include '../add-ons/footer-scripts.php' ?>

63
topics/technology.php Normal file
View file

@ -0,0 +1,63 @@
<?php include '../add-ons/head.php' ?>
<body>
<main id="main" class="flex align-center justify-center">
<?php include '../add-ons/side-bar.php' ?>
</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/select-country.php' ?>
<div class="fixed" id="overlay"></div>
<?php include '../add-ons/footer-scripts.php' ?>
</body>
<?php include '../add-ons/footer-scripts.php' ?>

63
topics/world.php Normal file
View file

@ -0,0 +1,63 @@
<?php include '../add-ons/head.php' ?>
<body>
<main id="main" class="flex align-center justify-center">
<?php include '../add-ons/side-bar.php' ?>
</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/select-country.php' ?>
<div class="fixed" id="overlay"></div>
<?php include '../add-ons/footer-scripts.php' ?>
</body>
<?php include '../add-ons/footer-scripts.php' ?>