Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Hamiwood
Hamiwood authored Aug 12, 2024
0 parents commit f93de58
Showing 1 changed file with 308 additions and 0 deletions.
308 changes: 308 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,308 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타플릭스</title>
<!--제이쿼리-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap');

* {
font-family: "Nanum Myeongjo", serif;
}

.main {
/*background-color: green;*/
color: white;

background-image: url('https://occ-0-1123-1217.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABeIfo7VL_VDyKnljV66IkR-4XLb6xpZqhpLSo3JUtbivnEW4s60PD27muH1mdaANM_8rGpgbm6L2oDgA_iELHZLZ2IQjG5lvp5d2.jpg?r=e6e.jpg');
background-position: center;
background-size: cover;
}

body {
background-color: black;
}

.mycards {
width: 1200px;
background-color: transparent;
margin: 20px auto 20px auto;

}

.mypostingbox {
width: 500px;
margin: 20px auto 20px auto;

border: 1px solid white;
padding: 20px;
border-radius: 2px;
}

.form-floating>input {
background-color: transparent;
color: white;
}

.form-floating>label {
color: white;
}

.input-group>label {
background-color: transparent;
color: white;
}

.mypostingbox>button {
width: 100%;
}
</style>
<script type="module">
/*
let a = '대한민국'
let b = '만세'
console.log(a + b)
let c = ['사과', '배', '수박']; //리스트
console.log(c)
console.log(c[0])
let person = {'name':'bob', 'age':30, 'height':180} //딕셔너리
console.log(person['name'])
let name = person['name']
let age = person['age']
console.log(name, age)
//조건문
let age = 15;
if (age < 20) {
console.log('청소년 입니다')
} else {
console.log('성인입니다')
}
//반복문
let ages = [15, 30, 28, 7, 40, 13];
ages.forEach(a => {
console.log(a)
});
//반복문과 조건문의 혼합
ages.forEach(e => {
if (e < 20) {
console.log('청소년 입니다')
} else {
console.log('성인입니다')
}
});
*/

/*
//함수
//영화 기록하기 눌렀을 때 실행(onclick)
function hey() {
alert('안녕하세요');
document.getElementById('title').style.color = 'red';
}*/

//제이쿼리
// function hey(){
// $('#title').text('쥬라기월드');
// }

// Firebase SDK 라이브러리 가져오기
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";


// Firebase 구성 정보 설정
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyA9zC58RD2rPKiDTqciIhq3qY5b0NtoRPQ",
authDomain: "sparta-10d8f.firebaseapp.com",
projectId: "sparta-10d8f",
storageBucket: "sparta-10d8f.appspot.com",
messagingSenderId: "740890493301",
appId: "1:740890493301:web:956981f7896ca6c548133c",
measurementId: "G-6HR5DY5SVX"
};


// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

$("#postingbtn").click(async function () {
let image = $('#image').val();
let title = $('#title').val();
let star = $('#star').val();
let comment = $('#comment').val();

let doc = {
'image': image,
'title': title,
'star': star,
'comment': comment,
}
//{'name':'bob', 'age':30};
await addDoc(collection(db, "movies"), doc);
alert('저장 완료!');
window.location.reload();//새로고침
})

$("#savebtn").click(async function () {
$('#postingbox').toggle();
})


// $(document).ready(function () {
// let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
// fetch(url).then(res => res.json()).then(data => {
// //console.log(data['temp'])

// // let temp = data['temp'];
// // $('#gion').append(temp); //기온 나오도록

// if(temp>20){
// $('#gion').text('더워요');
// } else{
// $('#gion').text('추워요');
// }
// })
// })

let docs = await getDocs(collection(db, "movies"));
docs.forEach((doc) => {
let row = doc.data();
//console.log(row)

let image = row['image'];
let title = row['title'];
let star = row['star'];
let comment = row['comment'];

let temp_html = `
<div class="col">
<div class="card">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${star}</p>
<p class="card-text">${comment}</p>
</div>
</div>
</div>
`
$('#card').append(temp_html);

});


let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
fetch(url).then(res => res.json()).then(data => {
//console.log(data['temp'])

let temp = data['temp'];
$('#gion').append(temp); //기온 나오도록
})


// function openClose() {
// $('#postingbox').toggle();
// }


</script>
</head>

<body>
<header class="p-3 text-bg-dark">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap">
<use xlink:href="#bootstrap"></use>
</svg>
</a>

<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-2 text-danger">Spartafilx</a></li>
<li><a href="#" class="nav-link px-2 text-white">홈</a></li>
<li><a href="#" class="nav-link px-2 text-white">시리즈</a></li>
<li><a href="#" class="nav-link px-2 text-white">영화</a></li>
<li><a href="#" class="nav-link px-2 text-white">내가 찜한 컨텐츠</a></li>
<li><a href="#" class="nav-link px-2 text-white">현재 기온: <span id="gion"></span>도</a></li>
</ul>

<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
<input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..."
aria-label="Search">
</form>

<div class="text-end">
<button type="button" class="btn btn-outline-light me-2">Login</button>
<button type="button" class="btn btn-danger">Sign-up</button>
</div>
</div>
</div>
</header>
<div class="main">
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">킹덤</h1>
<p class="col-md-8 fs-4">병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한 역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직
세자뿐이다.</p>
<button type="button" class="btn btn-outline-light" id="savebtn">영화 기록하기</button>
<!--onclick="openClose()" -->
<button type="button" class="btn btn-outline-light">상세정보</button>
</div>
</div>
</div>
<div class="mypostingbox" id="postingbox">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="image" placeholder="영화 이미지 주소">
<label for="floatingInput">영화 이미지 주소</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="title" placeholder="영화 제목">
<label for="floatingInput">영화 제목</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text">별점</label>
<select class="form-select" id="star">
<option selected>별점 선택</option>
<option value="⭐">⭐</option>
<option value="⭐⭐">⭐⭐</option>
<option value="⭐⭐⭐">⭐⭐⭐</option>
<option value="⭐⭐⭐⭐">⭐⭐⭐⭐</option>
<option value="⭐⭐⭐⭐⭐">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="comment" placeholder="추천 이유">
<label for="floatingInput">추천 이유</label>
</div>
<button type="button" class="btn btn-danger" id="postingbtn">기록하기</button><!-- onclick="makeCard()"-->
</div>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-3 g-4" id="card">

</div>
</div>
</body>
x
</html>

0 comments on commit f93de58

Please sign in to comment.