Skip to content

Commit

Permalink
use fancy jqueryui
Browse files Browse the repository at this point in the history
  • Loading branch information
@roffidaijoubu
roffidaijoubu committed Dec 15, 2024
1 parent 253a491 commit b14d633
Show file tree
Hide file tree
Showing 6 changed files with 221 additions and 104 deletions.
11 changes: 10 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,4 +63,13 @@ go.sum.backup
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db
Thumbs.db

# Database files
*.db

# Avatar files
/assets/avatars/*
!/assets/avatars/idle.png
!/assets/avatars/talking.gif
avatars.db
184 changes: 107 additions & 77 deletions assets/control.html
View file
Original file line number Diff line number Diff line change
@@ -1,88 +1,118 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TTS Controller</title>
<link rel="stylesheet" href="css/control.css">
</head>
<body>
<link
rel="stylesheet"
href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"
/>
<link rel="stylesheet" href="css/control.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
<div class="app-container">
<!-- Connection Panel -->
<section class="connection-panel">
<div class="platform-controls">
<select id="platform-type" data-platform="youtube">
<option value="youtube">YouTube</option>
<option value="tiktok">TikTok</option>
<option value="twitch">Twitch</option>
</select>
<input type="text" id="channel-id" placeholder="Enter channel ID">
<select id="identifier-type">
<option value="username">Username</option>
<option value="channelId">Channel ID</option>
<option value="liveId">Live ID</option>
</select>
</div>
<!-- Connection Panel -->
<section class="connection-panel">
<div class="platform-controls">
<select id="platform-type" data-platform="youtube">
<option value="youtube">YouTube</option>
<option value="tiktok">TikTok</option>
<option value="twitch">Twitch</option>
</select>
<input type="text" id="channel-id" placeholder="Enter channel ID" />
<select id="identifier-type">
<option value="username">Username</option>
<option value="channelId">Channel ID</option>
<option value="liveId">Live ID</option>
</select>
<button id="connect-btn" class="btn btn-primary">Connect</button>
<button id="disconnect-btn" class="btn btn-secondary hidden">
Disconnect
</button>
</div>

<div class="connection-controls">
<div class="button-group">
<button id="connect-btn" class="primary-btn">Connect</button>
<button id="disconnect-btn" class="secondary-btn" disabled>Disconnect</button>
</div>
<div id="connection-status" class="status-indicator disconnected">Disconnected</div>
</div>
</section>
<div id="connection-status" class="status-indicator disconnected">
Disconnected
</div>
</section>

<!-- Settings Panel -->
<section class="settings-panel">
<div class="setting-group">
<label for="tts-language">TTS Language:</label>
<select id="tts-language">
<option value="id">Indonesian</option>
<option value="en">English</option>
<option value="ko">Korean</option>
<option value="ja">Japanese</option>
</select>
</div>
<div class="setting-group avatar-settings">
<div class="avatar-section">
<h3>Idle Avatar</h3>
<div class="avatar-upload">
<label>Upload New:</label>
<input type="file" id="idle-avatar" accept="image/*">
<button id="upload-idle" class="secondary-btn">Upload</button>
</div>
<div class="avatar-grid" id="idle-avatar-grid">
<!-- Avatars will be populated here -->
</div>
</div>
<!-- Settings Panel -->
<section class="settings-panel">
<div class="setting-group">
<label for="tts-language">TTS Language:</label>
<select id="tts-language">
<option value="id">Indonesian</option>
<option value="en">English</option>
<option value="ko">Korean</option>
<option value="ja">Japanese</option>
</select>
</div>
<button id="open-avatar-settings" class="btn btn-secondary">
Avatar Settings
</button>
</section>

<div class="avatar-section">
<h3>Talking Avatar</h3>
<div class="avatar-upload">
<label>Upload New:</label>
<input type="file" id="talking-avatar" accept="image/*">
<button id="upload-talking" class="secondary-btn">Upload</button>
</div>
<div class="avatar-grid" id="talking-avatar-grid">
<!-- Avatars will be populated here -->
</div>
</div>
</div>
</section>
<!-- Chat Panel -->
<section class="chat-panel">
<div id="chat-container"></div>
<button id="scroll-button" class="scroll-button hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
>
<path
d="M8 3a.5.5 0 0 1 .5.5v9.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V3.5A.5.5 0 0 1 8 3z"
/>
</svg>
<span>New Messages</span>
</button>
</section>
</div>

<!-- Chat Panel -->
<section class="chat-panel">
<div id="chat-container"></div>
<button id="scroll-button" class="scroll-button hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 3a.5.5 0 0 1 .5.5v9.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V3.5A.5.5 0 0 1 8 3z"/>
</svg>
<span>New Messages</span>
</button>
</section>
<!-- Avatar Settings Modal -->
<div id="avatar-settings-modal" title="Avatar Settings">
<div class="setting-group avatar-settings">
<div id="avatar-tabs">
<ul>
<li><a href="#idle-tab">Idle Avatar</a></li>
<li><a href="#talking-tab">Talking Avatar</a></li>
</ul>
<div id="idle-tab">
<div class="avatar-section">
<div class="avatar-upload">
<label>Upload New:</label>
<input type="file" id="idle-avatar" accept="image/*" />
<button id="upload-idle" class="btn btn-secondary btn-sm">
Upload
</button>
</div>
<div class="avatar-grid" id="idle-avatar-grid">
<!-- Avatars will be populated here -->
</div>
</div>
</div>
<div id="talking-tab">
<div class="avatar-section">
<div class="avatar-upload">
<label>Upload New:</label>
<input type="file" id="talking-avatar" accept="image/*" />
<button id="upload-talking" class="btn btn-secondary btn-sm">
Upload
</button>
</div>
<div class="avatar-grid" id="talking-avatar-grid">
<!-- Avatars will be populated here -->
</div>
</div>
</div>
</div>
</div>
</div>

<script type="module" src="js/control.js"></script>
</body>
</html>
</body>
</html>
108 changes: 82 additions & 26 deletions assets/css/control.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ body {

.platform-controls {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-columns: auto 1fr auto auto;
gap: 6px;
margin-bottom: 6px;
}
Expand Down Expand Up @@ -76,6 +76,29 @@ body {
height: 28px;
}

/* Connection Controls */
.connection-row {
display: flex;
gap: 6px;
align-items: center;
}

.hidden {
display: none;
}

/* Status Indicator */
.status-indicator {
padding: 4px 8px;
border-radius: 3px;
text-align: center;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}

/* Button Group */
.button-group {
display: flex;
Expand All @@ -89,28 +112,56 @@ body {
height: 28px;
}

.primary-btn {
/* Button System */
.btn {
padding: 6px 12px;
border-radius: 4px;
border: 1px solid transparent;
cursor: pointer;
font-size: 13px;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 6px;
justify-content: center;
}

/* Button Variants */
.btn-primary {
background-color: #2196F3;
color: white;
border: none;
border-radius: 3px;
border-color: #1976D2;
}

.secondary-btn {
.btn-primary:hover:not(:disabled) {
background-color: #1976D2;
}

.btn-secondary {
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 3px;
color: #333;
border-color: #ddd;
}

/* Status Indicator */
.status-indicator {
padding: 4px;
border-radius: 3px;
text-align: center;
.btn-secondary:hover:not(:disabled) {
background-color: #e5e5e5;
}

/* Button Sizes */
.btn-sm {
padding: 4px 8px;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.btn-lg {
padding: 8px 16px;
font-size: 14px;
}

/* Button States */
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}

/* Settings Panel */
Expand Down Expand Up @@ -302,18 +353,9 @@ button:not(:disabled):hover {
}

/* Add these styles */
.avatar-settings {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 10px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}

.avatar-section {
margin-bottom: 20px;
padding: 5px 0;
}

.avatar-section h3 {
Expand All @@ -329,7 +371,7 @@ button:not(:disabled):hover {
margin-top: 10px;
max-height: 200px;
overflow-y: auto;
padding: 10px;
padding: 5px;
background: #f5f5f5;
border-radius: 4px;
}
Expand Down Expand Up @@ -365,3 +407,17 @@ button:not(:disabled):hover {
align-items: center;
gap: 8px;
}

/* Override jQuery UI tab styles for our use case */
#avatar-tabs {
border: none;
padding: 0;
}

#avatar-tabs .ui-tabs-panel {
padding: 10px 0;
}

.hidden {
display: none;
}
Loading

0 comments on commit b14d633

Please sign in to comment.