<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/dev_api_doc.css">

</head>
<body>
    <div class="tabwrapper">       
        <div class="contentWrapper">
            <div class="content activetab" id="krVer">
                <header>
                	<div class="buttonWrapper">
			          <button class="tab-button activetab" data-id="krVer">KR</button>
			          <button class="tab-button" data-id="enVer">EN</button>
			        </div>
                	<a href="/index">
                    	<p>Triple A.,</p>
                    </a>
                    <nav>
                        <ul>
                            <li><a href="#sec00">00. API 기본 구조</a></li>
                            <li><a href="#sec01">01. 인증</a></li>
                            <li><a href="#sec02">02. 게임창 접속</a></li>
                            <li><a href="#sec03">03. Call back Url</a></li>
                            <li class="li_indent"><a href="#krsec03_1">3-1. 보유금조회 요청</a></li>
                            <li class="li_indent"><a href="#krsec03_2">3-2. 보유금 변경 업데이트 요청</a></li>
                            <li><a href="#sec04">04. 참고 게임 제공업체 코드</a></li>
                            <li><a href="#sec05">05. 리턴 결과 코드</a></li>
                            <li><a href="#sec06">06. 게임 결과 상세</a></li>
                        </ul>
                </header>
                <section id="sec00">
                    <h2><span>00.</span>API 기본 구조</h2>
                    <div>
                        <p class="apiUrl">API URL : <a href="https://dev.triple-a.cc/api/">https://dev.triple-a.cc/api/</a></p>
                        <div class="blankArea">
                            <h4>Method : <span>POST</span></h4>
                        </div>
                        <div>
                            <h4>Header<span>(Content-Type : application/json) - 필수정보</span></h4>
                            <table class="tableHeader">
                                <tr class="tableH">
                                    <td>필드</td>
                                    <td>유형</td>
                                    <td>설명</td>
                                    <td>필수</td>
                                </tr>
                                <tr>
                                    <td>Authorization</td>
                                    <td> </td>
                                    <td>api key(value)</td>
                                    <td>Y</td>
                                </tr>
                            </table>
                        </div>
                        <div class="blankArea">
                            <h4>Request Body<span>(Data Type : Json)</span></h4>
                        </div>
                        <div>
                            <h4>Response Data<span>(Data Type : Json)</span></h4>
                            <div class="dataNpr">
                                <p>
                                    {<br>
                                        　"resultCode": "string",<br>
                                        　"resultMessage": "string",<br>
                                        　"data": {<br>
                                            　　"additionalProp1": {},<br>
                                            　　"additionalProp2": {},<br>
                                            　　"additionalProp3": {}<br>
                                        　}<br>
                                    }
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="imgArea">
                        <h3>참고이미지</h3>
                        <img src="img/refImg.png" alt="참고이미지">
                    </div>
                </section>
                <section id="sec01">
                    <h2><span>01.</span>인증<span class="headS">(참고이미지 1번 부분)</span></h2>
                    <div>
                        <p class="apiUrl">API URL : /auth</a></p>
                        <div>
                            <h4>Request parameter</h4>
                            <div class="dataNpr">
                                <p>
                                    {<br>
                                        　 "userId": "string(64)" 사이트에서 사용하는 아이디 필수,<br>
                                        　"nickName": "string(100) 사이트에서 사용하는 닉네임 필수" ,<br>
                                        　"userIp": "string" 접속 아이피,<br>
                                        　"balance": double 현재 회원 보유금액 필수<br>
                                    }
                                </p>
                            </div>
                        </div>
                        <div>
                            <h4>Response data</h4>
                            <div class="dataNpr">
                                <p>
                                    {<br>
                                        　"resultCode": "0" 코드표 참고,<br>
                                        　"resultMessage": "SUCC",<br>
                                        　"data": {<br>
                                        　　"userId": 35 triple에서 제공하는 아이디 넘버,<br>
                                        　　"token": “asbcdef” 게임접속 을 위한 api 키값 "<br>
                                    　}<br>
                                    }
                                </p>
                            </div>
                        </div>
                    </div>
                </section>
                <section id="sec02">
                    <h2><span>02.</span>게임창 접속<span class="headS">(참고 3번 부분)</span></h2>
                    <div>
                        <p class="apiUrl">API URL : /play</p>
                        <div>
                            <h4>Request Header</h4>
                            <table class="tableHeader">
                                <tr class="tableH">
                                    <td>필드</td>
                                    <td>유형</td>
                                    <td>설명</td>
                                    <td>필수</td>
                                </tr>
                                <tr>
                                    <td>Token</td>
                                    <td> </td>
                                    <td>auth 인증시 받은 토큰값 (value)</td>
                                    <td> </td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <h4>Request parameter</h4>
                            <div class="dataNpr">
                                <p>
                                    {<br>
                                        　"userId": "string(64)" 사이트에서 사용하는 아이디 필수, <span class="ft-rd">(최소 3자부터 최대 22자까지 영문, 숫자만 사용가능)</span><br>
                                        　 "vendorKey "string” 게임제공업체분류코드 코드표참고 필수<br><br>
                                        　"gameKey": "string", H-슬롯 에서 제공하는 게임코드 아래 참고필독(H-슬롯에서만 값있음) 다른업체 이용때는 ''(NULL)<br>
                                        　"balance": double 현재 회원 보유금액 필수,<br>
                                        　"isMobile": "string" 모바일 일경우 Y 없거나 N일경우는 웹페이지<br>
                                        　"userIp": "string" 접속 아이피,<br>
                                    }
                                </p>
                            </div>
                        </div>
                        <div>
                            <h4>※ 참고</h4>
                            <div class="refArea">
                                <p>
                                    H-슬롯 필수 게임 코드<br>
                                    "vendorKey" = "S01" 일때<br>
                                    "gameKey" = "SLOT01" 또는 "SLOT02"<br><br>
                                    H-슬롯 게임 실행시에는 “gamekey”에다가 “SLOT01” 또는 “SLOT02”를<br>반드시  담아서 보내주셔야 합니다.
                                </p>
                            </div>
                        </div>
                        <div>
                            <h4>Response data</h4>
                            <div class="dataNpr">
                                <p>
                                    {<br>
                                        　"resultCode": "0" 코드표 참고,<br>
                                        　"resultMessage": "SUCC",<br>
                                        　"data": {<br>
                                        　　"userId": 35 triple에서 제공하는 아이디 넘버,<br>
                                        　　"token": “asbcdef” 게임접속 을 위한 api 키값 "<br>
                                    }
                                </p>
                            </div>
                        </div>
                    </div>
                </section>
                <section id="sec03">
                    <h2><span>03.</span>callBackUrl<span class="headS">(참고 6번 부분)</span></h2>
                    <div>
                        <p class="introArea">심리스 api로 에이젼시 생성 후 콜백 URL을 등록하여 해당 사이트(HOST) 게임시 해당 사이트의 콜백 URL을 호출함이다.</p>
                        <p class="apiUrl">Callback URL : 등록된 Host URL</p>
            
                    </div>
                    <div>
                        <h5>콜백 함수 종류:</h5>
                        <ul>
                            <li><p>balance : 회원 보유금 조회 요청</p></li>
                            <li><p>changebalance : 회원 보유금 변경 업데이트 요청(debit, credit, cancel)</p></li>
                        </ul>
                    </div>
                    <h3 id="krsec03_1">3-1. 보유금조회 요청</h3>
                    <p class="apiUrl">API URL : callBackUrl/balance</a></p>
                    <div>
                        <h4>Request parameter</h4>
                        <div class="dataNpr">
                            <p>
                                {<br>
                                    　"userId": "string(64)" 사이트에서 사용하는 아이디 필수,<br>
                                }
                            </p>
                        </div>
                    </div>
                    <div>
                        <h4>Response data</h4>
                        <div class="dataNpr">
                            <p>
                                {<br>
                                    　"result_code": int 코드표 참고 (0 성공),<br>
                                    　"balance" ": double 현재 회원 보유금액 필수<br>
                                }
                            </p>
                        </div>
                    </div>
                    <h3 id="krsec03_2">3-2. 보유금 변경 업데이트 요청</h3>
                    <p class="apiUrl">API URL : callBackUrl/changebalance</a></p>
                    <div>
                        <h4>Request parameter</h4>
                        <div class="dataNpr">
                            <p>
                                {<br>
                                    　"betId": "string" tranId 가 참고하는 부모코드<br>
                                    　“tranId” : “string” 해당 보유금 변경에 따른 키 고유코드<br>
                                    　“userId” : “string” 인증했던 사이트 회원 아이디<br>
                                    　“vendorIdx” : “string” 게임제공업체 식별아이디<br>
                                    　“vendorKey” : “string” 게임제공업체 코드값<br>
                                    　“gameIdx” : “string” 게임제공업체 제공게임 식별아이디<br>
                                    　“gameKey” : “string” 게임제공업체 제공게임 식별코드<br>
                                    　“tranType” : “string” 보유금변경 구분코드 (debit, credit”<br>
                                    　“debit” : double 보유금액 차감시 요청하는 금액<br>
                                    　“credit” : double 보유금액 증감시 요청하는 금액<br>
                                    　“isCancel” : int 게임 취소될경우 구분값 취소시 1<br>
                                    　“isBonus” : int 보너스 금액일경우 1<br>
                                }
                            </p>
                        </div> 
                    </div>
                    <div>
                        <h4>Response parameter</h4>
                        <div class="dataNpr">
                            <p>
                                {<br>
                                    　"result_code" : int 코드표 참고 (0 성공),<br>
                                    　"balance" : double 현재 회원 보유금액 필수<br>
                                }
                            </p>
                        </div>
                    </div>
                </section>
                <section id="sec04">
                    <h2><span>04.</span>참고 게임 제공업체 코드</h2>
                    <table>
                        <tr class="tableH">
                            <td>게임 업체명</td>
                            <td>코드</td>
                        </tr>
                        <tr>
                            <td>에볼루션 (카지노)</td>
                            <td>C01</td>
                        </tr>
                        <tr>
                            <td>드림 (카지노)</td>
                            <td>C03</td>
                        </tr>
                        <tr>
                            <td>HC보타 (카지노)</td>
                            <td>C04</td>
                        </tr>
                        <tr>
                            <td>아시아 게이밍 (카지노)</td>
                            <td>C10</td>
                        </tr>
                        <tr>
                            <td>폭탄게임 (미니게임)</td>
                            <td>M01</td>
                        </tr>
                        <tr>
                            <td>아시아 스포츠 (스포츠)</td>
                            <td>SP1</td>
                        </tr>
                        <tr>
                            <td>H-슬롯</td>
                            <td>S01</td>
                        </tr>
                        <tr>
                            <td>두윈</td>
                            <td>C06</td>
                        </tr>
                    </table>
                </section>
                <section id="sec05">
                    <h2><span>05.</span>리턴결과 코드</h2>
                    <table>
                        <tr class="tableH">
                            <td>코드값</td>
                            <td>내용</td>
                            <td>설명</td>
                        </tr>
                        <tr>
                            <td>0</td>
                            <td>success</td>
                            <td>성공</td>
                        </tr>
                        <tr>
                            <td>80</td>
                            <td>INSUFFICIENT_FUNDS</td>
                            <td>사용자 머니없음</td>
                        </tr>
                        <tr>
                            <td>98</td>
                            <td>BET_ALREADY_SETTLED</td>
                            <td>이미 정산완료</td>
                        </tr>
                        <tr>
                            <td>99</td>
                            <td>BET_DOES_NOT_EXIST</td>
                            <td>베팅내역없음</td>
                        </tr>
                        <tr>
                            <td>999</td>
                            <td>FAIL</td>
                            <td>실패</td>
                        </tr>                        
                    </table>
                </section>
                <section id="sec06">
                    <h2><span>06.</span>게임 결과 상세</h2>
                    <div>
                        <p class="apiUrl">API URL : /betInfo</a></p>
                        <div>
                            <h4>Request parameter</h4>
                            <div class="dataNpr">
                                <p>
                                    {<br>
                                        　"betId": “String”  challengebalance 시 받은 betId 필수<br>
                                    }
                                </p>
                            </div>
                        </div>
                        <div>
                            <h4>Response data</h4>
                            <div class="dataNpr">
                                <p>
                                    {<br>
                                        　"resultCode": "0" 코드표 참고,<br>
                                        　"resultMessage": "SUCC",<br>
                                        　"data": {<br>
                                        　　"betId":,<br>
                                        　　"detail": “JsonObject” 게임별 상세내역"<br>
                                    　}<br>
                                    }
                                </p>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <div class="content" id="enVer">
                <header>
                    <a href="/index">
                    	<p>Triple A.,</p>
                    </a>
                    <nav>
                        <ul>
                            <li><a href="#ensec00">00. API Default structure</a></li>
                            <li><a href="#ensec01">01. Certification</a></li>
                            <li><a href="#ensec02">02. Game window Access</a></li>
                            <li><a href="#ensec03">03. Call Back Url</a></li>
                            <li class="li_indent"><a href="#ensec03_1">3-1. Reserve inquiry request</a></li>
                            <li class="li_indent"><a href="#ensec03_2">3-2. Reserve Change Update Request</a></li>
                            <li><a href="#ensec04">04. Game Provider code</a></li>
                            <li><a href="#ensec04">05. Return Result Code</a></li>
                            <li><a href="#ensec05">06. Game result details</a></li>
                        </ul>
                </header>
                <section id="ensec00">
                    <h2><span>00.</span>API Default structure</h2>
                    <div>
                        <p class="apiUrl">API URL : <a href="https://dev.triple-a.cc/api/">https://dev.triple-a.cc/api/</a></p>
                        <div>
                            <h4>Header</h4>
                            <table class="tableHeader">
                                <tr class="tableH">
                                    <td>field</td>
                                    <td>Category</td>
                                    <td>Explanation</td>
                                    <td>Essential</td>
                                </tr>
                                <tr>
                                    <td>Authorization</td>
                                    <td> </td>
                                    <td>api key(value)</td>
                                    <td>Y</td>
                                </tr>
                            </table>
                        </div>
                        <div class="blankArea">
                            <h4>Request Body<span>(Data Type : Json)</span></h4>
                        </div>
                        <div>
                            <h4>Response Data<span>(Data Type : Json)</span></h4>
                            <div class="dataNpr">
                                <p>
                                    {<br>
                                        　"resultCode": "string",<br>
                                        　"resultMessage": "string",<br>
                                        　"data": {<br>
                                            　　"additionalProp1": {},<br>
                                            　　"additionalProp2": {},<br>
                                            　　"additionalProp3": {}<br>
                                        　}<br>
                                    }
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="imgArea">
                        <h3>reference image</h3>
                        <img src="refImg.png" alt="참고이미지">
                    </div>
                </section>
                <section id="ensec01">
                    <h2><span>01.</span>Certification</h2>
                    <div>
                        <p class="apiUrl">API URL : <a href="https://dev.triple-a.cc/auth">https://dev.triple-a.cc/auth</a></p>
                        <div>
                            <h4>Request parameter</h4>
                            <div class="dataNpr">
                                <p>
                                    {<br>
                                        　 "userId": ID used in "string(64)" site essential,<br>
                                        　"nickName": "string(100) Nickname used on the siteessential" ,<br>
                                        　"userIp": "string" Connection IP,<br>
                                        　"balance": double Current member holding amount essential<br>
                                    }
                                </p>
                            </div>
                        </div>
                        <div>
                            <h4>Response data</h4>
                            <div class="dataNpr">
                                <p>
                                    {<br>
                                        　"resultCode": Refer to the "0" code table,<br>
                                        　"resultMessage": "SUCC",<br>
                                        　"data": {<br>
                                        　　"userId": ID number provided by 35 triple,<br>
                                        　　"token": api key value for “asbcdef” game access"<br>
                                    　}<br>
                                    }
                                </p>
                            </div>
                        </div>
                    </div>
                </section>
                <section id="ensec02">
                    <h2><span>02.</span>Game window Access</h2>
                    <div>
                        <p class="apiUrl">API URL : <a href="https://oprvender.com/api/">https://oprvender.com/api/</a></p>
                        <div>
                            <h4>Request Header</h4>
                            <table class="tableHeader">
                                <tr class="tableH">
                                    <td>field</td>
                                    <td>category</td>
                                    <td>Explanation</td>
                                    <td>essential</td>
                                </tr>
                                <tr>
                                    <td>Token</td>
                                    <td> </td>
                                    <td> Token value received during auth  authentication (value)</td>
                                    <td> </td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <h4>Request parameter</h4>
                            <div class="dataNpr">
                                <p>
                                    {<br>
                                        　"userId": ID used in "string(64)" site essential,<br>
                                        　"vendorKey "string” Refer to the game provider classification code code table essential<br><br>
                                        　"gameKey": "string", the game code provided by the game provider (currently “1”) Code provided later<br>
                                        　"balance": double Current member holding amount essential,<br>
                                        　"isMobile":"string" In case of mobile, there is no Y or in case of N, web page<br>
                                        　"userIp": "string" Connection IP,<br>
                                    }
                                </p>
                            </div>
                        </div>
                        <div>
                            <h4>※ Reference</h4>
                            <div class="refArea">
                                <p>
                                    H-Slot Required Game Codes<br>
                                    When "vendorKey" = "S01"<br>
                                    "gameKey" = "SLOT01" or "SLOT02"<br><br>
                                    When running an H-slot game, enter “SLOT01” or “SLOT02” in “gamekey”.<br>
                                    You must pack it up and send it.
                                </p>
                            </div>
                        </div>
                        <div>
                            <h4>Response data</h4>
                            <div class="dataNpr">
                                <p>
                                    {<br>
                                        　"resultCode": Refer to the "0" code table,<br>
                                        　"resultMessage": "SUCC",<br>
                                        　"data": {<br>
                                        　　"userId": ID number provided by 35 triple,<br>
                                        　　"token": api key value for “asbcdef” game access"<br>
                                    }
                                </p>
                            </div>
                        </div>
                    </div>
                </section>
                <section id="ensec03">
                    <h2><span>03.</span>Call back Url</h2>
                    <div>
                        <p class="introArea">After creating an agency with seamless API, register a callback URL and call the callback URL of the corresponding site (HOST) when playing the game.
                        </p>
                        <p class="apiUrl">Callback URL : Registered Host URL</p>
            
                    </div>
                    <div>
                        <h5>Callback function type:</h5>
                        <ul>
                            <li><p>balance : Request for inquiry of member holdings</p></li>
                            <li><p>changebalance : Request to update member balance change (debit, credit, cancel)</p></li>
                        </ul>
                    </div>
                    <h3 id="ensec03_1">3-1. Reserve inquiry request</h3>
                    <p class="apiUrl">API URL : <a href="https://dev.triple-a.cc/callbackUrl/balance">https://dev.triple-a.cc/callbackUrl/balance</a></p>
                    <div>
                        <h4>Request parameter</h4>
                        <div class="dataNpr">
                            <p>
                                {<br>
                                    　"userId": ID used in "string(64)" site essential,<br>
                                }
                            </p>
                        </div>
                    </div>
                    <div>
                        <h4>Response data</h4>
                        <div class="dataNpr">
                            <p>
                                {<br>
                                    　"result_code": see int code table (0 success),<br>
                                    　"balance" ": double Current member holding amount essential<br>
                                }
                            </p>
                        </div>
                    </div>
                    <h3 id="ensec03_2">3-2. Reserve Change Update Request</h3>
                    <p class="apiUrl">API URL : <a href="https://dev.triple-a.cc/callbackUrl/changebalance">https://dev.triple-a.cc/callbackUrl/changebalance</a></p>
                    <div>
                        <h4>Request parameter</h4>
                        <div class="dataNpr">
                            <p>
                                {<br>
                                    　"betId":Parent code referenced by "string" tranId<br>
                                    　“tranId” : “string” Unique key code according to the change in the reserve<br>
                                    　“userId” : “string” Site member ID that was authenticated<br>
                                    　“vendorIdx” : “string” Game provider identification ID<br>
                                    　“vendorKey” : “string” Game Provider Code Value<br>
                                    　“gameIdx” : “string” Game identification ID provided by the game provider<br>
                                    　“gameKey” : “string” Game identification code provided by game provider<br>
                                    　"transType" : “string” Reserve change identification code (debit, credit”<br>
                                    　“debit” : double Requested amount when holding amount deducted<br>
                                    　“credit” : double Requested amount when increasing or decreasing holding amount<br>
                                    　“isCancel” : int If the game is cancelled, if the value is cancelled, 1<br>
                                    　“isBonus” : int 1 for bonus amount<br>
                                }
                            </p>
                        </div> 
                    </div>
                    <div>
                        <h4>Response parameter</h4>
                        <div class="dataNpr">
                            <p>
                                {<br>
                                    　"result_code": see int code table (0 success),<br>
                                    　"balance" ": double Current member holding amount essential<br>
                                }
                            </p>
                        </div>
                    </div>
                </section>
                <section id="ensec04">
                    <h2><span>04.</span>Game Provider code</h2>
                    <table>
                        <tr class="tableH">
                            <td>game company name</td>
                            <td>code</td>
                        </tr>
                        <tr>
                            <td>Evolution (Casino)</td>
                            <td>C01</td>
                        </tr>
                        <tr>
                            <td>Dream (Casino)</td>
                            <td>C03</td>
                        </tr>
                        <tr>
                            <td>HC Botha (Casino)</td>
                            <td>C04</td>
                        </tr>
                        <tr>
                            <td>Dowinn (Casino)</td>
                            <td>C06</td>
                        </tr>
                        <tr>
                            <td>Asia Gaming (Casino)</td>
                            <td>C10</td>
                        </tr>
                        <tr>
                            <td>Bomb game (mini game)</td>
                            <td>M01</td>
                        </tr>
                        <tr>
                            <td>Asian Sports (Sports)</td>
                            <td>SP1</td>
                        </tr>
                        <tr>
                            <td>H-slot</td>
                            <td>S01</td>
                        </tr>
                    </table>
                </section>
                <section id="sec05">
                    <h2><span>06.</span>Return Result Code</h2>
                    <table>
                        <tr class="tableH">
                            <td>value</td>
                            <td>object</td>
                            <td>explanation</td>
                        </tr>
                        <tr>
                            <td>0</td>
                            <td>success</td>
                            <td>success</td>
                        </tr>
                        <tr>
                            <td>80</td>
                            <td>INSUFFICIENT_FUNDS</td>
                            <td>User No Money</td>
                        </tr>
                        <tr>
                            <td>98</td>
                            <td>BET_ALREADY_SETTLED</td>
                            <td>Already Settled</td>
                        </tr>
                        <tr>
                            <td>99</td>
                            <td>BET_DOES_NOT_EXIST</td>
                            <td>Not Exist</td>
                        </tr>
                        <tr>
                            <td>999</td>
                            <td>FAIL</td>
                            <td>Fail</td>
                        </tr>                        
                    </table>
                </section>
                <section id="ensec05">
                    <h2><span>05.</span>Game result details</h2>
                    <div>
                        <p class="apiUrl">API URL : <a href="API URL : https://dev.triple-a.cc/betInfo">https://dev.triple-a.cc/betInfo</a></p>
                        <p class="introArea">Support Vender List (2022.12.17)
                            <br>― Evolution 
                            <br>― Bomb Game (Dodge Bomb)<br><br>
                        </p>
                        <div>
                            <h4>Request parameter</h4>
                            <div class="dataNpr">
                                <p>
                                    {<br>
                                        　"betId":“String” betId received at challengebalance essential<br>
                                    }
                                </p>
                            </div>
                        </div>
                        <div>
                            <h4>Response data</h4>
                            <div class="dataNpr">
                                <p>
                                    {<br>
                                        　"resultCode": Refer to the "0" code table,<br>
                                        　"resultMessage": "SUCC",<br>
                                        　"data": {<br>
                                        　　"betId":,<br>
                                        　　"detail": “JsonObject” game-specific details"<br>
                                    　}<br>
                                    }
                                </p>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>

    <script>
        const tabs = document.querySelector(".tabwrapper");
        const tabButton = document.querySelectorAll(".tab-button");
        const contents = document.querySelectorAll(".content");
        
        tabs.onclick = e => {
          const id = e.target.dataset.id;
          if (id) {
            tabButton.forEach(btn => {
              btn.classList.remove("activetab");
            });
            e.target.classList.add("activetab");
        
            contents.forEach(content => {
              content.classList.remove("activetab");
            });
            const element = document.getElementById(id);
            element.classList.add("activetab");
          }
        }
    </script>

</body>
</html>