2023-10-17 02:35:03 +00:00
|
|
|
<!--
|
|
|
|
|
* Simple local webpage content editing extension that allows in-browser edition and HTML export
|
|
|
|
|
* Copyright (c) Ad5001 2023
|
|
|
|
|
*
|
|
|
|
|
* This program is free software: you can redistribute it and/or modify
|
|
|
|
|
* it under the terms of the GNU General Public License as published by
|
|
|
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
|
|
|
* (at your option) any later version.
|
|
|
|
|
*
|
|
|
|
|
* This program is distributed in the hope that it will be useful,
|
|
|
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
|
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
|
|
|
* GNU General Public License for more details.
|
|
|
|
|
*
|
|
|
|
|
* You should have received a copy of the GNU General Public License
|
|
|
|
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
|
|
|
-->
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>Simple Content Editor Control Popup</title>
|
|
|
|
|
<style>
|
2023-10-17 16:25:54 +00:00
|
|
|
body {
|
|
|
|
|
width: 20ch;
|
|
|
|
|
--green: green;
|
|
|
|
|
--blue: #4185ff;
|
|
|
|
|
--red: #bb1111;
|
|
|
|
|
--gray-status: gray;
|
|
|
|
|
--green-status: #003706;
|
|
|
|
|
}
|
|
|
|
|
|
2023-10-17 02:35:03 +00:00
|
|
|
button {
|
2023-10-17 16:25:54 +00:00
|
|
|
margin-top: .5ch;
|
2023-10-17 02:35:03 +00:00
|
|
|
border: none;
|
|
|
|
|
border-radius: .5em;
|
|
|
|
|
color: white;
|
|
|
|
|
padding: .5em;
|
|
|
|
|
padding-right: 1em;
|
|
|
|
|
padding-left: 1em;
|
|
|
|
|
cursor: pointer;
|
2023-10-17 16:25:54 +00:00
|
|
|
width: 100%;
|
2023-10-17 02:35:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
button:hover, button:focus {
|
|
|
|
|
filter: brightness(1.2)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
button:active {
|
|
|
|
|
filter: brightness(1.4)
|
|
|
|
|
}
|
2023-10-17 16:25:54 +00:00
|
|
|
|
|
|
|
|
#status {
|
|
|
|
|
font-family: sans-serif;
|
|
|
|
|
line-height: 1em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#status::before {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
content: " ";
|
|
|
|
|
margin-right: .6ch;
|
|
|
|
|
background: var(--gray-status);
|
|
|
|
|
width: .6em;
|
|
|
|
|
height: .6em;
|
|
|
|
|
border-radius: 100%;
|
|
|
|
|
}
|
2023-10-17 02:35:03 +00:00
|
|
|
|
|
|
|
|
#start-editing {
|
2023-10-17 16:25:54 +00:00
|
|
|
background: var(--green);
|
2023-10-17 02:35:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#save-html {
|
2023-10-17 16:25:54 +00:00
|
|
|
background: var(--blue);
|
2023-10-17 02:35:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#stop-editing {
|
2023-10-17 16:25:54 +00:00
|
|
|
background: var(--blue);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.editing > #status::before {
|
|
|
|
|
background: var(--green-status);
|
2023-10-17 02:35:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.not-editing > #save-html,
|
|
|
|
|
.not-editing > #stop-editing,
|
2023-10-17 16:25:54 +00:00
|
|
|
.editing > #start-editing,
|
|
|
|
|
.not-editing > #status > #status-editing,
|
|
|
|
|
.editing > #status > #status-not-editing {
|
2023-10-17 02:35:03 +00:00
|
|
|
display: none;
|
|
|
|
|
}
|
2023-10-17 16:25:54 +00:00
|
|
|
|
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
|
|
|
body {
|
|
|
|
|
--green-status: #30e60b;
|
|
|
|
|
--gray-status: lightgray;
|
|
|
|
|
background: #1c1b22;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-10-17 02:35:03 +00:00
|
|
|
</style>
|
|
|
|
|
<script src="control.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body id="editing-controls" class="not-editing">
|
2023-10-17 16:25:54 +00:00
|
|
|
<p id="status">Status: <span id="status-not-editing">Not Editing</span><span id="status-editing">Editing</span></p>
|
|
|
|
|
<button id="start-editing">Start/Resume Editing</button>
|
2023-10-17 02:35:03 +00:00
|
|
|
<button id="save-html">Save HTML</button><br>
|
2023-10-17 16:25:54 +00:00
|
|
|
<button id="stop-editing">Pause Editing</button>
|
2023-10-17 02:35:03 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
