🐰 최종
<!doctype html>
<html lang="ko-kr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- jQuary -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>비전5 영화 (마우스 오버)</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Nanum+Myeongjo&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
font-family: 'Nanum Myeongjo', serif;
}
.mytitle {
position: fixed;
color: black;
background-color: #fff;
width: 100%;
height: 150px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
z-index: 3;
}
.main {
padding: 200px 0 100px 0;
height: 2500px;
}
.mytitle>h1 {
font-size: 50px;
position: relative;
left: 50px;
}
.mytitle>button {
width: 200px;
height: 50px;
border-radius: 50px;
margin: 30px 20px 20px auto;
}
.mytitle>h1>a {
color: black;
font-size: 40px;
font-weight: bold;
font-family: 'Gowun Dodum', sans-serif;
text-decoration: none;
}
.mycards {
width: 80%;
margin: 0 auto;
}
.card-body {
display: flex;
flex-direction: column;
align-items: left;
justify-content: center;
}
.card-title {
margin: 10px auto 10px 10px;
text-size-adjust: auto;
font-weight: bold;
}
.screen {
position: relative;
overflow: hidden;
}
.card-img-top {
filter: brightness(1);
}
.card-img-top:hover {
filter: brightness(0.3);
}
.top {
pointer-events: none;
position: absolute;
bottom: 100%;
left: 10px;
z-index: 2;
color: white;
text-size-adjust: auto;
font-weight: 500;
}
.screen:hover .top {
top: 5%;
}
.btn>a {
text-decoration: none;
/* 링크의 밑줄 제거 */
color: inherit;
/* 링크의 색상 제거 */
}
/* 여기부터 */
/* 등록팝업 */
.popup_content {
visibility: hidden;
background-color: white;
border-radius: 8px;
border: solid;
width: 450px;
height: 550px;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
margin-bottom: 40px;
text-align: center;
z-index: 100;
transition: all .35s;
}
/* 등록팝업 안 텍스트박스들 */
.textbox {
width: 90%;
padding-left: 10px;
font-size: 20px;
border: 2px solid #bbb;
border-radius: 8px;
margin-top: 20px;
resize: none;
}
/* 등록 취소 버튼 */
.btn-option {
width: 150px;
height: 50px;
border: 2px solid #ddd;
background-color: white;
border-radius: 8px;
cursor: pointer;
}
.btn-option:hover {
background-color: #bbb;
}
.popup-back {
visibility: hidden;
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
background-color: black;
opacity: 0.7;
z-index: 100;
}
.top-desc {
font-size: 25px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 5;
/* 표시할 줄의 개수 */
-webkit-box-orient: vertical;
text-overflow: ellipsis;
/* 기준 이상의 글은 ...(ellipsis)로 줄이기 */
margin-bottom: 30px;
font-family: 'Gowun Dodum', sans-serif;
}
.top-comment {
font-family: 'Gowun Dodum', sans-serif;
font-size: 25px;
}
</style>
<script>
//DB에서 영화 정보를 가져 온 후 출력
$(document).ready(function () {
show_order1();
});
function show_order1() {
fetch("/movies").then(res => res.json()).then(data => {
let rows = data['result']
$('#cards').empty()
rows.forEach((a) => {
let title = a['title']
let desc = a['desc']
let image = a['image']
let comment = a['comment']
let star = a['star']
let director = a['director']
let character1 = a['character1']
let character2 = a['character2']
let character3 = a['character3']
let stars = ('⭐').repeat(star)
let temp_html = `<div class="col">
<div class="card">
<div class="screen">
<div class="top">
<div class="top-desc">${desc}</div>
<div class="top-comment">등록자 코멘트 : ${comment}</div>
</div>
<img src="${image}"
class="card-img-top" alt="...">
</div>
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p>${stars}</p>
</div>
</div>
</div>`
$('#cards').append(temp_html)
})
})
}
// 여기부터 영화등록
function popupOpen() {
// document.getElementById('popup').style.display= 'inline';
document.getElementById('popup').style.visibility = 'visible';
document.getElementById('popup-back').style.visibility = 'visible';
}
// 등록함수
function onResgistBtn() {
let url = $('#url').val();
let comment = $('#comment').val();
let star = $('#star').val();
let formData = new FormData();
formData.append("url_give", url);
formData.append("comment_give", comment);
formData.append("star_give", star);
fetch('/input', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
alert(data['msg'])
window.location.reload();
// window.location.reload(); 다시 메인화면으로 돌아가기
})
}
function onCancelBtn() {
// document.getElementById('popup').style.display = 'none';
document.getElementById('popup').style.visibility = 'hidden';
document.getElementById('popup-back').style.visibility = 'hidden';
//메인페이지로 돌아가기
}
</script>
</head>
<body>
<div class="mytitle">
<h1><a href={{url_for('home')}}>비전5 Movie</a></h1>
<!-- 영화 기록 버튼 -->
<button onclick="popupOpen()" type="button" class="btn btn-outline-dark">추천 영화 등록</button>
</div>
<div class="main">
<div onmousedown="onCancelBtn()" id="popup-back" class="popup-back">
</div>
<div id="popup" class="popup_content">
<h1>추천 영화 등록</h1>
<!-- url입력 텍스트박스 -->
<input id="url" class="textbox" placeholder=" 영화 url입력" type="text" style="height: 40px;">
<!-- 코멘트 텍스트박스 -->
<textarea id="comment" class="textbox" placeholder="영화를 추천하는 이유를 입력해주세요." rows="8" cols="30"
name="coments"></textarea>
<!-- 별점부분 -->
<div class="input-group mb-3" style="width: 90%; margin-left: 5%;">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select" id="star">
<option selected>-- 선택하기 --</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select>
</div>
<!-- 버튼부분 -->
<div style="margin-top: 50px; background-color: transparent; display: block;">
<button onclick="onResgistBtn()" class="btn-option">등록</button>
<button onclick="onCancelBtn()" class="btn-option">취소</button>
</div>
</div>
<h2 style="width: 80%; margin: 50px auto 30px auto; font-weight: 900;">비전5가 추천하는 영화 Best4</h2>
<!-- 기본 추천 카드 출력 -->
<div class="mycards">
<div id="card" class="row row-cols-1 row-cols-md-4 g-3">
<div class="col">
<div class="card">
<a href={{url_for('sub1')}}>
<div class="screen">
<div class="top"><div class="top-desc">‘가모라’를 잃고 슬픔에 빠져 있던 ‘피터 퀼’이 위기에 처한 은하계와 동료를 지키기 위해 다시 한번 가디언즈 팀과 힘을 모으고,
성공하지 못할 경우 그들의 마지막이 될지도 모르는 미션에 나서는 이야기</div>
<div class="top-comment"></div></div>
<img src="https://img.cgv.co.kr/Movie/Thumbnail/Poster/000086/86883/86883_185.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">가디언즈 오브 갤럭시-Volume 3</h5>
<p>⭐⭐⭐⭐⭐</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<a href={{url_for('sub2')}}>
<div class="screen">
<div class="top"> <div class="top-desc">아무리 빨리 달려도 과거를 앞지를 순 없다 돔(빈 디젤)과 그의 패밀리 앞에 나타난 운명의 적 단테(제이슨 모모아). 과거의 그림자는 돔의 모든 것을 파괴하기 위해 달려온다. 단테에 의해 산산히 흩어진 패밀리들은 모두 목숨을 걸고 맞서야 하는 함정에 빠지고 마는데.. 달리거나 죽거나, 그들의 마지막 질주가 시작된다!</div></div>
<img src="https://img.cgv.co.kr/Movie/Thumbnail/Poster/000086/86996/86996_185.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">분노의 질주-라이드 오어 다이</h5>
<p>⭐⭐⭐⭐⭐</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<a href={{url_for('sub3')}}>
<div class="screen">
<div class="top"><div class="top-desc">사회초년생 ‘도하’와 인디 뮤지션 ‘태인’이 장거리 연애를 시작하면서 벌이는 언택트 러브 스토리</div>
<div class="top-comment"></div></div>
<img src="https://img.cgv.co.kr/Movie/Thumbnail/Poster/000086/86912/86912_185.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">롱디</h5>
<p>⭐⭐⭐⭐⭐</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<a href={{url_for('sub4')}}>
<div class="screen">
<div class="top"><div class="top-desc">'붉은 봉투를 줍는 자, 운명을 거스를 수 없다!' 혈기왕성한 형사 우밍한은 중요한 사건 현장에서 도로에 흩어진 증거물을 수집하던 중 의문의 붉은 봉투를 발견하고 무심코 줍는다. 그때부터 밍한에게 벌어지는 불길한 사건들! 자신에게 다가온 '운명'을 한사코 거부하던 밍한은 거듭되는 생명의 위협에 마지못해 인생 최대의 결심을 하는데... 얼결에 '부부'가 된 귀신과 최악의 빌런을 잡기 위해 인간+귀신 콤비가 벌이는 극강의 공조 수사! 코믹과 액션을 버무리고 감동과 반전까지 가미한, 풀옵션 오감으로 즐기는 블록버스터. 인류애 넘치는 콤비의 격정적인 공조가 마침내 시작된다! 이 콤비도, 두 사람의 공조 수사도 완전히 다 미쳤다!!!</div>
<div class="top-comment"></div></div>
<img src="https://img.cgv.co.kr/Movie/Thumbnail/Poster/000087/87003/87003_185.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">메리 마이 데드 바디</h5>
<p>⭐⭐⭐⭐⭐</p>
</div>
</div>
</div>
</div>
</div>
<h2 style="width: 80%; margin: 80px auto 30px auto; font-weight: 900;">유저가 추천하는 영화</h2>
<!-- 현재 위치에 스크립트 내용 출력 -->
<div class="mycards">
<div id="cards" class="row row-cols-1 row-cols-md-4 g-3">
<div class="col">
<div class="card">
<a href="">
<div class="screen">
<div class="top">영화 설명</div>
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다.</h5>
<p>⭐⭐⭐</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
열쩡