계산기 수작업하다가 제미나이시켜서만든거에서

마우스 휠돌려서 갯수 조절할수 있게 만들고

큐브 보석도 계산하게 만듬 

상자깟을떄 1,2레벨보석 남기기 싫은 개인적인 취향떄문에 만들기시작한건데

명령어 넣기만하면 만들어지니까 재밋네



<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로스트아크 보석 & 큐브 통합 계산기</title>
    <style>
        :root {
            --bg-color: #1c1e22;
            --container-bg: #282b30;
            --text-color: #ffffff;
            --accent-color: #e19c16;
            --cube-color: #00bcd4;
            --border-color: #3e4249;
            --input-bg: #181a1d;
        }

        body {
            font-family: 'Malgun Gothic', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }

        .container {
            background-color: var(--container-bg);
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
            width: 100%;
            max-width: 1000px; /* 양옆 배치를 위해 최대 너비 확장 */
        }

        h1 {
            text-align: center;
            color: var(--accent-color);
            font-size: 24px;
            margin-bottom: 5px;
            border-bottom: 2px solid var(--border-color);
            padding-bottom: 10px;
        }

        .guide-text {
            text-align: center;
            font-size: 12px;
            color: #888;
            margin-bottom: 25px;
        }

        /* 💡 핵심: 좌우 배치를 위한 Flex 레이아웃 */
        .main-layout {
            display: flex;
            gap: 25px;
            align-items: flex-start;
        }

        /* 왼쪽 입력 영역 (큐브 + 보석) */
        .input-side {
            flex: 1.2; 
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* 오른쪽 결과 영역 */
        .result-side {
            flex: 0.8;
            position: sticky;
            top: 20px; /* 스크롤 시 결과창이 화면에 고정됨 */
        }

        h2 {
            font-size: 16px;
            color: #ddd;
            margin-top: 0;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
        }

        h2.cube-title { color: var(--cube-color); }
        h2.gem-title { color: var(--accent-color); }

        .input-group {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            background: var(--input-bg);
            padding: 8px 15px;
            border-radius: 6px;
            border: 1px solid var(--border-color);
            transition: border-color 0.2s;
        }

        .input-group:focus-within { border-color: #666; }
        .cube-group:focus-within { border-color: var(--cube-color); }
        .gem-group:focus-within { border-color: var(--accent-color); }

        .input-group label {
            flex: 1;
            font-weight: bold;
            font-size: 14px;
            color: #ccc;
        }

        .input-group input {
            width: 100px;
            background: none;
            border: none;
            color: white;
            font-size: 16px;
            text-align: right;
            outline: none;
        }

        /* 화살표 숨기기 */
        .input-group input::-webkit-outer-spin-button,
        .input-group input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        .input-group input[type=number] {
            -moz-appearance: textfield;
        }

        .input-group span {
            margin-left: 10px;
            color: #888;
            font-size: 14px;
            width: 30px;
        }

        .result-box {
            background: var(--input-bg);
            border-radius: 8px;
            padding: 20px;
            border: 1px solid var(--border-color);
        }

        .result-title {
            font-weight: bold;
            color: var(--accent-color);
            margin-bottom: 15px;
            font-size: 16px;
            text-align: center;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 10px;
        }

        .result-item {
            display: flex;
            justify-content: space-between;
            padding: 10px 5px;
            border-bottom: 1px dashed #333;
            font-size: 15px;
        }

        .result-item:last-child {
            border-bottom: none;
        }

        .gem-lv { font-weight: bold; }
        .gem-count { color: #4caf50; font-weight: bold; }
        .gem-remain { font-size: 12px; color: #aaa; margin-left: 5px; }

        /* 화면이 너무 좁아지면 위아래 배치로 자동 전환 (모바일 지원) */
        @media (max-width: 768px) {
            .main-layout {
                flex-direction: column;
            }
            .result-side {
                width: 100%;
                position: static;
            }
        }
    </style>
</head>
<body>

<div class="container">
    <h1>💎 보석 & 큐브 통합 계산기</h1>
    <div class="guide-text">💡 마우스 <b>휠을 돌리면</b> 수량이 조절되며, 실시간 합산됩니다!</div>
    
    <div class="main-layout">
        <div class="input-side">
            <div>
                <h2 class="cube-title">🛑 에브니 큐브 티켓 수량</h2>
                <div id="cube-inputs"></div>
            </div>

            <div>
                <h2 class="gem-title">💎 직접 보유 중인 보석 / 상자</h2>
                <div id="gem-inputs"></div>
            </div>
        </div>

        <div class="result-side">
            <div class="result-box">
                <div class="result-title">⚡ 큐브 포함 최종 합성 예측 (최소 보장)</div>
                <div id="result-display">
                    <div style="text-align:center; color:#888;">수량을 입력해주세요.</div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const cubeInputsDiv = document.getElementById('cube-inputs');
    const gemInputsDiv = document.getElementById('gem-inputs');
    
    // 큐브 인풋 동적 생성 (1해금 ~ 4해금)
    for(let i=1; i<=4; i++) {
        cubeInputsDiv.innerHTML += `
            <div class="input-group cube-group">
                <label>에브니 큐브 [제 ${i} 해금]</label>
                <input type="number" id="cube${i}" min="0" value="0" oninput="calculateAll()">
                <span>장</span>
            </div>
        `;
    }

    // 보석 인풋 동적 생성 (1레벨 ~ 9레벨)
    for(let i=1; i<=9; i++) {
        gemInputsDiv.innerHTML += `
            <div class="input-group gem-group">
                <label>${i}레벨 보석 상자 / 보석</label>
                <input type="number" id="gem${i}" min="0" value="0" oninput="calculateAll()">
                <span>개</span>
            </div>
        `;
    }

    // 휠 이벤트 및 스크롤 방지 전체 적용
    window.onload = function() {
        const allInputs = document.querySelectorAll('input[type="number"]');
        
        allInputs.forEach(inputEl => {
            inputEl.addEventListener('wheel', function(e) {
                e.preventDefault();
                let currentValue = parseInt(this.value) || 0;
                
                if (e.deltaY < 0) {
                    this.value = currentValue + 1;
                } else {
                    if (currentValue > 0) {
                        this.value = currentValue - 1;
                    }
                }
                calculateAll();
            }, { passive: false });
        });
    }

    // 종합 계산 로직
    function calculateAll() {
        let totalGems = Array(12).fill(0);

        // 보유 중인 기본 보석 가져와서 더하기
        for(let i=1; i<=9; i++) {
            totalGems[i] += parseInt(document.getElementById(`gem${i}`).value) || 0;
        }

        // 큐브 티켓 수량 가져오기
        let c1 = parseInt(document.getElementById('cube1').value) || 0;
        let c2 = parseInt(document.getElementById('cube2').value) || 0;
        let c3 = parseInt(document.getElementById('cube3').value) || 0;
        let c4 = parseInt(document.getElementById('cube4').value) || 0;

        // 해금별 변경된 상자 개수 및 레벨 적용
        totalGems[1] += (c1 * 9);   // 1해금: 1레벨 상자 9개
        totalGems[2] += (c2 * 6);   // 2해금: 2레벨 상자 6개
        totalGems[2] += (c3 * 8);   // 3해금: 2레벨 상자 8개
        totalGems[2] += (c4 * 11);  // 4해금: 2레벨 상자 11개

        // 하위 레벨부터 상위 레벨로 순차 합성 (3개 -> 1개)
        for(let i=1; i<=9; i++) {
            let nextLevelGems = Math.floor(totalGems[i] / 3);
            totalGems[i+1] += nextLevelGems;
            totalGems[i] = totalGems[i] % 3; 
        }

        // 결과 화면 출력
        let html = '';
        let hasResult = false;

        for(let i=10; i>=1; i--) {
            if(totalGems[i] > 0 || hasResult) {
                hasResult = true; 
                
                let label = `${i}레벨 보석`;
                if(i === 10) label = `🔥 10레벨 보석`;
                
                html += `
                    <div class="result-item">
                        <span class="gem-lv">${label}</span>
                        <span>
                            <span class="gem-count">${totalGems[i]}개</span>
                            ${i < 10 && totalGems[i] > 0 ? `<span class="gem-remain">(남음)</span>` : ''}
                        </span>
                    </div>
                `;
            }
        }

        if(!hasResult) {
            html = '<div style="text-align:center; color:#888;">수량을 입력해주세요.</div>';
        }

        document.getElementById('result-display').innerHTML = html;
    }
</script>

</body>
</html>



해금보석갯수는 인터넷찾아서 넣은거라 틀린거 있으면 ㅈㅅ