vrchat-emoji-manager/manage.html

84 lines
2.5 KiB
HTML

<!DOCTYPE html><html><head>
<meta charset="UTF-8" />
<title>VRChat Emoji Manager</title>
<style>
body {
margin: 0px;
height: 100vh;
display: flex;
flex-direction: column;
}
.deletemode {
cursor: crosshair;
}
#emojigrid {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
overflow: auto;
padding: 8px;
align-content: flex-start;
}
.emojisquare {
border: 1px solid gray;
margin: 1px;
padding: 4px;
}
.emojisquare .imgcontainer {
width: 64px;
height: 64px;
margin: auto;
display: flex;
}
.emojisquare .imgcontainer img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
[data-state=enabled] {
background-color:rgba(0, 255, 0, 0.5);
}
[data-state=disabled] {
background-color:rgba(255, 0, 0, 0.5);
}
[data-state=pending] {
background-color:rgba(255, 255, 0, 0.5);
}
#bottompanel {
border: 1px solid gray;
display: flex;
flex-wrap: wrap;
align-items: center;
}
#bottompanel div {
margin: 8px;
}
#errorDiv {
color: red;
flex-grow: 1;
}
</style>
</head><body>
<div id="emojigrid"></div>
<div id="bottompanel">
<div id="errorDiv"></div>
<div>Default Animation Style: <select id="default_animation_style_select"><option value="aura">Aura</option><option value="bats">Bats</option><option value="bees">Bees</option><option value="bounce">Bounce</option><option value="cloud">Cloud</option><option value="confetti">Confetti</option><option value="crying">Crying</option><option value="dislike">Dislike</option><option value="fire">Fire</option><option value="idea">Idea</option><option value="lasers">Lasers</option><option value="like">Like</option><option value="magnet">Magnet</option><option value="mistletoe">Mistletoe</option><option value="money">Money</option><option value="noise">Noise</option><option value="orbit">Orbit</option><option value="pizza">Pizza</option><option value="rain">Rain</option><option value="rotate">Rotate</option><option value="shake">Shake</option><option value="snow">Snow</option><option value="snowball">Snowball</option><option value="spin">Spin</option><option value="splash">Splash</option><option value="stop">Stop</option><option value="zzz">ZZZ</option></select></div>
<div><button id="addbtn">Add Emojis</button></div>
<div><button id="deletebtn">Delete Emojis</button></div>
<div><button id="importbtn">Import</button></div>
<div><button id="exportbtn">Export</button></div>
<div><button id="clearbtn">Clear</button></div>
</div>
<script src="manage.js"></script>
</body></html>