sheptikhinv/survey-webapp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add page results

Browse source
This commit is contained in:
Tatiana Nikolaeva 2025-05-26 12:50:14 +05:00
parent 33f2b5ef62
commit 6b8197ce10
6 changed files with 396 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

149
SurveyFrontend/src/components/Results/Results.module.css
View file

@ -1,5 +1,148 @@
/*Results.module.css*/
/* Results.module.css */
.results{
.results {
width: 85%;
}
margin: 19px 30px;
}
.statsContainer {
display: flex;
justify-content: space-between;
align-items: stretch;
margin: 30px 0;
gap: 17px;
}
.statItem {
display: flex;
flex-direction: column;
border-radius: 15px;
min-height: 180px;
padding: 20px;
box-sizing: border-box;
position: relative;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.countAnswer {
width: 36%;
background-color: #65B953;
}
.completion_percentage {
width: 36%;
background-color: #EEDD59;
}
.status {
width: 24%;
background-color: #A763EB;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.statItem h3 {
margin: 0 0 15px 0;
color: #FFFFFF;
font-size: 28px;
font-weight: 600;
line-height: 1.2;
}
.result {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-top: auto;
}
.statItem p {
padding: 20px;
font-weight: 600;
font-size: 40px;
color: #FFFFFF;
margin: 0;
line-height: 1;
}
.countAnswer p,
.completion_percentage p {
font-size: 60px;
}
.imgGroup,
.imgSend {
width: 58px;
height: 61px;
align-self: flex-end;
}
.status p {
text-align: center;
margin-top: auto;
font-size: 32px;
}
.questionContainer {
display: flex;
flex-direction: column;
margin-bottom: 40px;
padding: 25px;
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.questionContent {
display: flex;
flex-direction: row;
gap: 40px;
align-items: flex-start;
width: 100%;
}
.textContainer {
display: flex;
flex-direction: column;
gap: 11px;
width: 30%;
min-width: 250px;
}
.questionContainer h3 {
font-size: 24px;
font-weight: 600;
color: #000000;
margin: 0;
}
.answerCount {
color: #000000;
font-size: 18px;
font-weight: 600;
}
.chartContainer {
flex: 1;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.pieContainer {
width: 100%;
height: 450px;
position: relative;
}
.barContainer {
width: 100%;
height: 450px;
display: flex;
justify-content: center;
align-items: center;
padding-right: 150px;
}