Updated responsiveness, login with google/facebook
This commit is contained in:
Nik Topler
parent
90c79fe0bb
commit
abe04218cb
Binary file not shown.
182
CSS/index.css
182
CSS/index.css
|
|
@ -158,7 +158,7 @@ body{
|
|||
|
||||
}
|
||||
.extra-search-options div {
|
||||
grid-template-columns: 100px 1fr;
|
||||
grid-template-columns: 115px 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
.extra-search-options .extra-search-options-div {
|
||||
|
|
@ -1128,12 +1128,10 @@ body{
|
|||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.x-icon:active{
|
||||
background-color: var(--hover-light);
|
||||
}
|
||||
.select-country .blue-link{
|
||||
font-weight: 500;
|
||||
}
|
||||
.x-icon:active{ background-color: var(--hover-light); }
|
||||
.x-icon i { font-size: 1.125rem; }
|
||||
|
||||
.select-country .blue-link { font-weight: 500; }
|
||||
.select-country h3{
|
||||
font-size:1.6rem;
|
||||
font-weight: 400;
|
||||
|
|
@ -1188,9 +1186,7 @@ body{
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.select-country .radio-button-container{
|
||||
padding: 0 20px;
|
||||
}
|
||||
.select-country .radio-button-container{ padding: 0 20px; }
|
||||
.select-country .radio-button-container p{
|
||||
width: fit-content;
|
||||
margin-left: 8px;
|
||||
|
|
@ -1219,118 +1215,128 @@ body{
|
|||
}
|
||||
|
||||
/** Login Options */
|
||||
.login-option-div{
|
||||
width: 250px;
|
||||
height: 300px;
|
||||
.login-option-div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 300px;
|
||||
min-width: 240px;
|
||||
width: auto;
|
||||
min-height: 250px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%) scale(0.8);
|
||||
padding: 20px;
|
||||
padding: 25px;
|
||||
background-color: var(--bg);
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--shadow);
|
||||
z-index: -10;
|
||||
grid-template-rows: 3.4rem 1fr 2rem 20px 2.5rem;
|
||||
}
|
||||
.login-option-div.active{
|
||||
z-index: 10;
|
||||
transform: translate(-50%,-50%) scale(1);
|
||||
}
|
||||
.login-option-div header{
|
||||
grid-row: 1/2;
|
||||
grid-template-columns: 20px 1fr 20px;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
.login-option-div header h1{
|
||||
grid-row: 2/3;
|
||||
grid-column: 2/3;
|
||||
font-size: 1.6rem;
|
||||
color: var(--font-very-dark);
|
||||
.login-option-div header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.login-option-div header span{
|
||||
grid-row: 1/2;
|
||||
grid-column: 2/3;
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.33rem;
|
||||
color: var(--font-very-dark);
|
||||
}
|
||||
.google-facebook-links{
|
||||
grid-row: 2/4;
|
||||
margin: auto 0;
|
||||
.login-option-div h3 {
|
||||
text-align: center;
|
||||
font-size: 1.6rem;
|
||||
color: var(--font-very-dark);
|
||||
font-weight: 400;
|
||||
margin-bottom: 1rem;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
.google-facebook-links div {
|
||||
margin: auto;
|
||||
}
|
||||
.google-facebook-links .external-login-container:not(:last-child){
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.login-option-div hr{
|
||||
border-bottom: 1px solid var(--hover-medium);
|
||||
width: 100%;
|
||||
}
|
||||
.login-option-div .or-login{
|
||||
background-color: var(--bg);
|
||||
padding: 4px 12px;
|
||||
left: 128px;
|
||||
bottom: 57px;
|
||||
color: var(--font-dark);
|
||||
}
|
||||
.fa.fa-github,.fab.fa-facebook{
|
||||
.external-login-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: fit-content;
|
||||
padding-bottom: 3px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.github-login-button{
|
||||
--color: var(--font-very-dark);
|
||||
background-color: var(--font-very-dark);
|
||||
.external-login-options .external-container {
|
||||
height: 53px;
|
||||
margin: 4px 0;
|
||||
}
|
||||
.facebook-login-button{
|
||||
background-color: #4267B2;
|
||||
}
|
||||
.external-login-container label,.github-login-button .fa,.fa-facebook{
|
||||
color: var(--bg);
|
||||
}
|
||||
.login-other-options{
|
||||
margin: auto 0;
|
||||
}
|
||||
.login-other-options a:first-child{
|
||||
float: left;
|
||||
}
|
||||
.login-other-options a:last-child{
|
||||
float: right;
|
||||
}
|
||||
|
||||
.external-login-container{
|
||||
width: 100%;
|
||||
.external-login-options .container {
|
||||
width: calc(100% - 2px);
|
||||
border: 1px solid var(--color);
|
||||
padding-top: 3px;
|
||||
padding-bottom: 0;
|
||||
transition: all ease-in .2s;
|
||||
transition: ease-in .1s;
|
||||
}
|
||||
.external-login-container:hover {
|
||||
.external-login-options .container:hover {
|
||||
padding-top: 0;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
.external-login-botton {
|
||||
width: 96%;
|
||||
.external-login-options .container .inner-container {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: grid;
|
||||
grid-template-columns: 50px 1fr;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--color);
|
||||
transition: all ease-in-out .1s;
|
||||
grid-template-columns: 50px 1fr;
|
||||
}
|
||||
.external-login-container:hover .external-login-botton{
|
||||
box-shadow: 0px 1px 10px var(--font-medium);
|
||||
}
|
||||
|
||||
.google-login-button {
|
||||
--color: var(--google-blue);
|
||||
}
|
||||
.google-login-button label{
|
||||
background-color: var(--google-blue);
|
||||
font-weight: 500;
|
||||
transition: all ease-in .2s;
|
||||
}
|
||||
.external-login-options .container:hover .inner-container { box-shadow: 0 2px 4px 0 var(--border-dark); }
|
||||
.icons8-google {
|
||||
margin: auto;
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iNDIiIGhlaWdodD0iNDIiCnZpZXdCb3g9IjAgMCA0OCA0OCIKc3R5bGU9IiBmaWxsOiMwMDAwMDA7Ij48cGF0aCBmaWxsPSIjRkZDMTA3IiBkPSJNNDMuNjExLDIwLjA4M0g0MlYyMEgyNHY4aDExLjMwM2MtMS42NDksNC42NTctNi4wOCw4LTExLjMwMyw4Yy02LjYyNywwLTEyLTUuMzczLTEyLTEyYzAtNi42MjcsNS4zNzMtMTIsMTItMTJjMy4wNTksMCw1Ljg0MiwxLjE1NCw3Ljk2MSwzLjAzOWw1LjY1Ny01LjY1N0MzNC4wNDYsNi4wNTMsMjkuMjY4LDQsMjQsNEMxMi45NTUsNCw0LDEyLjk1NSw0LDI0YzAsMTEuMDQ1LDguOTU1LDIwLDIwLDIwYzExLjA0NSwwLDIwLTguOTU1LDIwLTIwQzQ0LDIyLjY1OSw0My44NjIsMjEuMzUsNDMuNjExLDIwLjA4M3oiPjwvcGF0aD48cGF0aCBmaWxsPSIjRkYzRDAwIiBkPSJNNi4zMDYsMTQuNjkxbDYuNTcxLDQuODE5QzE0LjY1NSwxNS4xMDgsMTguOTYxLDEyLDI0LDEyYzMuMDU5LDAsNS44NDIsMS4xNTQsNy45NjEsMy4wMzlsNS42NTctNS42NTdDMzQuMDQ2LDYuMDUzLDI5LjI2OCw0LDI0LDRDMTYuMzE4LDQsOS42NTYsOC4zMzcsNi4zMDYsMTQuNjkxeiI+PC9wYXRoPjxwYXRoIGZpbGw9IiM0Q0FGNTAiIGQ9Ik0yNCw0NGM1LjE2NiwwLDkuODYtMS45NzcsMTMuNDA5LTUuMTkybC02LjE5LTUuMjM4QzI5LjIxMSwzNS4wOTEsMjYuNzE1LDM2LDI0LDM2Yy01LjIwMiwwLTkuNjE5LTMuMzE3LTExLjI4My03Ljk0NmwtNi41MjIsNS4wMjVDOS41MDUsMzkuNTU2LDE2LjIyNyw0NCwyNCw0NHoiPjwvcGF0aD48cGF0aCBmaWxsPSIjMTk3NkQyIiBkPSJNNDMuNjExLDIwLjA4M0g0MlYyMEgyNHY4aDExLjMwM2MtMC43OTIsMi4yMzctMi4yMzEsNC4xNjYtNC4wODcsNS41NzFjMC4wMDEtMC4wMDEsMC4wMDItMC4wMDEsMC4wMDMtMC4wMDJsNi4xOSw1LjIzOEMzNi45NzEsMzkuMjA1LDQ0LDM0LDQ0LDI0QzQ0LDIyLjY1OSw0My44NjIsMjEuMzUsNDMuNjExLDIwLjA4M3oiPjwvcGF0aD48L3N2Zz4=') 50% 50% no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.google-btn {
|
||||
--color: var(--google-blue);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.google-btn label{
|
||||
background-color: var(--google-blue);
|
||||
font-weight: 500;
|
||||
}
|
||||
.facebook-btn{ background-color: #4267B2; }
|
||||
.fa.fa-github, .fab.fa-facebook { display: flex; }
|
||||
.github-btn {
|
||||
--color: var(--font-very-dark);
|
||||
background-color: var(--font-very-dark);
|
||||
}
|
||||
.external-login-options label,
|
||||
.github-btn .fa, .fa-facebook { color: var(--bg); }
|
||||
.other-login-options {
|
||||
padding: 0.75rem 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
}
|
||||
.seperate-line {
|
||||
padding: 5px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.seperate-line span {
|
||||
background-color: var(--bg);
|
||||
z-index: 11;
|
||||
padding: 4px;
|
||||
color: var(--font-medium);
|
||||
}
|
||||
.seperate-line .line {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 50%;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
.seperate-line .line hr {
|
||||
width: inherit;
|
||||
border-bottom: 1px solid var(--font-medium);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
font-family: 'Google Sans','Noto Sans Myanmar UI',arial,sans-serif;
|
||||
background-color: var(--bg);
|
||||
z-index: 100;
|
||||
}
|
||||
.main-container {
|
||||
min-width: 400px;
|
||||
height: auto;
|
||||
min-height: 440px;
|
||||
padding: 40px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--bg);
|
||||
}
|
||||
.logo-container { margin: 0 auto; }
|
||||
.sign-container,
|
||||
.upper-container {
|
||||
margin-top: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
.upper-container span { font-size: 1.2rem; }
|
||||
|
||||
.sign-container h1 { font-size: 1.8rem; }
|
||||
|
||||
.main-middle-conatiner {
|
||||
display: flex;
|
||||
min-height: 310px;
|
||||
position: relative;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.email-container {
|
||||
position: absolute;
|
||||
min-width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
transition: all ease-in-out .2;
|
||||
background-color: rebeccapurple;
|
||||
}
|
||||
.password-container {
|
||||
position: absolute;
|
||||
min-width: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 100%;
|
||||
background-color: green;
|
||||
transition: all ease-in-out .2;
|
||||
}
|
||||
.email-container.active {
|
||||
right: 100%;
|
||||
left: -100%;
|
||||
}
|
||||
.password-container.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
90
JS/main.js
90
JS/main.js
|
|
@ -183,19 +183,38 @@ const suggest = {
|
|||
}
|
||||
|
||||
const php = {
|
||||
info : async(word) => {
|
||||
const response = await fetch(`${pathLocation}privateInfo.php`, {
|
||||
info : async (word) => {
|
||||
const res = await fetch(`${pathLocation}privateInfo.php`, {
|
||||
method: "POST",
|
||||
body: createFormData(word)
|
||||
body: createFormData(word, '')
|
||||
})
|
||||
return await response.text()
|
||||
return await res.text()
|
||||
},
|
||||
session : async() => {
|
||||
const response = await fetch('include/session.inc.php', {
|
||||
session : async () => {
|
||||
const res = await fetch('include/session.inc.php', {
|
||||
method: "POST",
|
||||
body: createFormData('user')
|
||||
body: createFormData('user', '')
|
||||
})
|
||||
return await response.text()
|
||||
return await res.text()
|
||||
},
|
||||
userInsertInDB : async (type, userInfo, id_token, clientID) => {
|
||||
let array
|
||||
if(type === 'google') {
|
||||
let id = userInfo.getId()
|
||||
let name = userInfo.getGivenName()
|
||||
let surname = userInfo.getFamilyName()
|
||||
let img = userInfo.getImageUrl()
|
||||
let email = userInfo.getEmail()
|
||||
array = JSON.stringify([id, id_token, clientID, name, surname, img, email])
|
||||
} else if(type === 'facebook') array = JSON.stringify([userInfo[0], userInfo[1], userInfo[2],userInfo[3], userInfo[4], userInfo[5].data.url,userInfo[6]])
|
||||
|
||||
const res = await fetch(`${pathLocation}include/insert.inc.php`, {
|
||||
method: "POST",
|
||||
body: createFormData(type, array)
|
||||
})
|
||||
const data = await res.text()
|
||||
console.log(data)
|
||||
if(data === 'success') location.reload()
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -730,30 +749,34 @@ function inputExtraSearchOptionChange() {
|
|||
function addDisableSideElements() { mainAsideContent.querySelectorAll('article').forEach(article => article.classList.add('disable')) }
|
||||
function removeDisableSideElements() { mainAsideContent.querySelectorAll('article.disable').forEach(article => article.classList.remove('disable')) }
|
||||
|
||||
function follow(element) {
|
||||
if(element.lastElementChild.textContent === 'Follow') fillIcons(element.firstElementChild, element.lastElementChild, 'Following')
|
||||
else emptyIcons(element.firstElementChild, element.lastElementChild, 'Follow')
|
||||
|
||||
if(window.location.pathname.includes('search')) followNews()
|
||||
else followCategory()
|
||||
}
|
||||
function saveNews(element) {
|
||||
if(element.lastElementChild.textContent === 'Save') {
|
||||
element.firstElementChild.classList.remove('far')
|
||||
element.firstElementChild.classList.add('fas')
|
||||
element.lastElementChild.textContent = 'Saved'
|
||||
} else {
|
||||
element.firstElementChild.classList.remove('fas')
|
||||
element.firstElementChild.classList.add('far')
|
||||
element.lastElementChild.textContent = 'Save'
|
||||
}
|
||||
if(element.lastElementChild.textContent === 'Save') fillIcons(element.firstElementChild, element.lastElementChild, 'Saved')
|
||||
else emptyIcons(element.firstElementChild, element.lastElementChild, 'Save')
|
||||
//PHP
|
||||
}
|
||||
function followNews(element) {
|
||||
function followNews() {
|
||||
//PHP
|
||||
}
|
||||
function followCategory() {
|
||||
|
||||
}
|
||||
|
||||
if(element.lastElementChild.textContent === 'Follow') {
|
||||
element.firstElementChild.classList.remove('far')
|
||||
element.firstElementChild.classList.add('fas')
|
||||
element.lastElementChild.textContent = 'Following'
|
||||
} else {
|
||||
element.firstElementChild.classList.remove('fas')
|
||||
element.firstElementChild.classList.add('far')
|
||||
element.lastElementChild.textContent = 'Follow'
|
||||
}
|
||||
//PHP
|
||||
function fillIcons(icon, text, string) {
|
||||
icon.classList.remove('far')
|
||||
icon.classList.add('fas')
|
||||
text.textContent = string
|
||||
}
|
||||
function emptyIcons(icon, text, string) {
|
||||
icon.classList.add('far')
|
||||
icon.classList.remove('fas')
|
||||
text.textContent = string
|
||||
}
|
||||
|
||||
/* API */
|
||||
|
|
@ -772,9 +795,9 @@ async function fetchNewsArticles() {
|
|||
const articles = await json.articles
|
||||
}
|
||||
|
||||
function createFormData(word) {
|
||||
function createFormData(word, data) {
|
||||
let formData = new FormData
|
||||
formData.append(word, '')
|
||||
formData.append(word, data)
|
||||
return formData
|
||||
}
|
||||
function capitalizeString(string) { return string.charAt(0).toUpperCase() + string.slice(1) }
|
||||
|
|
@ -790,5 +813,10 @@ function checkIfCategoriesAreOpen() {
|
|||
}
|
||||
// string.trim().replace(/\s\s+/g, ' ').replace(/%20/g, ' ').replace(/%22/g, '"')
|
||||
|
||||
function followCategory() {
|
||||
|
||||
|
||||
// Temporary
|
||||
async function manageExtraProfileOptions() {
|
||||
await fetch(`${pathLocation}include/logout.inc.php`)
|
||||
openLinks(filePath.headlines);
|
||||
}
|
||||
|
|
@ -38,11 +38,11 @@ const responsiveVersion = {
|
|||
},
|
||||
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 = ''
|
||||
// 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'
|
||||
// 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'
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -137,3 +137,5 @@ function removeActiveSidebarCategory() {
|
|||
for(let i = 0; i < oldSelectedElements.length; i++)
|
||||
oldSelectedElements[i].classList.remove('active')
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
101
JS/sign.js
101
JS/sign.js
|
|
@ -1,101 +0,0 @@
|
|||
// // /** Google */
|
||||
|
||||
// let googleUser = {}
|
||||
// function startApp() {
|
||||
// gapi.load('auth2', () => {
|
||||
// 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() {
|
||||
// let 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,82 @@
|
|||
/** Google */
|
||||
let clientID = '571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com'
|
||||
let googleUser = {}
|
||||
function startApp() {
|
||||
gapi.load('auth2', function () {
|
||||
auth2 = gapi.auth2.init({
|
||||
client_id: clientID,
|
||||
cookiepolicy: 'single_host_origin',
|
||||
})
|
||||
attachSignin(document.getElementById('googleBtn'))
|
||||
})
|
||||
}
|
||||
function attachSignin(element) {
|
||||
auth2.attachClickHandler(element, {},
|
||||
function (googleUser) {
|
||||
let id_token = googleUser.getAuthResponse().id_token;
|
||||
php.userInsertInDB('google', googleUser.getBasicProfile(), id_token, clientID)},
|
||||
(error) => {
|
||||
alert(JSON.stringify(error, undefined, 2))
|
||||
}
|
||||
)
|
||||
}
|
||||
startApp()
|
||||
function signOut() {
|
||||
let auth2 = gapi.auth2.getAuthInstance()
|
||||
auth2.signOut().then(function () {
|
||||
console.log('User signed out.')
|
||||
})
|
||||
}
|
||||
|
||||
/** GitHub */
|
||||
// OAuth.initialize('qFa2sjgoyyIVRhaoOePG2ie1RqY')
|
||||
document.getElementById('github-btn').onclick = () => {
|
||||
// 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")
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/** FaceBook */
|
||||
// [0] = id
|
||||
// [1] = id_token
|
||||
// [2] = clientID
|
||||
// [3] = name
|
||||
// [4] = surname
|
||||
// [5] = img
|
||||
// [6] = email
|
||||
document.getElementById('facebook-btn').onclick = () => {
|
||||
FB.login(function (res) {
|
||||
if(res.status === 'connected') {
|
||||
let id = res.authResponse.userID
|
||||
let id_token = res.authResponse.accessToken
|
||||
|
||||
FB.api('/me?fields=id,first_name,last_name,picture.type(large),email', function (userData) {
|
||||
php.userInsertInDB('facebook', [id, id_token, '',userData.first_name, userData.last_name, userData.picture, userData.email], )
|
||||
})
|
||||
|
||||
}
|
||||
}, { scope: 'public_profile, email'})
|
||||
}
|
||||
window.fbAsyncInit = function() {
|
||||
FB.init({
|
||||
appId : '3448140125279175',
|
||||
autoLogAppEvents : true,
|
||||
cookie : true,
|
||||
status : true,
|
||||
xfbml : true,
|
||||
version : 'v8.0'
|
||||
});
|
||||
};
|
||||
|
|
@ -1,3 +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>
|
||||
<script src="oauth.js"></script>
|
||||
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,25 @@
|
|||
<?php session_start(); ?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
|
||||
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
|
||||
<meta name="google-signin-client_id"
|
||||
content="571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com">
|
||||
<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">
|
||||
<link rel="stylesheet" href="../CSS/responsive.css">
|
||||
|
||||
<script src="https://apis.google.com/js/platform.js" async defer></script>
|
||||
|
||||
<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>
|
||||
<script src="../JS/sign.js" defer></script>
|
||||
<script src="../JS/signIn/external.js" defer></script>
|
||||
|
||||
<script src="https://kit.fontawesome.com/89923351fd.js" crossorigin="anonymous" defer></script>
|
||||
<script src="../JS/icon.js" defer></script>
|
||||
|
|
|
|||
|
|
@ -1,41 +1,43 @@
|
|||
<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>
|
||||
<div class="login-option-div absolute fixed" id="login-option-div">
|
||||
<header>
|
||||
<span class="flex align-center justify-center ">Sign in to</span>
|
||||
</header>
|
||||
<h3> News Website </h3>
|
||||
<div class="external-login-options">
|
||||
<div class="external-container">
|
||||
<div class="container" id="googleBtn">
|
||||
<div class="inner-container google-btn grid pointer">
|
||||
<figure class="icons8-google"></figure>
|
||||
<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">
|
||||
</div>
|
||||
<div class="external-container">
|
||||
<div class="container" id="facebook-btn">
|
||||
<div class="inner-container facebook-btn">
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
<div class="external-container">
|
||||
<div class="container">
|
||||
<div class="inner-container github-btn" id="github-btn">
|
||||
<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>
|
||||
</div>
|
||||
<div class="seperate-line">
|
||||
<div class="line"><hr></div>
|
||||
<span>or</span>
|
||||
</div>
|
||||
<div class="other-login-options">
|
||||
<a href="signup.php" class="blue-link">Create Account</a>
|
||||
<a href="signin.php" class="blue-link">Log In</a>
|
||||
</div>
|
||||
<figure class="x-icon absolute flex align-center justify-center border-radius-50">
|
||||
<i class="fal fa-times pointer" onclick="manageLoginOptions()"></i>
|
||||
</figure>
|
||||
</div>
|
||||
|
|
@ -73,8 +73,8 @@
|
|||
</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">
|
||||
<a href="#" class="login link <?php if(isset($_SESSION['id'])) echo 'disable'?>" id="login-button" onclick="manageLoginOptions()">Log in</a>
|
||||
<i class="profile-img-link relative <?php if(!isset($_SESSION['id'])) echo 'disable'?>">
|
||||
<span>
|
||||
</span>
|
||||
<figure class="img border-radius-50"></figure>
|
||||
|
|
@ -88,8 +88,7 @@
|
|||
<span class="tooltiptext-name">Nik Topler</span><br>
|
||||
<span class="tooltiptext-name">nik.topler@gmail.com</span>
|
||||
</span>
|
||||
</i> -->
|
||||
|
||||
</i>
|
||||
</div>
|
||||
|
||||
<aside class="profile-extra-options grid absolute disable" id="profile-extra-options">
|
||||
|
|
|
|||
|
|
@ -1,25 +1,23 @@
|
|||
<?php session_start(); ?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> -->
|
||||
<meta name="google-signin-client_id"
|
||||
content="571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com">
|
||||
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-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">
|
||||
<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>
|
||||
<script src="JS/sign.js" defer></script>
|
||||
<script src="JS/signIn/external.js" defer></script>
|
||||
|
||||
<script src="https://kit.fontawesome.com/89923351fd.js" crossorigin="anonymous" defer></script>
|
||||
<script src="JS/icon.js" defer></script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
<?php
|
||||
|
||||
class Dbh {
|
||||
private $host = 'localhost';
|
||||
private $dbName = 'NewsWebsite';
|
||||
private $user = 'root';
|
||||
private $pwd = '';
|
||||
private $charset = 'utf8mb4';
|
||||
|
||||
protected function connect() {
|
||||
$dsn = 'mysql:host=' .$this->host. ';dbname=' .$this->dbName. ';charset=' .$this->charset ;
|
||||
$pdo = new PDO($dsn, $this->user, $this->pwd);
|
||||
$pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
|
||||
return $pdo;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<?php include_once 'db.inc.php';
|
||||
|
||||
class Login extends Dbh {
|
||||
|
||||
public function google($userInfo) {
|
||||
require_once '../vendor/autoload.php';
|
||||
$client = new Google_Client(['client_id' => $userInfo[2]]);
|
||||
$payload = $client->verifyIdToken($userInfo[1]);
|
||||
if (!$payload) {
|
||||
echo 'error';
|
||||
return;
|
||||
}
|
||||
|
||||
$userExist = $this->checkIfUserExists('google', $userInfo);
|
||||
if($userExist == 'empty') $this->insert('google', $userInfo);
|
||||
else if($userExist == 'ID') $this->updateID('googleID', $userInfo);
|
||||
$this->setSessionVariables($userInfo[6]);
|
||||
echo 'success';
|
||||
}
|
||||
public function facebook($userInfo) {
|
||||
$userExist = $this->checkIfUserExists('facebook', $userInfo);
|
||||
if($userExist == 'empty') $this->insert('facebook', $userInfo);
|
||||
else if($userExist == 'ID') $this->updateID('facebookID', $userInfo);
|
||||
$this->setSessionVariables($userInfo[6]);
|
||||
echo 'success';
|
||||
}
|
||||
|
||||
public function checkIfUserExists($type, $userInfo) {
|
||||
|
||||
$sql = 'SELECT * FROM users WHERE email = ?';
|
||||
$stmt = $this->connect()->prepare($sql);
|
||||
$stmt->execute([$userInfo[6]]);
|
||||
$row = $stmt->fetch();
|
||||
|
||||
if($type == 'google') $dbName = 'googleID';
|
||||
else if($type == 'facebook') $dbName = 'facebookID';
|
||||
|
||||
if(!$row) return 'empty';
|
||||
else if(password_verify($userInfo[0], $row[$dbName])) return 'full';
|
||||
else return 'ID';
|
||||
}
|
||||
public function insert($type, $userInfo) {
|
||||
if($type == 'google') {
|
||||
$num = 2;
|
||||
$sql = 'INSERT INTO users(name, surname, email, google_profile_img, googleID) VALUES(?, ?, ?, ?, ?)';
|
||||
$hashGoogleID = password_hash($userInfo[0], PASSWORD_DEFAULT);
|
||||
$array = [$userInfo[3], $userInfo[4], $userInfo[6], $userInfo[5], $hashGoogleID];
|
||||
} else if ($type == 'facebook') {
|
||||
$num = 3;
|
||||
$sql = 'INSERT INTO users(name, surname, email, facebook_profile_img, facebookID) VALUES(?, ?, ?, ?, ?)';
|
||||
$hashFacebookID = password_hash($userInfo[0], PASSWORD_DEFAULT);
|
||||
$array = [$userInfo[3], $userInfo[4], $userInfo[6], $userInfo[5], $hashFacebookID];
|
||||
}
|
||||
$stmt = $this->connect()->prepare($sql);
|
||||
$stmt->execute($array);
|
||||
|
||||
$this->updateProfileChoice($num, $userInfo[6]);
|
||||
}
|
||||
public function updateID($type, $userInfo) {
|
||||
if($this->isIdSet($type, $userInfo) == 1) {
|
||||
$hashID = password_hash($userInfo[0], PASSWORD_DEFAULT);
|
||||
$sql = 'UPDATE users SET '.$type.'= ? WHERE email = ?';
|
||||
$stmt = $this->connect()->prepare($sql);
|
||||
$stmt->execute([$hashID, $userInfo[6]]);
|
||||
}
|
||||
if($type == 'googleID') $var = 'google_profile_img';
|
||||
else if($type == 'facebookID') $var = 'facebook_profile_img';
|
||||
|
||||
$sql = 'UPDATE users SET '.$var.' = ? WHERE email = ?';
|
||||
$stmt = $this->connect()->prepare($sql);
|
||||
$stmt->execute([$userInfo[5], $userInfo[6]]);
|
||||
}
|
||||
public function isIdSet($type, $userInfo) {
|
||||
|
||||
$sql = 'SELECT * FROM users WHERE email = ?';
|
||||
$stmt = $this->connect()->prepare($sql);
|
||||
$stmt->execute([$userInfo[6]]);
|
||||
$row = $stmt->fetch();
|
||||
|
||||
return empty($row[$type]);
|
||||
}
|
||||
public function updateProfileChoice($num, $email) {
|
||||
$sql = 'UPDATE users SET profile_choice = ? WHERE email = ?';
|
||||
$stmt = $this->connect()->prepare($sql);
|
||||
$stmt->execute([$num, $email]);
|
||||
}
|
||||
public function setSessionVariables($email) {
|
||||
session_start();
|
||||
|
||||
$sql = 'SELECT * FROM users WHERE email = ?';
|
||||
$stmt = $this->connect()->prepare($sql);
|
||||
$stmt->execute([$email]);
|
||||
$row = $stmt->fetch();
|
||||
|
||||
$_SESSION['id'] = $row['id'];
|
||||
$_SESSION['name'] = $row['name'];
|
||||
$_SESSION['surname'] = $row['surname'];
|
||||
$_SESSION['email'] = $email;
|
||||
$_SESSION['gender'] = $row['gender'];
|
||||
$_SESSION['password_change'] = $row['password_change'];
|
||||
$_SESSION['profile_img'] = $row['profile_img'];
|
||||
$_SESSION['profile_color'] = $row['profile_color'];
|
||||
$_SESSION['google_profile_img'] = $row['google_profile_img'];
|
||||
$_SESSION['facebook_profile_img'] = $row['facebook_profile_img'];
|
||||
$_SESSION['github_profile_img'] = $row['github_profile_img'];
|
||||
$_SESSION['profile_choice'] = $row['profile_choice'];
|
||||
$_SESSION['googleID'] = $this->checkIfStringNull($row['googleID']);
|
||||
$_SESSION['facebookID'] = $this->checkIfStringNull($row['facebookID']);
|
||||
$_SESSION['githubID'] = $this->checkIfStringNull($row['githubID']);
|
||||
$_SESSION['country'] = $this->getCountryWithID($row['country_id']);
|
||||
}
|
||||
|
||||
public function checkIfStringNull($string) {
|
||||
if($string == null) return 0;
|
||||
else return 1;
|
||||
}
|
||||
public function getCountryWithID($countryID) {
|
||||
$sql = 'SELECT * FROM countries WHERE id = ?';
|
||||
$stmt = $this->connect()->prepare($sql);
|
||||
$stmt->execute([$countryID]);
|
||||
$row = $stmt->fetch();
|
||||
$country = array($row['name'], $row['acronym']);
|
||||
return $country;
|
||||
}
|
||||
}
|
||||
|
||||
$loginObj = new Login();
|
||||
|
||||
if($_SERVER['REQUEST_METHOD'] !== 'POST') return;
|
||||
else if(isset($_POST['google'])) $loginObj->google(json_decode($_POST['google']));
|
||||
else if(isset($_POST['facebook'])) $loginObj->facebook(json_decode($_POST['facebook']));
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<?php
|
||||
session_start();
|
||||
session_unset();
|
||||
session_destroy();
|
||||
|
|
@ -8,4 +8,5 @@ if($_SERVER['REQUEST_METHOD'] !== 'POST') return;
|
|||
if(isset($_POST['images'])) echo $_ENV['IMAGE_API_KEY'];
|
||||
else if(isset($_POST['user'])) echo $_ENV['USER_LOCATION_API_KEY'];
|
||||
else if(isset($_POST['weather'])) echo $_ENV['WEATHER_API_KEY'];
|
||||
else if(isset($_POST['news'])) echo $_ENV['NEWS_API_KEY'];
|
||||
else if(isset($_POST['news'])) echo $_ENV['NEWS_API_KEY'];
|
||||
else if(isset($_POST['google_client_id'])) echo $_ENV['GOOGLE_CLIENT_ID'];
|
||||
|
|
@ -1,12 +1,11 @@
|
|||
<?php session_start(); ?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
|
||||
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
|
||||
<meta name="google-signin-client_id"
|
||||
content="571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com">
|
||||
<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">
|
||||
|
|
@ -18,7 +17,7 @@
|
|||
<script src="JS/diacritics.js" defer></script>
|
||||
<script src="JS/main.js" defer></script>
|
||||
<script src="JS/show.js" defer></script>
|
||||
<script src="JS/sign.js" defer></script>
|
||||
<script src="JS/signIn/external.js" defer></script>
|
||||
|
||||
<script src="https://kit.fontawesome.com/89923351fd.js" crossorigin="anonymous" defer></script>
|
||||
<script src="JS/icon.js" defer></script>
|
||||
|
|
@ -66,7 +65,7 @@
|
|||
<i class="far fa-bookmark"></i>
|
||||
<span>Save</span>
|
||||
</div>
|
||||
<div class="white-button" onclick="followNews(this)">
|
||||
<div class="white-button" onclick="follow(this)">
|
||||
<i class="far fa-star fa-lg"></i>
|
||||
<span>Follow</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-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/responsive.css">
|
||||
<link rel="stylesheet" href="CSS/signup.css">
|
||||
|
||||
<script src="JS/responsive.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>
|
||||
<div class="main-container">
|
||||
|
||||
<div class="logo-container">
|
||||
<h1>Fews</h1>
|
||||
</div>
|
||||
<div class="sign-container">
|
||||
<h1>Sign In</h1>
|
||||
</div>
|
||||
<div class="upper-container">
|
||||
<span onclick="test()">Use Fews account to sign in</span>
|
||||
</div>
|
||||
|
||||
<div class="main-middle-conatiner">
|
||||
<div class="email-container">
|
||||
<div>
|
||||
<input type="text" name="" id="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="password-container">
|
||||
<div>
|
||||
<input type="text" name="" id="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<script>
|
||||
function test() {
|
||||
let email = document.querySelector('.email-container')
|
||||
let password = document.querySelector('.password-container')
|
||||
|
||||
if(!email.classList.contains('active')) {
|
||||
email.classList.add('active')
|
||||
password.classList.add('active')
|
||||
} else {
|
||||
email.classList.remove('active')
|
||||
password.classList.remove('active')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="white-button follow topic" onclick="followCategory()">
|
||||
<div class="white-button follow topic" onclick="follow(this)">
|
||||
<i class="far fa-star fa-lg"></i>
|
||||
<span>Follow</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="white-button follow topic" onclick="followCategory()">
|
||||
<div class="white-button follow topic" onclick="follow(this)">
|
||||
<i class="far fa-star fa-lg"></i>
|
||||
<span>Follow</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="white-button follow topic" onclick="followCategory()">
|
||||
<div class="white-button follow topic" onclick="follow(this)">
|
||||
<i class="far fa-star fa-lg"></i>
|
||||
<span>Follow</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="white-button follow topic" onclick="followCategory()">
|
||||
<div class="white-button follow topic" onclick="follow(this)">
|
||||
<i class="far fa-star fa-lg"></i>
|
||||
<span>Follow</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="white-button follow topic" onclick="followCategory()">
|
||||
<div class="white-button follow topic" onclick="follow(this)">
|
||||
<i class="far fa-star fa-lg"></i>
|
||||
<span>Follow</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="white-button follow topic" onclick="followCategory()">
|
||||
<div class="white-button follow topic" onclick="follow(this)">
|
||||
<i class="far fa-star fa-lg"></i>
|
||||
<span>Follow</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,16 +15,16 @@
|
|||
<i class="fas fa-globe-europe fa-lg"></i>
|
||||
</div>
|
||||
<div class="title">
|
||||
<h2>World</h2>
|
||||
<h2>World</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="white-button follow topic" onclick="followCategory()">
|
||||
<div class="white-button follow topic" onclick="follow(this)">
|
||||
<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>
|
||||
<i class="fas fa-share-alt fa-lg"></i>
|
||||
<span>Share</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue