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

Updated Categories and responsiveness

Browse source
This commit is contained in:
Nik Topler 2020-09-23 21:12:45 +02:00
parent d9c11b70d8
commit 90c79fe0bb
19 changed files with 497 additions and 649 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
CSS/*.css
View file

@ -11,7 +11,7 @@
body{
min-width: 100vw;
min-height: 100vh;
font-family: 'Noto Sans', sans-serif;
font-family: 'Google Sans',sans-serif;
}
.select-div{
@ -213,9 +213,7 @@ body{
font-size: 0.9rem;
color: var(--blue-light);
}
.green-link{
color: var(--green-light) !important;
}
.green-link{ color: var(--green-light) !important; }
.radio-button{
width: 2rem;
@ -247,9 +245,13 @@ body{
transform: scale(0);
transition: ease-in-out .1s all;
}
.radio-button-center.active{
transform: scale(1);
}
.radio-button-center.active{ transform: scale(1); }
.red-color { color: var(--red-medium) !important; }
.yellow-color{ color: var(--yellow-medium) !important; }
.light-green-color { color: var(--light-green) !important; }
.blue-color { color: var(--blue-medium) !important; }
article{
padding: 15px;
@ -258,16 +260,17 @@ body{
border: 1px solid var(--border-medium);
background-color: var(--bg);
}
/* article.news {
display: flex;
flex-direction: column;
font-family: 'Roboto Condensed', sans-serif;
}
article.news h3 {
font-size: 1.125rem;
}
.red-color {
color: var(--red-medium) !important;
}
.yellow-color{
color: var(--yellow-medium) !important;
}
.light-green-color {
color: var(--light-green) !important;
}
.blue-color{
color: var(--blue-medium) !important;
}
article.news.img {
grid-template-columns: 1fr 1rem 150px;
} */

140
CSS/index.css
View file

@ -4,7 +4,7 @@ body{
overflow: auto;
}
/*? Navigation Bar */
/* Navigation Bar */
.navigation-bar{
grid-row: 1/2;
@ -49,12 +49,8 @@ body{
position: absolute;
border-radius: 1px;
}
.menu-burger-icon::before{
transform: translateY(-5px);
}
.menu-burger-icon::after{
transform: translateY(5px);
}
.menu-burger-icon::before{ transform: translateY(-5px); }
.menu-burger-icon::after{ transform: translateY(5px);}
/** Logo */
@ -75,7 +71,8 @@ body{
grid-template-columns: 48px 1fr 48px;
z-index: 0;
}
.main-search-input{
.main-search-input {
display: auto;
grid-column: 1/4;
grid-row: 1/2;
height: 48px;
@ -161,7 +158,7 @@ body{
}
.extra-search-options div {
grid-template-columns: 0.28fr 1fr;
grid-template-columns: 100px 1fr;
grid-template-rows: 1fr;
}
.extra-search-options .extra-search-options-div {
@ -487,13 +484,66 @@ body{
/** Main Section */
.main-content-section {
max-width: 1176px;
/* ERROR width: 1080px; */
min-width: 250px;
min-width: 220px;
height: 100%;
padding: 20px;
margin: auto;
transition: all ease-in-out .3s;
}
.main-content-section.full { width: 760px; }
.main-content-section.full .article-container {
display: flex;
flex-direction: column;
grid-column: 1/13;
}
.main-content-section.full .main-header {
padding: 2rem 0;
width: inherit;
display: flex;
}
.main-content-section.full .main-header .buttons {
display: flex;
align-items: center;
justify-content: center;
}
.main-content-section.full .main-header .title-container {
display: flex;
align-items: center;
flex-grow: 1;
}
.title-container .title {
margin: 0 1rem;
}
.title-container .title h2 {
font-weight: 500;
font-size: 1.75rem ;
}
.main-content-section.full .main-header .title-container .image-container {
display: flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
background-color: var(--color);
}
.title-container .image-container i {
font-size: 2.25rem;
color: #fefefe;
display: flex;
align-items: center;
justify-content: center;
}
/* Colors */
.sport { --color: rgb(245, 97, 80); }
.health { --color: rgb(224, 49, 49); }
.technology { --color: rgb(18, 130, 235); }
.entertainment { --color: rgb(247, 231, 20); }
.world { --color: var(--light-green); }
.business { --color: rgb(172, 21, 172); }
.covid19 { --color: rgb(66, 64, 64); }
.main-content-container {
height: 100%;
display: grid;
@ -521,7 +571,6 @@ body{
width: 40px;
height: 40px;
}
article.aside.search header div {
grid-row: 1/2;
grid-column: 2/3;
@ -574,6 +623,11 @@ body{
.white-button:active {
background-color: var(--very-light-grey);
}
.white-button.topic {
border-radius: 3rem;
padding: 7px 14px;
}
/* .main-content-container.full { grid-template-rows: 6rem auto; }
.main-content-container.single { grid-template-rows: 1fr; }
.main-content-section.single
@ -591,7 +645,11 @@ body{
#main-side-content-container {
grid-column: 11/15;
} */
/* #main-content-section.full
#main-side-content-container {
grid-row: 1/3;
grid-column: 2/3;
} */
h1.search {
font-size: 2rem;
margin: auto;
@ -603,11 +661,7 @@ body{
grid-row: 1/2;
grid-column: 1/2;
}
/* #main-content-section.full
#main-side-content-container {
grid-row: 1/3;
grid-column: 2/3;
} */
#main-content-header.search section {
display: grid;
grid-template-columns: auto auto;
@ -626,7 +680,7 @@ body{
}
#main-content-header.search figure:hover {
cursor: pointer;
/* background-color: var(--hover-light); */
background-color: var(--hover-light);
}
#main-content-header.search figure.circle {
border-radius: 50%;
@ -1280,51 +1334,3 @@ body{
background-size: 100%;
}
/** Responsiveness */
/* @media screen and (max-width: 1150px) {
.article-container {
grid-column: 1/8;
}
#main-side-content-container {
grid-column: 8/13;
}
} */
@media screen and (max-width: 1778px) {
.main-content-section {
margin-left: 290px;
}
}
@media screen and (max-width: 1100px) {
.main-content-section {
margin-left: 0px;
}
.side-bar {
background-color: var(--bg);
border: 1px solid var(--border-medium);
z-index: 2;
overflow: auto;
}
.side-bar { margin-left: -280px; }
}
@media screen and (max-width: 964px) {
.navigation-bar { grid-template-columns: 120px 1fr 85px; }
.main-search-input,
.extra-option-icon {
display: none;
}
.search-icon-figure{
grid-column: 3/4;
}
}
/* Ipad */
@media screen and (max-width: 768px) {
#main-side-content-container {
display: none;
}
.article-container {
grid-column: 1/13;
}
.main-content-section {
width: 100%;
}
}

51
CSS/responsive.css Normal file
View file

@ -0,0 +1,51 @@
@media screen and (max-width: 1778px) {
.main-content-section.single { margin-left: 290px; }
}
@media screen and (max-width: 1362px) {
.main-content-section.full { margin-left: 290px; }
}
@media screen and (max-width: 1100px) {
.main-content-section.full,.main-content-section.single { margin-left: auto; }
.side-bar {
background-color: var(--bg);
border: 1px solid var(--border-medium);
z-index: 2;
overflow: auto;
}
.side-bar { margin-left: -280px; }
}
@media screen and (max-width: 800px) {
.main-content-section.full { width: 100%; }
}
/* Ipad */
@media screen and (max-width: 768px) {
#main-side-content-container {
display: none;
}
.article-container {
grid-column: 1/13;
}
.main-content-section {
width: 100%;
}
}
/* Smaller screens */
@media screen and (max-width: 456px) {
/* Categories */
.main-content-section.full .main-header .title-container .image-container {
width: 3.2rem;
height: 3.2rem;
}
.title-container .image-container i { font-size: 1.6rem; }
.title-container .title h2 { font-size: 1.5rem ; }
.white-button.topic { padding: 6px 10px; }
}
@media screen and (max-width: 360px) {
.main-content-section.full .main-header .title-container { flex-grow: 0; }
}

75
JS/main.js
View file

@ -106,18 +106,16 @@ const suggest = {
suggest : async() => {
let fetchArray = []
let suggestWordsArray = []
let input = mainSearchInput.value.split(' ')
let replaceInput = mainSearchInput.value.trim().replace(regularExpressions.string.symbols, ' ')
let input = replaceInput.split(' ')
let n = 0
const maxLength = 40
while(suggestWordsArray.length < 30) {
while(suggestWordsArray.length < maxLength) {
fetchArray = await suggest.fetch(input[n])
for(let i = 0; i < fetchArray.length; i++)
if(suggestWordsArray.indexOf(fetchArray[i].word) === -1 && fetchArray[i].word !== mainSearchInput.value && suggestWordsArray.length < 30) suggestWordsArray.push(fetchArray[i].word)
input[n] = removeCharactersInString(input[n], 0, -1)
if(input.length === 0) break
if(suggestWordsArray.indexOf(fetchArray[i].word) === -1 && fetchArray[i].word !== mainSearchInput.value && suggestWordsArray.length < maxLength) suggestWordsArray.push(fetchArray[i].word)
if(input.length === n) break
n++
}
suggest.generate(suggestWordsArray)
removeDisableSideElements()
@ -184,34 +182,6 @@ const suggest = {
}
}
const responsiveVersion = {
// 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
// },
// 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'
// }
}
const php = {
info : async(word) => {
const response = await fetch(`${pathLocation}privateInfo.php`, {
@ -256,7 +226,7 @@ const regularExpressions = {
backgroundColor : /[\&]+[b]+[g]+[=].*/g
},
string : {
symbols : /[@_!#$%^&*()<>?/|}{~:]/g
symbols : /[@_!#$%^&*()<>?/|}{~:"'-]/g
}
}
@ -280,10 +250,10 @@ const regularExpressions = {
// }
window.onload = async () => {
windowWidthSettings()
// Close all open windows
hideExtraSearchOptions()
hideSuggestWords()
// document.querySelectorAll('article').forEach(article => { article.onclick = () => { alert() }})
document.querySelectorAll('input').forEach(input => { input.autocomplete = 'off' })
@ -306,11 +276,7 @@ window.onload = async () => {
else if (window.location.pathname.includes('help')) help()
else if (window.location.pathname.includes('search')) mainSearch()
await user.location()
// changeBackgroundColor()
// let query = location.search.match(regularExpressions.url.query)[0]
// query = removeCharactersInString(query, 3, query.length - 1)
// changeBackgroundColor()
}
window.onclick = (e) => {
@ -320,6 +286,7 @@ window.onclick = (e) => {
else if(selectCountryDiv.classList.contains('active')) clickInOutCheck(selectCountryDiv, e.target)
else if(!extraSearchOptions.classList.contains('disable')) clickInOutCheck(extraSearchOptions, e.target)
}
window.onresize = windowWidthSettings
function openLinks(string) { window.location.replace(websiteURL + string) }
@ -327,11 +294,6 @@ function historyPushState(webiste, string, country, background) { history.pushSt
function changeBackgroundColor() { document.body.className = window.location.search.match(regularExpressions.url.backgroundColor)[0].slice(4,10) }
/**
* This function gets a language and returns it's acronym
* @param {string} target
* @returns {string} language acronym
*/
function getLanguageAcronym(target) {
for(let i = 0; i < language.length; i++)
if(language[i] === target)
@ -520,6 +482,12 @@ function settings() {
function about() {
}
mainSearchFigure.onclick = () => {
if(window.innerWidth > 964) return mainSearch(undefined, 'main-input')
if(mainSearchIcon.classList.contains('disable') && navigationBarLeft.classList.contains('disable') && navigationBarRight.classList.contains('disable')) responsiveVersion.closeMobileVersionNavBar()
else responsiveVersion.openMobileVersionNavBar()
}
mainSearchInput.onfocus = () => {
if(!extraSearchOptions.classList.contains('disable')) return hideExtraSearchOptions()
else if(mainSearchInput.value.length !== 0) showSuggestWords()
@ -814,4 +782,13 @@ function removeCharactersInString(string, frontNumber, backNumber) { return stri
function removeDuplicates(array) { array.splice(0, array.length, ...(new Set(array))) }
function removeSelectedValuesFromArray(array, target) { return target.filter(val => !array.includes(val)) }
function urlEdit(string) { return decodeURIComponent(string).trim().replace(/\s\s+/g, ' ') }
// string.trim().replace(/\s\s+/g, ' ').replace(/%20/g, ' ').replace(/%22/g, '"')
function checkIfCategoriesAreOpen() {
for(let i = 0; i < categories.length; i++)
if(window.location.pathname.includes(categories[i]) || window.location.pathname.includes('covid-19'))
return true
return false
}
// string.trim().replace(/\s\s+/g, ' ').replace(/%20/g, ' ').replace(/%22/g, '"')
function followCategory() {
}

63
JS/responsive.js Normal file
View file

@ -0,0 +1,63 @@
const responsiveVersion = {
openMobileVersionNavBar() {
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()
sideBar.style.marginLeft = '-100%'
sideMenuCounter = 1
},
closeMobileVersionNavBar() {
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'
navigationBar.style.gridTemplateColumns = '120px 1fr 85px'
},
defaultNaviagtionBar() {
mainSearchIcon.classList.remove('disable')
mainSearchBackLeftIcon.classList.add('disable')
navigationBarLeft.classList.remove('disable')
navigationBarRight.classList.remove('disable')
navigationBar.style.gridTemplateColumns = '1fr 730px 1fr'
mainSearchInput.style.display = 'grid'
extOptIcon.style.display = 'grid'
mainSearchFigure.style.gridColumn = '1/2'
},
smallScreen457() {
if(window.innerWidth < 510) {
document.querySelectorAll('.article-container .main-header .buttons .white-button span')[0].innerHTML = ''
document.querySelectorAll('.article-container .main-header .buttons .white-button span')[1].innerHTML = ''
} else {
document.querySelectorAll('.article-container .main-header .buttons .white-button span')[0].innerHTML = 'Following'
document.querySelectorAll('.article-container .main-header .buttons .white-button span')[1].innerHTML = 'Share'
}
}
}
function windowWidthSettings() {
if(window.innerWidth > 964) {
responsiveVersion.defaultNaviagtionBar()
} else {
if(!suggestMainInput.classList.contains('disable') || !extraSearchOptions.classList.contains('disable')) {
hideSuggestWords()
hideExtraSearchOptions()
}
responsiveVersion.closeMobileVersionNavBar()
}
if(checkIfCategoriesAreOpen() === true) responsiveVersion.smallScreen457()
}

2
JS/variables.js
View file

@ -2,7 +2,7 @@
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 categories = ['all','business','entertainment','general','health','science','sports','technology','world']
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)']

2
add-ons/head.php
View file

@ -11,8 +11,10 @@
<link rel="stylesheet" href="../CSS/colors.css">
<link rel="stylesheet" href="../CSS/*.css">
<link rel="stylesheet" href="../CSS/index.css">
<link rel="stylesheet" href="../CSS/responsive.css">
<script src="../JS/variables.js" defer></script>
<script src="../JS/responsive.js" defer></script>
<script src="../JS/show.js" defer></script>
<script src="../JS/diacritics.js" defer></script>
<script src="../JS/main.js" defer></script>

41
add-ons/login.php Normal file
View file

@ -0,0 +1,41 @@
<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>

3
add-ons/navigation-bar.php
View file

@ -14,8 +14,7 @@
<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="mainSearch(undefined,'main-input')">
<a href="#" class="search-icon flex align-center justify-center border-radius-50" id="main-search-icon-a">
<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>

45
headlines.php
View file

@ -11,8 +11,11 @@
<link rel="stylesheet" href="CSS/colors.css">
<link rel="stylesheet" href="CSS/*.css">
<link rel="stylesheet" href="CSS/index.css">
<link rel="stylesheet" href="CSS/responsive.css">
<script src="JS/variables.js" defer></script>
<script src="JS/responsive.js" defer></script>
<script src="JS/show.js" defer></script>
<script src="JS/diacritics.js" defer></script>
<script src="JS/main.js" defer></script>
@ -122,47 +125,7 @@
<?php include 'add-ons/navigation-bar.php' ?>
<div class="login-option-div grid absolute fixed" id="login-option-div">
<header class="grid">
<span class="flex align-center justify-center ">Sign in to</span>
<h1 class="flex align-center justify-center ">News Website</h1>
</header>
<div class="google-facebook-links">
<div class="external-login-container" id="googleBtn">
<div class="external-login-botton google-login-button grid pointer">
<div class="icons8-google"></div>
<label class="flex align-center justify-center pointer">Google</label>
</div>
</div>
<!--! Facebook is curently unavailable-->
<!-- <div class="external-login-container facebook-login-container relative" onclick="showUnableAtTheMomentNotification()">
<div class="external-login-botton facebook-login-button grid pointer">
<i class="fab fa-facebook fa-2x flex align-center justify-center"></i>
<label class="flex align-center justify-center pointer">Facebook</label>
</div>
</div> -->
<div class="external-login-container" id="github-button">
<div class="external-login-botton github-login-button grid pointer">
<i class="fa fa-github fa-2x flex align-center justify-center"></i>
<label class="flex align-center justify-center pointer">GitHub</label>
</div>
</div>
</div>
<hr>
<span class="or-login absolute">or</span>
<figure class="x-icon absolute flex align-center justify-center border-radius-50">
<i class="fal fa-times fa-lg pointer" onclick="manageLoginOptions()"></i>
</figure>
<footer class="login-other-options">
<a href="signin.php" class="blue-link">Create Account</a>
<a href="login.php" class="blue-link">Log In</a>
</footer>
</div>
<?php include 'add-ons/login.php' ?>
<?php include 'add-ons/select-country.php' ?>

156
search.php
View file

@ -11,8 +11,10 @@
<link rel="stylesheet" href="CSS/colors.css">
<link rel="stylesheet" href="CSS/*.css">
<link rel="stylesheet" href="CSS/index.css">
<link rel="stylesheet" href="CSS/responsive.css">
<script src="JS/variables.js" defer></script>
<script src="JS/responsive.js" defer></script>
<script src="JS/diacritics.js" defer></script>
<script src="JS/main.js" defer></script>
<script src="JS/show.js" defer></script>
@ -34,105 +36,21 @@
<section class="main-content-section single" id="main-content-section">
<div class="main-content-container">
<div class="article-container">
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article class="news">
<div>
<h3>Hello World!</h3>
<div>
</div>
<div class="subtitle">
</div>
</div>
</article>
</div>
<aside id="main-side-content-container">
<article class="search aside">
@ -169,45 +87,7 @@
<?php include 'add-ons/navigation-bar.php' ?>
<div class="login-option-div grid absolute fixed" id="login-option-div">
<header class="grid">
<span class="flex align-center justify-center ">Sign in to</span>
<h1 class="flex align-center justify-center ">News Website</h1>
</header>
<div class="google-facebook-links">
<div class="external-login-container" id="googleBtn">
<div class="external-login-botton google-login-button grid pointer">
<div class="icons8-google"></div>
<label class="flex align-center justify-center pointer">Google</label>
</div>
</div>
<!--! Facebook is curently unavailable-->
<!-- <div class="external-login-container facebook-login-container relative" onclick="showUnableAtTheMomentNotification()">
<div class="external-login-botton facebook-login-button grid pointer">
<i class="fab fa-facebook fa-2x flex align-center justify-center"></i>
<label class="flex align-center justify-center pointer">Facebook</label>
</div>
</div> -->
<div class="external-login-container" id="github-button">
<div class="external-login-botton github-login-button grid pointer">
<i class="fa fa-github fa-2x flex align-center justify-center"></i>
<label class="flex align-center justify-center pointer">GitHub</label>
</div>
</div>
</div>
<hr>
<span class="or-login absolute">or</span>
<figure class="x-icon absolute flex align-center justify-center border-radius-50">
<i class="fal fa-times fa-lg pointer" onclick="manageLoginOptions()"></i>
</figure>
<footer class="login-other-options">
<a href="signin.php" class="blue-link">Create Account</a>
<a href="login.php" class="blue-link">Log In</a>
</footer>
</div>
<?php include 'add-ons/login.php' ?>
<?php include 'add-ons/select-country.php' ?>

69
topics/business.php
View file

@ -6,51 +6,38 @@
<?php include '../add-ons/side-bar.php' ?>
<section class="main-content-section full" id="main-content-section">
<div class="main-content-container">
<div class="article-container">
<div class="main-header">
<div class="title-container">
<div class="image-container border-radius-50 business">
<i class="far fa-chart-line fa-lg"></i>
</div>
<div class="title">
<h2>Buisiness</h2>
</div>
</div>
<div class="buttons">
<div class="white-button follow topic" onclick="followCategory()">
<i class="far fa-star fa-lg"></i>
<span>Follow</span>
</div>
<div class="white-button share topic">
<i class="fas fa-share-alt fa-lg"></i>
<span>Share</span>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<?php include '../add-ons/navigation-bar.php' ?>
<div class="login-option-div grid absolute fixed" id="login-option-div">
<header class="grid">
<span class="flex align-center justify-center ">Sign in to</span>
<h1 class="flex align-center justify-center ">News Website</h1>
</header>
<div class="google-facebook-links">
<div class="external-login-container" id="googleBtn">
<div class="external-login-botton google-login-button grid pointer">
<div class="icons8-google"></div>
<label class="flex align-center justify-center pointer">Google</label>
</div>
</div>
<!--! Facebook is curently unavailable-->
<!-- <div class="external-login-container facebook-login-container relative" onclick="showUnableAtTheMomentNotification()">
<div class="external-login-botton facebook-login-button grid pointer">
<i class="fab fa-facebook fa-2x flex align-center justify-center"></i>
<label class="flex align-center justify-center pointer">Facebook</label>
</div>
</div> -->
<div class="external-login-container" id="github-button">
<div class="external-login-botton github-login-button grid pointer">
<i class="fa fa-github fa-2x flex align-center justify-center"></i>
<label class="flex align-center justify-center pointer">GitHub</label>
</div>
</div>
</div>
<hr>
<span class="or-login absolute">or</span>
<figure class="x-icon absolute flex align-center justify-center border-radius-50">
<i class="fal fa-times fa-lg pointer" onclick="manageLoginOptions()"></i>
</figure>
<footer class="login-other-options">
<a href="signin.php" class="blue-link">Create Account</a>
<a href="login.php" class="blue-link">Log In</a>
</footer>
</div>
<?php include '../add-ons/login.php' ?>
<?php include '../add-ons/select-country.php' ?>

42
topics/categories.php
View file

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

71
topics/covid-19.php
View file

@ -6,57 +6,38 @@
<?php include '../add-ons/side-bar.php' ?>
<section class="main-content-section grid" id="main-content-section">
<figure></figure>
<section class="main-content-section full" id="main-content-section">
<div class="main-content-container">
<div class="article-container">
<div class="main-header">
<div class="title-container">
<div class="image-container border-radius-50 covid19">
<i class="fad fa-shield-cross fa-lg"></i>
</div>
<div class="title">
<h2>COVID-19</h2>
</div>
</div>
<div class="buttons">
<div class="white-button follow topic" onclick="followCategory()">
<i class="far fa-star fa-lg"></i>
<span>Follow</span>
</div>
<div class="white-button share topic">
<i class="fas fa-share-alt fa-lg"></i>
<span>Share</span>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<?php include '../add-ons/navigation-bar.php' ?>
<div class="login-option-div grid absolute fixed" id="login-option-div">
<header class="grid">
<span class="flex align-center justify-center ">Sign in to</span>
<h1 class="flex align-center justify-center ">News Website</h1>
</header>
<div class="google-facebook-links">
<div class="external-login-container" id="googleBtn">
<div class="external-login-botton google-login-button grid pointer">
<div class="icons8-google"></div>
<label class="flex align-center justify-center pointer">Google</label>
</div>
</div>
<!--! Facebook is curently unavailable-->
<!-- <div class="external-login-container facebook-login-container relative" onclick="showUnableAtTheMomentNotification()">
<div class="external-login-botton facebook-login-button grid pointer">
<i class="fab fa-facebook fa-2x flex align-center justify-center"></i>
<label class="flex align-center justify-center pointer">Facebook</label>
</div>
</div> -->
<div class="external-login-container" id="github-button">
<div class="external-login-botton github-login-button grid pointer">
<i class="fa fa-github fa-2x flex align-center justify-center"></i>
<label class="flex align-center justify-center pointer">GitHub</label>
</div>
</div>
</div>
<hr>
<span class="or-login absolute">or</span>
<figure class="x-icon absolute flex align-center justify-center border-radius-50">
<i class="fal fa-times fa-lg pointer" onclick="manageLoginOptions()"></i>
</figure>
<footer class="login-other-options">
<a href="signin.php" class="blue-link">Create Account</a>
<a href="login.php" class="blue-link">Log In</a>
</footer>
</div>
<?php include '../add-ons/login.php' ?>
<?php include '../add-ons/select-country.php' ?>

69
topics/entertainment.php
View file

@ -6,51 +6,38 @@
<?php include '../add-ons/side-bar.php' ?>
<section class="main-content-section full" id="main-content-section">
<div class="main-content-container">
<div class="article-container">
<div class="main-header">
<div class="title-container">
<div class="image-container border-radius-50 entertainment">
<i class="far fa-film fa-lg"></i>
</div>
<div class="title">
<h2>Entertainment</h2>
</div>
</div>
<div class="buttons">
<div class="white-button follow topic" onclick="followCategory()">
<i class="far fa-star fa-lg"></i>
<span>Follow</span>
</div>
<div class="white-button share topic">
<i class="fas fa-share-alt fa-lg"></i>
<span>Share</span>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<?php include '../add-ons/navigation-bar.php' ?>
<div class="login-option-div grid absolute fixed" id="login-option-div">
<header class="grid">
<span class="flex align-center justify-center ">Sign in to</span>
<h1 class="flex align-center justify-center ">News Website</h1>
</header>
<div class="google-facebook-links">
<div class="external-login-container" id="googleBtn">
<div class="external-login-botton google-login-button grid pointer">
<div class="icons8-google"></div>
<label class="flex align-center justify-center pointer">Google</label>
</div>
</div>
<!--! Facebook is curently unavailable-->
<!-- <div class="external-login-container facebook-login-container relative" onclick="showUnableAtTheMomentNotification()">
<div class="external-login-botton facebook-login-button grid pointer">
<i class="fab fa-facebook fa-2x flex align-center justify-center"></i>
<label class="flex align-center justify-center pointer">Facebook</label>
</div>
</div> -->
<div class="external-login-container" id="github-button">
<div class="external-login-botton github-login-button grid pointer">
<i class="fa fa-github fa-2x flex align-center justify-center"></i>
<label class="flex align-center justify-center pointer">GitHub</label>
</div>
</div>
</div>
<hr>
<span class="or-login absolute">or</span>
<figure class="x-icon absolute flex align-center justify-center border-radius-50">
<i class="fal fa-times fa-lg pointer" onclick="manageLoginOptions()"></i>
</figure>
<footer class="login-other-options">
<a href="signin.php" class="blue-link">Create Account</a>
<a href="login.php" class="blue-link">Log In</a>
</footer>
</div>
<?php include '../add-ons/login.php' ?>
<?php include '../add-ons/select-country.php' ?>

69
topics/health.php
View file

@ -6,51 +6,38 @@
<?php include '../add-ons/side-bar.php' ?>
<section class="main-content-section full" id="main-content-section">
<div class="main-content-container">
<div class="article-container">
<div class="main-header">
<div class="title-container">
<div class="image-container border-radius-50 health">
<i class="far fa-heart-rate fa-lg"></i>
</div>
<div class="title">
<h2>Health</h2>
</div>
</div>
<div class="buttons">
<div class="white-button follow topic" onclick="followCategory()">
<i class="far fa-star fa-lg"></i>
<span>Follow</span>
</div>
<div class="white-button share topic">
<i class="fas fa-share-alt fa-lg"></i>
<span>Share</span>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<?php include '../add-ons/navigation-bar.php' ?>
<div class="login-option-div grid absolute fixed" id="login-option-div">
<header class="grid">
<span class="flex align-center justify-center ">Sign in to</span>
<h1 class="flex align-center justify-center ">News Website</h1>
</header>
<div class="google-facebook-links">
<div class="external-login-container" id="googleBtn">
<div class="external-login-botton google-login-button grid pointer">
<div class="icons8-google"></div>
<label class="flex align-center justify-center pointer">Google</label>
</div>
</div>
<!--! Facebook is curently unavailable-->
<!-- <div class="external-login-container facebook-login-container relative" onclick="showUnableAtTheMomentNotification()">
<div class="external-login-botton facebook-login-button grid pointer">
<i class="fab fa-facebook fa-2x flex align-center justify-center"></i>
<label class="flex align-center justify-center pointer">Facebook</label>
</div>
</div> -->
<div class="external-login-container" id="github-button">
<div class="external-login-botton github-login-button grid pointer">
<i class="fa fa-github fa-2x flex align-center justify-center"></i>
<label class="flex align-center justify-center pointer">GitHub</label>
</div>
</div>
</div>
<hr>
<span class="or-login absolute">or</span>
<figure class="x-icon absolute flex align-center justify-center border-radius-50">
<i class="fal fa-times fa-lg pointer" onclick="manageLoginOptions()"></i>
</figure>
<footer class="login-other-options">
<a href="signin.php" class="blue-link">Create Account</a>
<a href="login.php" class="blue-link">Log In</a>
</footer>
</div>
<?php include '../add-ons/login.php' ?>
<?php include '../add-ons/select-country.php' ?>

69
topics/sports.php
View file

@ -6,51 +6,38 @@
<?php include '../add-ons/side-bar.php' ?>
<section class="main-content-section full" id="main-content-section">
<div class="main-content-container">
<div class="article-container">
<div class="main-header">
<div class="title-container">
<div class="image-container border-radius-50 sport">
<i class="fas fa-tennis-ball"></i>
</div>
<div class="title">
<h2>Sports</h2>
</div>
</div>
<div class="buttons">
<div class="white-button follow topic" onclick="followCategory()">
<i class="far fa-star fa-lg"></i>
<span>Follow</span>
</div>
<div class="white-button share topic">
<i class="fas fa-share-alt fa-lg"></i>
<span>Share</span>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<?php include '../add-ons/navigation-bar.php' ?>
<div class="login-option-div grid absolute fixed" id="login-option-div">
<header class="grid">
<span class="flex align-center justify-center ">Sign in to</span>
<h1 class="flex align-center justify-center ">News Website</h1>
</header>
<div class="google-facebook-links">
<div class="external-login-container" id="googleBtn">
<div class="external-login-botton google-login-button grid pointer">
<div class="icons8-google"></div>
<label class="flex align-center justify-center pointer">Google</label>
</div>
</div>
<!--! Facebook is curently unavailable-->
<!-- <div class="external-login-container facebook-login-container relative" onclick="showUnableAtTheMomentNotification()">
<div class="external-login-botton facebook-login-button grid pointer">
<i class="fab fa-facebook fa-2x flex align-center justify-center"></i>
<label class="flex align-center justify-center pointer">Facebook</label>
</div>
</div> -->
<div class="external-login-container" id="github-button">
<div class="external-login-botton github-login-button grid pointer">
<i class="fa fa-github fa-2x flex align-center justify-center"></i>
<label class="flex align-center justify-center pointer">GitHub</label>
</div>
</div>
</div>
<hr>
<span class="or-login absolute">or</span>
<figure class="x-icon absolute flex align-center justify-center border-radius-50">
<i class="fal fa-times fa-lg pointer" onclick="manageLoginOptions()"></i>
</figure>
<footer class="login-other-options">
<a href="signin.php" class="blue-link">Create Account</a>
<a href="login.php" class="blue-link">Log In</a>
</footer>
</div>
<?php include '../add-ons/login.php' ?>
<?php include '../add-ons/select-country.php' ?>

69
topics/technology.php
View file

@ -5,52 +5,39 @@
<main id="main" class="flex align-center justify-center">
<?php include '../add-ons/side-bar.php' ?>
<section class="main-content-section full" id="main-content-section">
<div class="main-content-container">
<div class="article-container">
<div class="main-header">
<div class="title-container">
<div class="image-container border-radius-50 technology">
<i class="far fa-microchip fa-lg"></i>
</div>
<div class="title">
<h2>Technology</h2>
</div>
</div>
<div class="buttons">
<div class="white-button follow topic" onclick="followCategory()">
<i class="far fa-star fa-lg"></i>
<span>Follow</span>
</div>
<div class="white-button share topic">
<i class="fas fa-share-alt fa-lg"></i>
<span>Share</span>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<?php include '../add-ons/navigation-bar.php' ?>
<div class="login-option-div grid absolute fixed" id="login-option-div">
<header class="grid">
<span class="flex align-center justify-center ">Sign in to</span>
<h1 class="flex align-center justify-center ">News Website</h1>
</header>
<div class="google-facebook-links">
<div class="external-login-container" id="googleBtn">
<div class="external-login-botton google-login-button grid pointer">
<div class="icons8-google"></div>
<label class="flex align-center justify-center pointer">Google</label>
</div>
</div>
<!--! Facebook is curently unavailable-->
<!-- <div class="external-login-container facebook-login-container relative" onclick="showUnableAtTheMomentNotification()">
<div class="external-login-botton facebook-login-button grid pointer">
<i class="fab fa-facebook fa-2x flex align-center justify-center"></i>
<label class="flex align-center justify-center pointer">Facebook</label>
</div>
</div> -->
<div class="external-login-container" id="github-button">
<div class="external-login-botton github-login-button grid pointer">
<i class="fa fa-github fa-2x flex align-center justify-center"></i>
<label class="flex align-center justify-center pointer">GitHub</label>
</div>
</div>
</div>
<hr>
<span class="or-login absolute">or</span>
<figure class="x-icon absolute flex align-center justify-center border-radius-50">
<i class="fal fa-times fa-lg pointer" onclick="manageLoginOptions()"></i>
</figure>
<footer class="login-other-options">
<a href="signin.php" class="blue-link">Create Account</a>
<a href="login.php" class="blue-link">Log In</a>
</footer>
</div>
<?php include '../add-ons/login.php' ?>
<?php include '../add-ons/select-country.php' ?>

69
topics/world.php
View file

@ -6,51 +6,38 @@
<?php include '../add-ons/side-bar.php' ?>
<section class="main-content-section full" id="main-content-section">
<div class="main-content-container">
<div class="article-container">
<div class="main-header">
<div class="title-container">
<div class="image-container border-radius-50 world">
<i class="fas fa-globe-europe fa-lg"></i>
</div>
<div class="title">
<h2>World</h2>
</div>
</div>
<div class="buttons">
<div class="white-button follow topic" onclick="followCategory()">
<i class="far fa-star fa-lg"></i>
<span>Follow</span>
</div>
<div class="white-button share topic">
<i class="fas fa-share-alt fa-lg"></i>
<span>Share</span>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<?php include '../add-ons/navigation-bar.php' ?>
<div class="login-option-div grid absolute fixed" id="login-option-div">
<header class="grid">
<span class="flex align-center justify-center ">Sign in to</span>
<h1 class="flex align-center justify-center ">News Website</h1>
</header>
<div class="google-facebook-links">
<div class="external-login-container" id="googleBtn">
<div class="external-login-botton google-login-button grid pointer">
<div class="icons8-google"></div>
<label class="flex align-center justify-center pointer">Google</label>
</div>
</div>
<!--! Facebook is curently unavailable-->
<!-- <div class="external-login-container facebook-login-container relative" onclick="showUnableAtTheMomentNotification()">
<div class="external-login-botton facebook-login-button grid pointer">
<i class="fab fa-facebook fa-2x flex align-center justify-center"></i>
<label class="flex align-center justify-center pointer">Facebook</label>
</div>
</div> -->
<div class="external-login-container" id="github-button">
<div class="external-login-botton github-login-button grid pointer">
<i class="fa fa-github fa-2x flex align-center justify-center"></i>
<label class="flex align-center justify-center pointer">GitHub</label>
</div>
</div>
</div>
<hr>
<span class="or-login absolute">or</span>
<figure class="x-icon absolute flex align-center justify-center border-radius-50">
<i class="fal fa-times fa-lg pointer" onclick="manageLoginOptions()"></i>
</figure>
<footer class="login-other-options">
<a href="signin.php" class="blue-link">Create Account</a>
<a href="login.php" class="blue-link">Log In</a>
</footer>
</div>
<?php include '../add-ons/login.php' ?>
<?php include '../add-ons/select-country.php' ?>