- 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>
|
||||
<html>
|
||||
<head>
|
||||
<html data-bs-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>NeutralinoJs sample app</title>
|
||||
<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="js/main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="index.js"></script>
|
||||
|
||||
<!-- Main content -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Welcome to the App Home</h1>
|
||||
<h2 class="subtitle">Choose an app to get started</h2>
|
||||
|
||||
<!-- 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,
|
||||
</head>
|
||||
<body>
|
||||
<div id="navbar"></div>
|
||||
<div id="content"></div>
|
||||
<div id="footer"></div>
|
||||
<!-- Neutralino.js client. This file is gitignored,
|
||||
because `neu update` typically downloads it.
|
||||
Avoid copy-pasting it.
|
||||
Avoid copy-pasting it.
|
||||
-->
|
||||
<script src="js/neutralino.js"></script>
|
||||
</body>
|
||||
</body>
|
||||
</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