index.html•7.93 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Goose App Maker Demo</title>
<link rel="stylesheet" href="style.css?v=1.0">
<!-- Global error handling script -->
<script>
// Global error handler to capture and report all unhandled errors
window.onerror = function(message, source, lineno, colno, error) {
// Make sure goose_api.js is loaded before trying to report errors
if (typeof reportError === 'function') {
reportError(`Unhandled error: ${message} at ${source}:${lineno}:${colno} | ${error ? error.stack : 'No stack trace available'}`);
} else {
console.error('Error occurred before goose_api.js was loaded:', message);
// Queue the error to be reported once the API is loaded
window.addEventListener('load', function() {
if (typeof reportError === 'function') {
reportError(`Queued error: ${message} at ${source}:${lineno}:${colno} | ${error ? error.stack : 'No stack trace available'}`);
}
});
}
// Display error in console
console.error('Global error handler:', message, error);
// Return true to prevent the default browser error handler
return true;
};
// Capture unhandled promise rejections
window.addEventListener('unhandledrejection', function(event) {
const error = event.reason;
const message = error ? (error.message || 'Unhandled promise rejection') : 'Unhandled promise rejection';
if (typeof reportError === 'function') {
reportError(`Unhandled promise rejection: ${message} | ${error ? error.stack : 'No stack trace available'}`);
} else {
console.error('Promise rejection occurred before goose_api.js was loaded:', message);
// Queue the error to be reported once the API is loaded
window.addEventListener('load', function() {
if (typeof reportError === 'function') {
reportError(`Queued promise rejection: ${message} | ${error ? error.stack : 'No stack trace available'}`);
}
});
}
console.error('Unhandled promise rejection:', error);
// Prevent the default handling
event.preventDefault();
});
</script>
</head>
<body>
<div class="container">
<header>
<h1>Goose App Maker Demo</h1>
<p class="subtitle">A simple interactive web application</p>
</header>
<main>
<section class="demo-section goose-api-section">
<h2>Goose API Demo</h2>
<!-- Text Response Section -->
<div class="api-demo-section">
<h3>Text Response</h3>
<div class="goose-container">
<div class="goose-input">
<textarea id="text-message" placeholder="Ask a question that requires a paragraph response...">Explain how HTTP works in a paragraph</textarea>
<div class="button-row">
<button id="text-send-btn" class="btn">Get Text Response</button>
<button id="text-clear-btn" class="btn reset-btn">Clear</button>
</div>
</div>
<div class="goose-response">
<h4>Response:</h4>
<div id="text-response" class="response-content"></div>
</div>
</div>
</div>
<!-- List Response Section -->
<div class="api-demo-section">
<h3>List Response</h3>
<div class="goose-container">
<div class="goose-input">
<textarea id="list-message" placeholder="Ask for a list of items...">List 5 popular programming languages</textarea>
<div class="button-row">
<button id="list-send-btn" class="btn">Get List Response</button>
<button id="list-clear-btn" class="btn reset-btn">Clear</button>
</div>
</div>
<div class="goose-response">
<h4>Response:</h4>
<div id="list-response" class="response-content"></div>
</div>
</div>
</div>
<!-- Table Response Section -->
<div class="api-demo-section">
<h3>Table Response</h3>
<div class="goose-container">
<div class="goose-input">
<textarea id="table-message" placeholder="Ask for information that would be best presented in a table...">Compare the features of 3 popular cloud providers</textarea>
<div class="button-row">
<button id="table-send-btn" class="btn">Get Table Response</button>
<button id="table-clear-btn" class="btn reset-btn">Clear</button>
</div>
</div>
<div class="goose-response">
<h4>Response:</h4>
<div id="table-response" class="response-content"></div>
</div>
</div>
</div>
</section>
<section class="demo-section">
<h2>Interactive Counter</h2>
<div class="counter-container">
<button id="decrease-btn" class="btn">-</button>
<span id="counter-value">0</span>
<button id="increase-btn" class="btn">+</button>
</div>
<button id="reset-btn" class="btn reset-btn">Reset</button>
</section>
<section class="demo-section">
<h2>Color Changer</h2>
<div class="color-box" id="color-box">
<p>Click the buttons below to change my color</p>
</div>
<div class="color-buttons">
<button class="color-btn" data-color="#FF5733">Red</button>
<button class="color-btn" data-color="#33FF57">Green</button>
<button class="color-btn" data-color="#3357FF">Blue</button>
<button class="color-btn" data-color="#F3FF33">Yellow</button>
</div>
</section>
<section class="demo-section">
<h2>Todo List</h2>
<div class="todo-container">
<div class="todo-input">
<input type="text" id="todo-input" placeholder="Add a new task...">
<button id="add-todo-btn" class="btn">Add</button>
</div>
<ul id="todo-list" class="todo-list">
<!-- Todo items will be added here by JavaScript -->
</ul>
</div>
</section>
</main>
<footer>
<p>Created with Goose App Maker - <span id="current-date"></span></p>
</footer>
</div>
<script src="goose_api.js?v=2"></script>
<script src="script.js?v=2"></script>
</body>
</html>