snxraven/pear-bootstrap-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Raven Scott 2025-01-15 01:10:25 -05:00
commit 5d6dd7eb69
6 changed files with 128 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
node_modules

18
app.js Normal file
View File

@ -0,0 +1,18 @@
document.addEventListener('DOMContentLoaded', () => {
const infoModalBtn = document.getElementById('info-modal-btn');
const alertModalBtn = document.getElementById('alert-modal-btn');
// Bootstrap Modal instances
const infoModal = new bootstrap.Modal(document.getElementById('infoModal'));
const alertModal = new bootstrap.Modal(document.getElementById('alertModal'));
// Event listeners
infoModalBtn.addEventListener('click', () => {
infoModal.show();
});
alertModalBtn.addEventListener('click', () => {
alertModal.show();
});
});

61
index.html Normal file
View File

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World App</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<script type="module" src="app.js"></script>
</head>
<body>
<div id="titlebar" class="d-flex align-items-center p-2 bg-dark text-light">
<pear-ctrl></pear-ctrl>
<h5 class="ms-auto mb-0">Hello World App</h5>
</div>
<div class="container mt-4 text-center">
<h1 class="mb-3">Hello, World! 👋</h1>
<p>Welcome to your first Pear application using Bootstrap!</p>
<button id="info-modal-btn" class="btn btn-primary">Show Info Modal</button>
<button id="alert-modal-btn" class="btn btn-danger">Show Alert Modal</button>
</div>
<!-- Info Modal -->
<div class="modal fade" id="infoModal" tabindex="-1" aria-labelledby="infoModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="infoModalLabel">Information</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
This is an example of a simple modal using Bootstrap. 🎉
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Alert Modal -->
<div class="modal fade" id="alertModal" tabindex="-1" aria-labelledby="alertModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-danger" id="alertModalLabel">Alert</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Be careful! This is an alert modal. 🚨
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Understood</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

29
package.json Normal file
View File

@ -0,0 +1,29 @@
{
"name": "pear-bootstrap-template",
"main": "index.html",
"pear": {
"name": "pear-bootstrap-template",
"type": "desktop",
"gui": {
"backgroundColor": "#1F2430",
"height": "540",
"width": "720"
},
"links": [
"http://*",
"https://*",
"ws://*",
"wss://*"
]
},
"type": "module",
"license": "Apache-2.0",
"scripts": {
"dev": "pear run -d .",
"test": "brittle test/*.test.js"
},
"devDependencies": {
"brittle": "^3.0.0",
"pear-interface": "^1.0.0"
}
}

17
styles.css Normal file
View File

@ -0,0 +1,17 @@
body {
background-color: #f8f9fa;
font-family: 'Arial', sans-serif;
}
#titlebar {
-webkit-app-region: drag;
}
.container {
padding: 2rem 0;
}
button {
margin: 0.5rem;
}

1
test/index.test.js Normal file
View File

@ -0,0 +1 @@
import test from 'brittle' // https://github.com/holepunchto/brittle