Creates sample home page with jquery and bulma
This commit is contained in:
parent
12706475fd
commit
70659ca292
@ -4,24 +4,88 @@
|
||||
<meta charset="UTF-8">
|
||||
<title>NeutralinoJs sample app</title>
|
||||
<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>
|
||||
<body>
|
||||
<div id="neutralinoapp">
|
||||
<h1>NeutralinoJs</h1>
|
||||
<div id="info"></div>
|
||||
<br/>
|
||||
<img src="./icons/logo.gif" alt="Neutralinojs" />
|
||||
<div>
|
||||
<a href="#" onclick="openDocs();">Docs</a> ·
|
||||
<a href="#" onclick="openTutorial();">Video tutorial</a>
|
||||
|
||||
<!-- 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,
|
||||
because `neu update` typically downloads it.
|
||||
Avoid copy-pasting it.
|
||||
-->
|
||||
<script src="js/neutralino.js"></script>
|
||||
<!-- Your app's source files -->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
113
src/js/main.js
113
src/js/main.js
@ -1,99 +1,16 @@
|
||||
// This is just a sample app. You can structure your Neutralinojs app code as you wish.
|
||||
// This example app is written with vanilla JavaScript and HTML.
|
||||
// Feel free to use any frontend framework you like :)
|
||||
// See more details: https://neutralino.js.org/docs/how-to/use-a-frontend-library
|
||||
$(document).ready(function() {
|
||||
console.log("Initializing main.js...");
|
||||
init();
|
||||
});
|
||||
|
||||
/*
|
||||
Function to display information about the Neutralino app.
|
||||
This function updates the content of the 'info' element in the HTML
|
||||
with details regarding the running Neutralino application, including
|
||||
its ID, port, operating system, and version information.
|
||||
*/
|
||||
function showInfo() {
|
||||
document.getElementById('info').innerHTML = `
|
||||
${NL_APPID} is running on port ${NL_PORT} inside ${NL_OS}
|
||||
<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();
|
||||
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");
|
||||
});
|
||||
}
|
||||
3
src/lib/bulma.min.css
vendored
Normal file
3
src/lib/bulma.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
2
src/lib/jquery-3.7.1.min.js
vendored
Normal file
2
src/lib/jquery-3.7.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -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;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user