요정님 이렇게 그대로 컨씨컨브 고고

<!DOCTYPE html>

<html>

<head>
    <title>투자요정의 투자일기</title>
    <style>
        /* 스타일 지정 */
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-image: url("./naverfairy.jpg");
        }

        .container {
            display: flex;
            flex-wrap: wrap;
        }

        .title {
            font-size: 48px;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
            color: #000000;
        }

        .box h2 {
            border-bottom: 2px solid #0066cc;
            padding-bottom: 5px;
            color: #0066cc;
        }

        .box {
            border: 1px solid #ddd;
            padding: 20px;
            margin: 10px;
            flex: 1 1 300px;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border-radius: 6px;
        }

        .commission-box {
            display: flex;
            flex-direction: column;
        }

        .input-group {
            margin-bottom: 10px;
        }

        label {
            font-weight: bold;
        }

        select,
        input[type="number"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            outline: none;
        }

        button {
            background-color: #0066cc;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }

        button:hover {
            background-color: #0052a3;
        }

        #fee-result {
            font-weight: bold;
            margin-top: 10px;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        .social-media li {
            display: inline;
            margin-right: 10px;
        }

        .social-media img {
            width: 30px;
            height: 30px;
            vertical-align: middle;
            margin-right: 5px;
        }

        .helpful-sites {
            font-size: 14px;
        }

        .helpful-sites a {
            color: #0066cc;
            text-decoration: none;
        }

        .helpful-sites a:hover {
            text-decoration: underline;
        }

        .currency-money {
            display: flex;
            gap: 10px;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="title">투자요정의 투자일기</div>
    <div class="container">
        <div class="box">
            <h2>투자요정이 추천하는 해외거래소</h2>
            <ul>
                <li><a href="https://www.bitget.com/en-GB/expressly?channelCode=fcl7&vipCode=bfnf&languageType=3"
                        target="_blank">비트겟 (수수료 50% 할인)</a></li>
                <li><a href="https://www.bybit.com/en-US/sign-up?affiliate_id=55465&group_id=0&group_type=1"
                        target="_blank">바이비트 (수수료 20% 할인)</a></li>
            </ul>
        </div>
        <div class="box">
            <div class="commission-box">
                <h2>매매 수수료 계산</h2>
                <div class="input-group">
                    <label for="exchange">거래소 선택:</label>
                    <select id="exchange" onchange="updateCurrencySymbol()">
                        <option value="bitget">비트겟</option>
                        <option value="bybit">바이비트</option>
                        <option value="upbit">업비트</option>
                    </select>
                </div>
                <div class="input-group " id="fee-type-group">
                    <label for="fee-type">수수료 할인 선택:</label>
                    <select id="fee-type">
                        <option value="applied">수수료 할인 적용</option>
                        <option value="not-applied">수수료 할인 미적용</option>
                    </select>
                </div>
                <div class="input-group">
                    <label for="order-type">주문 유형:</label>
                    <select id="order-type">
                        <option value="market">시장가</option>
                        <option value="limit">지정가</option>
                    </select>
                </div>
                <div class="input-group">
                    <label for="investment-amount">투입금액:</label>
                    <div class=" currency-money"><input type="number" id="investment-amount" placeholder="금액 입력"><span
                            id="currency-symbol"></span></div>
                </div>
                <div class="input-group " id="leverage-group">
                    <label for="leverage">레버리지:</label>
                    <input type="number" id="leverage" placeholder="레버리지 입력">
                </div>
                <button onclick="calculateFee()">계산</button>
                <p id="fee-result">수수료 결과가 표시될 곳입니다.</p>
            </div>
        </div>
    </div>
    <div class="box social-media">
        <h2>투자요정의 소셜 미디어</h2>
        <ul>
            <img src="./telegramlogo.png" alt="텔레그램" class="telegram-icon">
            <a href="https://t.me/aaa_aaat" target="_blank">텔레그램</a></li>
            <img src="./naverlogo.png" alt="블로그" class="telegram-icon">
            <li><a href="https://blog.naver.com/aichart" target="_blank">블로그
                </a></li>
            <img src="./kakaologo.png" alt="카카오톡" class="telegram-icon">
            <li><a href="https://open.kakao.com/o/gVaGwMjf" target="_blank">
                    카카오톡</a></li>
            <img src="./youtube.png" alt="유튜브" class="telegram-icon">
            <a href="https://youtube.com/@btcfairy" target="_blank">유튜브</a></li>
        </ul>
    </div>
    <div class="box helpful-sites">
        <h2>코인 투자에 도움이 되는 사이트</h2>
        <p>
            • <a href="https://coinmarketcap.com/" target="_blank">CoinMarketCap</a> - 가상 자산 시장 정보 및 가격 추적<br>
            • <a href="https://www.coingecko.com/" target="_blank">CoinGecko</a> - 가상 자산 시장 데이터 및 차트<br>
            • <a href="https://kr.tradingview.com/gopro/?share_your_love=alibuy1146" target="_blank">Tradingview</a> -
            모든 차트를 볼 수 있는 사이트 추천인코드 포함<br>
            • <a href="https://tv.coinglass.com/ko/Binance_BTCUSDT" target="_blank">tv.coinglass</a> - 거래소CVD, 펀딩비율,
            미결제약정, 청산 비율 사이트<br>
            • <a href="https://www.scopescan.ai/vcWatch/Master%20Ventures?network=eth" target="_blank">VC watch</a> - 대형
            VC들 포트폴리오 훔쳐보는 사이트 : 블로그 글 [세력이 어떤 코인을 샀는지 훔쳐보면서 매매할 수 있는 방법] 참조<br>
            • <a href="https://academy.binance.com/en/halving" target="_blank">비트코인 반감기 카운트다운</a> - 바이낸스 비트코인 반감기
            카운트다운<br>
            • <a href="https://www.coinglass.com/BitcoinOpenInterest" target="_blank">Coingalss</a> - 전체거래소 미결제약정 보기<br>
            • <a href="https://token.unlocks.app/" target="_blank">토큰언락</a> - 코인들 유통량 언락되는 일정 알려주는 사이트<br>
            • <a href="www.CryptoMiso.com" target="_blank">크립토미소</a> - 코인 프로젝트가 깃허브에서 개발이 활발하게 이루어지는지 그래프로 표시해주는 사이트<br>
            • <a href="https://blockchainhub.kr/bbs/board.php?bo_table=calendar" target="_blank">코인일정 캘린더</a> - 코인 일정들을
            달력으로 보여주는 사이트 호재를 한 눈에 보기 쉬움<br>
            • <a href="https://coin360.com/" target="_blank">코인360</a> - 코인들 도미넌스와 마켓캡 등을 시각화하여 한 눈에 보여주는 사이트<br>
        </p>
    </div>
    <script>
        function calculateFee() {
            const exchange = document.getElementById('exchange').value;
            const feeType = document.getElementById('fee-type').value;
            const orderType = document.getElementById('order-type').value;
            const amount = parseFloat(document.getElementById('investment-amount').value);
            const leverage = parseFloat(document.getElementById('leverage').value);
            let currencySymbol;
            let feeRate;
            if (exchange === 'bitget' && feeType === 'applied' && orderType === 'market') {
                feeRate = 0.0004;
                currencySymbol = '$';
            } else if (exchange === 'bitget' && feeType === 'not-applied' && orderType === 'market') {
                feeRate = 0.0006;
                currencySymbol = '$';
            } else if (exchange === 'bitget' && orderType === 'limit') {
                feeRate = 0.0002;
                currencySymbol = '$';
            } else if (exchange === 'bybit' && feeType === 'applied' && orderType === 'market') {
                feeRate = 0.00044;
                currencySymbol = '$';
            } else if (exchange === 'bybit' && feeType === 'not-applied' && orderType === 'market') {
                feeRate = 0.00055;
                currencySymbol = '$';
            } else if (exchange === 'bybit' && orderType === 'limit') {
                feeRate = 0.0002;
                currencySymbol = '$';
            }
            else if (exchange === 'upbit') {
                feeRate = 0.05;
                currencySymbol = '₩';
            }
            else {
                alert('계산할 수수료 정보를 선택해주세요.');
                return;
            }

            const result = amount * leverage * feeRate;
            const roundedResult = result.toFixed(3);
            const formattedResult = numberWithCommas(roundedResult);

            document.getElementById('fee-result').innerText = `수수료 결과: ${formattedResult.endsWith('.000') ? formattedResult.split('.')[0] : formattedResult} ${currencySymbol}`;
        }

        function numberWithCommas(x) {
            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }

        function updateCurrencySymbol() {
            const exchange = document.getElementById('exchange').value;
            let currencySymbol;

            if (exchange === 'upbit') {
                currencySymbol = '₩';
                document.getElementById('fee-type-group').style.display = 'none';
                document.getElementById('leverage-group').style.display = 'none';
            } else {
                currencySymbol = '$';
                document.getElementById('fee-type-group').style.display = 'block';
                document.getElementById('leverage-group').style.display = 'block';
            }

            document.getElementById('currency-symbol').textContent = currencySymbol;
        }
        updateCurrencySymbol();

    </script>
</body>

</html>

//바뀌기전
<input type="number" id="investment-amount" placeholder="금액 입력">
                </div>
                <div class="input-group">

//바뀐후 
 <div class=" currency-money"><input type="number" id="investment-amount" placeholder="금액 입력"><span
                            id="currency-symbol"></span></div>
                </div>
                <div class="input-group " id="leverage-group">

//바뀌기전
function calculateFee() {
            const exchange = document.getElementById('exchange').value;
            const feeType = document.getElementById('fee-type').value;
            const orderType = document.getElementById('order-type').value;
            const amount = parseFloat(document.getElementById('investment-amount').value);
            const leverage = parseFloat(document.getElementById('leverage').value);

            let feeRate;
            if (exchange === 'bitget' && feeType === 'applied' && orderType === 'market') {
                feeRate = 0.0004;
            } else if (exchange === 'bitget' && feeType === 'not-applied' && orderType === 'market') {
                feeRate = 0.0006;
            } else if (exchange === 'bitget' && orderType === 'limit') {
                feeRate = 0.0002;
            } else if (exchange === 'bybit' && feeType === 'applied' && orderType === 'market') {
                feeRate = 0.00044;
            } else if (exchange === 'bybit' && feeType === 'not-applied' && orderType === 'market') {
                feeRate = 0.00055;
            } else if (exchange === 'bybit' && orderType === 'limit') {
                feeRate = 0.0002;
            } else {
                alert('계산할 수수료 정보를 선택해주세요.');
                return;
            }

            const result = amount * leverage * feeRate;
            const roundedResult = result.toFixed(3);
            const formattedResult = numberWithCommas(roundedResult);

            document.getElementById('fee-result').innerText = `수수료 결과: ${formattedResult.endsWith('.000') ? formattedResult.split('.')[0] : formattedResult} $`;
        }

        function numberWithCommas(x) {
            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }

//바뀐후
     function calculateFee() {
            const exchange = document.getElementById('exchange').value;
            const feeType = document.getElementById('fee-type').value;
            const orderType = document.getElementById('order-type').value;
            const amount = parseFloat(document.getElementById('investment-amount').value);
            const leverage = parseFloat(document.getElementById('leverage').value);
            let currencySymbol;
            let feeRate;
            if (exchange === 'bitget' && feeType === 'applied' && orderType === 'market') {
                feeRate = 0.0004;
                currencySymbol = '$';
            } else if (exchange === 'bitget' && feeType === 'not-applied' && orderType === 'market') {
                feeRate = 0.0006;
                currencySymbol = '$';
            } else if (exchange === 'bitget' && orderType === 'limit') {
                feeRate = 0.0002;
                currencySymbol = '$';
            } else if (exchange === 'bybit' && feeType === 'applied' && orderType === 'market') {
                feeRate = 0.00044;
                currencySymbol = '$';
            } else if (exchange === 'bybit' && feeType === 'not-applied' && orderType === 'market') {
                feeRate = 0.00055;
                currencySymbol = '$';
            } else if (exchange === 'bybit' && orderType === 'limit') {
                feeRate = 0.0002;
                currencySymbol = '$';
            }
            else if (exchange === 'upbit') {
                feeRate = 0.05;
                currencySymbol = '₩';
            }
            else {
                alert('계산할 수수료 정보를 선택해주세요.');
                return;
            }

            const result = amount * leverage * feeRate;
            const roundedResult = result.toFixed(3);
            const formattedResult = numberWithCommas(roundedResult);

            document.getElementById('fee-result').innerText = `수수료 결과: ${formattedResult.endsWith('.000') ? formattedResult.split('.')[0] : formattedResult} ${currencySymbol}`;
        }

        function numberWithCommas(x) {
            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }

        function updateCurrencySymbol() {
            const exchange = document.getElementById('exchange').value;
            let currencySymbol;

            if (exchange === 'upbit') {
                currencySymbol = '₩';
                document.getElementById('fee-type-group').style.display = 'none';
                document.getElementById('leverage-group').style.display = 'none';
            } else {
                currencySymbol = '$';
                document.getElementById('fee-type-group').style.display = 'block';
                document.getElementById('leverage-group').style.display = 'block';
            }

            document.getElementById('currency-symbol').textContent = currencySymbol;
        }
        updateCurrencySymbol();

naverfairy / naverfairy.github.io

요정님 이렇게 그대로 컨씨컨브 고고 #1