API 그룹 팝업 JSP 파일 추가 - 예제 코드 및 UI 구조 작성

Summernote 에디터 스타일 CSS 추가 - 텍스트 및 컴포넌트 스타일 정의
OpenAPI POC JS 파일 추가 - API 스펙 빌더 및 스텝별 렌더 구현

WebContent/jsp/onl/apim/apigroup/apiGroupManDetail.jsp

@@ -23,7 +23,7 @@
     <script language="javascript" >
         var url = '<c:url value="/onl/apim/apigroup/apiGroupMan.json"/>';
         var url_view = '<c:url value="/onl/apim/apigroup/apiGroupMan.view"/>';
-        var url_popup_view = '<c:url value="/onl/transaction/apim/apiSpecManPopup.view"/>';
+        var url_popup_view = '<c:url value="/onl/transaction/apim/apiSpecMan.view"/>';
 
         var isDetail = false;
         let dialog;

WebContent/jsp/onl/apim/portalproperty/propertyMan.jsp

@@ -86,9 +86,11 @@
                 editurl: "clientArray",
                 colNames: ['<%= localeMessage.getString("propertyDetail.propertyKey") %>',
                     '<%= localeMessage.getString("propertyDetail.propertyValue") %>',
+                    '설명',
                     '<%= localeMessage.getString("propertyDetail.delYn") %>'],
                 colModel: [{name: 'PRPTYNAME', width: 50, align: 'left', editable: true},
-                    {name: 'PRPTY2VAL', width: 200, align: 'left', editable: true},
+                    {name: 'PRPTY2VAL', width: 150, align: 'left', editable: true},
+                    {name: 'PRPTYDESC', width: 200, align: 'left', editable: true, edittype: 'textarea', editoptions: {rows: 2}},
                     {
                         name: 'DELETEYN',
                         width: 20,
@@ -258,6 +260,7 @@
                 var data = new Object();
                 data["PRPTYNAME"] = $("input[name=prptyName]").val();
                 data["PRPTY2VAL"] = $("input[name=prpty2Val]").val();
+                data["PRPTYDESC"] = $("input[name=prptyDesc]").val();
 
                 var rows = $("#grid")[0].rows;
                 var index = Number($(rows[rows.length - 1]).attr("id"));
@@ -340,6 +343,11 @@
                 <td colspan="3"><input type="text" name="prpty2Val"/>
                 </td>
             </tr>
+            <tr>
+                <th>설명</th>
+                <td colspan="3"><input type="text" name="prptyDesc"/>
+                </td>
+            </tr>
         </table>
         <!-- grid -->
         <table id="grid"></table>

WebContent/jsp/onl/transaction/apim/apiInterfaceManDetail.jsp

@@ -84,6 +84,7 @@
         var url ='<c:url value="/onl/transaction/apim/apiInterfaceMan.json" />';
         const url_excel  ='<c:url value="/onl/transaction/apim/apiInterfaceMan.excel" />';
         var url_spec = '<c:url value="/onl/transaction/apim/apiSpecMan.view"/>';
+        var url_openapi_spec = '<c:url value="/onl/transaction/apim/djbApiSpecMan.view"/>';
         var returnUrl ;
         let headerValues = [];
         let headerNames = [];
@@ -993,6 +994,28 @@
             showModal(popupUrl, args, 1200, 800);
         }
 
+        // v2: OpenAPI Spec — 기본은 모달(iframe), Shift+클릭은 새 창.
+        // 컨텍스트는 전부 query string 으로 전달(dialogArguments 미사용).
+        function showOpenApiSpecPopup(e) {
+            var eaiSvcName  = getFullSvcName();
+            var eaiSvcDesc  = $('#eaiSvcDesc').val();
+            var apipath     = $('#apiFullPath').val();   // METHOD|URL ('|' 포함 → 인코딩 필수)
+            var contentType = $('#contentType').val();
+            var baseUrl = url_openapi_spec
+                + '?cmd=DETAIL'
+                + '&eaiSvcName='  + encodeURIComponent(eaiSvcName)
+                + '&apipath='     + encodeURIComponent(apipath)
+                + '&eaiSvcDesc='  + encodeURIComponent(eaiSvcDesc)
+                + '&contentType=' + encodeURIComponent(contentType);
+            if (e && e.shiftKey) {
+                // Shift+클릭: 새 창. window.open 은 serviceType/menuId 자동 부착 안 되므로 직접 붙임.
+                window.open(urlAddServiceType(baseUrl + '&menuId=' + encodeURIComponent(getMenuId())), '_blank');
+            } else {
+                // 기본: 모달 + iframe. showModal 이 serviceType/menuId/pop 을 자동 부착.
+                showModal(baseUrl, { title: 'OpenAPI Spec' }, 1600, 880);
+            }
+        }
+
         $(document).ready(function() {
             makeValidate();
             // var bootstrapButton = $.fn.button.noConflict()
@@ -1007,9 +1030,14 @@
             }
             init(url,key,detail);
 
+            // v1: 기존 API 스펙 (모달) — 기능 비교용 복원
             $("#btn_api_spec").click(function() {
                 showApiSpecPopup();
             });
+            // v2: 신규 OpenAPI Spec (새 탭)
+            $("#btn_openapi_spec").click(function(e) {
+                showOpenApiSpecPopup(e);
+            });
 
             $("#btn_modify").click(modifyApi);
             $("#btn_delete").click(function(){
@@ -1508,7 +1536,10 @@
             <button type="button" class="cssbtn" id="btn_json_export" level="R" status="DETAIL,NEW"><i class="material-icons">download</i> <%=localeMessage.getString("button.exportJson")%></button></button>
             <button type="button" class="cssbtn" id="btn_delete" level="W" status="DETAIL"><i class="material-icons">delete</i> <%= localeMessage.getString("button.delete") %></button>
             <button type="button" class="cssbtn" id="btn_modify" level="R" status="DETAIL,NEW"><i class="material-icons">save</i> <%= localeMessage.getString("button.modify") %></button>
+            <!-- v1: 기존 API 스펙 (모달) — 기능 비교용 복원 -->
             <button type="button" class="cssbtn" id="btn_api_spec" level="R" status="DETAIL,NEW"><i class="material-icons">description</i> API 스펙</button>
+            <!-- v2: 신규 OpenAPI Spec (새 탭) -->
+            <button type="button" class="cssbtn" id="btn_openapi_spec" level="R" status="DETAIL,NEW"><i class="material-icons">api</i> OpenAPI Spec</button>
             <button type="button" class="cssbtn" id="btn_previous" level="R" status="DETAIL,NEW"><i class="material-icons">arrow_back</i> <%= localeMessage.getString("button.previous") %></button>
         </div>
         <div class="title" id="title" style="font-size:1.4em">${rmsMenuName}</div>

WebContent/jsp/onl/transaction/apim/apiSpecManPopup.jsp

@@ -23,7 +23,7 @@
     </style>
     <script language="javascript">
         var url = '<c:url value="/onl/transaction/apim/apiSpecMan.json" />';
-        var url_org ='<c:url value="/onl/transaction/apim/apiSpecManPopup.view" />';
+        var url_org ='<c:url value="/onl/transaction/apim/apiSpecMan.view" />';
         var isDetail = false;
         var sampleRequestEditor, sampleResponseEditor, testbedSpecEditor;
 

WebContent/jsp/onl/transaction/apim/djbApiGroupPopup.jsp

@@ -0,0 +1,132 @@
+<%@ page language="java" contentType="text/html; charset=utf-8"%>
+<%@ page import="java.io.*"%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
+<%@ include file="/jsp/common/include/localemessage.jsp" %>
+<%
+    response.setHeader("Pragma", "No-cache");
+    response.setHeader("Cache-Control", "no-cache");
+    response.setHeader("Expires", "0");
+%>
+<html>
+<head>
+    <title>API 그룹 선택</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <jsp:include page="/jsp/common/include/css_custom.jsp"/>
+    <jsp:include page="/jsp/common/include/css.jsp"/>
+    <jsp:include page="/jsp/common/include/script.jsp"/>
+    <script language="javascript">
+        var url = '<c:url value="/onl/apim/apigroup/apiGroupMan.json" />';
+
+        function search() {
+            var postData = getSearchForJqgrid("cmd", "LIST");
+            $("#grid").setGridParam({url: url, postData: postData, page: 1}).trigger("reloadGrid");
+        }
+
+        $(document).ready(function() {
+            var urlParams = new URLSearchParams(window.location.search);
+            var selectedGroupIds = urlParams.get("selectedGroupIds");
+
+            if (selectedGroupIds) {
+                selectedGroupIds = selectedGroupIds.split(','); // 콤마로 구분된 ID들을 배열로 변환
+            } else {
+                selectedGroupIds = [];
+            }
+
+            $('#grid').jqGrid({
+                datatype: "json",
+                mtype: 'POST',
+                url: url,
+                postData: getSearchForJqgrid("cmd", "LIST"),
+                colNames: ['API 그룹 ID', 'API 그룹 명', '설명'],
+                colModel: [
+                    {name: 'id', hidden: true},
+                    {name: 'groupName', align: 'center', width: "180"},
+                    {name: 'groupDesc', align: 'left', width: "200"}
+                ],
+                jsonReader: {
+                    repeatitems: false
+                },
+                pager: $('#pager'),
+                page: '${param.page}',
+                rowNum: '${rmsDefaultRowNum}',
+                autoheight: true,
+                height: 'auto',
+                width: 410,
+                autowidth: false,
+                viewrecords: true,
+                shrinkToFit: false,
+                multiselect: true,
+                multiboxonly: false,
+                loadComplete: function(data) {
+                    var $grid = $(this);
+                    $.each($grid.getDataIDs(), function(_, id) {
+                        var rowData = $grid.getRowData(id);
+                        if ($.inArray(rowData.id, selectedGroupIds) !== -1) {
+                            $grid.jqGrid('setSelection', id, true);
+                        }
+                    });
+                }
+            });
+
+            $("#btn_search").click(search);
+
+            $("#btn_save").click(function() {
+                var selectedRows = $('#grid').getGridParam('selarrrow');
+
+                var selectedGroups = [];
+                if (selectedRows.length > 0) {
+                    selectedGroups = selectedRows.map(function(rowid) {
+                        var rowData = $('#grid').getRowData(rowid);
+                        return {
+                            id: rowData.id,
+                            groupName: rowData.groupName
+                        };
+                    });
+                }
+                // 부모 창의 selectApiGroup 함수 호출
+                if (window.parent && typeof window.parent.selectApiGroup === "function") {
+                    window.parent.selectApiGroup(selectedGroups);
+                    window.close();
+                }
+            });
+
+            $("#btn_close").click(function () {
+                window.close();
+            });
+
+            // 검색어 입력 후 엔터 키 처리
+            $("input[name=searchGroupName]").keydown(function(key) {
+                if (key.keyCode == 13) {
+                    search();
+                }
+            });
+        });
+    </script>
+</head>
+<body>
+<div class="popup_box">
+    <div class="search_wrap">
+        <button type="button" class="cssbtn" id="btn_save" level="W">
+            <i class="material-icons">save</i> <%= localeMessage.getString("button.save") %>
+        </button>
+        <button type="button" class="cssbtn" id="btn_search" level="R">
+            <i class="material-icons">search</i> <%= localeMessage.getString("button.search") %>
+        </button>
+        <button type="button" class="cssbtn" id="btn_close" level="R" status="DETAIL"><i
+                class="material-icons">close</i> <%= localeMessage.getString("button.close") %>
+        </button>
+    </div>
+    <div class="title"></div>
+    <table class="search_condition" cellspacing="0">
+        <tr>
+            <th style="width:80px;">API 그룹 명</th>
+            <td>
+                <input type="text" name="searchGroupName" value="${param.searchGroupName}">
+            </td>
+        </tr>
+    </table>
+    <table id="grid"></table>
+    <div id="pager"></div>
+</div>
+</body>
+</html>

WebContent/jsp/onl/transaction/apim/djbApiSpecManPopup.jsp

@@ -0,0 +1,173 @@
+<%@ page language="java" contentType="text/html; charset=utf-8" %>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<%
+    response.setHeader("Pragma", "No-cache");
+    response.setHeader("Cache-Control", "no-cache");
+    response.setHeader("Expires", "0");
+%>
+<!doctype html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=1600" />
+  <title>OpenAPI Spec 에디터</title>
+
+  <%-- Tailwind (벤더된 Play CDN JS, 오프라인) --%>
+  <script src="<c:url value='/plugins/openapi/tailwind.js'/>"></script>
+  <script>
+    tailwind.config = { theme: { extend: { colors: { brand: {
+      50:'#eff6ff', 100:'#dbeafe', 500:'#3b82f6', 600:'#2563eb', 700:'#1d4ed8'
+    } } } } };
+  </script>
+
+  <%-- Swagger UI 5 (벤더) --%>
+  <link rel="stylesheet" href="<c:url value='/plugins/swaggerUI/swagger-ui.css'/>" />
+  <script src="<c:url value='/plugins/swaggerUI/swagger-ui-bundle.js'/>"></script>
+  <script src="<c:url value='/plugins/swaggerUI/swagger-ui-standalone-preset.js'/>"></script>
+  <script src="<c:url value='/plugins/swaggerUI/djb-swagger-i18n.js'/>" charset="UTF-8"></script>
+
+  <%-- js-yaml (벤더) --%>
+  <script src="<c:url value='/plugins/openapi/js-yaml.min.js'/>"></script>
+
+  <%-- CodeMirror (YAML 편집기 — Monaco 대체, admin addon) --%>
+  <link rel="stylesheet" href="<c:url value='/addon/codemirror/lib/codemirror.css'/>" />
+  <script src="<c:url value='/addon/codemirror/lib/codemirror.js'/>"></script>
+  <script src="<c:url value='/addon/codemirror/mode/yaml/yaml.js'/>"></script>
+  <script src="<c:url value='/addon/codemirror/mode/javascript/javascript.js'/>"></script>
+
+  <%-- jQuery + Summernote(lite, 무-Bootstrap) — 설명 리치 에디터 --%>
+  <link rel="stylesheet" href="<c:url value='/addon/summernote/summernote-lite.css'/>" />
+  <%-- 개발자포탈과 동일한 에디터 콘텐츠 스타일(.editor-content, Noto Sans KR 16px) --%>
+  <link rel="stylesheet" href="<c:url value='/js/djb/apispec/editor-content.css'/>" />
+  <script src="<c:url value='/js/jquery-1.12.1.min.js'/>"></script>
+  <script src="<c:url value='/addon/summernote/summernote-lite.min.js'/>"></script>
+  <script src="<c:url value='/addon/summernote/lang/summernote-ko-KR.js'/>"></script>
+
+  <link rel="stylesheet" href="<c:url value='/js/djb/apispec/styles.css'/>" />
+  <style>
+    /* 페이지 자체 세로 스크롤 제거 — 뷰포트 고정, 내부 패널만 스크롤 */
+    html, body { height: 100%; margin: 0; overflow-x: auto; overflow-y: hidden; }
+    #djb-wrap { height: 100vh; display: flex; flex-direction: column; }
+    #djb-wrap > header, #djb-wrap > nav { flex: 0 0 auto; }
+    #body { flex: 1 1 auto; min-height: 0 !important; overflow: hidden; }
+    #form-panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
+    #form-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
+    #preview-panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
+    #preview-swagger, #preview-monaco { flex: 1 1 auto; min-height: 0; height: auto !important; overflow: auto; }
+    #preview-monaco .CodeMirror { height: 100%; }
+    /* 패널 내부 sticky 는 flex 행으로 (스크롤 컨테이너는 form-content / preview) */
+    #form-panel > .sticky, #preview-panel > .sticky { position: static !important; }
+  </style>
+
+  <script>
+    window.DJB_CTX = {
+      eaiSvcName: "${param.eaiSvcName}",
+      apiName: "${param.eaiSvcDesc}",
+      detailUrl: "<c:url value='/onl/transaction/apim/djbApiSpecMan.json'/>?cmd=DETAIL_SPEC&serviceType=APIGW",
+      saveUrl:   "<c:url value='/onl/transaction/apim/djbApiSpecMan.json'/>?cmd=SAVE&serviceType=APIGW",
+      swaggerBase: "<c:url value='/plugins/swaggerUI/'/>",
+      gwAddress: "${gwAddress}",
+      orgPopupUrl: "<c:url value='/onl/transaction/apim/apiSpecMan.view'/>",
+      groupPopupUrl: "<c:url value='/onl/transaction/apim/djbApiSpecMan.view'/>?cmd=GROUP_POPUP",
+      jsonUrl: "<c:url value='/onl/transaction/apim/djbApiSpecMan.json'/>"
+    };
+  </script>
+</head>
+<body class="bg-slate-50 text-slate-800 antialiased" style="min-width:1600px;">
+
+  <div id="djb-wrap" class="mx-auto" style="width:1600px;">
+
+    <!-- ===== Header ===== -->
+    <header class="h-14 flex items-center justify-between px-6 bg-white border-b border-slate-200 sticky top-0 z-30">
+      <div class="flex items-center gap-3">
+        <div class="font-semibold text-slate-900">OpenAPI Spec 에디터</div>
+        <span class="text-slate-300">|</span>
+        <span class="text-sm text-slate-500">인터페이스:</span>
+        <span class="text-sm font-medium text-slate-800" id="hdr-project-name">${param.eaiSvcName}</span>
+        <span class="ml-2 px-2 py-0.5 text-[11px] rounded-full bg-slate-100 text-slate-600 border border-slate-200" id="hdr-version">v1.0.0</span>
+        <span id="hdr-source" class="hidden ml-1 px-2 py-0.5 text-[11px] rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200"></span>
+      </div>
+      <div class="flex items-center gap-2">
+        <button id="btn-newwin" class="hidden px-3 py-1.5 text-sm rounded border border-slate-300 bg-white hover:bg-slate-50">새창으로 띄우기</button>
+        <button id="btn-regen" class="px-3 py-1.5 text-sm rounded border border-slate-300 bg-white hover:bg-slate-50">자동 생성(초기화)</button>
+        <button id="btn-save" class="px-3 py-1.5 text-sm rounded bg-emerald-600 text-white hover:bg-emerald-700">저장</button>
+        <div class="relative">
+          <button id="btn-export" class="px-3 py-1.5 text-sm rounded bg-brand-600 text-white hover:bg-brand-700">내보내기 ▾</button>
+          <div id="export-menu" class="hidden absolute right-0 mt-1 w-44 bg-white border border-slate-200 rounded shadow-lg z-40">
+            <button data-export="yaml" class="block w-full text-left px-3 py-2 text-sm hover:bg-slate-50">YAML 다운로드</button>
+            <button data-export="json" class="block w-full text-left px-3 py-2 text-sm hover:bg-slate-50">JSON 다운로드</button>
+          </div>
+        </div>
+        <button id="btn-close" class="px-3 py-1.5 text-sm rounded border border-slate-300 bg-white hover:bg-slate-50">닫기</button>
+      </div>
+    </header>
+
+    <!-- ===== Stepper ===== -->
+    <nav class="bg-white border-b border-slate-200 sticky z-20" style="top:56px;">
+      <div class="h-1 bg-slate-100">
+        <div id="stepper-progress" class="h-1 bg-brand-500 transition-all duration-300" style="width:16.66%"></div>
+      </div>
+      <ol id="stepper" class="grid grid-cols-5 px-2"></ol>
+    </nav>
+
+    <!-- ===== Body ===== -->
+    <main id="body" class="flex" style="min-height: calc(100vh - 56px - 72px);">
+      <section id="form-panel" class="bg-white border-r border-slate-200 transition-all duration-300" style="width:960px;">
+        <div class="flex items-center justify-between px-6 py-3 border-b border-slate-100 sticky bg-white z-10" style="top:128px;">
+          <div class="flex items-baseline gap-3">
+            <span class="text-xs uppercase tracking-wide text-slate-400">Step <span id="form-step-num">1</span> / 5</span>
+            <h2 class="text-base font-semibold text-slate-800" id="form-step-title">기본정보</h2>
+          </div>
+          <button id="btn-toggle-preview-from-form" class="hidden text-xs px-2 py-1 rounded border border-slate-200 text-slate-600 hover:bg-slate-50">▶ 미리보기 다시 열기</button>
+        </div>
+        <div id="form-content" class="px-6 py-5"></div>
+        <div class="sticky bottom-0 bg-white border-t border-slate-200 px-6 py-3 flex items-center justify-between">
+          <button id="btn-prev" class="px-4 py-2 text-sm rounded border border-slate-300 bg-white hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed">◀ 이전</button>
+          <div class="text-xs text-slate-500" id="footer-hint">필수 항목을 채우고 다음 단계로 이동하세요</div>
+          <button id="btn-next" class="px-4 py-2 text-sm rounded bg-brand-600 text-white hover:bg-brand-700">다음 ▶</button>
+        </div>
+      </section>
+
+      <aside id="preview-panel" class="bg-slate-50 transition-all duration-300" style="width:640px;">
+        <div class="flex items-center justify-between px-4 py-2 border-b border-slate-200 bg-white sticky z-10" style="top:128px;">
+          <div class="flex items-center gap-1">
+            <button data-ptab="swagger" class="preview-tab px-3 py-1.5 text-sm rounded-t border-b-2 border-brand-600 text-brand-700 font-medium">Swagger UI</button>
+            <button data-ptab="yaml-ro" class="preview-tab px-3 py-1.5 text-sm rounded-t border-b-2 border-transparent text-slate-600 hover:text-slate-800">YAML 보기</button>
+            <button data-ptab="yaml-edit" class="preview-tab px-3 py-1.5 text-sm rounded-t border-b-2 border-transparent text-slate-600 hover:text-slate-800">스펙 편집</button>
+          </div>
+          <button id="btn-toggle-preview" class="text-xs px-2 py-1 rounded border border-slate-200 text-slate-600 hover:bg-slate-100">패널 숨기기 ▶</button>
+        </div>
+        <div id="yaml-edit-bar" class="hidden flex items-center justify-between bg-amber-50 border-b border-amber-200 px-4 py-2 text-xs">
+          <span class="text-amber-800">YAML 을 직접 편집한 뒤 [Form 에 적용] 을 눌러 양식에 동기화하세요.</span>
+          <div class="flex items-center gap-2">
+            <button id="btn-yaml-revert" class="px-2 py-1 rounded border border-amber-300 bg-white hover:bg-amber-100">변경 취소</button>
+            <button id="btn-yaml-apply"  class="px-2 py-1 rounded bg-amber-600 text-white hover:bg-amber-700">Form 에 적용</button>
+          </div>
+        </div>
+        <div id="preview-swagger" class="overflow-auto" style="height: calc(100vh - 56px - 72px - 41px);"></div>
+        <div id="preview-monaco" class="hidden" style="height: calc(100vh - 56px - 72px - 41px);"></div>
+      </aside>
+    </main>
+  </div>
+
+  <div id="toast" class="fixed bottom-5 left-1/2 -translate-x-1/2 hidden px-4 py-2 rounded bg-slate-900 text-white text-sm shadow-lg z-50"></div>
+
+  <!-- Security scheme modal -->
+  <div id="sec-modal" class="hidden fixed inset-0 z-50 bg-slate-900/40 flex items-center justify-center">
+    <div class="bg-white rounded-lg shadow-xl w-[640px] max-h-[80vh] overflow-auto">
+      <div class="flex items-center justify-between px-5 py-3 border-b border-slate-200">
+        <h3 class="font-semibold text-slate-800">보안 스킴 추가</h3>
+        <button class="text-slate-400 hover:text-slate-700" data-sec-close>✕</button>
+      </div>
+      <div class="p-5" id="sec-modal-body"></div>
+      <div class="px-5 py-3 border-t border-slate-200 flex justify-end gap-2 bg-slate-50">
+        <button class="px-3 py-1.5 text-sm rounded border border-slate-300 bg-white" data-sec-close>취소</button>
+        <button id="btn-sec-save" class="px-3 py-1.5 text-sm rounded bg-brand-600 text-white">추가</button>
+      </div>
+    </div>
+  </div>
+
+  <script src="<c:url value='/js/djb/apispec/sample-data.js'/>"></script>
+  <script src="<c:url value='/js/djb/apispec/app.js'/>"></script>
+</body>
+</html>