Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • ludda756/TDDD27
1 result
Show changes
Hide whitespace changes
Inline Side-by-side
frontend/src/styles/header.module.css
View file @ 67368d6a
...@@ -4,14 +4,17 @@ margin: 0; ...@@ -4,14 +4,17 @@ margin: 0;
padding: 10px; padding: 10px;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center;
} }
.button { .button {
appearance: none; appearance: none;
background-color: rgb(255, 240, 153); background-color: #ffffff;
border: 0.125em solid #383838; border: 0.125em solid #000000;
border-radius: 0.9375em; border-radius: 5px;
box-sizing: border-box; box-sizing: border-box;
color: #383838; color: #000000;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
...@@ -36,8 +39,9 @@ justify-content: flex-end; ...@@ -36,8 +39,9 @@ justify-content: flex-end;
} }
.button:hover { .button:hover {
color: #fff; color: #ffffff;
background-color: #1A1A1A; background-color: #292929;
border: 0.125em solid #4DA1A9;
box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px; box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
transform: translateY(-2px); transform: translateY(-2px);
} }
......
frontend/src/styles/loading.module.css 0 → 100644
View file @ 67368d6a
.background{
width: 100vw;
height: 100vh;
position: fixed;
background-color: rgba(0, 0, 0, 0.342);
}
.loadingspinner {
--square: 26px;
--offset: 30px;
--duration: 2.4s;
--delay: 0.2s;
--timing-function: ease-in-out;
--in-duration: 0.4s;
--in-delay: 0.1s;
--in-timing-function: ease-out;
width: calc(3 * var(--offset) + var(--square));
height: calc(2 * var(--offset) + var(--square));
padding: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 30px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.loadingspinner div {
display: inline-block;
background: rgb(255, 255, 255);
/*background: var(--text-color);*/
/*box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);*/
border: none;
border-radius: 2px;
width: var(--square);
height: var(--square);
position: absolute;
padding: 0px;
margin: 0px;
font-size: 6pt;
color: black;
}
.loadingspinner #square1 {
left: calc(0 * var(--offset));
top: calc(0 * var(--offset));
animation: square1 var(--duration) var(--delay) var(--timing-function) infinite,
squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;
}
.loadingspinner #square2 {
left: calc(0 * var(--offset));
top: calc(1 * var(--offset));
animation: square2 var(--duration) var(--delay) var(--timing-function) infinite,
squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;
}
.loadingspinner #square3 {
left: calc(1 * var(--offset));
top: calc(1 * var(--offset));
animation: square3 var(--duration) var(--delay) var(--timing-function) infinite,
squarefadein var(--in-duration) calc(2 * var(--in-delay)) var(--in-timing-function) both;
}
.loadingspinner #square4 {
left: calc(2 * var(--offset));
top: calc(1 * var(--offset));
animation: square4 var(--duration) var(--delay) var(--timing-function) infinite,
squarefadein var(--in-duration) calc(3 * var(--in-delay)) var(--in-timing-function) both;
}
.loadingspinner #square5 {
left: calc(3 * var(--offset));
top: calc(1 * var(--offset));
animation: square5 var(--duration) var(--delay) var(--timing-function) infinite,
squarefadein var(--in-duration) calc(4 * var(--in-delay)) var(--in-timing-function) both;
}
@keyframes square1 {
0% {
left: calc(0 * var(--offset));
top: calc(0 * var(--offset));
}
8.333% {
left: calc(0 * var(--offset));
top: calc(1 * var(--offset));
}
100% {
left: calc(0 * var(--offset));
top: calc(1 * var(--offset));
}
}
@keyframes square2 {
0% {
left: calc(0 * var(--offset));
top: calc(1 * var(--offset));
}
8.333% {
left: calc(0 * var(--offset));
top: calc(2 * var(--offset));
}
16.67% {
left: calc(1 * var(--offset));
top: calc(2 * var(--offset));
}
25.00% {
left: calc(1 * var(--offset));
top: calc(1 * var(--offset));
}
83.33% {
left: calc(1 * var(--offset));
top: calc(1 * var(--offset));
}
91.67% {
left: calc(1 * var(--offset));
top: calc(0 * var(--offset));
}
100% {
left: calc(0 * var(--offset));
top: calc(0 * var(--offset));
}
}
@keyframes square3 {
0%,
100% {
left: calc(1 * var(--offset));
top: calc(1 * var(--offset));
}
16.67% {
left: calc(1 * var(--offset));
top: calc(1 * var(--offset));
}
25.00% {
left: calc(1 * var(--offset));
top: calc(0 * var(--offset));
}
33.33% {
left: calc(2 * var(--offset));
top: calc(0 * var(--offset));
}
41.67% {
left: calc(2 * var(--offset));
top: calc(1 * var(--offset));
}
66.67% {
left: calc(2 * var(--offset));
top: calc(1 * var(--offset));
}
75.00% {
left: calc(2 * var(--offset));
top: calc(2 * var(--offset));
}
83.33% {
left: calc(1 * var(--offset));
top: calc(2 * var(--offset));
}
91.67% {
left: calc(1 * var(--offset));
top: calc(1 * var(--offset));
}
}
@keyframes square4 {
0% {
left: calc(2 * var(--offset));
top: calc(1 * var(--offset));
}
33.33% {
left: calc(2 * var(--offset));
top: calc(1 * var(--offset));
}
41.67% {
left: calc(2 * var(--offset));
top: calc(2 * var(--offset));
}
50.00% {
left: calc(3 * var(--offset));
top: calc(2 * var(--offset));
}
58.33% {
left: calc(3 * var(--offset));
top: calc(1 * var(--offset));
}
100% {
left: calc(3 * var(--offset));
top: calc(1 * var(--offset));
}
}
@keyframes square5 {
0% {
left: calc(3 * var(--offset));
top: calc(1 * var(--offset));
}
50.00% {
left: calc(3 * var(--offset));
top: calc(1 * var(--offset));
}
58.33% {
left: calc(3 * var(--offset));
top: calc(0 * var(--offset));
}
66.67% {
left: calc(2 * var(--offset));
top: calc(0 * var(--offset));
}
75.00% {
left: calc(2 * var(--offset));
top: calc(1 * var(--offset));
}
100% {
left: calc(2 * var(--offset));
top: calc(1 * var(--offset));
}
}
@keyframes squarefadein {
0% {
transform: scale(0.75);
opacity: 0.0;
}
100% {
transform: scale(1.0);
opacity: 1.0;
}
}
\ No newline at end of file
frontend/src/styles/login.module.css
View file @ 67368d6a
p{
font-size: 18px;
}
.parent{ .parent{
display: flex; display: flex;
height: 100vh; height: 100vh;
} }
.arrow{
position: absolute;
justify-self: left;
margin: 15px;
width: 40px;
height: 40px;
border-radius: 50%;
background: #c0c0c0;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
transition-duration: 400ms;
color: rgb(0, 0, 0);
}
.arrow:hover{
width: 48px;
height: 48px;
}
.arrow:hover a{
font-size: 120%;
}
.arrow a{
color: #000000;
font-size: 120%;
justify-self: center;
align-items: center;
justify-content: center;
display: flex;
}
.left{ .left{
width: 30%; width: 30%;
background: rgb(49, 117, 121); background: #ffffff;
border-right: solid 4px rgb(255, 240, 153); border-right: solid 4px #000000;
box-shadow: 200px 300px 300px 400px rgba(8, 8, 8, 0.863); box-shadow: 200px 300px 300px 400px rgba(8, 8, 8, 0.863);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
text-align: center;
} }
.left h1{ .left h1{
margin: 10; margin: 10;
font-size: 300%; font-size: 300%;
color: rgb(255, 240, 153); color: #203ec5;
text-align: center; text-align: center;
} }
.right{ .right{
width: 70%; width: 70%;
...@@ -43,7 +83,7 @@ ...@@ -43,7 +83,7 @@
border-radius: .5rem; border-radius: .5rem;
padding: 0 1rem; padding: 0 1rem;
border: 2px solid transparent; border: 2px solid transparent;
font-size: 1rem; font-size: 20px;
transition: border-color .3s cubic-bezier(.25,.01,.25,1) 0s, color .3s cubic-bezier(.25,.01,.25,1) 0s,background .2s cubic-bezier(.25,.01,.25,1) 0s; transition: border-color .3s cubic-bezier(.25,.01,.25,1) 0s, color .3s cubic-bezier(.25,.01,.25,1) 0s,background .2s cubic-bezier(.25,.01,.25,1) 0s;
} }
...@@ -52,17 +92,19 @@ ...@@ -52,17 +92,19 @@
margin-bottom: .3rem; margin-bottom: .3rem;
font-size: .9rem; font-size: .9rem;
font-weight: bold; font-weight: bold;
color: #05060f99; color: #00000099;
transition: color .3s cubic-bezier(.25,.01,.25,1) 0s; transition: color .3s cubic-bezier(.25,.01,.25,1) 0s;
} }
.input:hover, .input:focus, .input-group:hover .input { .input:hover, .input:focus, .input-group:hover .input {
outline: none; outline: none;
border-color: #05060f; border-color: #000000;
} }
.input-group:hover .label, .input:focus { .input-group:hover .label, .input:focus {
color: #05060fc2; color: #000000c2;
} }
.inputs{ .inputs{
margin: 15px; margin: 15px;
...@@ -77,11 +119,11 @@ ...@@ -77,11 +119,11 @@
} }
.button { .button {
appearance: none; appearance: none;
background-color: rgb(255, 240, 153); background-color: #ffffff;
border: 0.125em solid #383838; border: 0.125em solid #000000;
border-radius: 0.9375em; border-radius: 5px;
box-sizing: border-box; box-sizing: border-box;
color: #383838; color: #000000;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
...@@ -106,8 +148,9 @@ ...@@ -106,8 +148,9 @@
} }
.button:hover { .button:hover {
color: #fff; color: #ffffff;
background-color: #1A1A1A; background-color: #292929;
border: 0.125em solid #5e5e5e;
box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px; box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
transform: translateY(-2px); transform: translateY(-2px);
} }
......
frontend/src/styles/profile.module.css 0 → 100644
View file @ 67368d6a
h1{
font-size: 50px;
text-align: center;
}
h2{
margin: 0;
}
h3{
margin: 20px;
}
.picture {
width: 250px;
height: 250px;
border-radius: 50%;
object-fit: cover;
display: block;
overflow: hidden;
margin: 20px auto;
border: 3px solid rgb(0, 0, 0);
}
.profile{
background: rgb(255, 255, 255);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 5px;
border: 2px solid rgb(0, 0, 0);
box-shadow: 0 8px 23px 0 rgba(37, 37, 37, 0.562);
text-align: center;
width: 40vw;
margin: 100px auto;
min-height: 50vh;
}
.header{
max-width: 100vw;
min-height: 10vh;
margin: 0;
background-color: rgb(255, 255, 255);
box-sizing: border-box;
text-align: center;
}
.text_container{
display: flex;
flex-direction: row;
justify-content: center;
text-align: center;
justify-content: center;
align-items: center;
text-decoration: none;
}
.text_container Link{
text-decoration: none;
}
frontend/src/styles/styles.module.css
View file @ 67368d6a
p{ p{
color:white; font-family: 'Outfit', sans-serif;
} }
input{ input{
font-family: 'Poppins', sans-serif; text-align: start;
margin-left:10px;
}
textarea{
text-align: start;
margin-left:10px;
} }
.Header{ .Header{
height: 90vh; height: 90vh;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: rgb(49, 117, 121); background-color: #ffffff;
color: rgb(255, 255, 255); color: rgb(0, 0, 0);
flex-wrap: wrap; /* Add flex-wrap property to allow text to wrap */ flex-wrap: wrap; /* Add flex-wrap property to allow text to wrap */
} }
.Header p{ .Header p{
...@@ -22,14 +27,15 @@ input{ ...@@ -22,14 +27,15 @@ input{
} }
.Header h1{ .Header h1{
margin: 0; margin: 0;
color: rgb(255, 240, 153); color: #000000;
font-size: 350%; font-size: 350%;
} }
.pick_file { .pick_file {
color: rgb(67, 1, 128);
font-size: 35px; font-size: 35px;
margin:0; margin:10px;
display: flex;
display: inline;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -44,7 +50,7 @@ input{ ...@@ -44,7 +50,7 @@ input{
display: flex; /* Add display flex to center image vertically */ display: flex; /* Add display flex to center image vertically */
align-items: center; /* Center image vertically */ align-items: center; /* Center image vertically */
justify-content: center; /* Center image horizontally */ justify-content: center; /* Center image horizontally */
} }
.image_container img { .image_container img {
...@@ -54,6 +60,7 @@ object-fit: cover; ...@@ -54,6 +60,7 @@ object-fit: cover;
} }
.text_container{ .text_container{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -64,30 +71,34 @@ object-fit: cover; ...@@ -64,30 +71,34 @@ object-fit: cover;
} }
.Header2{ .Header2{
height: 60vh; height: 70vh;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; background: #ffffff;
background: rgb(49, 117, 121);
flex-wrap: wrap; /* Add flex-wrap property to allow text to wrap */ flex-wrap: wrap; /* Add flex-wrap property to allow text to wrap */
} }
.card { .card {
flex: 1; margin: 30px;
margin: 0 45px; width: 400px;
max-width: 400px; height: 450px;
aspect-ratio: 1/1; /* Set aspect ratio to 1:1 */ margin: auto;
background: rgb(62, 121, 124); color: rgb(0, 0, 0);
border-radius: 10px; border-radius: 5px;
border: solid 3px black;
box-shadow: 0 8px 13px 0 rgba(41, 41, 43, 0.548); box-shadow: 0 8px 13px 0 rgba(41, 41, 43, 0.548);
text-align: center; text-align: center;
color: rgb(255, 240, 153); background: #ffffff;
}
.card h1{
font-size: 250%;
color: #000000;
} }
.list{ .list{
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
color: rgb(255, 255, 255); background: #ffffff;
font-size: 120%; font-size: 120%;
} }
...@@ -96,10 +107,11 @@ object-fit: cover; ...@@ -96,10 +107,11 @@ object-fit: cover;
margin-bottom: 15px; margin-bottom: 15px;
} }
.post_container{ .post_container{
min-height: 35vh; min-height: 35vh;
margin: auto; margin: auto;
width: 50vw; width: 600px;
text-align: center; text-align: center;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -108,47 +120,75 @@ object-fit: cover; ...@@ -108,47 +120,75 @@ object-fit: cover;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border-radius: 10px; border-radius: 10px;
box-shadow: 0 8px 23px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);
box-align: center;
}
.post_container h1{
margin: auto;
margin-top: 10px;
} }
.post_input1{ .post_input1{
border: none; border: none;
background-color: rgb(11, 58, 58); background-color: rgb(26, 100, 100);
width: 300px; width: 500px;
height: 30px; height: 30px;
color: aliceblue; color: aliceblue;
outline: none; outline: none;
margin: 10px; margin-left: 50px;
margin-bottom: 10px;
margin-top: 15px; margin-top: 15px;
border-radius:4px;
} }
.post_input2{ .post_input2{
border: none; border: none;
background-color: rgb(11, 58, 58); background-color: rgb(26, 100, 100);
width: 1000px; width: 500px;
height: 200px; height: 100px;
color: aliceblue; color: rgb(0, 0, 0);
outline: none; outline: none;
margin: 10px; margin-left: 50px;
margin-bottom: 10px;
margin-right: 20px;
border-radius:4px;
} }
.post_container button{ .post_container button{
background: rgb(150, 172, 110); background: rgb(150, 172, 110);
color: white; color: rgb(0, 0, 0);
font-weight: bold; font-weight: bold;
font-size: 18px;
border: none; border: none;
width: 100px; width: 200px;
height: 40px; height: 80px;
margin-left: 15px; margin-left: 35%;
margin-bottom: 5px; margin-bottom: 25px;
font-family: 'Poppins', sans-serif;
border-radius: 5px; border-radius: 5px;
}
.upvote{
background-color: rgb(25, 100, 100);
height: 30px;
width:30px;
box-align: center;
font-size: 18px;
border-radius: 5px;
border: none;
color: white;
}
.upvote button{
background: rgb(150, 172, 110);
color: white;
margin: auto;
} }
.posts_container{ .posts_container{
min-height: 35vh; min-height: 35vh;
margin: auto; margin: auto;
margin-top: 30px; margin-top: 30px;
width: 50vw;
width: 900px;
text-align: center; text-align: center;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -157,5 +197,38 @@ object-fit: cover; ...@@ -157,5 +197,38 @@ object-fit: cover;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border-radius: 10px; border-radius: 10px;
box-shadow: 0 8px 23px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);
}
.post_img_container{
width: 300px; /* set width of image container */
height: 300px; /* set height of image container */
border-radius: 50%; /* make image container circular */
overflow: hidden;
display: flex; /* Add display flex to center image vertically */
align-items: center; /* Center image vertically */
justify-content: center; /* Center image horizontally */
margin-left: 5%;
margin-right: 10%;
margin-top:5%;
margin-bottom:5%;
}
.post_img_container img{
height: 100%;
width: 100%;
object-fit: cover;
}
.addpicture{
text-align: center;
margin-right: 30px;
margin-left:31%;
margin-bottom: 30px;
height:50px;
width:500px;
display:flex;
}
::placeholder {
color:aliceblue;
text-align: start;
} }
\ No newline at end of file
package-lock.json 0 → 100644
View file @ 67368d6a
{
"name": "TDDD27",
"lockfileVersion": 2,
"requires": true,
"packages": {}
}