Updated account
This commit is contained in:
Nik Topler
parent
e8d0ad8ddf
commit
8f9489407d
29 changed files with 2670 additions and 259 deletions
|
|
@ -12,6 +12,7 @@ body{
|
||||||
min-width: 100vw;
|
min-width: 100vw;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
font-family: 'Google Sans',sans-serif;
|
font-family: 'Google Sans',sans-serif;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-div{
|
.select-div{
|
||||||
|
|
|
||||||
860
CSS/account.css
860
CSS/account.css
|
|
@ -1,39 +1,853 @@
|
||||||
body {
|
body {
|
||||||
height: 100vh;
|
height: 100%;
|
||||||
width: 100vh;
|
width: 100%;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: 64px 1fr;
|
grid-template-rows: 64px 1fr;
|
||||||
background-color: var(--bg);
|
background-color: var(--bg);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
main {
|
|
||||||
grid-row: 2/3;
|
.account {
|
||||||
height: 100%;
|
grid-row: 1/2;
|
||||||
background-color: rebeccapurple;
|
min-width: 100%;
|
||||||
|
height: 64px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
border: none;
|
||||||
|
position: fixed;
|
||||||
|
background-color: var(--bg);
|
||||||
|
z-index: 8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account .left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.account .left .container {
|
||||||
|
min-height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
grid-row: 1/2;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
nav .left-side {
|
|
||||||
min-height: 100%;
|
|
||||||
min-width: 5rem;
|
min-width: 5rem;
|
||||||
background-color: yellow;
|
padding: 0 3rem 0 0.8rem;
|
||||||
}
|
}
|
||||||
nav .right-side {
|
.account .left .container .logo a {
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 1.35rem;
|
||||||
|
color: var(--font-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Nav Right */
|
||||||
|
|
||||||
|
.account .right {
|
||||||
|
grid-column: 2/3;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
.account .right .main-container {
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 15px 0 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
padding: 9px 13px;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
.login {
|
||||||
|
background-color: var(--blue-medium);
|
||||||
|
border-radius: 7px;
|
||||||
|
color: var(--bg);
|
||||||
|
}
|
||||||
|
.login:hover { filter: brightness(1.06); }
|
||||||
|
|
||||||
|
.navigation-profile-img { --times: 2.2; }
|
||||||
|
.first-profile-div{
|
||||||
|
width: 2.8rem;
|
||||||
|
height: 2.8rem;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
.first-profile-div:hover{ background-color: var(--hover-light); }
|
||||||
|
.first-profile-div-active{ background-color: var(--hover-medium); }
|
||||||
|
.tooltiptext-name { color: var(--hover-dark); }
|
||||||
|
|
||||||
|
/** Profile Options */
|
||||||
|
|
||||||
|
.profile-extra-options {
|
||||||
|
right: 0.75rem;
|
||||||
|
top: 93%;
|
||||||
|
min-width: 350px;
|
||||||
|
min-height: 380px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background-color: var(--bg);
|
||||||
|
box-shadow: 1px 1px 2px 0px var(--border-medium),
|
||||||
|
1px 1px 1px 0px var(--border-medium) inset;
|
||||||
|
}
|
||||||
|
.profile-extra-options .top-div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.top-div .img-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: aqua;
|
padding-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
img.imga {
|
||||||
|
width: 100%;
|
||||||
aside {
|
height: 100%;
|
||||||
|
border-radius:50%;
|
||||||
|
}
|
||||||
|
.top-div .img-middle {
|
||||||
|
position: relative;
|
||||||
|
width: fit-content;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.nav-right-side .outter-container {
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.nav-right-side .outter-container:hover { background-color: var(--hover-light); }
|
||||||
|
.nav-right-side .outter-container.active { background-color: var(--hover-medium); }
|
||||||
|
.img {
|
||||||
|
position: relative;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: var(--num);
|
||||||
|
height: var(--num);
|
||||||
|
}
|
||||||
|
.img-settings {
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.img.xxl {
|
||||||
|
--num: 7.5rem;
|
||||||
|
--letter: 3.25rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.img.big {
|
||||||
|
--num: 5.5rem;
|
||||||
|
--letter: 2.75rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.img.medium {
|
||||||
|
--num: 3.25rem;
|
||||||
|
--letter: 2rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.img.small {
|
||||||
|
--num: 2.25rem;
|
||||||
|
--letter: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.img .letter {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background-color: green;
|
left: calc(50% - 1.5rem);
|
||||||
|
right: calc(50% - 1.5rem);
|
||||||
|
top: calc(50% - 1.5rem);
|
||||||
|
bottom: calc(50% - 1.5rem);
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.img .letter span{
|
||||||
|
font-size: var(--letter);
|
||||||
|
color: var(--bg);
|
||||||
|
}
|
||||||
|
.img:hover { filter: brightness(1.1); }
|
||||||
|
|
||||||
|
.camera-container {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -3px;
|
||||||
|
right: 0;
|
||||||
|
background-color: yellow;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
padding: 5px;
|
||||||
|
border: 1px solid var(--border-light);
|
||||||
|
background-color: var(--bg);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.camera-container:hover i{ color: var(--google-blue); }
|
||||||
|
|
||||||
|
.top-div .personal-info {
|
||||||
|
padding: 12px 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-div .full-name,
|
||||||
|
.top-div .email,
|
||||||
|
.top-div .manage-button {
|
||||||
|
width: 100%;
|
||||||
|
padding: 3px 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.top-div .full-name { font-size: 1.25rem; }
|
||||||
|
.top-div .email {
|
||||||
|
color: var(--font-medium);
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-div .manage-button .container {
|
||||||
|
border-radius: 4rem;
|
||||||
|
border: 1px solid var(--border-light);
|
||||||
|
width: 80%;
|
||||||
|
padding: 8px 5px;
|
||||||
|
margin-top: 1.25rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all ease-in-out .15;
|
||||||
|
}
|
||||||
|
.top-div .manage-button .container:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: var(--very-light-grey);
|
||||||
|
}
|
||||||
|
.top-div .manage-button .container span { color: var(--font-dark); }
|
||||||
|
|
||||||
|
.sign-out {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.sign-out .button-container {
|
||||||
|
border: 1px solid var(--border-light);
|
||||||
|
border-radius: 3px;
|
||||||
|
min-height: 1.5rem;
|
||||||
|
width: 10.75rem;
|
||||||
|
margin: auto;
|
||||||
|
padding: 5px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.sign-out .button-container:hover { background-color: var(--very-light-grey); }
|
||||||
|
.sign-out .button-container span { color: var(--font-dark); }
|
||||||
|
|
||||||
|
.middle-div {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
border-top: 1px solid var(--hover-medium);
|
||||||
|
border-bottom: 1px solid var(--hover-medium);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.middle-div .container {
|
||||||
|
padding: 5px 0;
|
||||||
|
min-height: 2.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.middle-div .container:hover { background-color: var(--hover-light); }
|
||||||
|
.middle-div .google,
|
||||||
|
.middle-div .facebook,
|
||||||
|
.middle-div .github {
|
||||||
|
padding: 0 20px;
|
||||||
|
width: calc(100% - 20px);
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 50px 1fr;
|
||||||
|
}
|
||||||
|
.middle-div .icon {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.google .icon { color: var(--google-blue); }
|
||||||
|
.facebook .icon { color: #4267B2; }
|
||||||
|
.github .icon { color: var(--font-very-dark); }
|
||||||
|
.middle-div span {
|
||||||
|
text-align: left;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--font-medium);
|
||||||
|
}
|
||||||
|
.profile-extra-options .footer {
|
||||||
|
min-height: 1.5rem;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.profile-extra-options .footer .container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.profile-extra-options .footer .container .inner-container {
|
||||||
|
min-width: 4rem;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.profile-extra-options .footer .container .inner-container span {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
color: var(--font-light);
|
||||||
|
padding: 2px 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.side-bar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 260px;
|
||||||
|
}
|
||||||
|
.side-bar {
|
||||||
|
left: 0;
|
||||||
|
top: 65px;
|
||||||
|
height: calc(100% - 64px);
|
||||||
|
width: 17.5rem;
|
||||||
|
position: fixed;
|
||||||
|
overflow: auto;
|
||||||
|
transition: ease-in-out all .3s;
|
||||||
|
}
|
||||||
|
.side-bar-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-bar-content {
|
||||||
|
display: grid;
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
transition: all ease-in-out 0.3s;
|
||||||
|
}
|
||||||
|
.side-bar-content .sidebar-category {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 46px;
|
||||||
|
width: 16.2rem;
|
||||||
|
cursor: pointer;
|
||||||
|
flex-grow: 1;
|
||||||
|
border-top-right-radius: 25px;
|
||||||
|
border-bottom-right-radius: 25px;
|
||||||
|
}
|
||||||
|
.side-bar-content div.icon {
|
||||||
|
margin: 0 1rem 0 1.5rem;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.side-bar-content a {
|
||||||
|
color: var(--font-dark);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
.side-bar-content div.other .text { margin: 0 0.7rem 0 1.5rem; }
|
||||||
|
.sidebar-category.country {
|
||||||
|
display: grid;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--font-dark);
|
||||||
|
}
|
||||||
|
.sidebar-country-container > * { padding: 0 0 0 1.5rem; }
|
||||||
|
.side-bar footer div a { color: var(--font-medium); }
|
||||||
|
.side-bar footer .text { padding: 1rem 0.5rem; }
|
||||||
|
.side-bar .about { margin-left: 1.5rem; }
|
||||||
|
.sidebar-category:hover div a,
|
||||||
|
.sidebar-category:hover div i,
|
||||||
|
.sidebar-category:hover span,
|
||||||
|
.sidebar-category:hover strong {
|
||||||
|
color: var(--blue-light);
|
||||||
|
}
|
||||||
|
.sidebar-category.active { background-color: var(--side-bar-active) !important; }
|
||||||
|
.sidebar-category.active div a,
|
||||||
|
.sidebar-category.active div i {
|
||||||
|
color: var(--blue-light) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Side bar responsive */
|
||||||
|
.side-bar-responsive {
|
||||||
|
width: 100%;
|
||||||
|
top: 64px;
|
||||||
|
position: fixed;
|
||||||
|
height: 3rem;
|
||||||
|
display: flex;
|
||||||
|
background-color: var(--bg);
|
||||||
|
border-bottom: 1px solid var(--border-dark);
|
||||||
|
z-index: 7;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
min-width: 6rem;
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
li div {
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-bar-responsive .slide {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
overflow-x: scroll;
|
||||||
|
overflow-y: hidden;
|
||||||
|
scroll-snap-type: x proximity;
|
||||||
|
}
|
||||||
|
.res-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
li div div.active {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -10px;
|
||||||
|
width: 80%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
border: solid 1px var(--blue-dark);
|
||||||
|
background-color: var(--blue-dark);
|
||||||
|
border-radius: 18%;
|
||||||
|
}
|
||||||
|
li div span {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
li div span.active {
|
||||||
|
color: var(--blue-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Main */
|
||||||
|
main {
|
||||||
|
grid-row: 2/3;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.main-content {
|
||||||
|
min-width: 400px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.main-content .container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 400px;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
.main-content .container .header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
.main-content .container .header .img-container {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
.header .img-container figure {
|
||||||
|
background-color: rebeccapurple;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
top: 0;
|
||||||
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.527) 29%, transparent 29%, transparent 100%);
|
||||||
|
border-radius: 50%;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.header .img-container figure div {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.header .img-container:hover figure {
|
||||||
|
cursor: pointer;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
.header .img-container:hover figure i{
|
||||||
|
color: var(--bg);
|
||||||
|
}
|
||||||
|
.header .img:hover { filter: none; }
|
||||||
|
.header .h1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
.header .h1 h1 {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
font-weight: 300;
|
||||||
|
color: var(--font-very-dark);
|
||||||
|
}
|
||||||
|
.header .text {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.header .text p { color: var(--font-medium); }
|
||||||
|
|
||||||
|
.section-main-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.section-main-container:first-of-type {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.section-container {
|
||||||
|
border: 1px solid var(--border-medium);
|
||||||
|
background-color: var(--bg);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.section-container .content {
|
||||||
|
display: flex;
|
||||||
|
min-height: 10rem;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 0.75rem;
|
||||||
|
}
|
||||||
|
.section-container h1 {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
.section-container p {
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--font-dark);
|
||||||
|
}
|
||||||
|
.section-container .button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 3.25rem;
|
||||||
|
border-top: 1px solid var(--border-medium);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all ease-in-out .12s;
|
||||||
|
}
|
||||||
|
.section-container .button a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--google-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-container .button:hover { background-color: var(--hover-light); }
|
||||||
|
.section-main-container .section-container:first-of-type {
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.external-container {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
min-width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Personal */
|
||||||
|
.container.personal .header h1 { font-weight: 500; }
|
||||||
|
section.personal {
|
||||||
|
height: 100%;
|
||||||
|
border: 1px solid var(--border-medium);
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
section.personal header {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
section.personal header h1 {
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
section.personal header p { color: var(--font-medium); }
|
||||||
|
section.personal .info,
|
||||||
|
article .info {
|
||||||
|
padding: 20px 15px;
|
||||||
|
display: grid;
|
||||||
|
position: relative;
|
||||||
|
grid-template-columns: 10rem 1fr 2rem;
|
||||||
|
}
|
||||||
|
.container.personal article {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
article .info { border-radius: 8px; }
|
||||||
|
.info:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: var(--hover-light);
|
||||||
|
}
|
||||||
|
.info .line {
|
||||||
|
position: absolute;
|
||||||
|
width: 90%;
|
||||||
|
top: 0px;
|
||||||
|
left: 0;
|
||||||
|
left: 50%;
|
||||||
|
-webkit-transform: translateX(-50%);
|
||||||
|
transform: translateX(-50%);
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid var(--border-medium);
|
||||||
|
}
|
||||||
|
.info.psw {
|
||||||
|
border-bottom-left-radius: 12px;
|
||||||
|
border-bottom-right-radius: 12px;
|
||||||
|
}
|
||||||
|
.info.photo .title,
|
||||||
|
.info.photo .text,
|
||||||
|
.info.psw .title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.info.psw div span {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.info.photo { grid-template-columns: 10rem 1fr 6rem !important; }
|
||||||
|
.info .text {
|
||||||
|
color: var(--font-dark);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
.info .text.psw {
|
||||||
|
min-height: 3rem;
|
||||||
|
}
|
||||||
|
.info .text.psw div {
|
||||||
|
padding: 5px 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
.info .title h3 {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.info .image {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.info .arrow {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--font-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Admin */
|
||||||
|
.admin-panel {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.admin-panel section {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr 1fr 60px;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
.admin-panel section div {
|
||||||
|
padding: 20px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.admin-panel i {
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Change */
|
||||||
|
.input-container {
|
||||||
|
height: auto;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-container input {
|
||||||
|
height: 48px;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid #dedfe0;
|
||||||
|
padding: 0.75rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
outline-width: 0;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #090a0acb;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.input-container .label-container {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
height: 1.1rem;
|
||||||
|
top: calc(50% - 0.55rem);
|
||||||
|
bottom: calc(50% - 0.55rem);
|
||||||
|
left: 0.4rem;
|
||||||
|
color: var(--font-medium);
|
||||||
|
transition: all ease-in-out .16s;
|
||||||
|
background-color: var(--bg);
|
||||||
|
padding: 0 5px;
|
||||||
|
cursor: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content.change .button-container {
|
||||||
|
display: flex;
|
||||||
|
min-width: 100%;
|
||||||
|
padding: 10px 0;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
.main-content.change .button-container .inner-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.main-content.change .button-container .inner-container:first-of-type {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
.blue-button {
|
||||||
|
padding: 8px 18px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: var(--blue-medium);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
color: var(--bg);
|
||||||
|
transition: all ease-in-out .15;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.name-container,.surname-container { margin-bottom: 1rem; }
|
||||||
|
.main-content.change .button-container a {
|
||||||
|
color: var(--google-blue);
|
||||||
|
}
|
||||||
|
.google-blue { color: var(--google-blue) !important; }
|
||||||
|
.input-container input.active { border: 1px solid var(--google-blue); }
|
||||||
|
.input-container .label-container.active {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
top: -0.4rem;
|
||||||
|
}
|
||||||
|
/* Error handeling */
|
||||||
|
.error .red {
|
||||||
|
color: var(--red-medium);
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 5px 0;
|
||||||
|
}
|
||||||
|
.error .red i { font-size: 0.9rem; }
|
||||||
|
.error-red { color: var(--red-medium) !important; }
|
||||||
|
.error-red-border { border: 1px solid var(--red-medium) !important; }
|
||||||
|
|
||||||
|
.radio-button-container{
|
||||||
|
height: 2.5rem;
|
||||||
|
grid-template-columns: 2rem 1fr;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.radio-button-container p{
|
||||||
|
width: fit-content;
|
||||||
|
margin-left: 8px;
|
||||||
|
color: var(--font-very-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
div.country-container {
|
||||||
|
position: relative;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
div.countries {
|
||||||
|
min-height: 2rem;
|
||||||
|
max-height: 400px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
div.countries div {
|
||||||
|
padding: 0.75rem 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
div.countries div p { color: var(--font-dark); }
|
||||||
|
div.countries div:hover { background-color: var(--hover-light); }
|
||||||
|
div.countries div:active { background-color: var(--hover-medium); }
|
||||||
|
.country-container .active { background-color: var(--hover-medium); }
|
||||||
|
|
||||||
|
.psw-container,
|
||||||
|
.psw-repeat-container,
|
||||||
|
.psw-old-container {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.psw-container .eye-icon-container,
|
||||||
|
.psw-repeat-container .eye-icon-container,
|
||||||
|
.psw-old-container .eye-icon-container {
|
||||||
|
height: 2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
top: calc(50% - 1rem);
|
||||||
|
right: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.eye-icon-container i { color: var(--font-medium); }
|
||||||
|
|
||||||
|
@media screen and (max-width: 1486px) {
|
||||||
|
.main-content {
|
||||||
|
margin-left: 280px;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@media screen and (max-width: 1060px) {
|
||||||
|
.section-main-container { flex-direction: column; }
|
||||||
|
.section-main-container .section-container:first-of-type {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 780px) {
|
||||||
|
.account .right .main-container { padding: 0 15px 0 0 ; }
|
||||||
|
.main-content {
|
||||||
|
margin-left: 0;
|
||||||
|
margin-top: 5rem;
|
||||||
|
}
|
||||||
|
section.personal .info {
|
||||||
|
grid-template-columns: 5rem 1fr 2rem;
|
||||||
|
}
|
||||||
|
.info.photo { grid-template-columns: 5rem 1fr 4rem !important; }
|
||||||
|
.text.psw .time { display: none; }
|
||||||
|
.info .text.psw { min-height: auto; }
|
||||||
|
|
||||||
|
.main-content.change {
|
||||||
|
min-width: 200px ;
|
||||||
|
}
|
||||||
|
.main-content.change { margin: 0; }
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 420px) {
|
||||||
|
.account { grid-template-columns: 1fr auto; }
|
||||||
|
|
||||||
|
.main-content.personal .container {
|
||||||
|
width: 320px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 340px) {
|
||||||
|
.main-content.personal .container {
|
||||||
|
width: calc(100vw - 2rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 456px) {
|
||||||
|
|
||||||
|
/* Profile options */
|
||||||
|
.profile-extra-options { min-width: 300px; }
|
||||||
|
.tooltiptext { display: none; }
|
||||||
|
}
|
||||||
|
|
|
||||||
133
CSS/profileImg.css
Normal file
133
CSS/profileImg.css
Normal file
|
|
@ -0,0 +1,133 @@
|
||||||
|
.main-img-container {
|
||||||
|
visibility: hidden;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%,-50%) scale(0.9);
|
||||||
|
/* transition: all ease-in-out .1s; */
|
||||||
|
border: 1px solid var(--hover-medium);
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: var(--bg);
|
||||||
|
padding: 20px;
|
||||||
|
z-index: -10;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
.main-img-container.active {
|
||||||
|
z-index: 1000;
|
||||||
|
visibility: visible;
|
||||||
|
transform: translate(-50%,-50%) scale(1);
|
||||||
|
min-width: 340px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.main-img-container .container {
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.main-img-container .container .img { margin-right: 1rem; }
|
||||||
|
.color-img { margin-top: 0; }
|
||||||
|
.color-img.active { margin-top: 1rem; }
|
||||||
|
|
||||||
|
.main-img-container section {
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
.main-img-container.active section:nth-of-type(2) { margin-top: 0; }
|
||||||
|
.main-img-container section .img-text{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
.main-img-container section .img-text p { color: var(--font-medium); }
|
||||||
|
.main-img-container .img {
|
||||||
|
transition: all ease-in-out .12;
|
||||||
|
}
|
||||||
|
.main-img-container .img:hover { filter: brightness(0.97); }
|
||||||
|
.img.medium.add {
|
||||||
|
background-color: var(--hover-light);
|
||||||
|
}
|
||||||
|
.img.medium.add div {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img.medium.add div i {
|
||||||
|
font-size: 1.7rem;
|
||||||
|
color: var(--font-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-img {
|
||||||
|
background-color: var(--hover-medium);
|
||||||
|
border-radius: 4px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all ease-in-out .12s;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
.select-img .icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.select-img .icon i {
|
||||||
|
font-size: 3rem;
|
||||||
|
color: var(--font-medium);
|
||||||
|
}
|
||||||
|
.select-img:hover { background-color: var(--hover-dark); }
|
||||||
|
|
||||||
|
.main-img-container .x {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
.main-img-container .x div {
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.main-img-container .x div:hover { background-color: var(--hover-light); }
|
||||||
|
.main-img-container .x div:active { background-color: var(--hover-medium); }
|
||||||
|
.main-img-container .x div i {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--font-dark);
|
||||||
|
}
|
||||||
|
.insert-photo-container {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
height: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: all ease-in-out .2s;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.insert-photo-container.active {
|
||||||
|
visibility: visible;
|
||||||
|
height: 14rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-insert-photo-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.insert-photo-container.active .main-insert-photo-container { visibility: visible; }
|
||||||
|
.insert-photo-container.active .main-insert-photo-container .select-img { height: 10rem; }
|
||||||
|
.insert-photo-container + section { margin-top: 0; }
|
||||||
|
.main-insert-photo-container .footer {
|
||||||
|
height: 3rem;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
@ -49,8 +49,6 @@
|
||||||
.double.psw .eye-icon-container { display: none; }
|
.double.psw .eye-icon-container { display: none; }
|
||||||
.double.psw .psw-repeat-container { margin: 0; }
|
.double.psw .psw-repeat-container { margin: 0; }
|
||||||
.sign-container h1 { font-size: 1.5rem; }
|
.sign-container h1 { font-size: 1.5rem; }
|
||||||
|
|
||||||
/* Profile options */
|
|
||||||
.profile-extra-options { min-width: 300px; }
|
.profile-extra-options { min-width: 300px; }
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -60,10 +58,11 @@
|
||||||
|
|
||||||
|
|
||||||
/* Sign In */
|
/* Sign In */
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (max-width: 601px) {
|
||||||
.main-container {
|
.main-container {
|
||||||
min-width: calc(100% - 40px);
|
min-width: calc(100% - 40px);
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
/* border: none; */
|
|
||||||
}
|
}
|
||||||
|
.tooltiptext { display: none; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
363
JS/account.js
Normal file
363
JS/account.js
Normal file
|
|
@ -0,0 +1,363 @@
|
||||||
|
const slideAccount = document.querySelector('.side-bar-responsive .slide')
|
||||||
|
const sideBarResAccount = document.querySelector('.side-bar-responsive')
|
||||||
|
const sideBarAccount = document.getElementById('side-bar-account')
|
||||||
|
|
||||||
|
window.onload = () => {
|
||||||
|
if(window.location.pathname.includes('changeName')) change.name()
|
||||||
|
else if(window.location.pathname.includes('changeCountry')) change.country()
|
||||||
|
else if(window.location.pathname.includes('changePassword')) change.password()
|
||||||
|
if(!window.location.pathname.includes('change')) responsive()
|
||||||
|
}
|
||||||
|
window.onresize = () => {
|
||||||
|
if(!window.location.pathname.includes('change')) responsive()
|
||||||
|
}
|
||||||
|
|
||||||
|
function responsive() {
|
||||||
|
if(window.innerWidth < 780) {
|
||||||
|
sideBarResAccount.classList.remove('disable')
|
||||||
|
sideBarAccount.classList.add('disable')
|
||||||
|
slideAccount.style.width = window.innerWidth + 'px'
|
||||||
|
if(window.innerWidth > 430) {
|
||||||
|
sideBarResAccount.style.alignItems = 'center'
|
||||||
|
sideBarResAccount.style.justifyContent = 'center'
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
sideBarAccount.classList.remove('disable')
|
||||||
|
sideBarResAccount.classList.add('disable')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async function logout(string) {
|
||||||
|
await fetch(`../include/logout.inc.php`)
|
||||||
|
openLinks(filePath.headlines + string);
|
||||||
|
}
|
||||||
|
|
||||||
|
function openLinks(string) { window.location.replace(websiteURL + string) }
|
||||||
|
|
||||||
|
const icon = `<i class="fas fa-exclamation-circle fa-lg"></i>`
|
||||||
|
const name = document.querySelector('.name-container')
|
||||||
|
const surname = document.querySelector('.surname-container')
|
||||||
|
const nameInput = document.getElementById('name-input')
|
||||||
|
const surnameInput = document.getElementById('surname-input')
|
||||||
|
const nameError = document.querySelector('.error.name')
|
||||||
|
const surnameError = document.querySelector('.error.surname')
|
||||||
|
const genderError = document.querySelector('.error.gender')
|
||||||
|
const countryError = document.querySelector('.error.country')
|
||||||
|
|
||||||
|
let pswOld = document.querySelector('.psw-old-container')
|
||||||
|
let pswOldInput = document.getElementById('psw-old-input')
|
||||||
|
let psw = document.querySelector('.psw-container')
|
||||||
|
let pswRepeat = document.querySelector('.psw-repeat-container')
|
||||||
|
let pswInput = document.getElementById('psw-input')
|
||||||
|
let pswRepeatInput = document.getElementById('psw-repeat-input')
|
||||||
|
let pswError = document.querySelector('.error.psw')
|
||||||
|
|
||||||
|
const change = {
|
||||||
|
name : () => {
|
||||||
|
nameInput.onfocus = () => {
|
||||||
|
name.querySelector('.label-container').classList.add('active')
|
||||||
|
name.querySelector('.label-container').classList.add('google-blue')
|
||||||
|
nameInput.classList.add('active')
|
||||||
|
}
|
||||||
|
nameInput.onblur = () => {
|
||||||
|
if(nameInput.value.length === 0) {
|
||||||
|
name.querySelector('.label-container').classList.remove('active')
|
||||||
|
name.querySelector('.label-container').classList.remove('google-blue')
|
||||||
|
nameInput.classList.remove('active')
|
||||||
|
} else {
|
||||||
|
name.querySelector('.label-container').classList.remove('google-blue')
|
||||||
|
nameInput.classList.remove('active')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
surnameInput.onfocus = () => {
|
||||||
|
surname.querySelector('.label-container').classList.add('active')
|
||||||
|
surname.querySelector('.label-container').classList.add('google-blue')
|
||||||
|
surnameInput.classList.add('active')
|
||||||
|
}
|
||||||
|
surnameInput.onblur = () => {
|
||||||
|
if(surnameInput.value.length === 0) {
|
||||||
|
surname.querySelector('.label-container').classList.remove('active')
|
||||||
|
surname.querySelector('.label-container').classList.remove('google-blue')
|
||||||
|
surnameInput.classList.remove('active')
|
||||||
|
} else {
|
||||||
|
surname.querySelector('.label-container').classList.remove('google-blue')
|
||||||
|
surnameInput.classList.remove('active')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
password : async () => {
|
||||||
|
|
||||||
|
await change.generateInpout()
|
||||||
|
|
||||||
|
pswOld = document.querySelector('.psw-old-container')
|
||||||
|
pswOldInput = document.getElementById('psw-old-input')
|
||||||
|
psw = document.querySelector('.psw-container')
|
||||||
|
pswRepeat = document.querySelector('.psw-repeat-container')
|
||||||
|
pswInput = document.getElementById('psw-input')
|
||||||
|
pswRepeatInput = document.getElementById('psw-repeat-input')
|
||||||
|
pswError = document.querySelector('.error.psw')
|
||||||
|
|
||||||
|
pswInput.onfocus = () => {
|
||||||
|
psw.querySelector('.label-container').classList.add('active')
|
||||||
|
psw.querySelector('.label-container').classList.add('google-blue')
|
||||||
|
pswInput.classList.add('active')
|
||||||
|
}
|
||||||
|
pswInput.onblur = () => {
|
||||||
|
if(pswInput.value.length === 0) {
|
||||||
|
psw.querySelector('.label-container').classList.remove('active')
|
||||||
|
psw.querySelector('.label-container').classList.remove('google-blue')
|
||||||
|
pswInput.classList.remove('active')
|
||||||
|
} else {
|
||||||
|
psw.querySelector('.label-container').classList.remove('google-blue')
|
||||||
|
pswInput.classList.remove('active')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
pswRepeatInput.onfocus = () => {
|
||||||
|
pswRepeat.querySelector('.label-container').classList.add('active')
|
||||||
|
pswRepeat.querySelector('.label-container').classList.add('google-blue')
|
||||||
|
pswRepeatInput.classList.add('active')
|
||||||
|
}
|
||||||
|
pswRepeatInput.onblur = () => {
|
||||||
|
if(pswRepeatInput.value.length === 0) {
|
||||||
|
pswRepeat.querySelector('.label-container').classList.remove('active')
|
||||||
|
pswRepeat.querySelector('.label-container').classList.remove('google-blue')
|
||||||
|
pswRepeatInput.classList.remove('active')
|
||||||
|
} else {
|
||||||
|
pswRepeat.querySelector('.label-container').classList.remove('google-blue')
|
||||||
|
pswRepeatInput.classList.remove('active')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(pswOld !== null) {
|
||||||
|
pswOldInput.onfocus = () => {
|
||||||
|
pswOld.querySelector('.label-container').classList.add('active')
|
||||||
|
pswOld.querySelector('.label-container').classList.add('google-blue')
|
||||||
|
pswOldInput.classList.add('active')
|
||||||
|
}
|
||||||
|
pswOldInput.onblur = () => {
|
||||||
|
if(pswOldInput.value.length === 0) {
|
||||||
|
pswOld.querySelector('.label-container').classList.remove('active')
|
||||||
|
pswOld.querySelector('.label-container').classList.remove('google-blue')
|
||||||
|
pswOldInput.classList.remove('active')
|
||||||
|
} else {
|
||||||
|
pswOld.querySelector('.label-container').classList.remove('google-blue')
|
||||||
|
pswOldInput.classList.remove('active')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
generateInpout : async() => {
|
||||||
|
const res = await fetch('../include/check.inc.php', {
|
||||||
|
method: "POST",
|
||||||
|
body: createFormData('pswSet', '')
|
||||||
|
})
|
||||||
|
const data = await res.text()
|
||||||
|
document.querySelector('article').innerHTML = data
|
||||||
|
},
|
||||||
|
country : () => {
|
||||||
|
for(let i = 0; i < countries.length; i++) {
|
||||||
|
let div = document.createElement('div')
|
||||||
|
div.onclick = () => { select(div) }
|
||||||
|
if(getAcronymCountry(window.location.search.match(/[\?|\&]+[c]+[o]+[u]+[=].{2}/g)[0].slice(5, 7)) === countries[i]) div.classList.add('active')
|
||||||
|
let p = document.createElement('p')
|
||||||
|
p.innerHTML = countries[i]
|
||||||
|
div.appendChild(p)
|
||||||
|
document.querySelector('.countries').appendChild(div)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function getAcronymCountry(acronym) {
|
||||||
|
for(let i = 0; i < countries.length; i++)
|
||||||
|
if(countryAcronyms[i] === acronym)
|
||||||
|
return countries[i]
|
||||||
|
}
|
||||||
|
|
||||||
|
const check = {
|
||||||
|
name : async() => {
|
||||||
|
if(error.name(nameInput.value.trim(), surnameInput.value.trim()) === true) return errorHandeling.name()
|
||||||
|
array = JSON.stringify([nameInput.value.trim(), surnameInput.value.trim()])
|
||||||
|
const res = await fetch('../include/update.inc.php', {
|
||||||
|
method: "POST",
|
||||||
|
body: createFormData('name', array)
|
||||||
|
})
|
||||||
|
const data = await res.text()
|
||||||
|
if(data === 'success') openLinks('account/personal.php')
|
||||||
|
},
|
||||||
|
gender : async() => {
|
||||||
|
if(!document.querySelector('.gender-container .active')) {
|
||||||
|
genderError.classList.remove('disable')
|
||||||
|
return errorHandeling.text(genderError.firstElementChild, 'You need to pick one')
|
||||||
|
}
|
||||||
|
array = JSON.stringify([document.querySelector('.gender-container .active').parentElement.lastElementChild.innerHTML.trim()])
|
||||||
|
const res = await fetch('../include/update.inc.php', {
|
||||||
|
method: "POST",
|
||||||
|
body: createFormData('gender', array)
|
||||||
|
})
|
||||||
|
const data = await res.text()
|
||||||
|
if(data === 'success') openLinks('account/personal.php')
|
||||||
|
},
|
||||||
|
country : async() => {
|
||||||
|
if(!document.querySelector('.country-container .active')) {
|
||||||
|
countryError.classList.remove('disable')
|
||||||
|
return errorHandeling.text(countryError.firstElementChild, 'Select a country')
|
||||||
|
}
|
||||||
|
array = JSON.stringify([document.querySelector('.country-container .active').firstElementChild.innerHTML])
|
||||||
|
const res = await fetch('../include/update.inc.php', {
|
||||||
|
method: "POST",
|
||||||
|
body: createFormData('country', array)
|
||||||
|
})
|
||||||
|
const data = await res.text()
|
||||||
|
if(data === 'success') openLinks('account/personal.php')
|
||||||
|
|
||||||
|
},
|
||||||
|
psw : async() => {
|
||||||
|
let string = 'newPsw'
|
||||||
|
if(pswOldInput !== null) {
|
||||||
|
if(error.passwordOld(pswInput.value.trim(), pswRepeatInput.value.trim(),pswOldInput.value.trim()) === true) return errorHandeling.password()
|
||||||
|
string = 'oldPsw'
|
||||||
|
arrayInput = [pswOldInput.value.trim(), pswInput.value.trim(), pswRepeatInput.value.trim()]
|
||||||
|
} else {
|
||||||
|
if(error.password(pswInput.value.trim(), pswRepeatInput.value.trim()) === true) return
|
||||||
|
arrayInput = [pswInput.value.trim(), pswRepeatInput.value.trim()]
|
||||||
|
}
|
||||||
|
array = JSON.stringify(arrayInput)
|
||||||
|
const res = await fetch('../include/update.inc.php', {
|
||||||
|
method: "POST",
|
||||||
|
body: createFormData(string, array)
|
||||||
|
})
|
||||||
|
const data = await res.text()
|
||||||
|
console.log(data)
|
||||||
|
if(data === 'success') openLinks('account/personal.php')
|
||||||
|
else error.passwordOldAfter()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const error = {
|
||||||
|
reset : () => {
|
||||||
|
pswError.classList.add('disable')
|
||||||
|
pswError.firstElementChild.innerHTML = ""
|
||||||
|
pswInput.classList.remove('error-red-border')
|
||||||
|
psw.querySelector('label').classList.remove('error-red')
|
||||||
|
pswRepeatInput.classList.remove('error-red-border')
|
||||||
|
pswRepeat.querySelector('label').classList.remove('error-red')
|
||||||
|
pswOldInput.classList.remove('error-red-border')
|
||||||
|
pswOld.querySelector('label').classList.remove('error-red')
|
||||||
|
},
|
||||||
|
name : (FirstName, LastName) => {
|
||||||
|
if (FirstName.length === 0 || LastName.length === 0) {
|
||||||
|
nameError.classList.remove('disable')
|
||||||
|
surnameError.classList.remove('disable')
|
||||||
|
if (FirstName.length === 0 && LastName.length === 0) {
|
||||||
|
errorHandeling.name()
|
||||||
|
errorHandeling.surname()
|
||||||
|
errorHandeling.text(nameError.firstElementChild, 'Name must not be empty')
|
||||||
|
errorHandeling.text(surnameError.firstElementChild, 'Surname must not be empty')
|
||||||
|
} else if (FirstName.length !== 0 && LastName.length === 0) {
|
||||||
|
errorHandeling.surname()
|
||||||
|
errorHandeling.text(surnameError.firstElementChild, 'Surname must not be empty')
|
||||||
|
} else if (FirstName.length === 0 && LastName.length !== 0) {
|
||||||
|
errorHandeling.name()
|
||||||
|
errorHandeling.text(nameError.firstElementChild, 'Name must not be empty')
|
||||||
|
errorHandeling.text(surnameError.firstElementChild, 'Surname must not be empty')
|
||||||
|
}
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
password : (Password, PasswordRepeat) => {
|
||||||
|
if (Password.length === 0 || PasswordRepeat.length === 0 || Password.length < 6 || Password === '' || PasswordRepeat === '' || Password !== PasswordRepeat) {
|
||||||
|
pswError.classList.remove('disable')
|
||||||
|
errorHandeling.password()
|
||||||
|
errorHandeling.passwordRepeat()
|
||||||
|
|
||||||
|
if(Password.length === 0 || PasswordRepeat.length === 0 || Password === '' || PasswordRepeat === '') errorHandeling.text(pswError.firstElementChild, 'You must type in your password')
|
||||||
|
else if(Password.length < 6) errorHandeling.text(pswError.firstElementChild, 'Password must include atleast 7 characters')
|
||||||
|
else if(Password !== PasswordRepeat) errorHandeling.text(pswError.firstElementChild, 'Passwords do not match')
|
||||||
|
else if(Password.split(' ').length > 1 || PasswordRepeat.split(' ').length > 1) errorHandeling.text(pswError.firstElementChild, 'No white spaces in password')
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
else return false
|
||||||
|
},
|
||||||
|
passwordOld : (Password, PasswordRepeat, PasswordOld) => {
|
||||||
|
num = 0
|
||||||
|
if(PasswordOld.length === 0 || PasswordOld.length === '' || PasswordOld.length > 20) {
|
||||||
|
errorHandeling.passwordOld()
|
||||||
|
|
||||||
|
if(PasswordOld.length === 0 || PasswordOld.length === '') errorHandeling.text(pswError.firstElementChild, 'Password field should not be empty')
|
||||||
|
if(PasswordOld.length > 20) errorHandeling.text(pswError.firstElementChild, 'Password must contain maximum of 20 letters')
|
||||||
|
num = 10
|
||||||
|
}
|
||||||
|
if(error.password(Password, PasswordRepeat) === true) num = 10
|
||||||
|
if(num > 0) return true
|
||||||
|
else return false
|
||||||
|
},
|
||||||
|
passwordOldAfter : () => {
|
||||||
|
error.reset()
|
||||||
|
pswError.classList.remove('disable')
|
||||||
|
errorHandeling.passwordOld()
|
||||||
|
errorHandeling.text(pswError.firstElementChild, 'Wrong password')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const errorHandeling = {
|
||||||
|
name : () => {
|
||||||
|
nameInput.classList.add('error-red-border')
|
||||||
|
name.querySelector('label').classList.add('error-red')
|
||||||
|
},
|
||||||
|
surname : () => {
|
||||||
|
surnameInput.classList.add('error-red-border')
|
||||||
|
surname.querySelector('label').classList.add('error-red')
|
||||||
|
},
|
||||||
|
password : () => {
|
||||||
|
pswInput.classList.add('error-red-border')
|
||||||
|
psw.querySelector('label').classList.add('error-red')
|
||||||
|
},
|
||||||
|
passwordRepeat : () => {
|
||||||
|
pswRepeatInput.classList.add('error-red-border')
|
||||||
|
pswRepeat.querySelector('label').classList.add('error-red')
|
||||||
|
},
|
||||||
|
passwordOld : () => {
|
||||||
|
pswOldInput.classList.add('error-red-border')
|
||||||
|
pswOld.querySelector('label').classList.add('error-red')
|
||||||
|
},
|
||||||
|
text : (element, text) => { element.innerHTML = `${icon} ${text}` }
|
||||||
|
|
||||||
|
}
|
||||||
|
function createFormData(word, data) {
|
||||||
|
let formData = new FormData
|
||||||
|
formData.append(word, data)
|
||||||
|
return formData
|
||||||
|
}
|
||||||
|
|
||||||
|
function setGender(element) {
|
||||||
|
let aside = element.parentElement
|
||||||
|
let oldSelect = aside.parentElement.querySelector('.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')
|
||||||
|
}
|
||||||
|
|
||||||
|
function select(element) {
|
||||||
|
if(document.querySelector('.country-container .active')) document.querySelector('.country-container .active').classList.remove('active')
|
||||||
|
element.classList.add('active')
|
||||||
|
}
|
||||||
|
|
||||||
|
function managePasswordVisibility(element) {
|
||||||
|
if(element.firstElementChild.firstElementChild.classList.contains('disable')) {
|
||||||
|
element.firstElementChild.firstElementChild.classList.remove('disable')
|
||||||
|
element.firstElementChild.lastElementChild.classList.add('disable')
|
||||||
|
if(element.parentElement.firstElementChild.lastElementChild === pswInput) pswInput.type = 'text'
|
||||||
|
else if(element.parentElement.firstElementChild.lastElementChild === pswRepeatInput) pswRepeatInput.type = 'text'
|
||||||
|
else if(element.parentElement.firstElementChild.lastElementChild === pswOldInput) pswOldInput.type = 'text'
|
||||||
|
|
||||||
|
} else {
|
||||||
|
element.firstElementChild.firstElementChild.classList.add('disable')
|
||||||
|
element.firstElementChild.lastElementChild.classList.remove('disable')
|
||||||
|
if(element.parentElement.firstElementChild.lastElementChild === pswInput) pswInput.type = 'password'
|
||||||
|
else if(element.parentElement.firstElementChild.lastElementChild === pswRepeatInput) pswRepeatInput.type = 'password'
|
||||||
|
else if(element.parentElement.firstElementChild.lastElementChild === pswOldInput) pswOldInput.type = 'password'
|
||||||
|
}
|
||||||
|
}
|
||||||
24
JS/main.js
24
JS/main.js
|
|
@ -176,7 +176,7 @@ const suggest = {
|
||||||
removeActiveSidebarCategory()
|
removeActiveSidebarCategory()
|
||||||
hideSuggestWords()
|
hideSuggestWords()
|
||||||
let elementInnerHTML = removeDiacritics(element.innerHTML).trim()
|
let elementInnerHTML = removeDiacritics(element.innerHTML).trim()
|
||||||
let selectedCountryAcronym = getCountryAcronym(selectedCountry.innerHTML)
|
let selectedCountryAcronym = getCountryAcronym(selectedCountry.innerHTML.trim())
|
||||||
historyPushState(location.origin + location.pathname, `?q=${elementInnerHTML}&`, `cou=${selectedCountryAcronym}&`,`bg=${backgroundColor}`)
|
historyPushState(location.origin + location.pathname, `?q=${elementInnerHTML}&`, `cou=${selectedCountryAcronym}&`,`bg=${backgroundColor}`)
|
||||||
mainSearch()
|
mainSearch()
|
||||||
}
|
}
|
||||||
|
|
@ -309,8 +309,6 @@ window.onclick = (e) => {
|
||||||
}
|
}
|
||||||
window.onresize = windowWidthSettings
|
window.onresize = windowWidthSettings
|
||||||
|
|
||||||
function openLinks(string) { window.location.replace(websiteURL + string) }
|
|
||||||
|
|
||||||
function historyPushState(webiste, string, country, background) { history.pushState({}, null, webiste + string + country + background) }
|
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) }
|
function changeBackgroundColor() { document.body.className = window.location.search.match(regularExpressions.url.backgroundColor)[0].slice(4,10) }
|
||||||
|
|
@ -396,7 +394,7 @@ async function headlines() {
|
||||||
pathLocation = ''
|
pathLocation = ''
|
||||||
sidebarCategorySelect(document.querySelector('.fa-newspaper').parentElement.parentElement)
|
sidebarCategorySelect(document.querySelector('.fa-newspaper').parentElement.parentElement)
|
||||||
|
|
||||||
historyPushState(window.location.origin + window.location.pathname, '', `?cou=${getCountryAcronym(selectedCountry.innerHTML)}`,`&bg=${backgroundColor}`)
|
historyPushState(window.location.origin + window.location.pathname, '', `?cou=${getCountryAcronym(selectedCountry.innerHTML.trim())}`,`&bg=${backgroundColor}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
/* SEARCH */
|
/* SEARCH */
|
||||||
|
|
@ -413,7 +411,7 @@ async function headlines() {
|
||||||
|
|
||||||
if(!extra && newSearch === true) {
|
if(!extra && newSearch === true) {
|
||||||
url = removeDiacritics(mainSearchInput.value).trim()
|
url = removeDiacritics(mainSearchInput.value).trim()
|
||||||
return openLinks(filePath.search + `?q=${url}&cou=${getCountryAcronym(selectedCountry.innerHTML)}&bg=${backgroundColor}`)
|
return openLinks(filePath.search + `?q=${url}&cou=${getCountryAcronym(selectedCountry.innerHTML.trim())}&bg=${backgroundColor}`)
|
||||||
} else if(extra && newSearch === true) {
|
} else if(extra && newSearch === true) {
|
||||||
url = createUrlExtraOptions()
|
url = createUrlExtraOptions()
|
||||||
return openLinks(filePath.search + url[1] + url[2] + url[3])
|
return openLinks(filePath.search + url[1] + url[2] + url[3])
|
||||||
|
|
@ -462,7 +460,7 @@ async function headlines() {
|
||||||
else if(hasWordsV.length !== 0 && excludeWordsV.length !== 0 && exactPhraseV.length === 0) url = `${hasWordsV} ${devideStringIntoWords(excludeWordsV, 'EW')}`
|
else if(hasWordsV.length !== 0 && excludeWordsV.length !== 0 && exactPhraseV.length === 0) url = `${hasWordsV} ${devideStringIntoWords(excludeWordsV, 'EW')}`
|
||||||
else if(exactPhraseV.length !== 0 && excludeWordsV.length !== 0 && hasWordsV.length === 0) url = `"${exactPhraseV}" ${devideStringIntoWords(excludeWordsV, 'EW')}`
|
else if(exactPhraseV.length !== 0 && excludeWordsV.length !== 0 && hasWordsV.length === 0) url = `"${exactPhraseV}" ${devideStringIntoWords(excludeWordsV, 'EW')}`
|
||||||
else if(exactPhraseV.length !== 0 && excludeWordsV.length !== 0 && hasWordsV.length !== 0) url = `"${exactPhraseV}" ${hasWordsV} ${devideStringIntoWords(excludeWordsV, 'EW')}`
|
else if(exactPhraseV.length !== 0 && excludeWordsV.length !== 0 && hasWordsV.length !== 0) url = `"${exactPhraseV}" ${hasWordsV} ${devideStringIntoWords(excludeWordsV, 'EW')}`
|
||||||
return [`${location.origin}/News-website/search.php`,`?q=${url + time}`,`&cou=${getCountryAcronym(selectedCountry.innerHTML)}`,`&bg=${backgroundColor}`, url]
|
return [`${location.origin}/News-website/search.php`,`?q=${url + time}`,`&cou=${getCountryAcronym(selectedCountry.innerHTML.trim())}`,`&bg=${backgroundColor}`, url]
|
||||||
}
|
}
|
||||||
function devideStringIntoWords(string, keyword){
|
function devideStringIntoWords(string, keyword){
|
||||||
if(keyword === 'HW') return `+${string.replace(/\s/g, ' +')}`
|
if(keyword === 'HW') return `+${string.replace(/\s/g, ' +')}`
|
||||||
|
|
@ -527,8 +525,8 @@ mainSearchInput.onkeyup = (e) => {
|
||||||
let suggestDivs = suggestMainInput.querySelectorAll('div')
|
let suggestDivs = suggestMainInput.querySelectorAll('div')
|
||||||
let suggestDivActiveKey = suggestMainInput.querySelectorAll('div.active.key')
|
let suggestDivActiveKey = suggestMainInput.querySelectorAll('div.active.key')
|
||||||
if(e.keyCode === 13) {
|
if(e.keyCode === 13) {
|
||||||
if(suggestDivActiveKey.length === 1) historyPushState(location.origin + location.pathname, `?q=${removeDiacritics(suggestDivActiveKey[0].firstElementChild.innerHTML).trim()}&`, `cou=${getCountryAcronym(selectedCountry.innerHTML)}&`,`bg=${backgroundColor}`)
|
if(suggestDivActiveKey.length === 1) historyPushState(location.origin + location.pathname, `?q=${removeDiacritics(suggestDivActiveKey[0].firstElementChild.innerHTML).trim()}&`, `cou=${getCountryAcronym(selectedCountry.innerHTML.trim())}&`,`bg=${backgroundColor}`)
|
||||||
else historyPushState(location.origin + location.pathname, `?q=${mainSearchInput.value.trim()}&`, `cou=${getCountryAcronym(selectedCountry.innerHTML)}&`,`bg=${backgroundColor}`)
|
else historyPushState(location.origin + location.pathname, `?q=${mainSearchInput.value.trim()}&`, `cou=${getCountryAcronym(selectedCountry.innerHTML.trim())}&`,`bg=${backgroundColor}`)
|
||||||
mainSearch()
|
mainSearch()
|
||||||
}
|
}
|
||||||
if(suggestMainInput.classList.contains('disable') || suggestMainInput.querySelectorAll('div').length === 0) return
|
if(suggestMainInput.classList.contains('disable') || suggestMainInput.querySelectorAll('div').length === 0) return
|
||||||
|
|
@ -574,7 +572,7 @@ function createUrlPath(type, search) {
|
||||||
else if(type === 'entertainment') path = filePath.entertainment
|
else if(type === 'entertainment') path = filePath.entertainment
|
||||||
else if(type === 'sports') path = filePath.sports
|
else if(type === 'sports') path = filePath.sports
|
||||||
else if(type === 'health') path = filePath.health
|
else if(type === 'health') path = filePath.health
|
||||||
path = `${path}?cou=${getCountryAcronym(selectedCountry.innerHTML)}&bg=${backgroundColor}`
|
path = `${path}?cou=${getCountryAcronym(selectedCountry.innerHTML.trim())}&bg=${backgroundColor}`
|
||||||
openLinks(path)
|
openLinks(path)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -815,8 +813,8 @@ function checkIfCategoriesAreOpen() {
|
||||||
}
|
}
|
||||||
// string.trim().replace(/\s\s+/g, ' ').replace(/%20/g, ' ').replace(/%22/g, '"')
|
// string.trim().replace(/\s\s+/g, ' ').replace(/%20/g, ' ').replace(/%22/g, '"')
|
||||||
|
|
||||||
|
async function logOut(string) {
|
||||||
async function logOut(path) {
|
const res = await fetch(`include/logout.inc.php`)
|
||||||
await fetch(`${pathLocation}include/logout.inc.php`)
|
const data = res.text()
|
||||||
openLinks(filePath.headlines + path);
|
openLinks(filePath.headlines + string);
|
||||||
}
|
}
|
||||||
22
JS/show.js
22
JS/show.js
|
|
@ -142,3 +142,25 @@ function manageExtraProfileOptions() {
|
||||||
navigationBarProfileImageDiv.classList.remove('active')
|
navigationBarProfileImageDiv.classList.remove('active')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function openLinks(string) { window.location.replace(websiteURL + string) }
|
||||||
|
const insertContainer = document.getElementById('insert-photo-container')
|
||||||
|
function showProfileImg() {
|
||||||
|
if(mainImgContainer.classList.contains('active')) {
|
||||||
|
manageInsertContainer()
|
||||||
|
mainImgContainer.classList.remove('active')
|
||||||
|
overlay.classList.remove('active')
|
||||||
|
insertContainer.classList.remove('active')
|
||||||
|
document.querySelector('.color-img').classList.remove('active')
|
||||||
|
|
||||||
|
} else {
|
||||||
|
document.querySelector('.color-img').classList.add('active')
|
||||||
|
mainImgContainer.classList.add('active')
|
||||||
|
overlay.classList.add('active')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function manageInsertContainer() {
|
||||||
|
if(insertContainer.classList.contains('active')) insertContainer.classList.remove('active')
|
||||||
|
else insertContainer.classList.add('active')
|
||||||
|
}
|
||||||
|
function openFolder() { document.getElementById('file-upload').click() }
|
||||||
|
|
@ -251,7 +251,6 @@ const error = {
|
||||||
errorHandeling.text(countryError.firstElementChild, 'Select a country')
|
errorHandeling.text(countryError.firstElementChild, 'Select a country')
|
||||||
num = 10
|
num = 10
|
||||||
}
|
}
|
||||||
console.log(num)
|
|
||||||
if (num > 0) return false
|
if (num > 0) return false
|
||||||
else return true
|
else return true
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -39,7 +39,6 @@
|
||||||
const excludeWords = document.getElementById('extra-option-input3')
|
const excludeWords = document.getElementById('extra-option-input3')
|
||||||
const submitButton = document.getElementById('extraOptionsSearchButton')
|
const submitButton = document.getElementById('extraOptionsSearchButton')
|
||||||
const date = document.getElementById('extra-option-select')
|
const date = document.getElementById('extra-option-select')
|
||||||
|
|
||||||
/** Navigation Bar Right */
|
/** Navigation Bar Right */
|
||||||
const loginButton = document.getElementById('login-button')
|
const loginButton = document.getElementById('login-button')
|
||||||
/** Extra Search Options */
|
/** Extra Search Options */
|
||||||
|
|
@ -65,11 +64,15 @@
|
||||||
const mainContentContainer = document.getElementById('main-content-container')
|
const mainContentContainer = document.getElementById('main-content-container')
|
||||||
let mainContentHeader = document.getElementById('main-content-header')
|
let mainContentHeader = document.getElementById('main-content-header')
|
||||||
const showCountriesLink = document.getElementById('show-countries-button')
|
const showCountriesLink = document.getElementById('show-countries-button')
|
||||||
const sclSpan = showCountriesLink.firstElementChild.firstElementChild
|
let sclSpan
|
||||||
const sclStrong = showCountriesLink.firstElementChild.lastElementChild
|
let sclStrong
|
||||||
|
const mainImgContainer = document.getElementById('main-img-container')
|
||||||
|
if(showCountriesLink !== null) {
|
||||||
|
sclSpan = showCountriesLink.firstElementChild.firstElementChild
|
||||||
|
sclStrong = showCountriesLink.firstElementChild.lastElementChild
|
||||||
|
}
|
||||||
|
|
||||||
const main = document.getElementById('main')
|
const main = document.getElementById('main')
|
||||||
|
|
||||||
const overlay = document.getElementById('overlay')
|
const overlay = document.getElementById('overlay')
|
||||||
const navigationBarProfileImageDiv = document.getElementById('outter-container')
|
const navigationBarProfileImageDiv = document.getElementById('outter-container')
|
||||||
const extOptProfile = document.getElementById('profile-extra-options')
|
const extOptProfile = document.getElementById('profile-extra-options')
|
||||||
|
|
|
||||||
53
account.php
53
account.php
|
|
@ -1,53 +0,0 @@
|
||||||
<?php
|
|
||||||
session_start();
|
|
||||||
if(!isset($_SESSION['id'])) header('location: headlines.php#nopermission')
|
|
||||||
?>
|
|
||||||
<!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/account.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>Account</title>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<nav>
|
|
||||||
<div class="left-side">
|
|
||||||
|
|
||||||
<div class="logo">
|
|
||||||
<a href="">Fews</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="right-side">
|
|
||||||
asd
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</nav>
|
|
||||||
<main>
|
|
||||||
<aside class="side-menu">
|
|
||||||
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
main contnt
|
|
||||||
</main>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
3
account/add-ons/footer.php
Normal file
3
account/add-ons/footer.php
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<footer>
|
||||||
|
<!-- footer -->
|
||||||
|
</footer>
|
||||||
32
account/add-ons/head.php
Normal file
32
account/add-ons/head.php
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
if(!isset($_SESSION['id'])) header('location: ../headlines.php#nopermission')
|
||||||
|
?>
|
||||||
|
<!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/account.css">
|
||||||
|
<link rel="stylesheet" href="../CSS/profileImg.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/account.js" defer></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://kit.fontawesome.com/89923351fd.js" crossorigin="anonymous" defer></script>
|
||||||
|
<script src="../JS/icon.js" defer></script>
|
||||||
|
|
||||||
|
<title>Account</title>
|
||||||
|
|
||||||
|
</head>
|
||||||
77
account/add-ons/side-bar.php
Normal file
77
account/add-ons/side-bar.php
Normal file
|
|
@ -0,0 +1,77 @@
|
||||||
|
<aside class="side-bar disable" id="side-bar-account">
|
||||||
|
<div class="flex">
|
||||||
|
<div class="side-bar-container" id="side-bar-container">
|
||||||
|
<div>
|
||||||
|
<div class="side-bar-content" id="side-bar-content">
|
||||||
|
<div class="sidebar-category <?php if(strpos($_SERVER['REQUEST_URI'], 'home')) echo 'active'; ?>" onclick="openLinks('account/home.php')">
|
||||||
|
<div class="icon"><i class="fas fa-user-circle fa-lg"></i></div>
|
||||||
|
<div><a href="#">Home</a></div>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-category <?php if(strpos($_SERVER['REQUEST_URI'], 'personal')) echo 'active'; ?>" onclick="openLinks('account/personal.php')">
|
||||||
|
<div class="icon"><i class="far fa-id-card-alt fa-lg"></i></div>
|
||||||
|
<div><a href="#">Personal Information</a></div>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
|
||||||
|
if($_SESSION['admin'] != 'no')
|
||||||
|
echo '<div class="sidebar-category <?php if(strpos($_SERVER[\'REQUEST_URI\'], \'admin\')) echo \'active\'; ?>" onclick="openLinks(\'account/admin.php\')">
|
||||||
|
<div class="icon"><i class="fas fa-users-crown fa-lg"></i></div>
|
||||||
|
<div><a href="#" class="side-menu-categories">Admin</a></div>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-category <?php if(strpos($_SERVER[\'REQUEST_URI\'], \'trending\')) echo \'active\'; ?>" onclick="openLinks(\'account/trending.php\')">
|
||||||
|
<div class="icon"><i class="far fa-chart-line fa-lg"></i></div>
|
||||||
|
<div><a href="#" class="side-menu-categories">Trending Section</a></div>
|
||||||
|
</div>';
|
||||||
|
|
||||||
|
?>
|
||||||
|
<div class="sidebar-category <?php if(strpos($_SERVER['REQUEST_URI'], 'settings')) echo 'active'; ?>" onclick="openLinks('account/settings.php')">
|
||||||
|
<div class="icon"><i class="fas fa-user-cog fa-lg"></i></div>
|
||||||
|
<div><a href="#" class="side-menu-categories">Settings</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<div class="side-bar-responsive disable">
|
||||||
|
<div class="slide">
|
||||||
|
<ul class="res-container">
|
||||||
|
<li class="content-container" onclick="openLinks('account/home.php')">
|
||||||
|
<div>
|
||||||
|
<div class="<?php if(strpos($_SERVER['REQUEST_URI'], 'home')) echo 'active'; ?>"></div>
|
||||||
|
<span class="<?php if(strpos($_SERVER['REQUEST_URI'], 'home')) echo 'active'; ?>">Home</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="content-container" onclick="openLinks('account/personal.php')">
|
||||||
|
<div>
|
||||||
|
<div class="<?php if(strpos($_SERVER['REQUEST_URI'], 'personal')) echo 'active'; ?>"></div>
|
||||||
|
<span class="<?php if(strpos($_SERVER['REQUEST_URI'], 'personal')) echo 'active'; ?>">Personal Info</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<?php
|
||||||
|
|
||||||
|
if($_SESSION['admin'] != 'no')
|
||||||
|
echo ' <li class="content-container" onclick="openLinks(\'account/admin.php\')">
|
||||||
|
<div>
|
||||||
|
<div class="<?php if(strpos($_SERVER[\'REQUEST_URI\'], \'admin\')) echo \'active\'; ?>"></div>
|
||||||
|
<span class="<?php if(strpos($_SERVER[\'REQUEST_URI\'], \'admin\')) echo \'active\'; ?>">Admin</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="content-container" onclick="openLinks(\'account/trending.php\')">
|
||||||
|
<div>
|
||||||
|
<div class="<?php if(strpos($_SERVER[\'REQUEST_URI\'], \'trending\')) echo \'active\'; ?>"></div>
|
||||||
|
<span class="<?php if(strpos($_SERVER[\'REQUEST_URI\'], \'trending\')) echo \'active\'; ?>">Trending</span>
|
||||||
|
</div>
|
||||||
|
</li>';
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
||||||
|
<li class="content-container" onclick="openLinks('account/settings.php')">
|
||||||
|
<div>
|
||||||
|
<div class="<?php if(strpos($_SERVER['REQUEST_URI'], 'settings')) echo 'active'; ?>"></div>
|
||||||
|
<span class="<?php if(strpos($_SERVER['REQUEST_URI'], 'settings')) echo 'active'; ?>">Settings</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
137
account/admin.php
Normal file
137
account/admin.php
Normal file
|
|
@ -0,0 +1,137 @@
|
||||||
|
<?php
|
||||||
|
include 'add-ons/head.php';
|
||||||
|
if($_SESSION['admin'] == 'no') header("location:../headlines.php");
|
||||||
|
?>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav class="account">
|
||||||
|
<div class="left">
|
||||||
|
<div class="container">
|
||||||
|
<div class="logo">
|
||||||
|
<a href="">Fews Account</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="main-container">
|
||||||
|
<?php include '../add-ons/navigation-bar-right.php' ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<main>
|
||||||
|
<?php include 'add-ons/side-bar.php' ?>
|
||||||
|
|
||||||
|
<div class="main-content">
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<section class="header">
|
||||||
|
<div class="h1">
|
||||||
|
<h1>
|
||||||
|
Welcome to the Admin Panel
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<p>
|
||||||
|
Manage user privileges
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<article class="admin-panel">
|
||||||
|
<section>
|
||||||
|
<div class="ca"><span>Name</span></div>
|
||||||
|
<div class="ca"><span>Email</span></div>
|
||||||
|
<div class="ca"><span>Country</span></div>
|
||||||
|
<div class="ca"><span>Name</span></div>
|
||||||
|
<div class="ca"></div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="ca">Nik Topler</div>
|
||||||
|
<div class="ca">nik.topler21@gmail.com</div>
|
||||||
|
<div class="ca">Slovenia</div>
|
||||||
|
<div class="ca">Admin</div>
|
||||||
|
<div class="ca"><div class="icon"><i class="far fa-plus fa-lg"></i></div></i></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="ca">Nik Topler</div>
|
||||||
|
<div class="ca">nik.topler21@gmail.com</div>
|
||||||
|
<div class="ca">Slovenia</div>
|
||||||
|
<div class="ca">Admin</div>
|
||||||
|
<div class="ca"><div class="icon"><i class="far fa-plus fa-lg"></i></div></i></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="ca">Nik Topler</div>
|
||||||
|
<div class="ca">nik.topler21@gmail.com</div>
|
||||||
|
<div class="ca">Slovenia</div>
|
||||||
|
<div class="ca">Admin</div>
|
||||||
|
<div class="ca"><div class="icon"><i class="far fa-plus fa-lg"></i></div></i></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="ca">Nik Topler</div>
|
||||||
|
<div class="ca">nik.topler21@gmail.com</div>
|
||||||
|
<div class="ca">Slovenia</div>
|
||||||
|
<div class="ca">Admin</div>
|
||||||
|
<div class="ca"><div class="icon"><i class="far fa-plus fa-lg"></i></div></i></div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="ca">Nik Topler</div>
|
||||||
|
<div class="ca">nik.topler21@gmail.com</div>
|
||||||
|
<div class="ca">Slovenia</div>
|
||||||
|
<div class="ca">Admin</div>
|
||||||
|
<div class="ca"><div class="icon"><i class="far fa-plus fa-lg"></i></div></i></div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="ca">Nik Topler</div>
|
||||||
|
<div class="ca">nik.topler21@gmail.com</div>
|
||||||
|
<div class="ca">Slovenia</div>
|
||||||
|
<div class="ca">Admin</div>
|
||||||
|
<div class="ca"><div class="icon"><i class="far fa-plus fa-lg"></i></div></i></div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="ca">Nik Topler</div>
|
||||||
|
<div class="ca">nik.topler21@gmail.com</div>
|
||||||
|
<div class="ca">Slovenia</div>
|
||||||
|
<div class="ca">Admin</div>
|
||||||
|
<div class="ca"><div class="icon"><i class="far fa-plus fa-lg"></i></div></i></div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="ca">Nik Topler</div>
|
||||||
|
<div class="ca">nik.topler21@gmail.com</div>
|
||||||
|
<div class="ca">Slovenia</div>
|
||||||
|
<div class="ca">Admin</div>
|
||||||
|
<div class="ca"><div class="icon"><i class="far fa-plus fa-lg"></i></div></i></div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="ca">Nik Topler</div>
|
||||||
|
<div class="ca">nik.topler21@gmail.com</div>
|
||||||
|
<div class="ca">Slovenia</div>
|
||||||
|
<div class="ca">Admin</div>
|
||||||
|
<div class="ca"><div class="icon"><i class="far fa-plus fa-lg"></i></div></i></div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="ca">Nik Topler</div>
|
||||||
|
<div class="ca">nik.topler21@gmail.com</div>
|
||||||
|
<div class="ca">Slovenia</div>
|
||||||
|
<div class="ca">Admin</div>
|
||||||
|
<div class="ca"><div class="icon"><i class="far fa-plus fa-lg"></i></div></i></div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="ca">Nik Topler</div>
|
||||||
|
<div class="ca">nik.topler21@gmail.com</div>
|
||||||
|
<div class="ca">Slovenia</div>
|
||||||
|
<div class="ca">Admin</div>
|
||||||
|
<div class="ca"><div class="icon"><i class="far fa-plus fa-lg"></i></div></i></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
60
account/changeCountry.php
Normal file
60
account/changeCountry.php
Normal file
|
|
@ -0,0 +1,60 @@
|
||||||
|
<?php include 'add-ons/head.php' ?>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav class="account">
|
||||||
|
<div class="left">
|
||||||
|
<div class="container">
|
||||||
|
<div class="logo">
|
||||||
|
<a href="">Fews Account</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="main-container">
|
||||||
|
<?php include '../add-ons/navigation-bar-right.php' ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="main-content change">
|
||||||
|
<div class="container">
|
||||||
|
<section class="header">
|
||||||
|
<div class="h1">
|
||||||
|
<h1>
|
||||||
|
Select your country
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<p>
|
||||||
|
You will automaticly recive news articles from the country you select
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<article>
|
||||||
|
<div class="country-container">
|
||||||
|
<div class="countries">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="error country disable">
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="button-container">
|
||||||
|
<div class="inner-container">
|
||||||
|
<a href="personal.php">Back</a>
|
||||||
|
</div>
|
||||||
|
<div class="inner-container">
|
||||||
|
<div class="blue-button" onclick="check.country()">Next</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
83
account/changeGender.php
Normal file
83
account/changeGender.php
Normal file
|
|
@ -0,0 +1,83 @@
|
||||||
|
<?php include 'add-ons/head.php' ?>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav class="account">
|
||||||
|
<div class="left">
|
||||||
|
<div class="container">
|
||||||
|
<div class="logo">
|
||||||
|
<a href="">Fews Account</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="main-container">
|
||||||
|
<?php include '../add-ons/navigation-bar-right.php' ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="main-content change">
|
||||||
|
<div class="container">
|
||||||
|
<section class="header">
|
||||||
|
<div class="h1">
|
||||||
|
<h1>
|
||||||
|
Set your gender
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<p>
|
||||||
|
Select your gender
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<article>
|
||||||
|
<div class="gender-container">
|
||||||
|
<aside class="radio-button-container grid">
|
||||||
|
|
||||||
|
<figure class="radio-button flex align-center justify-center <?php if($_SESSION['gender'] == 'Male') echo 'active'; else echo 'not-active'?>" onclick="setGender(this)">
|
||||||
|
<div class="radio-button-border flex align-center justify-center pointer <?php if($_SESSION['gender'] == 'Male') echo 'active'; else echo 'not-active'?>">
|
||||||
|
<div class="radio-button-center <?php if($_SESSION['gender'] == 'Male') echo 'active'; else echo 'not-active'?>"></div>
|
||||||
|
</div>
|
||||||
|
</figure>
|
||||||
|
<p>Male</p>
|
||||||
|
</aside>
|
||||||
|
<aside class="radio-button-container grid">
|
||||||
|
<figure class="radio-button flex align-center justify-center <?php if($_SESSION['gender'] == 'Female') echo 'active'; else echo 'not-active'?>" onclick="setGender(this)">
|
||||||
|
<div class="radio-button-border flex align-center justify-center pointer <?php if($_SESSION['gender'] == 'Female') echo 'active'; else echo 'not-active'?>">
|
||||||
|
<div class="radio-button-center <?php if($_SESSION['gender'] == 'Female') echo 'active'; else echo 'not-active'?>"></div>
|
||||||
|
</div>
|
||||||
|
</figure>
|
||||||
|
<p>Female</p>
|
||||||
|
</aside>
|
||||||
|
<aside class="radio-button-container grid">
|
||||||
|
<figure class="radio-button flex align-center justify-center <?php if($_SESSION['gender'] == 'Prefer not to say') echo 'active'; else echo 'not-active'?>" onclick="setGender(this)">
|
||||||
|
<div class="radio-button-border flex align-center justify-center pointer <?php if($_SESSION['gender'] == 'Prefer not to say') echo 'active'; else echo 'not-active'?>">
|
||||||
|
<div class="radio-button-center <?php if($_SESSION['gender'] == 'Prefer not to say') echo 'active'; else echo 'not-active'?>"></div>
|
||||||
|
</div>
|
||||||
|
</figure>
|
||||||
|
<p>Prefer not to say</p>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
<div class="error gender disable">
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="button-container">
|
||||||
|
<div class="inner-container">
|
||||||
|
<a href="personal.php">Back</a>
|
||||||
|
</div>
|
||||||
|
<div class="inner-container">
|
||||||
|
<div class="blue-button" onclick="check.gender()">Next</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
74
account/changeName.php
Normal file
74
account/changeName.php
Normal file
|
|
@ -0,0 +1,74 @@
|
||||||
|
<?php include 'add-ons/head.php' ?>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav class="account">
|
||||||
|
<div class="left">
|
||||||
|
<div class="container">
|
||||||
|
<div class="logo">
|
||||||
|
<a href="">Fews Account</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="main-container">
|
||||||
|
<?php include '../add-ons/navigation-bar-right.php' ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="main-content change">
|
||||||
|
<div class="container">
|
||||||
|
<section class="header">
|
||||||
|
<div class="h1">
|
||||||
|
<h1>
|
||||||
|
Update your name
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<p>
|
||||||
|
You can change both or one
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<article>
|
||||||
|
<div class="name-container">
|
||||||
|
<div class="input-container">
|
||||||
|
<div class="label-container">
|
||||||
|
<label for="name-input">First Name</label>
|
||||||
|
</div>
|
||||||
|
<input type="text" name="name" id="name-input" autocomplete="off" value="<?php if(isset($_SESSION['name'])) echo $_SESSION['name'] ?>">
|
||||||
|
</div>
|
||||||
|
<div class="error name disable">
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="surname-container">
|
||||||
|
<div class="input-container">
|
||||||
|
<div class="label-container">
|
||||||
|
<label for="surname-input">Last Name</label>
|
||||||
|
</div>
|
||||||
|
<input type="text" name="surname" id="surname-input" autocomplete="off" value="<?php if(isset($_SESSION['surname'])) echo $_SESSION['surname'] ?>">
|
||||||
|
</div>
|
||||||
|
<div class="error surname disable">
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="button-container">
|
||||||
|
<div class="inner-container">
|
||||||
|
<a href="personal.php">Back</a>
|
||||||
|
</div>
|
||||||
|
<div class="inner-container">
|
||||||
|
<div class="blue-button" onclick="check.name()">Next</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
42
account/changePassword.php
Normal file
42
account/changePassword.php
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
<?php include 'add-ons/head.php' ?>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav class="account">
|
||||||
|
<div class="left">
|
||||||
|
<div class="container">
|
||||||
|
<div class="logo">
|
||||||
|
<a href="">Fews Account</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="main-container">
|
||||||
|
<?php include '../add-ons/navigation-bar-right.php' ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="main-content change">
|
||||||
|
<div class="container">
|
||||||
|
<section class="header">
|
||||||
|
<div class="h1">
|
||||||
|
<h1>
|
||||||
|
Update your password
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<p>
|
||||||
|
Password should be updateded every 2 months
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<article>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
124
account/home.php
Normal file
124
account/home.php
Normal file
|
|
@ -0,0 +1,124 @@
|
||||||
|
<?php include 'add-ons/head.php' ?>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav class="account">
|
||||||
|
<div class="left">
|
||||||
|
<div class="container">
|
||||||
|
<div class="logo">
|
||||||
|
<a href="">Fews Account</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="main-container">
|
||||||
|
<?php include '../add-ons/navigation-bar-right.php' ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<main>
|
||||||
|
<?php include 'add-ons/side-bar.php' ?>
|
||||||
|
|
||||||
|
<div class="main-content">
|
||||||
|
<div class="container">
|
||||||
|
<section class="header">
|
||||||
|
<div class="img-container">
|
||||||
|
<?php
|
||||||
|
if($_SESSION['profile_choice'] == 0)
|
||||||
|
echo ('<div class="img xxl" onclick="changeProfileImg()" ><img src="'.$_SESSION['profile_img'].'" class="imga"></div>');
|
||||||
|
else if($_SESSION['profile_choice'] == 1)
|
||||||
|
echo ('<div class="img xxl" onclick="changeProfileImg()" style="background-color: '.$_SESSION['profile_color'].';">
|
||||||
|
<div class="letter">
|
||||||
|
<span>'.$_SESSION['letter'].'</span>
|
||||||
|
</div>
|
||||||
|
</div>');
|
||||||
|
else if($_SESSION['profile_choice'] == 2)
|
||||||
|
echo ('<div class="img xxl" onclick="changeProfileImg()"><img src="'.$_SESSION['google_profile_img'].'" class="imga"></div>');
|
||||||
|
else if($_SESSION['profile_choice'] == 3)
|
||||||
|
echo ('<div class="img xxl" onclick="changeProfileImg()"><img src="'.$_SESSION['facebook_profile_img'].'" class="imga"></div>');
|
||||||
|
else if($_SESSION['profile_choice'] == 4)
|
||||||
|
echo ('<div class="img xxl" onclick="changeProfileImg()"><img src="'.$_SESSION['github_profile_img'].'" class="imga"></div>');
|
||||||
|
?>
|
||||||
|
<figure>
|
||||||
|
<div><i class="fas fa-camera fa-lg" aria-hidden="true"></i></div>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="h1">
|
||||||
|
<h1>
|
||||||
|
<?php
|
||||||
|
if(isset($_SESSION['name']) || isset($_SESSION['surname'])) echo 'Welcome, ';
|
||||||
|
if(isset($_SESSION['name'])) echo $_SESSION['name'];
|
||||||
|
if(isset($_SESSION['surname'])) echo ' '.$_SESSION['surname'];
|
||||||
|
?>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<p>
|
||||||
|
Manage your info, privacy and security
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="section-main-container">
|
||||||
|
<div class="section-container">
|
||||||
|
<div class="content">
|
||||||
|
<h1>Personal Information</h1>
|
||||||
|
<p>
|
||||||
|
See & update account details. <br>
|
||||||
|
<strong>Note: </strong>Some personal information can change the way website works.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="button" onclick="openLinks('account/personal.php')">
|
||||||
|
<a href="#">Manage your Personal Information</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="section-container">
|
||||||
|
<div class="content">
|
||||||
|
<h1>Settings</h1>
|
||||||
|
<p>
|
||||||
|
Customize your account based on your prefrences.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="button" onclick="openLinks('account/settings.php')">
|
||||||
|
<a href="#">Open Settings</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
|
||||||
|
if($_SESSION['admin'] != 'no')
|
||||||
|
echo '<div class="section-main-container">
|
||||||
|
<div class="section-container">
|
||||||
|
<div class="content">
|
||||||
|
<h1>Admin</h1>
|
||||||
|
<p>
|
||||||
|
See & add & edit users with admin role. <br>
|
||||||
|
<strong>Note: </strong> this page is only for website moderators.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="button" onclick="openLinks(\'account/admin.php\')">
|
||||||
|
<a href="#">Manage Admins</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="section-container">
|
||||||
|
<div class="content">
|
||||||
|
<h1>Trending Section</h1>
|
||||||
|
<p>
|
||||||
|
Select news articles, that are going to be featured in the trending section.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="button" onclick="openLinks(\'account/trending.php\')">
|
||||||
|
<a href="#">Edit Trending section</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>';
|
||||||
|
|
||||||
|
?>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<div class="fixed" id="overlay"></div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
169
account/personal.php
Normal file
169
account/personal.php
Normal file
|
|
@ -0,0 +1,169 @@
|
||||||
|
<?php include 'add-ons/head.php' ?>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<?php include '../add-ons/profileImg.php' ?>
|
||||||
|
<nav class="account">
|
||||||
|
<div class="left">
|
||||||
|
<div class="container">
|
||||||
|
<div class="logo">
|
||||||
|
<a href="">Fews Account</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="main-container">
|
||||||
|
<?php include '../add-ons/navigation-bar-right.php' ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<main>
|
||||||
|
<?php include 'add-ons/side-bar.php' ?>
|
||||||
|
|
||||||
|
<div class="main-content personal">
|
||||||
|
|
||||||
|
<div class="container personal">
|
||||||
|
<section class="header">
|
||||||
|
<div class="h1">
|
||||||
|
<h1>Personal Information</h1>
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<p>Basic info, such as your name, photo, country, that you use on the site</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="personal">
|
||||||
|
<header>
|
||||||
|
<h1>Profile</h1>
|
||||||
|
<p>Profile News articles will be displayed on the front page, based on your country</p>
|
||||||
|
</header>
|
||||||
|
<div class="info photo" onclick="showProfileImg()">
|
||||||
|
<div class="line"></div>
|
||||||
|
<div class="title">
|
||||||
|
<h3>Photo</h3>
|
||||||
|
</div>
|
||||||
|
<div class="text"><p>Add a photo to personalize your account</p></div>
|
||||||
|
<div class="image">
|
||||||
|
<?php
|
||||||
|
if($_SESSION['profile_choice'] == 0)
|
||||||
|
echo ('<div class="img medium" ><img src="'.$_SESSION['profile_img'].'" class="imga"></div>');
|
||||||
|
else if($_SESSION['profile_choice'] == 1)
|
||||||
|
echo ('<div class="img medium" style="background-color: '.$_SESSION['profile_color'].';">
|
||||||
|
<div class="letter">
|
||||||
|
<span>'.$_SESSION['letter'].'</span>
|
||||||
|
</div>
|
||||||
|
</div>');
|
||||||
|
else if($_SESSION['profile_choice'] == 2)
|
||||||
|
echo ('<div class="img medium" ><img src="'.$_SESSION['google_profile_img'].'" class="imga"></div>');
|
||||||
|
else if($_SESSION['profile_choice'] == 3)
|
||||||
|
echo ('<div class="img medium"><img src="'.$_SESSION['facebook_profile_img'].'" class="imga"></div>');
|
||||||
|
else if($_SESSION['profile_choice'] == 4)
|
||||||
|
echo ('<div class="img medium"><img src="'.$_SESSION['github_profile_img'].'" class="imga"></div>');
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info" onclick="openLinks('account/changeName.php')">
|
||||||
|
<div class="line"></div>
|
||||||
|
<div class="title">
|
||||||
|
<h3>Name</h3>
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<p>
|
||||||
|
<?php
|
||||||
|
if(isset($_SESSION['name']) && isset($_SESSION['surname'])) echo $_SESSION['name'].' '.$_SESSION['surname'];
|
||||||
|
else if(isset($_SESSION['name'])) echo $_SESSION['name'];
|
||||||
|
else if(isset($_SESSION['surname'])) echo ' '.$_SESSION['surname'];
|
||||||
|
else echo 'Not set'
|
||||||
|
?>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="arrow">
|
||||||
|
<i class="far fa-angle-right fa-lg"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info" onclick="openLinks('account/changeGender.php')">
|
||||||
|
<div class="line"></div>
|
||||||
|
<div class="title">
|
||||||
|
<h3>Gender</h3>
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<p>
|
||||||
|
<?php
|
||||||
|
if(isset($_SESSION['gender'])) echo $_SESSION['gender'];
|
||||||
|
else echo 'Not set'
|
||||||
|
?>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="arrow">
|
||||||
|
<i class="far fa-angle-right fa-lg"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info" onclick="openLinks('account/changeCountry.php?cou=<?php if(isset($_SESSION['country'])) echo $_SESSION['country'][1]?>')">
|
||||||
|
<div class="line"></div>
|
||||||
|
<div class="title">
|
||||||
|
<h3>Country</h3>
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<p>
|
||||||
|
<?php
|
||||||
|
if(isset($_SESSION['country'])) echo $_SESSION['country'][0];
|
||||||
|
else echo 'Not set'
|
||||||
|
?>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="arrow">
|
||||||
|
<i class="far fa-angle-right fa-lg"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info psw" onclick="openLinks('account/changePassword.php')">
|
||||||
|
<div class="line"></div>
|
||||||
|
<div class="title">
|
||||||
|
<h3>Password</h3>
|
||||||
|
</div>
|
||||||
|
<div class="text psw">
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
<?php
|
||||||
|
echo $_SESSION['password-set']
|
||||||
|
?>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="time">
|
||||||
|
<span>
|
||||||
|
<?php
|
||||||
|
if($_SESSION['password-set'] == 'Not set') echo 'You need to set up password, if you ever decide using standard sign in system';
|
||||||
|
else {
|
||||||
|
$d = date('dmYhms', $_SESSION['password_change']);
|
||||||
|
$date = substr($d, 0, 2).'-'.substr($d, 2, 2).'-'.substr($d, 4, 4).' '.substr($d, 8, 2).':'.substr($d, 10, 2).':'.substr($d, 12, 2);
|
||||||
|
echo $date;
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="arrow">
|
||||||
|
<i class="far fa-angle-right fa-lg"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="info">
|
||||||
|
<div class="title">
|
||||||
|
<h3>Email</h3>
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<p>
|
||||||
|
<?php
|
||||||
|
echo $_SESSION['email'];
|
||||||
|
?>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<div class="fixed" id="overlay"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
31
account/settings.php
Normal file
31
account/settings.php
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
<?php include 'add-ons/head.php' ?>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav class="account">
|
||||||
|
<div class="left">
|
||||||
|
<div class="container">
|
||||||
|
<div class="logo">
|
||||||
|
<a href="">Fews Account</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="main-container">
|
||||||
|
<?php include '../add-ons/navigation-bar-right.php' ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<main>
|
||||||
|
<?php include 'add-ons/side-bar.php' ?>
|
||||||
|
|
||||||
|
<div class="main-content">
|
||||||
|
|
||||||
|
<?php include 'add-ons/footer.php' ?>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<div class="fixed" id="overlay"></div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
32
account/trending.php
Normal file
32
account/trending.php
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
<?php
|
||||||
|
include 'add-ons/head.php';
|
||||||
|
if($_SESSION['admin'] == 'no') header("location:../headlines.php");
|
||||||
|
?>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav class="account">
|
||||||
|
<div class="left">
|
||||||
|
<div class="container">
|
||||||
|
<div class="logo">
|
||||||
|
<a href="">Fews Account</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="main-container">
|
||||||
|
<?php include '../add-ons/navigation-bar-right.php' ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<main>
|
||||||
|
<?php include 'add-ons/side-bar.php' ?>
|
||||||
|
|
||||||
|
<div class="main-content">
|
||||||
|
|
||||||
|
<?php include 'add-ons/footer.php' ?>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
157
add-ons/navigation-bar-right.php
Normal file
157
add-ons/navigation-bar-right.php
Normal file
|
|
@ -0,0 +1,157 @@
|
||||||
|
<div class="nav-right-side" id="navigation-bar-right">
|
||||||
|
<a href="#" class="login link <?php if(isset($_SESSION['id'])) echo 'disable'?>" id="login-button" onclick="manageLoginOptions()">Log in</a>
|
||||||
|
|
||||||
|
<div class="outter-container border-radius-50 pointer <?php if(!isset($_SESSION['id'])) echo 'disable'?>" id="outter-container">
|
||||||
|
<div>
|
||||||
|
<?php
|
||||||
|
if(!strpos($_SERVER['REQUEST_URI'], 'change')) $str = 'onclick="manageExtraProfileOptions()"';
|
||||||
|
else $str = '';
|
||||||
|
|
||||||
|
if($_SESSION['profile_choice'] == 0)
|
||||||
|
echo ('<div class="img small" '.$str.'><img src="'.$_SESSION['profile_img'].'" class="imga"></div>');
|
||||||
|
else if($_SESSION['profile_choice'] == 1)
|
||||||
|
echo ('<div class="img small" '.$str.' style="background-color: '.$_SESSION['profile_color'].';">
|
||||||
|
<div class="letter">
|
||||||
|
<span>'.$_SESSION['letter'].'</span>
|
||||||
|
</div>
|
||||||
|
</div>');
|
||||||
|
else if($_SESSION['profile_choice'] == 2)
|
||||||
|
echo ('<div class="img small" '.$str.'><img src="'.$_SESSION['google_profile_img'].'" class="imga"></div>');
|
||||||
|
else if($_SESSION['profile_choice'] == 3)
|
||||||
|
echo ('<div class="img small"'.$str.'><img src="'.$_SESSION['facebook_profile_img'].'" class="imga"></div>');
|
||||||
|
else if($_SESSION['profile_choice'] == 4)
|
||||||
|
echo ('<div class="img small" '.$str.'><img src="'.$_SESSION['github_profile_img'].'" class="imga"></div>');
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<span class="tooltiptext tooltiptextTop90">
|
||||||
|
<div><strong>Personal Information</strong></div>
|
||||||
|
<div class=" <?php if(!isset($_SESSION['name']) && !isset($_SESSION['surname'])) echo 'disable'?> ">
|
||||||
|
<span class="tooltiptext-name">
|
||||||
|
<?php echo $_SESSION['name'].' '.$_SESSION['surname'];?>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="tooltiptext-name">
|
||||||
|
<?php echo $_SESSION['email']?>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<aside class="profile-extra-options absolute disable" id="profile-extra-options">
|
||||||
|
<div class="top-div">
|
||||||
|
<div class="img-container">
|
||||||
|
<div class="img-middle">
|
||||||
|
<div>
|
||||||
|
<?php
|
||||||
|
if($_SESSION['profile_choice'] == 0)
|
||||||
|
echo ('<div class="img big" onclick="openLinks(\'account/home.php\')" ><img src="'.$_SESSION['profile_img'].'" class="imga"></div>');
|
||||||
|
else if($_SESSION['profile_choice'] == 1)
|
||||||
|
echo ('<div class="img big" onclick="openLinks(\'account/home.php\')" style="background-color: '.$_SESSION['profile_color'].';">
|
||||||
|
<div class="letter">
|
||||||
|
<span>'.$_SESSION['letter'].'</span>
|
||||||
|
</div>
|
||||||
|
</div>');
|
||||||
|
else if($_SESSION['profile_choice'] == 2)
|
||||||
|
echo ('<div class="img big" onclick="openLinks(\'account/home.php\')"><img src="'.$_SESSION['google_profile_img'].'" class="imga"></div>');
|
||||||
|
else if($_SESSION['profile_choice'] == 3)
|
||||||
|
echo ('<div class="img big" onclick="openLinks(\'account/home.php\')"><img src="'.$_SESSION['facebook_profile_img'].'" class="imga"></div>');
|
||||||
|
else if($_SESSION['profile_choice'] == 4)
|
||||||
|
echo ('<div class="img big" onclick="openLinks(\'account/home.php\')"><img src="'.$_SESSION['github_profile_img'].'" class="imga"></div>');
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
<div class="camera-container" onclick="showProfileImg()">
|
||||||
|
<i class="far fa-camera"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="full-name <?php if(!isset($_SESSION['name']) && !isset($_SESSION['surname'])) echo 'disable'?>">
|
||||||
|
<span>
|
||||||
|
<?php echo $_SESSION['name'].' '.$_SESSION['surname']; ?>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="email">
|
||||||
|
<span><?php echo $_SESSION['email']?></span>
|
||||||
|
</div>
|
||||||
|
<div class="manage-button">
|
||||||
|
<?php
|
||||||
|
|
||||||
|
if(strpos($_SERVER['REQUEST_URI'], 'account'))
|
||||||
|
echo '<div class="container" onclick="openLinks(\'headlines.php\')">
|
||||||
|
<span>
|
||||||
|
Browse latest news articles
|
||||||
|
</span>
|
||||||
|
</div>';
|
||||||
|
else
|
||||||
|
echo '<div class="container" onclick="openLinks(\'account/home.php\')">
|
||||||
|
<span>
|
||||||
|
Manage your account
|
||||||
|
</span>
|
||||||
|
</div>';
|
||||||
|
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="middle-div">
|
||||||
|
<div class="container" <?php if($_SESSION['googleID'] == 0) echo 'onclick="logOut(\'#login\')"' ?>>
|
||||||
|
<div class="google">
|
||||||
|
<div>
|
||||||
|
<i class="fab fa-google icon"></i>
|
||||||
|
</div>
|
||||||
|
<span>
|
||||||
|
<?php
|
||||||
|
if($_SESSION['googleID'] == 0) echo 'Sign in with Google';
|
||||||
|
else echo 'Signed in';
|
||||||
|
?>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container" <?php if($_SESSION['facebookID'] == 0) echo 'onclick="logOut(\'#login\')"' ?>>
|
||||||
|
<div class="facebook">
|
||||||
|
<div>
|
||||||
|
<i class="fab fa-facebook icon"></i>
|
||||||
|
</div>
|
||||||
|
<span>
|
||||||
|
<?php
|
||||||
|
if($_SESSION['facebookID'] == 0) echo 'Sign in with Facebook';
|
||||||
|
else echo 'Signed in';
|
||||||
|
?>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container" <?php if($_SESSION['githubID'] == 0) echo 'onclick="logOut(\'#login\')"' ?>>
|
||||||
|
<div class="github">
|
||||||
|
<div>
|
||||||
|
<i class="fab fa-github icon"></i>
|
||||||
|
</div>
|
||||||
|
<span>
|
||||||
|
<?php
|
||||||
|
if($_SESSION['githubID'] == 0) echo 'Sign in with Github';
|
||||||
|
else echo 'Signed in';
|
||||||
|
?>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-div">
|
||||||
|
<div class="sign-out">
|
||||||
|
<div class="button-container" onclick="<?php if(strpos($_SERVER['REQUEST_URI'], 'account')) echo 'logout(\'\')'; else echo 'logOut(\'\')';?>">
|
||||||
|
<span>
|
||||||
|
Sign out
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="inner-container">
|
||||||
|
<span>About</span>
|
||||||
|
<span>Settings</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
@ -72,147 +72,6 @@
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="nav-right-side" id="navigation-bar-right">
|
<?php include 'navigation-bar-right.php' ?>
|
||||||
<a href="#" class="login link <?php if(isset($_SESSION['id'])) echo 'disable'?>" id="login-button" onclick="manageLoginOptions()">Log in</a>
|
|
||||||
|
|
||||||
<div class="outter-container border-radius-50 pointer <?php if(!isset($_SESSION['id'])) echo 'disable'?>" id="outter-container">
|
|
||||||
<div>
|
|
||||||
<?php
|
|
||||||
if($_SESSION['profile_choice'] == 0)
|
|
||||||
echo ('<div class="img small" onclick="manageExtraProfileOptions()"><img src="'.$_SESSION['profile_img'].'" class="imga"></div>');
|
|
||||||
else if($_SESSION['profile_choice'] == 1)
|
|
||||||
echo ('<div class="img small" onclick="manageExtraProfileOptions()" style="background-color: '.$_SESSION['profile_color'].';">
|
|
||||||
<div class="letter">
|
|
||||||
<span>'.$_SESSION['letter'].'</span>
|
|
||||||
</div>
|
|
||||||
</div>');
|
|
||||||
else if($_SESSION['profile_choice'] == 2)
|
|
||||||
echo ('<div class="img small" onclick="manageExtraProfileOptions()"><img src="'.$_SESSION['google_profile_img'].'" class="imga"></div>');
|
|
||||||
else if($_SESSION['profile_choice'] == 3)
|
|
||||||
echo ('<div class="img small" onclick="manageExtraProfileOptions()"><img src="'.$_SESSION['facebook_profile_img'].'" class="imga"></div>');
|
|
||||||
else if($_SESSION['profile_choice'] == 4)
|
|
||||||
echo ('<div class="img small" onclick="manageExtraProfileOptions()"><img src="'.$_SESSION['github_profile_img'].'" class="imga"></div>');
|
|
||||||
?>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<span class="tooltiptext tooltiptextTop90">
|
|
||||||
<div><strong>Personal Information</strong></div>
|
|
||||||
<div class=" <?php if(!isset($_SESSION['name']) && !isset($_SESSION['surname'])) echo 'disable'?> ">
|
|
||||||
<span class="tooltiptext-name">
|
|
||||||
<?php echo $_SESSION['name'].' '.$_SESSION['surname'];?>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span class="tooltiptext-name">
|
|
||||||
<?php echo $_SESSION['email']?>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<aside class="profile-extra-options absolute disable" id="profile-extra-options">
|
|
||||||
<div class="top-div">
|
|
||||||
<div class="img-container">
|
|
||||||
<div class="img-middle">
|
|
||||||
<div>
|
|
||||||
<?php
|
|
||||||
if($_SESSION['profile_choice'] == 0)
|
|
||||||
echo ('<div class="img big" onclick="openLinks(\'account.php\')" ><img src="'.$_SESSION['profile_img'].'" class="imga"></div>');
|
|
||||||
else if($_SESSION['profile_choice'] == 1)
|
|
||||||
echo ('<div class="img big" onclick="openLinks(\'account.php\')" style="background-color: '.$_SESSION['profile_color'].';">
|
|
||||||
<div class="letter">
|
|
||||||
<span>'.$_SESSION['letter'].'</span>
|
|
||||||
</div>
|
|
||||||
</div>');
|
|
||||||
else if($_SESSION['profile_choice'] == 2)
|
|
||||||
echo ('<div class="img big" onclick="openLinks(\'account.php\')"><img src="'.$_SESSION['google_profile_img'].'" class="imga"></div>');
|
|
||||||
else if($_SESSION['profile_choice'] == 3)
|
|
||||||
echo ('<div class="img big" onclick="openLinks(\'account.php\')"><img src="'.$_SESSION['facebook_profile_img'].'" class="imga"></div>');
|
|
||||||
else if($_SESSION['profile_choice'] == 4)
|
|
||||||
echo ('<div class="img big" onclick="openLinks(\'account.php\')"><img src="'.$_SESSION['github_profile_img'].'" class="imga"></div>');
|
|
||||||
?>
|
|
||||||
</div>
|
|
||||||
<div class="camera-container">
|
|
||||||
<i class="far fa-camera"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="full-name <?php if(!isset($_SESSION['name']) && !isset($_SESSION['surname'])) echo 'disable'?>">
|
|
||||||
<span>
|
|
||||||
<?php echo $_SESSION['name'].' '.$_SESSION['surname']; ?>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="email">
|
|
||||||
<span><?php echo $_SESSION['email']?></span>
|
|
||||||
</div>
|
|
||||||
<div class="manage-button">
|
|
||||||
<div class="container" onclick="openLinks('account.php')">
|
|
||||||
<span>
|
|
||||||
Manage your account
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="middle-div">
|
|
||||||
<div class="container">
|
|
||||||
<div class="google" <?php if($_SESSION['googleID'] == 0) echo 'onclick="logOut(\'#login\')"' ?>>
|
|
||||||
<div>
|
|
||||||
<i class="fab fa-google icon"></i>
|
|
||||||
</div>
|
|
||||||
<span>
|
|
||||||
<?php
|
|
||||||
if($_SESSION['googleID'] == 0) echo 'Sign in with Google';
|
|
||||||
else echo 'Signed in';
|
|
||||||
?>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="container">
|
|
||||||
<div class="facebook" <?php if($_SESSION['facebookID'] == 0) echo 'onclick="logOut(\'#login\')"' ?>>
|
|
||||||
<div>
|
|
||||||
<i class="fab fa-facebook icon"></i>
|
|
||||||
</div>
|
|
||||||
<span>
|
|
||||||
<?php
|
|
||||||
if($_SESSION['facebookID'] == 0) echo 'Sign in with Facebook';
|
|
||||||
else echo 'Signed in';
|
|
||||||
?>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="container">
|
|
||||||
<div class="github" <?php if($_SESSION['githubID'] == 0) echo 'onclick="logOut(\'#login\')"' ?>>
|
|
||||||
<div>
|
|
||||||
<i class="fab fa-github icon"></i>
|
|
||||||
</div>
|
|
||||||
<span>
|
|
||||||
<?php
|
|
||||||
if($_SESSION['githubID'] == 0) echo 'Sign in with Github';
|
|
||||||
else echo 'Signed in';
|
|
||||||
?>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom-div">
|
|
||||||
<div class="sign-out">
|
|
||||||
<div class="button-container" onclick="logOut('')">
|
|
||||||
<span>
|
|
||||||
Sign out
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="footer">
|
|
||||||
<div class="container">
|
|
||||||
<div class="inner-container">
|
|
||||||
<span>About</span>
|
|
||||||
<span>Settings</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
</nav>
|
</nav>
|
||||||
56
add-ons/profileImg.php
Normal file
56
add-ons/profileImg.php
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
<div class="main-img-container" id="main-img-container">
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<h1>Change Profile Image</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="img-text">
|
||||||
|
<p>Select image from your computer or type in a link</p>
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<div class="img medium add" onclick="manageInsertContainer()">
|
||||||
|
<div>
|
||||||
|
<i class="fal fa-plus fa-lg"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="img medium add">
|
||||||
|
<div>
|
||||||
|
<i class="far fa-link"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<section class="insert-photo-container" id="insert-photo-container" onclick="openFolder()">
|
||||||
|
<div class="main-insert-photo-container">
|
||||||
|
<div class="img-text">
|
||||||
|
<p>Click on grey area and add image</p>
|
||||||
|
</div>
|
||||||
|
<div class="select-img">
|
||||||
|
<div class="icon">
|
||||||
|
<i class="fab fa-dropbox"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<div class="file-name">
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<div>
|
||||||
|
Upload
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
<section class="color-img">
|
||||||
|
<div class="img-text">
|
||||||
|
<p>Select image from your computer or type in a link</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<div class="x" onclick="showProfileImg()" >
|
||||||
|
<div>
|
||||||
|
<i class="fal fa-times x-icon fa-lg"aria-hidden="true"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -19,15 +19,20 @@
|
||||||
<div class="icon"><i class="fas fa-bookmark fa-lg"></i></div>
|
<div class="icon"><i class="fas fa-bookmark fa-lg"></i></div>
|
||||||
<div><a href="#" class="side-menu-categories">Saved news</a></div>
|
<div><a href="#" class="side-menu-categories">Saved news</a></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sidebar-line"><hr></div>
|
<div class="sidebar-line">
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
<div class="sidebar-category" onclick="createUrlPath('covid-19')">
|
<div class="sidebar-category" onclick="createUrlPath('covid-19')">
|
||||||
<div class="icon"><i class="fad fa-shield-cross fa-lg"></i></div>
|
<div class="icon"><i class="fad fa-shield-cross fa-lg"></i></div>
|
||||||
<div><a href="#" class="side-menu-categories">COVID-19</a></div>
|
<div><a href="#" class="side-menu-categories">COVID-19</a></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sidebar-line"><hr></div>
|
<div class="sidebar-line">
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
<div class="categories">
|
<div class="categories">
|
||||||
<div class="sidebar-category" onclick="createUrlPath('world')">
|
<div class="sidebar-category" onclick="createUrlPath('world')">
|
||||||
<div class="icon"><i class="fad fa-globe-europe fa-lg"></i></div>
|
<div class="icon"><i class="fad fa-globe-europe fa-lg"></i>
|
||||||
|
</div>
|
||||||
<div><a href="#" class="side-menu-categories">World</a></div>
|
<div><a href="#" class="side-menu-categories">World</a></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sidebar-category" onclick="createUrlPath('business')">
|
<div class="sidebar-category" onclick="createUrlPath('business')">
|
||||||
|
|
@ -36,11 +41,13 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="sidebar-category" onclick="createUrlPath('technology')">
|
<div class="sidebar-category" onclick="createUrlPath('technology')">
|
||||||
<div class="icon"><i class="fad fa-microchip fa-lg"></i></div>
|
<div class="icon"><i class="fad fa-microchip fa-lg"></i></div>
|
||||||
<div><a href="#" class="side-menu-categories">Technology</a></div>
|
<div><a href="#" class="side-menu-categories">Technology</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sidebar-category" onclick="createUrlPath('entertainment')">
|
<div class="sidebar-category" onclick="createUrlPath('entertainment')">
|
||||||
<div class="icon"><i class="fas fa-camera-movie"></i></div>
|
<div class="icon"><i class="fas fa-camera-movie"></i></div>
|
||||||
<div><a href="#" class="side-menu-categories">Entertainment</a></div>
|
<div><a href="#" class="side-menu-categories">Entertainment</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sidebar-category" onclick="createUrlPath('sports')">
|
<div class="sidebar-category" onclick="createUrlPath('sports')">
|
||||||
<div class="icon"><i class="fas fa-tennis-ball fa-lg"></i></div>
|
<div class="icon"><i class="fas fa-tennis-ball fa-lg"></i></div>
|
||||||
|
|
@ -51,24 +58,30 @@
|
||||||
<div><a href="#" class="side-menu-categories">Health</a></div>
|
<div><a href="#" class="side-menu-categories">Health</a></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sidebar-line"><hr></div>
|
<div class="sidebar-line">
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
<div class="other">
|
<div class="other">
|
||||||
<div class="sidebar-category country" id="show-countries-button" onclick="showSelectCountry()">
|
<div class="sidebar-category country" id="show-countries-button"
|
||||||
|
onclick="showSelectCountry()">
|
||||||
<div class="sidebar-country-container grid">
|
<div class="sidebar-country-container grid">
|
||||||
<span>Language & Region</span>
|
<span>Language & Region</span>
|
||||||
<strong id="country-name-side-menu">
|
<strong id="country-name-side-menu">
|
||||||
<?php
|
<?php
|
||||||
if(isset($_SESSION['country'])) echo $_SESSION['country'][0];
|
if(isset($_SESSION['country']) && $_SESSION['country'][0] != null) echo $_SESSION['country'][0];
|
||||||
else echo 'United States';
|
else echo 'United States';
|
||||||
?>
|
?>
|
||||||
</strong>
|
</strong>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sidebar-category">
|
<div class="sidebar-category">
|
||||||
<div class="text"><a href="#" class="side-menu-categories" onclick="createUrlPath('sources')">Sources</a></div>
|
<div class="text"><a href="#" class="side-menu-categories"
|
||||||
|
onclick="createUrlPath('sources')">Sources</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sidebar-category">
|
<div class="sidebar-category">
|
||||||
<div class="text"><a href="#" onclick="createUrlPath('settings')">Settings</a>
|
<div class="text"><a href="#"
|
||||||
|
onclick="createUrlPath('settings')">Settings</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sidebar-category">
|
<div class="sidebar-category">
|
||||||
|
|
@ -81,8 +94,10 @@
|
||||||
</div>
|
</div>
|
||||||
<footer>
|
<footer>
|
||||||
<div class="about text"><a href="#" onclick="createUrlPath('about')">About</a></div>
|
<div class="about text"><a href="#" onclick="createUrlPath('about')">About</a></div>
|
||||||
<div><span class="flex align-center justify-center" style="color: var(--font-medium);">•</span></div>
|
<div><span class="flex align-center justify-center"
|
||||||
<div class="text"><a href="https://newsapi.org/" target="_blank" id="news-api-link">News Api</a> </div>
|
style="color: var(--font-medium);">•</span></div>
|
||||||
|
<div class="text"><a href="https://newsapi.org/" target="_blank" id="news-api-link">News
|
||||||
|
Api</a> </div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,66 @@ class Check extends Dbh {
|
||||||
echo 'success';
|
echo 'success';
|
||||||
} else echo 'wrong password';
|
} else echo 'wrong password';
|
||||||
}
|
}
|
||||||
|
public function pswSet() {
|
||||||
|
if (session_status() == PHP_SESSION_NONE) session_start();
|
||||||
|
$string = '';
|
||||||
|
if($_SESSION['password-set'] != 'Not set') {
|
||||||
|
$string = '<div class="psw-old-container">
|
||||||
|
<div class="input-container">
|
||||||
|
<div class="label-container">
|
||||||
|
<label for="psw-old-input">Old Password</label>
|
||||||
|
</div>
|
||||||
|
<input type="password" name="password" id="psw-old-input" autocomplete="off">
|
||||||
|
</div>
|
||||||
|
<div class="eye-icon-container" onclick="managePasswordVisibility(this)">
|
||||||
|
<div>
|
||||||
|
<i class="far fa-eye fa-lg disable"></i>
|
||||||
|
<i class="far fa-eye-slash fa-lg"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>';
|
||||||
|
}
|
||||||
|
echo $string.'<div class="psw-container">
|
||||||
|
<div class="input-container">
|
||||||
|
<div class="label-container">
|
||||||
|
<label for="psw-input">New Password</label>
|
||||||
|
</div>
|
||||||
|
<input type="password" name="password" id="psw-input" autocomplete="off">
|
||||||
|
</div>
|
||||||
|
<div class="eye-icon-container" onclick="managePasswordVisibility(this)">
|
||||||
|
<div>
|
||||||
|
<i class="far fa-eye fa-lg disable"></i>
|
||||||
|
<i class="far fa-eye-slash fa-lg"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="psw-repeat-container">
|
||||||
|
<div class="input-container">
|
||||||
|
<div class="label-container">
|
||||||
|
<label for="psw-repeat-input">Repeat</label>
|
||||||
|
</div>
|
||||||
|
<input type="password" name="password-repeat" id="psw-repeat-input" autocomplete="off">
|
||||||
|
</div>
|
||||||
|
<div class="eye-icon-container" onclick="managePasswordVisibility(this)">
|
||||||
|
<div>
|
||||||
|
<i class="far fa-eye fa-lg disable"></i>
|
||||||
|
<i class="far fa-eye-slash fa-lg"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="error psw disable">
|
||||||
|
<div class="red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="button-container">
|
||||||
|
<div class="inner-container">
|
||||||
|
<a href="personal.php">Back</a>
|
||||||
|
</div>
|
||||||
|
<div class="inner-container">
|
||||||
|
<div class="blue-button" onclick="check.psw()">Next</div>
|
||||||
|
</div>
|
||||||
|
</div>';
|
||||||
|
die;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$checkObj = new Check();
|
$checkObj = new Check();
|
||||||
|
|
@ -44,4 +104,4 @@ $checkObj = new Check();
|
||||||
if($_SERVER['REQUEST_METHOD'] !== 'POST') return;
|
if($_SERVER['REQUEST_METHOD'] !== 'POST') return;
|
||||||
if(isset($_POST['email'])) $checkObj->email(json_decode($_POST['email']));
|
if(isset($_POST['email'])) $checkObj->email(json_decode($_POST['email']));
|
||||||
else if(isset($_POST['login'])) $checkObj->login(json_decode($_POST['login']));
|
else if(isset($_POST['login'])) $checkObj->login(json_decode($_POST['login']));
|
||||||
|
else if(isset($_POST['pswSet'])) $checkObj->pswSet();
|
||||||
|
|
|
||||||
|
|
@ -26,6 +26,17 @@ class Session extends Dbh {
|
||||||
$_SESSION['githubID'] = $this->checkIfStringNull($row['githubID']);
|
$_SESSION['githubID'] = $this->checkIfStringNull($row['githubID']);
|
||||||
$_SESSION['country'] = $this->getCountryWithID($row['country_id']);
|
$_SESSION['country'] = $this->getCountryWithID($row['country_id']);
|
||||||
$_SESSION['letter'] = strtoupper($email[0]);
|
$_SESSION['letter'] = strtoupper($email[0]);
|
||||||
|
if($row['password'] == null) $_SESSION['password-set'] = 'Not set';
|
||||||
|
else $_SESSION['password-set'] = '••••••••••';
|
||||||
|
$_SESSION['admin'] = $this->checkIfUserIsAdmin($email);
|
||||||
|
}
|
||||||
|
public function checkIfUserIsAdmin($email) {
|
||||||
|
$sql = 'SELECT * FROM admins WHERE user_id = (SELECT id FROM users WHERE email = ?);';
|
||||||
|
$stmt = $this->connect()->prepare($sql);
|
||||||
|
$stmt->execute([$email]);
|
||||||
|
$row = $stmt->fetch();
|
||||||
|
if($row) return 'yes';
|
||||||
|
else return 'no';
|
||||||
}
|
}
|
||||||
public function checkIfStringNull($string) {
|
public function checkIfStringNull($string) {
|
||||||
if($string == null) return 0;
|
if($string == null) return 0;
|
||||||
|
|
|
||||||
110
include/update.inc.php
Normal file
110
include/update.inc.php
Normal file
|
|
@ -0,0 +1,110 @@
|
||||||
|
<?php include_once 'db.inc.php';
|
||||||
|
if (session_status() == PHP_SESSION_NONE) session_start();
|
||||||
|
|
||||||
|
|
||||||
|
class update extends Dbh {
|
||||||
|
|
||||||
|
public function name($userInfo) {
|
||||||
|
|
||||||
|
if(empty($userInfo[0]) || empty($userInfo[1])) {
|
||||||
|
echo 'empty';
|
||||||
|
die;
|
||||||
|
}
|
||||||
|
$sql = 'UPDATE users SET name = ? WHERE email = ?';
|
||||||
|
$stmt = $this->connect()->prepare($sql);
|
||||||
|
$stmt->execute([$userInfo[0], $_SESSION['email']]);
|
||||||
|
|
||||||
|
$sql = 'UPDATE users SET surname = ? WHERE email = ?';
|
||||||
|
$stmt = $this->connect()->prepare($sql);
|
||||||
|
$stmt->execute([$userInfo[1], $_SESSION['email']]);
|
||||||
|
$this->setSessionVariables($_SESSION['email']);
|
||||||
|
echo 'success';
|
||||||
|
}
|
||||||
|
public function gender($userInfo) {
|
||||||
|
$sql = 'UPDATE users SET gender = ? WHERE email = ?';
|
||||||
|
$stmt = $this->connect()->prepare($sql);
|
||||||
|
$stmt->execute([$userInfo[0], $_SESSION['email']]);
|
||||||
|
$this->setSessionVariables($_SESSION['email']);
|
||||||
|
echo 'success';
|
||||||
|
}
|
||||||
|
public function country($userInfo) {
|
||||||
|
$sql = 'UPDATE users SET country_id = (SELECT id FROM countries WHERE name = ?) WHERE email = ?';
|
||||||
|
$stmt = $this->connect()->prepare($sql);
|
||||||
|
$stmt->execute([$userInfo[0], $_SESSION['email']]);
|
||||||
|
$this->setSessionVariables($_SESSION['email']);
|
||||||
|
echo 'success';
|
||||||
|
}
|
||||||
|
|
||||||
|
public function setSessionVariables($email) {
|
||||||
|
include_once 'session.inc.php';
|
||||||
|
$session = new Session();
|
||||||
|
$session->setSession($email);
|
||||||
|
}
|
||||||
|
public function newPsw($userInfo) {
|
||||||
|
$this->checkPsw($userInfo);
|
||||||
|
$sql = 'UPDATE users SET password = ? WHERE email = ?';
|
||||||
|
$hashPsw = password_hash($userInfo[0], PASSWORD_DEFAULT);
|
||||||
|
$stmt = $this->connect()->prepare($sql);
|
||||||
|
$stmt->execute([$hashPsw, $_SESSION['email']]);
|
||||||
|
$this->setSessionVariables($_SESSION['email']);
|
||||||
|
echo 'success';
|
||||||
|
}
|
||||||
|
public function updatePswChangeTime() {
|
||||||
|
$sql = 'UPDATE users SET password_change = ? WHERE email = ?';
|
||||||
|
$d1 = new Datetime();
|
||||||
|
$d2 = $d1->format('U');
|
||||||
|
$stmt = $this->connect()->prepare($sql);
|
||||||
|
$stmt->execute([$d2, $_SESSION['email']]);
|
||||||
|
}
|
||||||
|
public function checkPsw($userInfo) {
|
||||||
|
if((empty($userInfo[0]) || empty($userInfo[1]) || ($userInfo[0] != $userInfo[1]) || $userInfo[0]) > 20) {
|
||||||
|
if(empty($userInfo[0]) || empty($userInfo[1])) echo 'empty';
|
||||||
|
else if($userInfo[0] != $userInfo[1]) echo 'do not match';
|
||||||
|
else if(strlen($userInfo[0]) > 20) echo 'password too long';
|
||||||
|
die;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public function oldPsw($userInfo) {
|
||||||
|
$this->checkPsw([$userInfo[1], $userInfo[2]]);
|
||||||
|
if(empty($userInfo[0])) {
|
||||||
|
echo 'empty';
|
||||||
|
die;
|
||||||
|
} else if(strlen($userInfo[0]) < 6) {
|
||||||
|
echo 'too short';
|
||||||
|
die;
|
||||||
|
}
|
||||||
|
if($this->ifPswIsCorrect($userInfo[0]) == 'wrong password') {
|
||||||
|
echo 'wrong password';
|
||||||
|
die;
|
||||||
|
}
|
||||||
|
$sql = 'UPDATE users SET password = ? WHERE email = ?';
|
||||||
|
$hashPsw = password_hash($userInfo[1], PASSWORD_DEFAULT);
|
||||||
|
$stmt = $this->connect()->prepare($sql);
|
||||||
|
$stmt->execute([$hashPsw, $_SESSION['email']]);
|
||||||
|
$this->updatePswChangeTime();
|
||||||
|
echo 'success';
|
||||||
|
}
|
||||||
|
public function ifPswIsCorrect($psw) {
|
||||||
|
|
||||||
|
$sql = 'SELECT * FROM users WHERE email = ?';
|
||||||
|
$stmt = $this->connect()->prepare($sql);
|
||||||
|
$stmt->execute([$_SESSION['email']]);
|
||||||
|
$row = $stmt->fetch();
|
||||||
|
|
||||||
|
if(password_verify($psw, $row['password'])) {
|
||||||
|
$this->setSessionVariables($_SESSION['email']);
|
||||||
|
return 'success';
|
||||||
|
} else return 'wrong password';
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
$updateObj = new Update();
|
||||||
|
|
||||||
|
if($_SERVER['REQUEST_METHOD'] !== 'POST') return;
|
||||||
|
else if(isset($_POST['name'])) $updateObj->name(json_decode($_POST['name']));
|
||||||
|
else if(isset($_POST['gender'])) $updateObj->gender(json_decode($_POST['gender']));
|
||||||
|
else if(isset($_POST['country'])) $updateObj->country(json_decode($_POST['country']));
|
||||||
|
else if(isset($_POST['newPsw'])) $updateObj->newPsw(json_decode($_POST['newPsw']));
|
||||||
|
else if(isset($_POST['oldPsw'])) $updateObj->oldPsw(json_decode($_POST['oldPsw']));
|
||||||
Loading…
Reference in a new issue