-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathalbum.html
158 lines (155 loc) · 7.26 KB
/
album.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bunnies Page</title>
<link rel="shortcut icon" type="image/x-icon" href="./assets/images/common/favicon.ico" />
<link rel="stylesheet" href="./assets/css/tailwindcss.output.css" />
<link rel="stylesheet" href="./assets/css/album.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
<script type="module" src="./assets/js/album/playlist.js"></script>
<script type="module" src="./assets/js/album/three.js"></script>
</head>
<body class="cursor-[url('../images/common/cursor/rounded.png'),_default] bg-zinc-950 text-white">
<!-- s: 헤더 -->
<header class="container mx-auto flex h-40 w-full flex-wrap items-center justify-between max-md:px-5">
<nav class="flex flex-wrap justify-between font-cafe text-4xl max-md:w-full md:gap-20">
<a href="./index.html" class="hover:font-cafe-fill">Main</a>
<a href="./member.html" class="hover:font-cafe-fill">Team</a>
<a href="./album.html" class="font-cafe-fill hover:font-cafe-fill">Albums</a>
</nav>
<!-- s: SNS -->
<div class="flex items-center justify-between gap-4 max-md:hidden">
<a href="https://play.google.com/store/apps/details?id=co.weverse.phoning&hl=ko&pli=1" target="_blank">
<img src="./assets/images/header/homeMenuicon1.svg" alt="phoning" class="h-6 w-6" />
</a>
<a href="https://x.com/NewJeans_ADOR" target="_blank">
<img src="./assets/images/header/homeMenuicon2.svg" alt="x" class="h-6 w-6" />
</a>
<a href="https://www.instagram.com/newjeans_official/" target="_blank">
<img src="./assets/images/header/homeMenuicon3.svg" alt="insta" class="h-6 w-6" />
</a>
<a href="https://www.facebook.com/official.newjeans/?locale=gn_PY" target="_blank">
<img src="./assets/images/header/homeMenuicon4.svg" alt="facebook" class="h-6 w-6" />
</a>
<a href="https://www.youtube.com/channel/UCMki_UkHb4qSc0qyEcOHHJw" target="_blank">
<img src="./assets/images/header/homeMenuicon5.svg" alt="youtube" class="h-6 w-6" />
</a>
</div>
<!-- e: SNS -->
</header>
<!-- e: 헤더 -->
<!--플레이 리스트 전체 영역/ album.css에서 영역,마진 설정-->
<section class="w-full overflow-hidden py-28 max-lg:pt-5">
<div
class="album_playlist container mx-auto flex w-full flex-wrap items-start justify-center gap-x-64 gap-y-9 max-lg:justify-center">
<!--CD 플레이 영역-->
<div class="album_player mt-7 max-w-96">
<div class="cd-wrap mx-auto">
<img class="CD_img hidden aspect-square rounded-full" src="./assets/images/album/album_img/1stEP.jpg" />
<img class="CD_img hidden aspect-square rounded-full" src="./assets/images/album/album_img/OMG.jpg" />
<img class="CD_img hidden aspect-square rounded-full" src="./assets/images/album/album_img/GetUp.webp" />
<img class="CD_img hidden aspect-square rounded-full" src="./assets/images/album/album_img/HowSweet.webp" />
<img
class="CD_img hidden aspect-square rounded-full"
src="./assets/images/album/album_img/Supernatural.webp" />
</div>
<!--앨범 이동 btn 영역-->
<ul class="album_player_btn mx-auto mt-14 flex w-72 items-center justify-between">
<li>
<button id="preAlbum">
<img class="h-12 w-12" src="./assets/images/albums/previous.png" />
</button>
</li>
<li>
<button id="playAlbum" class="album_player_play_btn">
<img class="h-20 w-20" src="./assets/images/albums/play-circle.png" />
</button>
</li>
<li>
<button id="nextAlbum">
<img class="h-12 w-12" src="./assets/images/albums/previous-1.png" />
</button>
</li>
</ul>
</div>
<!--영수증 영역-->
<div id="album-info" class="playList">
<img src="./assets/images/albums/PlayList_logo.png" alt="play list" class="mx-auto mt-4 w-60" />
<p>order #3264</p>
<div class="playlist-album-wrap">
<div class="playlist-album-1">
<div class="flex justify-between">
<p id="release">Aug 1, 2022</p>
<p id="now">05:07 AM</p>
</div>
<hr class="my-4 border-dashed border-black" />
<!--## Title 3번째 줄 영수증-->
<div class="flex justify-between">
<p class="mr-10">##</p>
<p>TITLE</p>
<p class="ml-auto">LENGTH</p>
</div>
<hr class="my-4 border-dashed border-black" />
<!--## 영수증 플레이리스트 선택 영역-->
<ul id="album_select">
<li>
<button type="button" class="album_selct_btn play flex w-full">
<p class="mr-10">01</p>
<p class="name">ATTENTION</p>
<p class="ml-auto">3:00</p>
</button>
</li>
</ul>
<hr class="my-4 border-dashed border-black" />
<div class="album_item_count flex justify-between">
<p>ITEM COUNT:</p>
<p id="totalCnt">4</p>
</div>
<div class="album_item_length_total flex justify-between">
<p>TOTAL:</p>
<p id="totalTime">12:51</p>
</div>
</div>
</div>
<hr class="my-4 border-dashed border-black" />
<div class="album_card flex justify-between">
<p>CARD:</p>
<p>XXXX XXXX XXXX 3264</p>
</div>
<div class="album_auth flex justify-between">
<p>AUTH:</p>
<p>3071006411315421</p>
</div>
<div class="album_cardholder flex justify-between">
<p>CARDHOLDER:</p>
<p>NWJNS</p>
</div>
<div class="album_label flex justify-between">
<p>LABEL:</p>
<p id="album-name">앨범명</p>
</div>
<hr class="my-4 border-dashed border-black" />
<a id="youtube" href="" target="_blank">
<img
src="./assets/images/albums/NEWJEANS_PLAYLIST_QR_image.png"
alt="QR Code"
id="qr"
class="mx-auto mb-5 h-28 w-28 mix-blend-darken" />
</a>
</div>
</div>
</section>
<div id="album-cover" class="mx-auto aspect-square max-h-[1000px] w-full"></div>
<!-- s: 풋터 -->
<footer class="container mx-auto flex flex-wrap items-center justify-between py-10 font-cafe-fill text-4xl">
<a href="https://ador.world/" target="_blank">
<img src="./assets/images/header/logo-ador.svg" alt="ador" class="w-28" />
</a>
<a href="https://github.com/ormcamp-fe-3rd/bunnies-page" target="_blank">Hongdaeipgu</a>
</footer>
<!-- e: 풋터 -->
</body>
</html>