updated status page
This commit is contained in:
polarDefender
parent
b368a77300
commit
ced042a992
3 changed files with 136 additions and 17 deletions
|
|
@ -1,4 +1,4 @@
|
|||
.status-element{
|
||||
.status-element {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
@ -6,14 +6,17 @@
|
|||
margin-top: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.green-dot {
|
||||
font-size: 15px;
|
||||
color: #32a852;
|
||||
}
|
||||
|
||||
.yellow-dot {
|
||||
font-size: 15px;
|
||||
color: #ccc731;
|
||||
}
|
||||
|
||||
.editabl-content {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
|
|
@ -21,17 +24,95 @@
|
|||
align-items: center;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.invite-link {
|
||||
margin-top:5px;
|
||||
font-size:12px;
|
||||
color:#c434e0;
|
||||
margin-top: 5px;
|
||||
font-size: 12px;
|
||||
color: #c434e0;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
.status-element {
|
||||
gap: 0px;
|
||||
.status-element {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
main {
|
||||
zoom: 1.1;
|
||||
}
|
||||
#reset-box {
|
||||
top: 30%!important;
|
||||
}
|
||||
}
|
||||
|
||||
.watchdog-status {
|
||||
position: absolute;
|
||||
right: -22px;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
#reset-box {
|
||||
width: 296px;
|
||||
height: 122px;
|
||||
border: 1px solid #c434e0;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: rgb(0, 0, 0);
|
||||
z-index: 1;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#reset-box .close-button {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.reset-box-content {
|
||||
padding: 28px 10px 5px 10px;
|
||||
color: #a3a3a3;
|
||||
font-size: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.continue-button-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.continue-button {
|
||||
display: block;
|
||||
position: relative;
|
||||
border-radius: 100px;
|
||||
text-align: center;
|
||||
width: 134px;
|
||||
height: 30px;
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
transition: background-color 0.5s;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.continue-button::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 15px;
|
||||
border: 1px solid transparent;
|
||||
background: linear-gradient(60deg, #ff7700 0%, #c740c7 100% ) border-box;
|
||||
mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: destination-out;
|
||||
mask-composite: exclude;
|
||||
}
|
||||
.continue-button:hover {
|
||||
background-color: #373a3d;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
13
static/js/status.js
Normal file
13
static/js/status.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
$(() => {
|
||||
$("#show-reset").click(() => {
|
||||
$("#reset-content").text('Reset the administrator account if you lost access via the Dashboard.');
|
||||
$("#reset-box").show();
|
||||
});
|
||||
$("#close-reset-box").click(() => {
|
||||
$("#reset-box").hide();
|
||||
});
|
||||
$("#show-nostr").click(() => {
|
||||
$("#reset-content").text("Changing the Nostr relay may cause some clients to lose connection. We'll make one last update to the old relay to tell clients about the new relay.");
|
||||
$("#reset-box").show();
|
||||
});
|
||||
});
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
<div class="fc-grey editabl-content">
|
||||
Nodey McNodeFace
|
||||
<div class="question-box">
|
||||
<button class="icon-button" id="show-question">
|
||||
<button class="icon-button" id="show-nodey">
|
||||
<img src="img/pencil.svg" />
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
<div class="fc-grey editabl-content">
|
||||
wss://relay.lightning.pub
|
||||
<div class="question-box">
|
||||
<button class="icon-button" id="show-question">
|
||||
<button class="icon-button" id="show-nostr">
|
||||
<img src="img/pencil.svg" />
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -66,8 +66,26 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: end;">
|
||||
<div class="marked" style="text-decoration: underline; margin-top: 5px;">Reset</div>
|
||||
<div style="display: flex; justify-content: end;padding-right: 12px;">
|
||||
<div class="marked" id="show-reset" style="text-decoration: underline; margin-top: 5px;position: relative;">Reset
|
||||
<div class="watchdog-status">
|
||||
<button class="icon-button" id="show-question">
|
||||
<img src="img/question.svg" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="reset-box">
|
||||
<div style="width: 100%;height: 100%;position: relative;">
|
||||
<button class="icon-button close-button" id="close-reset-box">
|
||||
<img src="img/close.svg" alt="">
|
||||
</button>
|
||||
<div class="reset-box-content" id="reset-content">
|
||||
</div>
|
||||
<div class="continue-button-container">
|
||||
<div class="continue-button" onclick="location.href='connect.html'">Continue</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 40px;">
|
||||
<div class="status-element">
|
||||
|
|
@ -83,7 +101,14 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="status-element">
|
||||
<div>Watchdog Status:</div>
|
||||
<div style="position: relative;">
|
||||
Watchdog Status:
|
||||
<div class="watchdog-status">
|
||||
<button class="icon-button" id="show-question">
|
||||
<img src="img/question.svg" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="green-dot">●</span> No Alarms
|
||||
</div>
|
||||
|
|
@ -91,8 +116,8 @@
|
|||
</div>
|
||||
<div style="margin-top: 20px;">
|
||||
<div style="font-size: 13px; text-align: left;">Guest Invitation Link:</div>
|
||||
<div class="invite-link">
|
||||
https://my.shockwallet.app/invite/nprofile12345678899988
|
||||
<a href="https://my.shockwallet.app/invite/nprofile12345678899988" target="_blank" style="font-size: 11px;" class="invite-link">
|
||||
https://my.shockwallet.app/invite/nprofile12345678899988
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -104,6 +129,6 @@
|
|||
<p class="marked">Need Help?</p>
|
||||
</footer>
|
||||
|
||||
<script src="js/seed.js"></script>
|
||||
<script src="js/status.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue