Skip to content

Refactor YouTube Webcam Sync HTML: Enhance UI, add combined video exp… #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
kody-w wants to merge 1 commit into from
Closed

Refactor YouTube Webcam Sync HTML: Enhance UI, add combined video exp… #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,035 changes: 1,026 additions & 9 deletions 3d-particle-physics-simulator.html
View file
Open in desktop

Large diffs are not rendered by default.

876 changes: 867 additions & 9 deletions 3d-world-navigation.html
View file
Open in desktop

Large diffs are not rendered by default.

1,063 changes: 1,054 additions & 9 deletions 5.html
View file
Open in desktop

Large diffs are not rendered by default.

886 changes: 876 additions & 10 deletions Agent Workflow System.html
View file
Open in desktop

Large diffs are not rendered by default.

6,438 changes: 6,429 additions & 9 deletions Copilot_Companion.html
View file
Open in desktop

Large diffs are not rendered by default.

6,143 changes: 6,133 additions & 10 deletions NexusWorlds.html
View file
Open in desktop

Large diffs are not rendered by default.

498 changes: 488 additions & 10 deletions TAROT_DEMO.html
View file
Open in desktop

Large diffs are not rendered by default.

1,102 changes: 1,083 additions & 19 deletions TAROT_SYSTEM_ADDITION.html
View file
Open in desktop

Large diffs are not rendered by default.

4,765 changes: 4,753 additions & 12 deletions a.html
View file
Open in desktop

Large diffs are not rendered by default.

822 changes: 813 additions & 9 deletions agent-browser.html
View file
Open in desktop

Large diffs are not rendered by default.

2,404 changes: 2,395 additions & 9 deletions agent-deployment-prototype.html
View file
Open in desktop

Large diffs are not rendered by default.

4,265 changes: 4,255 additions & 10 deletions ai-companion-hub-enhanced.html
View file
Open in desktop

Large diffs are not rendered by default.

1,289 changes: 1,280 additions & 9 deletions ai-simulation-sales-demo.html
View file
Open in desktop

Large diffs are not rendered by default.

646 changes: 637 additions & 9 deletions algorithm-visualizer-pro.html
View file
Open in desktop

Large diffs are not rendered by default.

167 changes: 158 additions & 9 deletions api-request-tester.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,168 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="0; url=Exhibition_Halls/AI_Research/api-request-tester.html">
<script>window.location.replace("Exhibition_Halls/AI_Research/api-request-tester.html");</script>
<title>Redirecting...</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API Request Tester</title>
<meta name="description" content="Test REST APIs with GET, POST, PUT, DELETE methods, custom headers, request history, and response visualization">
<style>
body { font-family: system-ui, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background: #111; color: #eee; }
.card { background: #222; padding: 2rem; border-radius: 1rem; text-align: center; border: 1px solid #333; }
a { color: #4ecdc4; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Monaco', monospace; background: #1a1a1a; color: #e0e0e0; height: 100vh; overflow: hidden; }
#app { display: flex; flex-direction: column; height: 100vh; }
#header { background: #2a2a2a; padding: 15px 30px; border-bottom: 2px solid #00d9ff; }
h1 { font-size: 18px; color: #00d9ff; }
#request-builder { background: #2a2a2a; padding: 20px; border-bottom: 1px solid #444; }
.request-line { display: flex; gap: 10px; margin-bottom: 15px; }
select, input, textarea { background: #1a1a1a; border: 1px solid #444; color: #e0e0e0; padding: 10px; border-radius: 4px; font-family: inherit; }
select { width: 120px; }
input[type="text"] { flex: 1; }
button { padding: 10px 20px; background: #00d9ff; color: #000; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; }
button:hover { background: #00eaff; }
.tabs { display: flex; gap: 10px; margin-bottom: 15px; }
.tab { padding: 8px 16px; background: #1a1a1a; border: 1px solid #444; border-radius: 4px; cursor: pointer; }
.tab.active { background: #00d9ff; color: #000; }
textarea { width: 100%; min-height: 100px; font-size: 11px; }
#response-area { flex: 1; display: flex; overflow: hidden; }
#history { width: 250px; background: #2a2a2a; border-right: 1px solid #444; padding: 15px; overflow-y: auto; }
#response-panel { flex: 1; background: #1a1a1a; padding: 20px; overflow-y: auto; }
.history-item { padding: 10px; background: rgba(0, 217, 255, 0.1); border-radius: 4px; margin-bottom: 8px; cursor: pointer; font-size: 11px; }
.history-item:hover { background: rgba(0, 217, 255, 0.2); }
.method { display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: bold; }
.method-get { background: #00ff88; color: #000; }
.method-post { background: #00d9ff; color: #000; }
.method-put { background: #ffea00; color: #000; }
.method-delete { background: #ff006e; color: #fff; }
pre { background: #0a0a0a; padding: 15px; border-radius: 4px; overflow-x: auto; font-size: 11px; }
</style>
</head>
<body>
<div class="card">
<p>This artwork has been moved to the <a href="Exhibition_Halls/AI_Research/api-request-tester.html">Exhibition Halls</a>.</p>
<p><small>Redirecting you now...</small></p>
<div id="app">
<div id="header">
<h1>🌐 API Request Tester</h1>
</div>

<div id="request-builder">
<div class="request-line">
<select id="method">
<option value="GET">GET</option>
<option value="POST">POST</option>
<option value="PUT">PUT</option>
<option value="DELETE">DELETE</option>
</select>
<input type="text" id="url" placeholder="https://api.example.com/endpoint" value="https://jsonplaceholder.typicode.com/posts/1">
<button onclick="sendRequest()">Send</button>
</div>

<div class="tabs">
<div class="tab active" data-tab="headers">Headers</div>
<div class="tab" data-tab="body">Body</div>
</div>

<div id="tab-content">
<div id="headers-tab" class="tab-pane">
<textarea id="headers" placeholder='{"Content-Type": "application/json"}'>{}</textarea>
</div>
<div id="body-tab" class="tab-pane" style="display: none;">
<textarea id="body" placeholder='{"key": "value"}'>{}</textarea>
</div>
</div>
</div>

<div id="response-area">
<div id="history">
<h3 style="color: #00d9ff; font-size: 12px; margin-bottom: 15px;">HISTORY</h3>
<div id="history-list"></div>
</div>
<div id="response-panel">
<h3 style="color: #00d9ff; margin-bottom: 15px;">Response</h3>
<div id="response-status"></div>
<pre id="response-body">Send a request to see the response</pre>
</div>
</div>
</div>

<script>
let history = JSON.parse(localStorage.getItem('apiHistory')) || [];

document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', () => {
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
tab.classList.add('active');
document.querySelectorAll('.tab-pane').forEach(p => p.style.display = 'none');
document.getElementById(tab.dataset.tab + '-tab').style.display = 'block';
});
});

async function sendRequest() {
const method = document.getElementById('method').value;
const url = document.getElementById('url').value;

try {
const headers = JSON.parse(document.getElementById('headers').value || '{}');
const body = document.getElementById('body').value;

const options = {
method,
headers: {
'Content-Type': 'application/json',
...headers
}
};

if (method !== 'GET' && body) {
options.body = body;
}

const startTime = Date.now();
const response = await fetch(url, options);
const duration = Date.now() - startTime;

const responseData = await response.json();

document.getElementById('response-status').innerHTML = `
<div style="margin-bottom: 15px; padding: 10px; background: ${response.ok ? '#00ff88' : '#ff006e'}; color: #000; border-radius: 4px;">
<strong>Status:</strong> ${response.status} ${response.statusText} | <strong>Time:</strong> ${duration}ms
</div>
`;

document.getElementById('response-body').textContent = JSON.stringify(responseData, null, 2);

addToHistory({ method, url, status: response.status, timestamp: Date.now() });

} catch(error) {
document.getElementById('response-status').innerHTML = `
<div style="margin-bottom: 15px; padding: 10px; background: #ff006e; color: #fff; border-radius: 4px;">
<strong>Error:</strong> ${error.message}
</div>
`;
document.getElementById('response-body').textContent = error.stack;
}
}

function addToHistory(request) {
history.unshift(request);
if (history.length > 20) history = history.slice(0, 20);
localStorage.setItem('apiHistory', JSON.stringify(history));
renderHistory();
}

function renderHistory() {
const list = document.getElementById('history-list');
list.innerHTML = history.map((req, i) => `
<div class="history-item" onclick="loadFromHistory(${i})">
<span class="method method-${req.method.toLowerCase()}">${req.method}</span>
<div style="margin-top: 5px; color: #aaa; word-break: break-all;">${req.url}</div>
<div style="margin-top: 5px; font-size: 10px; color: #666;">${new Date(req.timestamp).toLocaleTimeString()}</div>
</div>
`).join('');
}

window.loadFromHistory = function(index) {
const req = history[index];
document.getElementById('method').value = req.method;
document.getElementById('url').value = req.url;
};

renderHistory();
</script>
</body>
</html>
Loading
Loading