New files
This commit is contained in:
Nik Topler
parent
f27832daa8
commit
b6508e4849
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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) {}
|
||||
}();
|
||||
|
|
@ -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)
|
||||
|
||||
|
||||
// }
|
||||
|
||||
|
||||
|
|
@ -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 = ''
|
||||
}
|
||||
|
|
@ -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 + '!';
|
||||
// // });
|
||||
// // }
|
||||
|
||||
|
||||
|
|
@ -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'
|
||||
|
|
@ -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
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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' ?>
|
||||
|
|
@ -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' ?>
|
||||
|
|
@ -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' ?>
|
||||
|
|
@ -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' ?>
|
||||
|
|
@ -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' ?>
|
||||
|
|
@ -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' ?>
|
||||
|
|
@ -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' ?>
|
||||
|
|
@ -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' ?>
|
||||
|
|
@ -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' ?>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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' ?>
|
||||
|
|
@ -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' ?>
|
||||
|
|
@ -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' ?>
|
||||
|
|
@ -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' ?>
|
||||
|
|
@ -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' ?>
|
||||
Loading…
Reference in New Issue