๋ฎค์ง ๋“ฃ๊ธฐ
์†Œ์Šค ๋ณด๊ธฐ
์„œ์น˜ ๊ฒŒ์ž„
๋ฉ”๋ชฐ ๊ฒŒ์ž„
ํ…ŒํŠธ ๊ฒŒ์ž„
๐Ÿ’–

Music Player

Xใ…ค

CHENDA - For You

NCS Release

0:00 4:00

๋ฎค์ง ๋ฆฌ์ŠคํŠธ

๐Ÿ‘พ๐Ÿ‘พ Source View ์†Œ์Šค ์ž์„ธํžˆ ๋ณด๋Ÿฌ๊ฐ€๊ธฐ

X 
 $('.icon1').draggable({
    drag: function () {
        $('.cursor img').attr('src', '../img/cursor.cluster01.png');
    },
});
$('.icon2').draggable({
    drag: function () {
        $('.cursor img').attr('src', '../img/cursor.cluster02.png');
    },
});
$('.icon3').draggable({
    drag: function () {
        $('.cursor img').attr('src', '../img/cursor.cluster03.png');
    },
});
$('.icon4').draggable({
    drag: function () {
        $('.cursor img').attr('src', '../img/cursor.cluster04.png');
    },
});
$('.icon5').draggable({
    drag: function () {
        $('.cursor img').attr('src', '../img/cursor.cluster05.png');
    },
});
$('.music__wrap').draggable();
$('.source__wrap').draggable();

function printTime() {
    const clock = document.querySelector('.time');
    const now = new Date();
    const hours = ('0' + now.getHours()).slice(-2);
    const minutes = ('0' + now.getMinutes()).slice(-2);
    const seconds = ('0' + now.getSeconds()).slice(-2);

    // console.log(seconds);
    // getFullYear | ๋…„๋„๋งŒ ๊ฐ€์ ธ์˜จ๋‹ค.
    const nowTime = now.getFullYear() + '. ' + (now.getMonth() + 1) + '. ' + (now.getDate() + 1) + ' | clock ' + hours + ' : ' + minutes + ' : ' + seconds;

    clock.innerText = nowTime;
    setTimeout('printTime()', 1000);
}
// window.onload = function () {
//     printTime();
// };

// if (currentSec < 10) currentSec = `0${currentSec}`;

function printAgent() {
    const agent = document.querySelector('.agent');
    const os = navigator.userAgent.toLocaleLowerCase();

    agent.innerText = os;

    if (os.indexOf('window') >= 0) {
        agent.innerText = 'ํ˜„์žฌ ์œˆ๋„์šฐ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์‚๋ฆฌ์‚๋ฆฌ๋ฝ€ ๐Ÿ‘พ | ํ™”๋ฉด ํฌ๊ธฐ๋Š” ' + screen.width + ' * ' + screen.height + ' ์ž…๋‹ˆ๋‹ค.';
        document.querySelector('body').classList.add('window');
    } else if (os.indexOf('macintosh') >= 0) {
        agent.innerText = 'ํ˜„์žฌ ๋งฅ์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์‚๋ฆฌ์‚๋ฆฌ๋ฝ€ ๐Ÿ‘พ | ํ™”๋ฉด ํฌ๊ธฐ๋Š”' + screen.width + ' * ' + screen.height + ' ์ž…๋‹ˆ๋‹ค.';
        document.querySelector('body').classList.add('macintosh');
    } else if (os.indexOf('iphone') >= 0) {
        agent.innerText = 'ํ˜„์žฌ ์•„์ดํฐ์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์‚๋ฆฌ์‚๋ฆฌ๋ฝ€ ๐Ÿ‘พ | ํ™”๋ฉด ํฌ๊ธฐ๋Š” ' + screen.width + ' * ' + screen.height + ' ์ž…๋‹ˆ๋‹ค.';
        document.querySelector('body').classList.add('iphone');
    } else if (os.indexOf('android') >= 0) {
        agent.innerText = 'ํ˜„์žฌ ์•ˆ๋“œ๋กœ์ด๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์‚๋ฆฌ์‚๋ฆฌ๋ฝ€ ๐Ÿ‘พ | ํ™”๋ฉด ํฌ๊ธฐ๋Š” ' + screen.width + ' * ' + screen.height + ' ์ž…๋‹ˆ๋‹ค.';
        document.querySelector('body').classList.add('android');
    }
}
window.onload = function () {
    printTime();
    printAgent();
};

// const cursor = document.querySelector('.mouse__cursor');

// // ๋งˆ์šฐ์Šค ์ปค์„œ ์Šคํƒ€์ผ : ๋งˆ์šฐ์Šค๋ฅผ ๋”ฐ๋ผ๋‹ค๋‹ˆ๊ฒŒ ์œ„์น˜๊ฐ’ ์ง€์ •
// window.addEventListener('mousemove', (e) => {
//     // e = event

//     cursor.style.left = e.clientX - 0 + 'px';
//     cursor.style.top = e.clientY - 0 + 'px';
// });

const musicWrapClose = document.querySelector('.musicWrap__close');
const musicListShow = document.querySelector('.music__footer .music__list.show');
const musicListClose = document.querySelector('.music__list .close');
const musicIco = document.querySelector('.icon1');
console.log(musicWrapClose);

musicListBtn.addEventListener('click', () => {
    musicList.classList.add('show');
});

musicListClose.addEventListener('click', () => {
    musicList.classList.remove('show');
});

musicIco.addEventListener('click', () => {
    musicWrap.classList.add('show');
});

musicWrapClose.addEventListener('click', () => {
    musicWrap.classList.remove('show');
});


// music JS
const allMusic = [
    {
        name: 'Circle',
        artist: 'Netrum & Halvorsen',
        img: 'gameEffect_view01',
        audio: 'music_audio01',
    },
    {
        name: 'For You',
        artist: 'CHENDA',
        img: 'gameEffect_view02',
        audio: 'music_audio02',
    },
    {
        name: 'Unforgivable',
        artist: 'Jim Yosef & Shiah Maisel',
        img: 'gameEffect_view03',
        audio: 'music_audio03',
    },
    {
        name: 'Electric (feat. Robbie Rosen)',
        artist: 'VAANCE & Deerock',
        img: 'gameEffect_view04',
        audio: 'music_audio04',
    },
    {
        name: "Can't You Feel It",
        artist: 'MIDNIGHT CVLT & Wiguez',
        img: 'gameEffect_view05',
        audio: 'music_audio05',
    },
];

const musicWrap = document.querySelector('.music__wrap');
const musicView = musicWrap.querySelector('.music__view .img img');
const musicName = musicWrap.querySelector('.music__view .title h3');
const musicArtist = musicWrap.querySelector('.music__view .title p');
const musicAudio = musicWrap.querySelector('#main-audio'); // ์Œ์•…
const musicPlay = musicWrap.querySelector('#control-play'); // ์žฌ์ƒ ๋ฒ„ํŠผ
const musicPrevBtn = musicWrap.querySelector('#control-prev'); // ์ด์ „ ๋ฒ„ํŠผ
const musicNextBtn = musicWrap.querySelector('#control-next'); // ๋‹ค์Œ ๋ฒ„ํŠผ
const musicProgress = musicWrap.querySelector('.progress'); // ๋ฎค์ง ํ”„๋กœ๊ทธ๋ž˜์Šค
const musicProgressBar = musicWrap.querySelector('.progress .bar'); // ์ง„ํ–‰ ๋ฐ”
const musicProgressCurrent = musicWrap.querySelector('.progress .timer .current');
const musicProgressDuration = musicWrap.querySelector('.progress .timer .duration');
const musicRepeat = musicWrap.querySelector('#control-repeat'); // ๋ฎค์ง ์ „์ฒด ๋ฐ˜๋ณต ์žฌ์ƒ
const musicListBtn = musicWrap.querySelector('#control-list'); // ๋ฎค์ง ๋ฆฌ์ŠคํŠธ
const musicList = musicWrap.querySelector('.music__list'); // ๋ฎค์ง ๋ฆฌ์ŠคํŠธ
const musicListUl = musicWrap.querySelector('.music__list ul'); // ๋ฎค์ง ๋ฆฌ์ŠคํŠธ
const volumeBar = document.getElementById('volume_control');

volumeBar.addEventListener('change', function () {
    musicAudio.volume = volumeBar.value / 100;
});

let musicIndex = 1; // ํ˜„์žฌ ๋…ธ๋ž˜ ์ธ๋ฑ์Šค ๊ฐ’
// ์Œ์•… ์žฌ์ƒ
function loadMusic(num) {
    musicName.innerText = allMusic[num - 1].name; // ๋…ธ๋ž˜ ์ œ๋ชฉ
    musicArtist.innerText = allMusic[num - 1].artist; // ๋…ธ๋ž˜ ์•„ํ‹ฐ์ŠคํŠธ
    musicView.src = `../assets/img/${allMusic[num - 1].img}.png`; // ๋…ธ๋ž˜ ์ด๋ฏธ์ง€
    musicView.alt = allMusic[num - 1].name; // ๋…ธ๋ž˜ ์ด๋ฏธ์ง€ alt
    musicAudio.src = `../assets/audio/${allMusic[num - 1].audio}.mp3`; // ๋…ธ๋ž˜
}
// ์žฌ์ƒ ๋ฒ„ํŠผ
function playMusic() {
    musicWrap.classList.add('paused');
    musicPlay.setAttribute('title', '์ •์ง€');
    musicPlay.setAttribute('class', 'stop');
    musicAudio.play();
}
// ์ •์ง€ ๋ฒ„ํŠผ
function pauseMusic() {
    musicWrap.classList.remove('paused');
    musicPlay.setAttribute('title', '์žฌ์ƒ');
    musicPlay.setAttribute('class', 'play');
    musicAudio.pause();
}
// ์ด์ „ ๊ณก ๋“ฃ๊ธฐ ๋ฒ„ํŠผ
function prevMusic() {
    musicIndex == 1 ? (musicIndex = allMusic.length) : musicIndex--;
    loadMusic(musicIndex);
    playMusic();
    playListMusic();
}

// ๋‹ค์Œ ๊ณก ๋“ฃ๊ธฐ ๋ฒ„ํŠผ
function nextMusic() {
    musicIndex == allMusic.length ? (musicIndex = 1) : musicIndex++;
    loadMusic(musicIndex);
    playMusic();
    playListMusic();
}

// ๋ณผ๋ฅจ ์กฐ์ ˆ ๋ฒ„ํŠผ

// ๋ฎค์ง ์ง„ํ–‰๋ฐ”
musicAudio.addEventListener('timeupdate', (e) => {
    // console.log(e)
    const currentTime = e.target.currentTime; //ํ˜„์žฌ ์žฌ์ƒ๋˜๋Š” ์‹œ๊ฐ„
    const duration = e.target.duration; //์˜ค๋””์˜ค์˜ ์ด ๊ธธ์ด
    let progressWidth = (currentTime / duration) * 100; //์ „์ฒด ๊ธธ์—์ด์„œ ํ˜„์žฌ ์ง„ํ–‰๋˜๋Š” ์‹œ๊ฐ„์„ ๋ฐฑ๋ถ„์œ„๋กœ ๋‚˜๋ˆ”
    musicProgressBar.style.width = `${progressWidth}%`;
    // ์ „์ฒด์‹œ๊ฐ„
    musicAudio.addEventListener('loadeddata', () => {
        let audioDuration = musicAudio.duration;
        let totalMin = Math.floor(audioDuration / 60); //์ „์ฒด ์‹œ๊ฐ„(์ดˆ)์„ ๋ถ„๋‹จ์œ„๋กœ ์ชผ๊ฐฌ
        let totalSec = Math.floor(audioDuration % 60); //๋‚จ์€ ์ดˆ๋ฅผ ์ €์žฅ
        if (totalSec < 10) totalSec = `0${totalSec}`; //์ดˆ๊ฐ€ ํ•œ ์ž๋ฆฟ์ˆ˜ ์ผ๋•Œ ์•ž์— 0์„ ๋ถ™์ž„
        musicProgressDuration.innerText = `${totalMin}:${totalSec}`; //์™„์„ฑ๋œ ์‹œ๊ฐ„ ๋ฌธ์ž์—ด์„ ์ถœ๋ ฅ
    });
    // ์ง„ํ–‰์‹œ๊ฐ„
    let currentMin = Math.floor(currentTime / 60);
    let currentSec = Math.floor(currentTime % 60);
    if (currentSec < 10) currentSec = `0${currentSec}`;
    musicProgressCurrent.innerText = `${currentMin}:${currentSec}`;
});

// ์ง„ํ–‰๋ฒ„ํŠผ ํด๋ฆญ
musicProgress.addEventListener('click', (e) => {
    let progressWidth = musicProgress.clientWidth; // ์ง„ํ–‰๋ฐ” ์ „์ฒด ๊ธธ์ด
    let clickedOffsetX = e.offsetX; // ์ง„ํ–‰๋ฐ” ๊ธฐ์ค€์œผ๋กœ ์ธก์ •๋˜๋Š” X๊ฐ’ ์ขŒํ‘œ
    let songDuration = musicAudio.duration; // ์˜ค๋””์˜ค ์ „์ฒด ๊ธธ์ด

    musicAudio.currentTime = (clickedOffsetX / progressWidth) * songDuration; // ๋ฐฑ๋ถ„์œ„๋กœ ๋‚˜๋ˆˆ ์ˆซ์ž์— ๋‹ค์‹œ ์ „์ฒด ๊ธธ์ด๋ฅผ ๊ณฑํ•˜์—ฌ ํ˜„์žฌ ์žฌ์ƒ๊ฐ’์œผ๋กœ ๋ฐ”๊พผ๋‹ค.
});

// ๋ฐ˜๋ณต ๋ฒ„ํŠผ ํด๋ฆญ
musicRepeat.addEventListener('click', () => {
    let getAttr = musicRepeat.getAttribute('class');

    switch (getAttr) {
        case 'repeat':
            musicRepeat.setAttribute('class', 'repeat_one');
            musicRepeat.setAttribute('title', 'ํ•œ๊ณก ๋ฐ˜๋ณต');
            break;

        case 'repeat_one':
            musicRepeat.setAttribute('class', 'shuffle');
            musicRepeat.setAttribute('title', '๋žœ๋ค ์žฌ์ƒ');
            break;

        case 'shuffle':
            musicRepeat.setAttribute('class', 'repeat');
            musicRepeat.setAttribute('title', '์ „์ฒด ๋ฐ˜๋ณต');
            break;
    }
});

// ์˜ค๋””์˜ค๊ฐ€ ๋๋‚  ๋•Œ ์„ค์ •
musicAudio.addEventListener('ended', () => {
    let getAttr = musicRepeat.getAttribute('class');

    switch (getAttr) {
        case 'repeat':
            nextMusic();
            break;

        case 'repeat_one':
            playMusic();
            break;

        case 'shuffle':
            let randomIndex = Math.floor(Math.random() * allMusic.length + 1); // ๋žœ๋ค ์ธ๋ฑ์Šค ์ƒ์„ฑ

            do {
                randomIndex = Math.floor(Math.random() * allMusic.length + 1);
            } while (musicIndex == randomIndex);
            musicIndex = randomIndex; // ํ˜„์žฌ ์ธ๋ฑ์Šค๋ฅผ ๋žœ๋ค ์ธ๋ฐ์Šค๋กœ ๋ณ€๊ฒฝ
            loadMusic(musicIndex); // ๋žœ๋ค ์ธ๋ฑ์Šค๊ฐ€ ๋ฐ˜์˜๋œ ํ˜„์žฌ ์ธ๋ฑ์Šค ๊ฐ’์œผ๋กœ ์Œ์•…์„ ๋‹ค์‹œ ๋กœ๋“œ
            playMusic(); // ๋กœ๋“œํ•œ ์Œ์•…์„ ์žฌ์ƒ
            break;
        default:
            break;
    }

    playListMusic();
});

// ๋ฎค์ง ๋ฆฌ์ŠคํŠธ ๋ฒ„ํŠผ
musicListBtn.addEventListener('click', () => {
    musicList.classList.add('show');
});

// ํ”Œ๋ ˆ์ด ๋ฒ„ํŠผ ํด๋ฆญ
musicPlay.addEventListener('click', () => {
    const isMusicPaused = musicWrap.classList.contains('paused'); //์Œ์•…์ด ์žฌ์ƒ์ค‘
    isMusicPaused ? pauseMusic() : playMusic();
});
// ์ด์ „๊ณก ๋ฒ„ํŠผ ํด๋ฆญ
musicPrevBtn.addEventListener('click', () => {
    prevMusic();
});
// ๋‹ค์Œ๊ณก ๋ฒ„ํŠผ ํด๋ฆญ
musicNextBtn.addEventListener('click', () => {
    nextMusic();
});

// ๋ฎค์ง ๋ฆฌ์ŠคํŠธ ๊ตฌํ˜„
for (let i = 0; i < allMusic.length; i++) {
    let li = `
     <li data-index="${i + 1}">
         <strong>${allMusic[i].name} </strong>
         <em>${allMusic[i].artist} </em>
         <audio class="${allMusic[i].audio}" src="../assets/audio/${allMusic[i].audio}.mp3"> </audio>
         <span class="audio-duration" id="${allMusic[i].audio}">์žฌ์ƒ์‹œ๊ฐ„ </span>
     </li>
    `;

    // musicListUl.innerHTML += li; li๋ฅผ ํ•œ๋ฒˆ์— ์ถ”๊ฐ€ ์‹œ์ผœ ๊ฐ’์„ ๊ฒ€์ƒ‰ํ•  ์ˆ˜ ์—†์—ˆ์Œ. (ํ•œ๋ฒˆ์— ๋กœ๋”ฉ์ด ๋˜์–ด ์•„์ด๋””์™€ ํด๋ž˜์Šค ๊ฐ’์„ ํ•˜๋‚˜๋ฐ–์— ์ธ์‹ ๋ชปํ•จ)
    musicListUl.insertAdjacentHTML('beforeend', li); // ul ์ž์‹์œผ๋กœ (๋งˆ์ง€๋ง‰ ์ž๋ฆฌ์—) ํ•˜๋‚˜์”ฉ ์ฐจ๊ณก์ฐจ๊ณก ์Œ“์•„์ค€๋‹ค.

    // ๋ฆฌ์ŠคํŠธ ์Œ์•…์‹œ๊ฐ„ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ
    let liAudioDuration = musicListUl.querySelector(`#${allMusic[i].audio}`); // ๋ฆฌ์ŠคํŠธ์—์„œ ์‹œ๊ฐ„์„ ํ‘œ์‹œํ•  ์„ ํƒ์ž๋ฅผ ๊ฐ€์ ธ์˜จ๋‹ค.
    let liAudio = musicListUl.querySelector(`.${allMusic[i].audio}`);

    liAudio.addEventListener('loadeddata', () => {
        let audioDuration = liAudio.duration; // ์˜ค๋””์˜ค ์ „์ฒด ๊ธธ์ด
        let totalMin = Math.floor(audioDuration / 60); // ์ „์ฒด ๊ธธ์ด๋ฅผ ๋ถ„ ๋‹จ์œ„๋กœ ์ชผ๊ฐ ๋‹ค.
        let totalSec = Math.floor(audioDuration % 60); // ์ดˆ ๊ณ„์‚ฐ

        if (totalSec < 10) totalSec = `0${totalSec}`; // ์•ž์ž๋ฆฌ์— 0 ์ถ”๊ฐ€
        liAudioDuration.innerText = `${totalMin}:${totalSec}`; // ๋ฌธ์ž์—ด ์ถœ๋ ฅ
        liAudioDuration.setAttribute('data-duration', `${totalMin}:${totalSec}`); // ์†์„ฑ์— ์˜ค๋””์˜ค ๊ธธ์ด ๊ธฐ๋ก
    });
}

// ๋ฎค์ง ๋ฆฌ์ŠคํŠธ ํด๋ฆญ ์‹œ ํด๋ฆญํ•œ ๋…ธ๋ž˜ ์žฌ์ƒ
function playListMusic() {
    const musicListAll = musicListUl.querySelectorAll('li'); //๋ฎค์ง ๋ฆฌ์ŠคํŠธ ๋ชฉ๋ก
    for (let i = 0; i < musicListAll.length; i++) {
        let audioTag = musicListAll[i].querySelector('.audio-duration');

        if (musicListAll[i].classList.contains('playing')) {
            musicListAll[i].classList.remove('playing'); // playing ํด๋ž˜์Šค๊ฐ€ ์กด์žฌํ•  ์‹œ ์‚ญ์ œ

            let adDuration = audioTag.getAttribute('data-duration'); // ์˜ค๋””์˜ค ๊ธธ์ด ๊ฐ’์„ ๊ฐ€์ ธ์˜จ๋‹ค.
            audioTag.innerText = adDuration; // ๊ฐ€์ ธ์˜จ ์˜ค๋””์˜ค ๊ธธ์ด ๊ฐ’์„ audioTag ์— ํ…์ŠคํŠธ๋กœ ๋„ฃ์–ด์ค€๋‹ค.
        }

        // ํ˜„์žฌ ๋ฎค์ง์ธ๋ฑ์Šค์™€ ๋ฆฌ์ŠคํŠธ ์ธ๋ฑ์Šค ๊ฐ’์ด ๊ฐ™์„ ๋•Œ
        if (musicListAll[i].getAttribute('data-index') == musicIndex) {
            musicListAll[i].classList.add('playing'); // ํด๋ž˜์Šค playing ์ถ”๊ฐ€

            audioTag.innerText = '์žฌ์ƒ์ค‘'; // ์žฌ์ƒ์ค‘์ผ ๊ฒฝ์šฐ ์žฌ์ƒ์ค‘ ๋ฉ˜ํŠธ ์ถ”๊ฐ€
        }

        musicListAll[i].setAttribute('onclick', 'clicked(this)');
    }
}

playListMusic();

// ๋ฎค์ง ๋ฆฌ์ŠคํŠธ๋ฅผ ํด๋ฆญํ–ˆ์„ ๋•Œ ๋ฐœ์ƒ
function clicked(el) {
    let getLiIndex = el.getAttribute('data-index'); //ํด๋ฆญํ•œ ๋ฆฌ์ŠคํŠธ์˜ ์ธ๋ฑ์Šค๊ฐ’์„ ์ €์žฅ
    musicIndex = getLiIndex; //ํด๋ฆญํ•œ ์ธ๋ฑ์Šค ๊ฐ’์„ ๋ฎค์ง ์ธ๋ฑ์Šค ์ €์žฅ
    loadMusic(musicIndex); //ํ•ด๋‹น ์ธ๋ฑ์Šค ๋ฎค์ง ๋กœ๋“œ
    playMusic(); //์Œ์•… ์žฌ์ƒ
    playListMusic(); //์Œ์•… ๋ฆฌ์ŠคํŠธ ์—…๋ฐ์ดํŠธ
}

window.addEventListener('load', () => {
    loadMusic(musicIndex);
});


<header id="header">
    <h1>IT.D BOSS</h1>
    <div class="time"></div>
</header>
<!-- //header -->

<main id="main">
    <!-- <div class="mouse__cursor"></div> -->
    <div class="icon_box">
        <div class="icon icon1">
            <img src="../assets/img/folder.block.png" alt="" />
            <span>๋ฎค์ง ๋“ฃ๊ธฐ</span>
        </div>
        <div class="icon icon2">
            <img src="../assets/img/folder02.png" alt="" />
            <span>์†Œ์Šค ๋ณด๊ธฐ</span>

            <!-- <div class="icon2_sub">
                <div><img src="../assets/img/folder02.png" alt="" /> <span>์†Œ์Šค ๋ณด๊ธฐ</span></div>
            </div>
            <div class="icon2_sub">
                <div><img src="../assets/img/folder02.png" alt="" /> <span>์†Œ์Šค ๋ณด๊ธฐ</span></div>
            </div>
            <div class="icon2_sub">
                <div><img src="../assets/img/folder02.png" alt="" /> <span>์†Œ์Šค ๋ณด๊ธฐ</span></div>
            </div> -->
        </div>
        <div class="icon icon3">
            <img src="../assets/img/folder03.png" alt="" />
            <span>๊ฒŒ์ž„ ํ•˜๊ธฐ</span>
        </div>
        <div class="icon icon4">
            <img src="../assets/img/folder04.png" alt="" />
            <span>๋ฎค์ง ๋“ฃ๊ธฐ</span>
        </div>
    </div>
</main>
<!-- //main -->

<footer id="footer">
    <div class="agent"></div>
</footer>
<!-- //footer -->

<!-- ๋ฎค์ง ํ”Œ๋ ˆ์ด -->
<div>
    <div class="music__wrap">
        <div class="music__inner">
            <div class="music__header">
                <div>๐Ÿ‘พ๐Ÿ‘พ</div>
                <h2>Music Player</h2>
                <div class="musicWrap__close">Xใ…ค</div>
            </div>
            <div class="music__contents">
                <div class="music__view">
                    <div class="img">
                        <img src="../assets/img/gameEffect_view01.png" alt="" />
                    </div>
                    <div style="width: 58%">
                        <div class="title">
                            <h3>CHENDA - For You</h3>
                            <p>NCS Release</p>
                        </div>
                        <div class="music__control">
                            <div class="progress">
                                <div class="bar">
                                    <audio id="main-audio" src="../assets/audio/music_audio01.mp3"></audio>
                                </div>
                                <div class="timer">
                                    <span class="current">0:00</span>
                                    <span class="duration">4:00</span>
                                </div>
                            </div>
                            <div class="control">
                                <i title="์ „์ฒด ๋ฐ˜๋ณต" class="repeat" id="control-repeat"></i>
                                <!-- <i title="ํ•œ๊ณก ๋ฐ˜๋ณต" class="repeat_one"></i>
                                <i title="๋žœ๋ค ์žฌ์ƒ" class="shuffle"></i> -->
                                <i title="์ด์ „๊ณก ์žฌ์ƒ" class="prev" id="control-prev"></i>
                                <div>
                                    <i title="์žฌ์ƒ" class="play" id="control-play"></i>
                                    <!-- <i title="์ •์ง€" class="stop"></i> -->
                                </div>
                                <i title="๋‹ค์Œ๊ณก ์žฌ์ƒ" class="next" id="control-next"></i>
                                <i title="์žฌ์ƒ ๋ชฉ๋ก" class="list" id="control-list"></i>
                                <div class="music__volume">
                                    <audio id="volume" src="../assets/audio/music_audio01.mp3"></audio>
                                    <input type="range" id="volume_control" min="0" max="100" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="music__footer">
                <div class="music__list">
                    <h3><span class="list"></span>๋ฎค์ง ๋ฆฌ์ŠคํŠธ <a title="๋ฎค์ง ๋ฆฌ์ŠคํŠธ ๋‹ซ๊ธฐ" class="close" href="#"></a></h3>

                    <ul>
                        <!-- <li>
                            <strong>์ œ๋ชฉ</strong>
                            <em>์•„ํ‹ฐ์ŠคํŠธ</em>
                            <span>์žฌ์ƒ์‹œ๊ฐ„</span>
                        </li> -->
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- //๋ฎค์ง ํ”Œ๋ ˆ์ด -->

code {
    font-family: 'HBIOS-SYS' !important;
}
.source__wrap { 
    position: relative;
    top: 80px;
    left: 150px;
    width: 1600px;
    height: 600px;
    background-color: #c4c4c4;
    border: 10px solid rgb(30, 20, 69);
    overflow: auto;
    /* display: none; */
}
.source__wrap::-webkit-scrollbar {
    width: 5px;
    background-color: rgb(30, 20, 69);
}
.source__wrap::-webkit-scrollbar-thumb {
    height: 20%;
    background-color: #fff;
}
.source__wrap::-webkit-scrollbar-button:horizontal:decrement {
    width: 5px;
    background-color: rgb(30, 20, 69);
    height: 20%;
    background-color: #fff;
}

.source__wrap.show {
    display: block;
}
.source__wrap > .source__inner {
    width: 100%;
}

.source__header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
}
.source__header > h3 {
    color: #fff;
    background-color: rgb(30, 20, 69);
    padding-bottom: 10px;
    padding-left: 10px;
}
.source__header > nav {
}
.source__header > nav > ul {
    background-color: #fff;
    padding: 5px 10px;
    display: flex;
    justify-content: start;
}
.source__header > nav > ul > li {
    padding: 0 5px;
    margin-right: 20px;
    cursor: pointer;
}
.source__header > nav > ul > li.active {
    background-color: rgb(102, 70, 137);
    color: #fff;
}

.source__code {
}

.source__JSCode.show {
    display: block;
}
.source__HTMLCode {
    display: none;
}
.source__HTMLCode.show {
    display: block;
}

/* music CSS */
.music__wrap {
    display: none;
}
.music__wrap.show {
    display: block;
}
.musicWrap__close {
    cursor: pointer;
}
.music__inner {
    padding: 0 10px 10px 10px;
    width: 500px;
    background-color: rgb(30, 20, 69);
    position: absolute;
    left: 150px;
    top: 80px;
}
.music__header {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}
.music__header h2 {
    font-size: 14px;
}

.music__contents {
    background-color: #c4c4c4;
    width: 100%;
}

.music__view {
    display: flex;
    padding: 20px;
}
.music__view .img {
    margin-right: 30px;
    width: 160px;
}
.music__view .img img {
    width: 100%;
}

.music__view .title {
}
.music__view .title h3 {
    font-size: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.music__view .title p {
    font-size: 16px;
    color: rgb(102, 70, 137);
    margin-bottom: 5px;
}
.music__footer .music__list {
    display: none;
}
.music__footer .music__list.show {
    display: block;
}
#volume_control {
    display: inline-block;
    margin-top: 5px;
    width: 115px;
}
.music__control .progress {
    width: 100%;
    height: 10px;
    border-radius: px;
    background-color: rgb(30, 20, 69);
}
.music__control .progress .bar {
    width: 0%;
    height: 10px;
    background-color: rgb(133, 92, 178);
}
.music__control .progress .timer {
    display: flex;
    justify-content: space-between;
}
.music__control .control {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    align-items: center;
}
.music__control .control i {
    cursor: pointer;
    transform: scale(0.8);
    margin-right: 10px;
    margin-left: -5px;
}
.music__control .repeat {
    width: 25px;
    height: 25px;
    background: url('../img/music_icon.svg') no-repeat;
    background-position: -125px;
}
.music__control .repeat_one {
    width: 25px;
    height: 25px;
    background: url('../img/music_icon.svg') no-repeat;
    background-position: -175px;
}
.music__control .shuffle {
    width: 25px;
    height: 25px;
    background: url('../img/music_icon.svg') no-repeat;
    background-position: -125px;
}
.music__control .prev {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url('../img/music_icon.svg') no-repeat;
    background-position: -50px;
}
.music__control .control {
}
.music__control .control .play {
    display: block;
    width: 25px;
    height: 25px;
    background: url('../img/music_icon.svg') no-repeat;
    background-position: 2px;
}
.music__control .stop {
    display: block;
    width: 25px;
    height: 25px;
    background: url('../img/music_icon.svg') no-repeat;
    background-position: -150px;
}
.music__control .next {
    width: 25px;
    height: 25px;
    background: url('../img/music_icon.svg') no-repeat;
    background-position: -72px;
}
.music__control .list {
    width: 25px;
    height: 25px;
    background: url('../img/music_icon.svg') no-repeat;
    background-position: -98px;
}
.music__control .volume {
    width: 25px;
    height: 25px;
    display: block;
    background-image: url('../img/sound.ico.svg');
}

.music__footer {
    background-color: #c4c4c4;
}
.music__footer .music__list {
    border-top: 2px solid;
    padding: 20px;
}
.music__footer .music__list h3 {
    display: flex;
    font-size: 24px;
    margin-bottom: 10px;
    justify-content: space-between;
}
.music__list h3 .list {
    display: inline-block;
    width: 25px;
    background: url('../img/music_icon.svg') no-repeat;
    background-position: -98px;
    vertical-align: -3.5px;
}
.music__list {
    max-height: 260px;
    overflow-y: scroll;
}
.music__list .close {
    margin-left: 250px;
    display: inline-block;
    width: 7%;
    background: url('../img/music_icon.svg') no-repeat;
    background-position: -200px;
    vertical-align: -3.5px;
}
.music__list .playing {
    color: rgb(93, 48, 197);
}
.music__list ul {
    margin-bottom: 10px;
}
.music__list li {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    border-bottom: 1px solid #000;
    list-style: none;
}
.music__list li:hover {
    background-color: rgba(93, 48, 197, 0.141);
}
.music__list li strong {
    font-size: 18px;
    display: block;
    margin-bottom: 5px;
}
.music__list li em {
    font-size: 14px;
    font-style: normal;
}
.music__list li span {
    font-size: 14px;
    position: absolute;
    right: 10px;
    top: 29px;
}

/* game CSS */
@font-face {
    font-family: 'HBIOS-SYS';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2207-01@1.0/HBIOS-SYS.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

.mouse__cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 18px;
    background: url('../img/cursor.cluster.png') no-repeat;
    z-index: 555;
}

/* * {
    cursor: url('../img/cursor.cluster.png'), auto;
} */

/* ์—ฌ๋ฐฑ ์ดˆ๊ธฐํ™” */
* {
    /* cursor: none; */
    margin: 0;
    padding: 0;
    font-family: 'HBIOS-SYS';
}
/* a ํƒœ๊ทธ ๋งํฌ ์ดˆ๊ธฐํ™” */
a {
    text-decoration: none;
    color: #444;
}
/* ๋ชฉ๋ก ์ดˆ๊ธฐํ™” */
li {
    list-style: none;
}
/* ์ œ๋ชฉ ์ดˆ๊ธฐํ™” */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}

body {
    overflow: hidden;
}

#header {
    box-sizing: border-box;
    padding: 5px 10px;
    position: fixed;
    width: 100%;
    height: 40px;
    background-color: rgb(52, 31, 102);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 20;
}

#header h1 {
    font-size: 20px;
    color: #fff;
}
#header .time {
    color: #fff;
}

#footer {
    box-sizing: border-box;
    text-align: center;
    position: fixed;
    padding: 5px 10px;
    color: #fff;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    background-color: rgb(52, 31, 102);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
}

.icon {
    cursor: pointer;
    /* user-select: none; */
    /* pointer-events: none; */
}

.icon1 {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 50px;
}
.icon1 img {
    width: 100%;
}

.icon1 span {
    width: 100%;
    display: block;
    background-color: #000;
    color: #fff;
    font-size: 11px;
    padding: 3px;
    white-space: nowrap;
}
.icon1 {
    position: absolute;
    left: 50px;
    top: 100px;
    width: 50px;
}
/* //1๋ฒˆ ์•„์ด์ฝ˜ */
.icon2 {
    position: absolute;
    left: 50px;
    top: 200px;
    width: 50px;
}
.icon2 img {
    width: 100%;
}
.icon2 img {
    width: 100%;
}

.icon2 span {
    width: 100%;
    display: block;
    background-color: #000;
    color: #fff;
    font-size: 11px;
    padding: 3px;
    white-space: nowrap;
}
/* //2๋ฒˆ ์•„์ด์ฝ˜ */

.icon3 {
    position: absolute;
    left: 50px;
    top: 300px;
    width: 50px;
}
.icon3 img {
    width: 100%;
}
.icon3 img {
    width: 100%;
}

.icon3 span {
    width: 100%;
    display: block;
    background-color: #000;
    color: #fff;
    font-size: 11px;
    padding: 3px;
    white-space: nowrap;
}
/* //3๋ฒˆ ์•„์ด์ฝ˜ */

.icon4 {
    position: absolute;
    left: 50px;
    top: 400px;
    width: 50px;
}
.icon4 img {
    width: 100%;
}
.icon4 img {
    width: 100%;
}

.icon4 span {
    width: 100%;
    display: block;
    background-color: #000;
    color: #fff;
    font-size: 11px;
    padding: 3px;
    white-space: nowrap;
}
/* //3๋ฒˆ ์•„์ด์ฝ˜ */
#footer {
}
#footer .agent {
}
/* ์œˆ๋„์šฐ ํ‘ธํ„ฐ */
.window #footer {
}
/* ๋งฅ ํ‘ธํ„ฐ */
.macintosh #footer {
}

๐Ÿ‘พ๐Ÿ‘พ 2๋ถ„ ๋™์•ˆ CSS ์†์„ฑ ๊ฒ€์ƒ‰ํ•˜๊ธฐX

2๋ถ„ ๋™์•ˆ CSS ์†์„ฑ์„ ๋งŽ์ด ๊ฒ€์ƒ‰ํ•˜๋ฉด ์ ์ˆ˜๊ฐ€ ์˜ฌ๋ผ๊ฐ‘๋‹ˆ๋‹ค.
ํžŒํŠธ๋ณด๊ธฐ๋Š” ํ•œ๋ฒˆ ์ด์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

2:00
์ด ๊ณณ์„ ๋ˆ„๋ฅด๋ฉด ๊ฒŒ์ž„์ด ์‹œ์ž‘๋ฉ๋‹ˆ๋‹ค.
์ „์ฒด ์†์„ฑ ๊ฐฏ์ˆ˜ : 0
ํ˜„์žฌ ์ •๋‹ต ๊ฐฏ์ˆ˜ : 0

Memory Game

X
๋‘๊ตฌ๋‘๊ตฌ๋‘๊ตฌ! ๊ณผ์—ฐ ์ ์ˆ˜๋Š”!?

๐Ÿ‘พ TETRIS GAME ๐Ÿ‘พ

    SCORE

    0

    ๊ฒŒ์ž„ ์‹œ์ž‘
    X
    TOTAL SCORE

    0