Max665/clearapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Creates sample home page with jquery and bulma

Browse Source
This commit is contained in:
Max W. 2024-05-15 00:07:02 +02:00
parent 12706475fd
commit 70659ca292
5 changed files with 94 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/index.html
View File

@ -4,24 +4,88 @@
<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">
<script src="lib/jquery-3.7.1.min.js"></script>
<script src="js/main.js"></script>
</head> </head>
<body> <body>
<div id="neutralinoapp">
<h1>NeutralinoJs</h1> <!-- Main content -->
<div id="info"></div> <section class="section">
<br/> <div class="container">
<img src="./icons/logo.gif" alt="Neutralinojs" /> <h1 class="title">Welcome to the App Home</h1>
<div> <h2 class="subtitle">Choose an app to get started</h2>
<a href="#" onclick="openDocs();">Docs</a> &middot;
<a href="#" onclick="openTutorial();">Video tutorial</a> <!-- 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>
</div> </div>
</section>
<!-- Neutralino.js client. This file is gitignored, <!-- 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>
<!-- Your app's source files -->
<script src="js/main.js"></script>
</body> </body>
</html> </html>

113
src/js/main.js
View File

@ -1,99 +1,16 @@
// This is just a sample app. You can structure your Neutralinojs app code as you wish. $(document).ready(function() {
// This example app is written with vanilla JavaScript and HTML. console.log("Initializing main.js...");
// Feel free to use any frontend framework you like :) init();
// See more details: https://neutralino.js.org/docs/how-to/use-a-frontend-library });
/* function init(){
Function to display information about the Neutralino app. $("#home-btn-1").click(function(){
This function updates the content of the 'info' element in the HTML console.log("Home button 1 clicked");
with details regarding the running Neutralino application, including });
its ID, port, operating system, and version information. $("#home-btn-2").click(function(){
*/ console.log("Home button 2 clicked");
function showInfo() { });
document.getElementById('info').innerHTML = ` $("#home-btn-3").click(function(){
${NL_APPID} is running on port ${NL_PORT} inside ${NL_OS} console.log("Home button 3 clicked");
<br/><br/> });
<span>server: v${NL_VERSION} . client: v${NL_CVERSION}</span> }
`;
}
/*
Function to open the official Neutralino documentation in the default web browser.
*/
function openDocs() {
Neutralino.os.open("https://neutralino.js.org/docs");
}
/*
Function to open a tutorial video on Neutralino's official YouTube channel in the default web browser.
*/
function openTutorial() {
Neutralino.os.open("https://www.youtube.com/c/CodeZri");
}
/*
Function to set up a system tray menu with options specific to the window mode.
This function checks if the application is running in window mode, and if so,
it defines the tray menu items and sets up the tray accordingly.
*/
function setTray() {
// Tray menu is only available in window mode
if(NL_MODE != "window") {
console.log("INFO: Tray menu is only available in the window mode.");
return;
}
// Define tray menu items
let tray = {
icon: "/resources/icons/trayIcon.png",
menuItems: [
{id: "VERSION", text: "Get version"},
{id: "SEP", text: "-"},
{id: "QUIT", text: "Quit"}
]
};
// Set the tray menu
Neutralino.os.setTray(tray);
}
/*
Function to handle click events on the tray menu items.
This function performs different actions based on the clicked item's ID,
such as displaying version information or exiting the application.
*/
function onTrayMenuItemClicked(event) {
switch(event.detail.id) {
case "VERSION":
// Display version information
Neutralino.os.showMessageBox("Version information",
`Neutralinojs server: v${NL_VERSION} | Neutralinojs client: v${NL_CVERSION}`);
break;
case "QUIT":
// Exit the application
Neutralino.app.exit();
break;
}
}
/*
Function to handle the window close event by gracefully exiting the Neutralino application.
*/
function onWindowClose() {
Neutralino.app.exit();
}
// Initialize Neutralino
Neutralino.init();
// Register event listeners
Neutralino.events.on("trayMenuItemClicked", onTrayMenuItemClicked);
Neutralino.events.on("windowClose", onWindowClose);
// Conditional initialization: Set up system tray if not running on macOS
if(NL_OS != "Darwin") { // TODO: Fix https://github.com/neutralinojs/neutralinojs/issues/615
setTray();
}
// Display app information
showInfo();

3
src/lib/bulma.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
src/lib/jquery-3.7.1.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

20
src/styles.css
View File

@ -1,20 +0,0 @@
body {
background-color: white;
}
#neutralinoapp {
text-align: center;
-webkit-user-select: none;
user-select: none;
cursor: default;
}
#neutralinoapp h1{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 20px;
}
#neutralinoapp > div {
font-size: 16px;
font-weight: normal;
}