- Added UI libs
- Added views - Added view manager - Added router - Added home/config view - Refactored project structure
This commit is contained in:
parent
4abbf5a3d6
commit
66795a29b2
@ -1 +1 @@
|
|||||||
{"height":500,"maxHeight":-1,"maxWidth":-1,"maximize":false,"minHeight":200,"minWidth":400,"resizable":true,"width":800,"x":781,"y":427}
|
{"height":1050,"maxHeight":-1,"maxWidth":-1,"maximize":true,"minHeight":200,"minWidth":400,"resizable":true,"width":1938,"x":-1929,"y":343}
|
||||||
@ -1,91 +1,23 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html data-bs-theme="dark">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>NeutralinoJs sample app</title>
|
<title>NeutralinoJs sample app</title>
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css">
|
||||||
<link rel="stylesheet" href="lib/bulma.min.css">
|
<link rel="stylesheet" href="lib/bootstrap.min.css">
|
||||||
|
<link rel="stylesheet" href="lib/animate.min.css">
|
||||||
<script src="lib/jquery-3.7.1.min.js"></script>
|
<script src="lib/jquery-3.7.1.min.js"></script>
|
||||||
<script src="js/main.js"></script>
|
<script src="index.js"></script>
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<!-- Main content -->
|
</head>
|
||||||
<section class="section">
|
<body>
|
||||||
<div class="container">
|
<div id="navbar"></div>
|
||||||
<h1 class="title">Welcome to the App Home</h1>
|
<div id="content"></div>
|
||||||
<h2 class="subtitle">Choose an app to get started</h2>
|
<div id="footer"></div>
|
||||||
|
<!-- Neutralino.js client. This file is gitignored,
|
||||||
<!-- App Menu -->
|
|
||||||
<div class="columns is-multiline">
|
|
||||||
<div class="column is-one-third" id="home-btn-1">
|
|
||||||
<a href="#" class="box">
|
|
||||||
<article class="media">
|
|
||||||
<div class="media-left">
|
|
||||||
<figure class="image is-64x64">
|
|
||||||
<img src="https://via.placeholder.com/64" alt="App 1">
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
<div class="media-content">
|
|
||||||
<div class="content">
|
|
||||||
<p>
|
|
||||||
<strong>Coperate clearer</strong>
|
|
||||||
<br>
|
|
||||||
Clear your text from sensible data
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="column is-one-third" id="home-btn-2">
|
|
||||||
<a href="#" class="box">
|
|
||||||
<article class="media">
|
|
||||||
<div class="media-left">
|
|
||||||
<figure class="image is-64x64">
|
|
||||||
<img src="https://via.placeholder.com/64" alt="App 2">
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
<div class="media-content">
|
|
||||||
<div class="content">
|
|
||||||
<p>
|
|
||||||
<strong>Configuration</strong>
|
|
||||||
<br>
|
|
||||||
Manage configurations
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="column is-one-third" id="home-btn-3">
|
|
||||||
<a href="#" class="box">
|
|
||||||
<article class="media">
|
|
||||||
<div class="media-left">
|
|
||||||
<figure class="image is-64x64">
|
|
||||||
<img src="https://via.placeholder.com/64" alt="App 3">
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
<div class="media-content">
|
|
||||||
<div class="content">
|
|
||||||
<p>
|
|
||||||
<strong>About</strong>
|
|
||||||
<br>
|
|
||||||
View license details
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<!-- Add more apps here as needed -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Neutralino.js client. This file is gitignored,
|
|
||||||
because `neu update` typically downloads it.
|
because `neu update` typically downloads it.
|
||||||
Avoid copy-pasting it.
|
Avoid copy-pasting it.
|
||||||
-->
|
-->
|
||||||
<script src="js/neutralino.js"></script>
|
<script src="js/neutralino.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
46
src/index.js
Normal file
46
src/index.js
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
$(document).ready(function() {
|
||||||
|
// Load navbar
|
||||||
|
$('#navbar').load('components/navbar.html', function() {
|
||||||
|
// Attach click event to navbar links
|
||||||
|
$('#navbar a').on('click', function(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
const view = $(this).data('view');
|
||||||
|
loadView(view);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Load footer
|
||||||
|
$('#footer').load('components/footer.html');
|
||||||
|
|
||||||
|
// Load the initial view
|
||||||
|
const initialView = location.hash.replace('#', '') || 'home';
|
||||||
|
loadView(initialView);
|
||||||
|
});
|
||||||
|
|
||||||
|
function loadView(view) {
|
||||||
|
$("#content").fadeOut(200, function() {
|
||||||
|
const viewPath = `views/${view}/${view}`;
|
||||||
|
$('#content').load(`${viewPath}.html`, function() {
|
||||||
|
// Remove existing view-specific styles and scripts
|
||||||
|
$('head').find('link[data-view], script[data-view]').remove();
|
||||||
|
|
||||||
|
// Load view-specific CSS
|
||||||
|
$('<link>')
|
||||||
|
.attr('rel', 'stylesheet')
|
||||||
|
.attr('href', `${viewPath}.css`)
|
||||||
|
.attr('data-view', view)
|
||||||
|
.appendTo('head');
|
||||||
|
|
||||||
|
// Load view-specific JS by creating a script element
|
||||||
|
const scriptElement = document.createElement('script');
|
||||||
|
scriptElement.src = `${viewPath}.js`;
|
||||||
|
scriptElement.setAttribute('data-view', view);
|
||||||
|
scriptElement.onload = function() {
|
||||||
|
console.log(`Initializing ${view}.js...`);
|
||||||
|
};
|
||||||
|
document.head.appendChild(scriptElement);
|
||||||
|
$("#content").fadeIn(200);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
@ -1,16 +0,0 @@
|
|||||||
$(document).ready(function() {
|
|
||||||
console.log("Initializing main.js...");
|
|
||||||
init();
|
|
||||||
});
|
|
||||||
|
|
||||||
function init(){
|
|
||||||
$("#home-btn-1").click(function(){
|
|
||||||
console.log("Home button 1 clicked");
|
|
||||||
});
|
|
||||||
$("#home-btn-2").click(function(){
|
|
||||||
console.log("Home button 2 clicked");
|
|
||||||
});
|
|
||||||
$("#home-btn-3").click(function(){
|
|
||||||
console.log("Home button 3 clicked");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
8
src/lib/animate.min.css
vendored
Normal file
8
src/lib/animate.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
6
src/lib/bootstrap.min.css
vendored
Normal file
6
src/lib/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
7
src/lib/bootstrap.min.js
vendored
Normal file
7
src/lib/bootstrap.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
3
src/lib/bulma.min.css
vendored
3
src/lib/bulma.min.css
vendored
File diff suppressed because one or more lines are too long
9
src/lib/hover-min.css
vendored
Normal file
9
src/lib/hover-min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
16
src/router.js
Normal file
16
src/router.js
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
function navigate(view) {
|
||||||
|
history.pushState({view: view}, null, `#${view}`);
|
||||||
|
loadView(view);
|
||||||
|
}
|
||||||
|
|
||||||
|
$(window).on('popstate', function(event) {
|
||||||
|
const state = event.originalEvent.state;
|
||||||
|
if (state && state.view) {
|
||||||
|
loadView(state.view);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
const initialView = location.hash.replace('#', '') || 'home';
|
||||||
|
loadView(initialView);
|
||||||
|
});
|
||||||
0
src/views/config/config.css
Normal file
0
src/views/config/config.css
Normal file
12
src/views/config/config.html
Normal file
12
src/views/config/config.html
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<div class="position-relative">
|
||||||
|
<button type="button" class="btn btn-light back-button top-0 start-0 m-3" onclick="loadView('home')">Back</button>
|
||||||
|
</div>
|
||||||
|
<section class="py-5">
|
||||||
|
<div class="container text-center">
|
||||||
|
<h1 class="display-4"><strong>Cooperate Cleaner</strong> Configuration</h1>
|
||||||
|
<p class="lead mb-5">Create and manage filtering rules</p>
|
||||||
|
|
||||||
|
<!-- CONTENT -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
0
src/views/config/config.js
Normal file
0
src/views/config/config.js
Normal file
8
src/views/home/home.css
Normal file
8
src/views/home/home.css
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
.app-card:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
transition: .2s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.app-card {
|
||||||
|
transition: .2s;
|
||||||
|
}
|
||||||
38
src/views/home/home.html
Normal file
38
src/views/home/home.html
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
<section class="py-5">
|
||||||
|
<div class="container text-center">
|
||||||
|
<h1 class="display-4">Welcome to <strong>Cooperate Cleaner</strong></h1>
|
||||||
|
<p class="lead mb-5">Choose an app to get started</p>
|
||||||
|
|
||||||
|
<!-- App Menu -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-4 col-md-6 mb-4">
|
||||||
|
<div class="card app-card shadow-sm animate__animated animate__fadeIn" id="home-btn-cc">
|
||||||
|
<img src="https://via.placeholder.com/300x200" alt="App 1" class="card-img-top">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Cooperate clearer</h5>
|
||||||
|
<p class="card-text">Clear your text from sensible data</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-6 mb-4">
|
||||||
|
<div class="card app-card shadow-sm animate__animated animate__fadeIn" id="home-btn-config">
|
||||||
|
<img src="https://via.placeholder.com/300x200" alt="App 2" class="card-img-top">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Configuration</h5>
|
||||||
|
<p class="card-text">Manage configurations</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-6 mb-4">
|
||||||
|
<div class="card app-card shadow-sm animate__animated animate__fadeIn" id="home-btn-about">
|
||||||
|
<img src="https://via.placeholder.com/300x200" alt="App 3" class="card-img-top">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">About</h5>
|
||||||
|
<p class="card-text">View license details</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Add more apps here as needed -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
19
src/views/home/home.js
Normal file
19
src/views/home/home.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
$(document).ready(function() {
|
||||||
|
console.log("Initialization of home.js finished.");
|
||||||
|
init();
|
||||||
|
});
|
||||||
|
|
||||||
|
function init(){
|
||||||
|
$("#home-btn-cc").click(function(){
|
||||||
|
console.log("cc button clicked");
|
||||||
|
loadView("cleaner");
|
||||||
|
});
|
||||||
|
$("#home-btn-config").click(function(){
|
||||||
|
console.log("Config button clicked");
|
||||||
|
loadView("config");
|
||||||
|
});
|
||||||
|
$("#home-btn-about").click(function(){
|
||||||
|
console.log("About button clicked");
|
||||||
|
loadView("about");
|
||||||
|
});
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user