mirror of
https://github.com/cupcakearmy/volta.git
synced 2024-12-22 07:56:27 +00:00
Panel
This commit is contained in:
nicco
parent
01db723768
commit
068f0a15a6
139
src/index.css
Executable file
139
src/index.css
Executable file
@ -0,0 +1,139 @@
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url('./vendor/Source\ Sans\ Pro.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url('./vendor/Source\ Sans\ Pro\ Bold.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
color: #3B252C;
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: #F7FFF7;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 1px solid #E9F1F7;
|
||||
}
|
||||
|
||||
#app {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
#app .title {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#app .link {
|
||||
color: #3F8EFC;
|
||||
/* color: inherit; */
|
||||
font-size: 1em;
|
||||
/* font-weight: normal; */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#app .link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#currentBattery {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#settings #values {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#settings #slider {
|
||||
padding: 1em .6em;
|
||||
}
|
||||
|
||||
#settings #slider-cont {
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
#settings .noUi-target {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#settings .noUi-horizontal {
|
||||
height: .3em;
|
||||
}
|
||||
|
||||
#settings .noUi-connect {
|
||||
background: #3F8EFC;
|
||||
}
|
||||
|
||||
#settings .noUi-connects {
|
||||
background: #E9F1F7;
|
||||
}
|
||||
|
||||
#settings .noUi-horizontal .noUi-handle {
|
||||
cursor: pointer;
|
||||
width: 1.25em;
|
||||
border-radius: 2em;
|
||||
height: 1.25em;
|
||||
background: #3F8EFC;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
top: -.5em;
|
||||
right: -.6em !important;
|
||||
}
|
||||
|
||||
#settings .noUi-horizontal .noUi-handle:focus {
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#settings .noUi-origin .noUi-handle::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#settings .noUi-origin .noUi-handle::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
background-color: transparent;
|
||||
border: 2px solid #3F8EFC;
|
||||
padding: .75em;
|
||||
border-radius: 2em;
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: .5em;
|
||||
transition: all ease .25s;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
background-color: #3F8EFC;
|
||||
border-color: #3473CC;
|
||||
}
|
||||
59
src/index.html
Executable file
59
src/index.html
Executable file
@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Weather</title>
|
||||
<link rel="stylesheet" href="./index.css" charset="utf-8">
|
||||
<link rel="stylesheet" href="./vendor/nouislider.min.css" charset="utf-8">
|
||||
<script charset="utf-8" src="./vendor/nouislider.min.js">
|
||||
</script>
|
||||
<script charset="utf-8">
|
||||
require('./index')
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="app">
|
||||
|
||||
<div class="title">Current:
|
||||
<span id="currentBattery"></span>
|
||||
</div>
|
||||
<small>Note: Due to limits in the implementation the actual battery value may differ from the one given by the OS</small>
|
||||
<hr/>
|
||||
|
||||
<div id="settings">
|
||||
<div class="title">Limits</div>
|
||||
<div id="slider">
|
||||
<div id="slider-range"></div>
|
||||
</div>
|
||||
<div id="values">
|
||||
<div id="min">
|
||||
<strong>Min:</strong>
|
||||
<span id="min-value"></span>
|
||||
</div>
|
||||
<div id="max">
|
||||
<strong>Max:</strong>
|
||||
<span id="max-value"></span>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<small>Set at which battery level Volta should notify you</small>
|
||||
</div>
|
||||
<hr/>
|
||||
|
||||
<div class="title">Start on boot
|
||||
<input type="checkbox" id="launch">
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="title link" id="close">Close Window</div>
|
||||
<div class="title link" id="quit">Quit App</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
61
src/index.js
Executable file
61
src/index.js
Executable file
@ -0,0 +1,61 @@
|
||||
const {
|
||||
ipcRenderer,
|
||||
shell,
|
||||
remote
|
||||
} = require('electron')
|
||||
|
||||
let rangeSlider
|
||||
let autoLaunch
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.getElementById('quit').addEventListener('click', () => {
|
||||
ipcRenderer.send('quit')
|
||||
})
|
||||
document.getElementById('close').addEventListener('click', () => {
|
||||
remote.getCurrentWindow().hide()
|
||||
})
|
||||
})
|
||||
|
||||
function iniSlider() {
|
||||
rangeSlider = document.getElementById('slider-range')
|
||||
|
||||
noUiSlider.create(rangeSlider, {
|
||||
start: [0, 100],
|
||||
step: 0.01,
|
||||
range: {
|
||||
min: [0],
|
||||
max: [100]
|
||||
},
|
||||
connect: true
|
||||
})
|
||||
|
||||
rangeSlider.noUiSlider.on('update', function (values, handle) {
|
||||
const min = parseInt(values[0])
|
||||
const max = parseInt(values[1])
|
||||
document.getElementById('min-value').innerHTML = min
|
||||
document.getElementById('max-value').innerHTML = max
|
||||
ipcRenderer.send('values', {
|
||||
max,
|
||||
min
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function iniLaunch() {
|
||||
autoLaunch = document.getElementById('launch')
|
||||
autoLaunch.addEventListener('change', () => ipcRenderer.send('launch', autoLaunch.checked))
|
||||
}
|
||||
|
||||
ipcRenderer.on('values', (event, values) => {
|
||||
if (rangeSlider === undefined) iniSlider()
|
||||
rangeSlider.noUiSlider.set([values.min, values.max]);
|
||||
})
|
||||
|
||||
ipcRenderer.on('launch', (event, checked) => {
|
||||
if (autoLaunch === undefined) iniLaunch()
|
||||
autoLaunch.checked = checked
|
||||
})
|
||||
|
||||
ipcRenderer.on('battery', (event, value) => {
|
||||
document.getElementById('currentBattery').innerText = `${value}%`
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user