보라코딩

별점 평가하는 화면 (부트스트랩 + 보라색 사용ㅎㅎ) 본문

코딩/Spring

별점 평가하는 화면 (부트스트랩 + 보라색 사용ㅎㅎ)

new 보라 2023. 5. 31. 18:07

내가 좋아하는 보라색으로 화면 만들었다 :)

그냥 하려니까 너무 밋밋해서

배경색 지정하고 안에만 흰색으로 내용 쓰게 하는게 훨씬 낫다!

 

 

 

 

 

 

 

 

starComment.html

 

 

<!DOCTYPE html>
<html lagn="ko"
 xmlns:th="http://www.thymeleaf.org"
 xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<th:block th:replace="header_footer/header :: headerFragment"></th:block>

<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link rel="stylesheet" th:href="@{/css/store_css.css}">

 <style>
 #main {
/*min-height: 100vh;*/
 display: flex;
 align-items: center;
 justify-content: center;

 background: -webkit-gradient(linear, left bottom, right top, from(#dbc8f8), to(#f1d8ff));
 background: -webkit-linear-gradient(bottom left, #dbc8f8 0%, #f1d8ff 100%);
 background: -moz-linear-gradient(bottom left, #dbc8f8 0%, #f1d8ff 100%);
 background: -o-linear-gradient(bottom left, #dbc8f8 0%, #f1d8ff 100%);
 background: linear-gradient(to top right, #dbc8f8 0%, #f1d8ff 100%);
 }
.input-form {
max-width: 100%;

 margin-top: 80px;
 margin-bottom: 80px;
 padding: 32px;

 background: #fff;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 -webkit-box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15);
 -moz-box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15);
 box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15)
}


.star{
display: flex;
 direction: rtl;
 border:0;

 justify-content: center; /* 가운데 정렬 */
 align-items: center; /* 수직 정렬 */
 margin-top: 1em; /* 상단 여백 조정 */

 }
.star label {
font-size: 4em;
 color: transparent;
 text-shadow: 0 0 0 #f0f0f0;
 text-align: center; /* 가운데 정렬 */
 flex: 1;
 }

.star legend {
text-align: center;
 }
input[type=radio]{
display: none;
 }
.star label:hover{
text-shadow: 0 0 0 rgba(250, 208, 0, 0.99);
 }
.star label:hover ~ label{
text-shadow: 0 0 0 rgba(250, 208, 0, 0.99);
 }
.star input[type=radio]:checked ~ label{
text-shadow: 0 0 0 rgba(250, 208, 0, 0.99);
 }
.disable {
background-color: darkgray;
 }
.container2 {
width: 100%;
 }
.yellow{
color : #FFA500;
 }

</style>


</head>
<body>

 <div class="text-center" id="main">
 <div class="input-form-backgroud">

 <form class="input-form" th:action="@{/store/starComment}" method="post">

 <h2 class="purple2 mt-4" >식사는 즐거우셨나요?</h2>

 <div class="col-md-4 mb-3 mt-5 mx-auto">
 <h5 class="yellow">맛집은 어땠나요?</h5>
 <fieldset class="storeStar star">
 <input type="radio" name="storeStar" value="5" id="storerate1">
 <label for="storerate1" >★</label>
 <input type="radio" name="storeStar" value="4" id="storerate2">
 <label for="storerate2" >★</label>
 <input type="radio" name="storeStar" value="3" id="storerate3">
 <label for="storerate3" >★</label>
 <input type="radio" name="storeStar" value="2" id="storerate4">
 <label for="storerate4" >★</label>
 <input type="radio" name="storeStar" value="1" id="storerate5">
 <label for="storerate5" >★</label>
 </fieldset>
 </div>

 <div class="col-md-4 mb-3 mt-5 mx-auto">
 <h5 class="yellow">Mate는 어땠나요?</h5>
 <fieldset class="userStar star">
 <input type="radio" name="userStar" value="5" id="userrate1">
 <label for="userrate1" >★</label>
 <input type="radio" name="userStar" value="4" id="userrate2">
 <label for="userrate2" >★</label>
 <input type="radio" name="userStar" value="3" id="userrate3">
 <label for="userrate3" >★</label>
 <input type="radio" name="userStar" value="2" id="userrate4">
 <label for="userrate4" >★</label>
 <input type="radio" name="userStar" value="1" id="userrate5">
 <label for="userrate5" >★</label>
 </fieldset>
 </div>


 <div class="container2 mx-auto mt-5 ">
 <div class="card mb-3">
 <div class="card-header">

 <h6>맛집 평가를 남겨보세요 :)</h6>
 </div>
 <div class="card-body">

 <div class="row">
 <div class="form-group col-sm-9">
 <input class="form-control" name="storeComment" type="text" placeholder="댓글 입력...">
 </div>
 <div class="form-group col-sm-3">
 <input class="form-control" name="userIdx" type="text" placeholder="userIdx">
 </div>
 </div>
 </div>
 </div>

 <button class="btn btn-primary">제출하기</button><br>
 일단 storeIdx 임의값!! 나중에 session에서 넣어주기!<br>
 <input type="hidden" name="storeIdx" value="3">
 <!-- th:value="${storeVO.storeIdx}"-->
 조건 :: 결제 완료 후, 예약시간 지나면 별점 줄 수 있게

 </div>



 </form>
 </div>


</div>


<th:block th:replace="header_footer/footer :: footerFragment"></th:block>
</body>
</html>

'코딩 > Spring' 카테고리의 다른 글

부트스트랩 carousel (회전목마, 슬라이드쇼)  (0) 2023.06.02
Day108_230601_페이징처리... 하...........  (0) 2023.06.01
거리순 기능 구현하기 (자바 거리 계산)  (0) 2023.05.31
맛집 스타일별 정렬하기 / 별점순 / 인기순 / 거리순 구현하기  (0) 2023.05.31
스프링부트 파일(이미지) 수정하기!!!  (0) 2023.05.31
'코딩/Spring' Related Articles more