247 lines
9.8 KiB
HTML
247 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>live2d Model Viewer | CUE!-see you everyday-</title>
|
|
<meta name="viewport" content="width=device-width, maximum-scale=1.0">
|
|
<link rel="icon" href="./image/favicon.png" />
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta
|
|
name="description"
|
|
content="live2d Model Viewer | CUE!-see you everyday-"
|
|
/>
|
|
|
|
<!-- twitter -->
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta
|
|
name="twitter:url"
|
|
content=""
|
|
/>
|
|
<meta name="twitter:title" content="live2d Model Viewer | CUE!-see you everyday-" />
|
|
<meta
|
|
name="twitter:description"
|
|
content="live2d Model Viewer | CUE!-see you everyday-"
|
|
/>
|
|
<!-- <meta
|
|
name="twitter:image"
|
|
content=""
|
|
/> -->
|
|
|
|
<!-- facebook -->
|
|
<meta property="og:title" content="live2d Model Viewer | CUE!-see you everyday-" />
|
|
<meta
|
|
property="og:site_name"
|
|
content="live2d Model Viewer | CUE!-see you everyday-"
|
|
/>
|
|
<meta
|
|
property="og:description"
|
|
content="live2d Model Viewer | CUE!-see you everyday-"
|
|
/>
|
|
<meta property="og:type" content="website" />
|
|
<meta
|
|
property="og:url"
|
|
content=""
|
|
/>
|
|
<!-- <meta
|
|
property="og:image"
|
|
content="%PUBLIC_URL%"
|
|
/> -->
|
|
|
|
<link rel="stylesheet" type="text/css" href="./css/index.css">
|
|
</head>
|
|
<body>
|
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
<div id="root">
|
|
|
|
<div class="bg"></div>
|
|
|
|
<!-- <div class='header'>
|
|
<div class='header-contain'>
|
|
<a href="./index.html" ><img src='./Image/favicon.png'></img></a>
|
|
</div>
|
|
</div> -->
|
|
|
|
<div class="container">
|
|
<main class="container-main" id="viewer-place">
|
|
<div id="viewer"></div>
|
|
</main>
|
|
|
|
<aside class="container-opt" id="collapsible-id">
|
|
<div style="display: flex;flex-direction: column;height: 100%;overflow-y: auto;overflow-x: hidden;">
|
|
<div class="tab">
|
|
<div class='tab-btn-list'>
|
|
<div class='tab-btn btn-selecting' id="Modelsbtn"><a onclick="toggleTabContainer('Models')">Models</a></div>
|
|
<div class='tab-btn' id="CanvasSettingbtn"><a onclick="toggleTabContainer('CanvasSetting')">Canvas</a></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CONTENT (Models)-->
|
|
<div class="tab-content shown" id="viewer">
|
|
|
|
<!-- ADD Model CONTROLLER -->
|
|
<div class="add-model-block">
|
|
<!-- CHARACTOR SELECTION -->
|
|
<div class="char-select">
|
|
<p class="select-title">Character</p>
|
|
<select id="characterSelect"></select>
|
|
</div>
|
|
<!-- COSTUME SELECTION -->
|
|
<div class="costume-select">
|
|
<p class="select-title">Costume</p>
|
|
<select id="costumeSelect"></select>
|
|
</div>
|
|
<!-- ADD BUTTON -->
|
|
<button class="add-btn circle-btn" id="addL2DModelBtn"><i class="fas fa-plus"></i>MOOOO</button>
|
|
</div>
|
|
<!-- <div id="list" style="overflow: auto;"></div> -->
|
|
<div class="Models-list" id="ModelsList"></div>
|
|
|
|
</div>
|
|
|
|
<!-- CONTENT (Models Setting)-->
|
|
<div class="tab-content" id='ModelSetting'>
|
|
|
|
<div class="info">
|
|
<button class="circle-btn back-btn" id="back-btn"><i class="fa-solid fa-angle-left"></i></button>
|
|
<p class="ModelName" id="info-ModelName"></p>
|
|
<p class="CostumeName" id="info-CostumeName"></p>
|
|
</div>
|
|
|
|
<div class="Models-list" id="ModelsSettingList">
|
|
|
|
<!-- 顯示相關部分 -->
|
|
<button class="collapsible" id="display-collapsible-button">Display</button>
|
|
<div class="collapsible-content" id="display-collapsible">
|
|
<div class="collapsible-list">
|
|
<div class="rangeOption">
|
|
<p>Scale</p>
|
|
<input type="range" class="input-range" min="0.01" max="1" step="0.01" id="scaleRange">
|
|
<input type="number" min="0.01" max="1" step="0.01" id="scaleNum">
|
|
</div>
|
|
<!-- //!!!! -->
|
|
<!-- <div class="rangeOption">
|
|
<p>Test</p>
|
|
<input type="range" class="input-range" min="0" max="360" step="1" id="test">
|
|
<input type="number" min="0" max="360" step="1" id="testNum">
|
|
</div> -->
|
|
<div class="rangeOption">
|
|
<p>Angle</p>
|
|
<input type="range" class="input-range" min="0" max="360" step="0.01" id="angleRange">
|
|
<input type="number" min="0" max="360" step="0.01" id="angleNum">
|
|
</div>
|
|
<div class="rangeOption">
|
|
<p>MouthOpen</p>
|
|
<input type="range" class="input-range" min="0" max="1" step="0.01" id="paramMouthOpenYRange">
|
|
<input type="number" min="0" max="1" step="0.01" id="paramMouthOpenYNum">
|
|
</div>
|
|
<div class="checkBoxOption">
|
|
<p >Focusing</p>
|
|
<input type="checkbox" id="FocusingCheckbox">
|
|
</div>
|
|
<div class="checkBoxOption">
|
|
<p>Breathing</p>
|
|
<input type="checkbox" id="breathingCheckbox" checked>
|
|
</div>
|
|
<div class="checkBoxOption">
|
|
<p>EyeBlinking</p>
|
|
<input type="checkbox" id="eyeBlinkingCheckbox">
|
|
</div>
|
|
<div class="checkBoxOption">
|
|
<p>Foreground</p>
|
|
<input type="checkbox" id="foregroundCheckbox">
|
|
</div>
|
|
<div class="checkBoxOption">
|
|
<p>Drag</p>
|
|
<input type="checkbox" id="dragCheckbox">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 表情相關部分 -->
|
|
<button class="collapsible" >Expressions</button>
|
|
<div class="collapsible-content" >
|
|
<div class="collapsible-list" id="expressions-list">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 動作相關部分 -->
|
|
<button class="collapsible" id="collapsible-Motions">Motions</button>
|
|
<div class="collapsible-content">
|
|
<div class="collapsible-list" id="motion-list">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 模組參數部分 -->
|
|
<button class="collapsible" id="collapsible-Parameters(beta)">Parameters(beta)</button>
|
|
<div class="collapsible-content">
|
|
<div class="collapsible-list" id="parameters-list">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 模組零件參數部分 -->
|
|
<button class="collapsible">Part Opacity(bata)</button>
|
|
<div class="collapsible-content">
|
|
<div class="collapsible-list" id="partOpacity-list">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- CONTENT (Canvas Setting)-->
|
|
<div class="tab-content" id='CanvasSetting'>
|
|
|
|
<button class="collapsible">Snapshot</button>
|
|
<div class="collapsible-content">
|
|
<div class="collapsible-list">
|
|
<!-- <div class="checkBoxOption">
|
|
<p>Copyright</p>
|
|
<input type="checkbox" id="copyrightCheckbox" checked>
|
|
</div> -->
|
|
<!-- <div class="checkBoxOption">
|
|
<p>Dialogue (Future.)</p>
|
|
<input type="checkbox" id="copyrightCheckbox" disabled readonly>
|
|
</div> -->
|
|
<button id="snapshotBtn">Snapshot</button>
|
|
<button id="model_snapshotBtn">Model Snapshot</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="collapsible">Background</button>
|
|
<div class="collapsible-content">
|
|
<div class="collapsible-list" id="background-list">
|
|
<div class="color-info">
|
|
<p>Color</p>
|
|
<input type="color" class="colorPicker" id="colorPicker" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</aside>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
<!-- jquery -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
<!-- font-awesome -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/js/all.min.js"></script>
|
|
<!-- Pixi -->
|
|
<script src="https://pixijs.download/v7.2.4/pixi.js" type="text/javascript"></script>
|
|
<!-- live2d SDK -->
|
|
<script src="./lib/live2dcubismcore.min.js" type="text/javascript"></script>
|
|
<!-- pixi-live2d-display ( Cubism 3 and Cubism 4) -->
|
|
<script src="./lib/pixi-live2d.js" type="text/javascript"></script>
|
|
<!-- ownjs -->
|
|
<!-- <script src="./js/overwrite.js" type="text/javascript"></script> -->
|
|
<script src="./js/programatically_clicking_buttons.js" type="text/javascript"></script>
|
|
<script src="./js/index.js" type="text/javascript"></script>
|
|
|
|
</html>
|