Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Streamlined theme and randomly generate colors #86

Merged
merged 3 commits into from
Nov 21, 2022
Merged

Streamlined theme and randomly generate colors #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8e4d807
Steamlined root theme styling
nickfarrow Nov 21, 2022
889edaa
New theme and cleaner styling
nickfarrow Nov 21, 2022
9eae8a7
Random primary and secondary colors
nickfarrow Nov 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/banner.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 28 additions & 12 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/selekkt-skelet@latest/css/skelet.min.css">
<!-- having trouble getting the right path on both umbrel and local.. -->
<link rel="stylesheet" href="style.css">
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
Expand All @@ -21,21 +20,21 @@
<br>
<br>
<header class="center">
<a href="https://nolooking.chaincase.app/" target="_blank" style="text-decoration:none"><h1>👻 &nbsp;Lightning PayJoin&nbsp; 👻</h1></a>
<h3 style="color: orange;">🎃 Halloween Alpha [experimental] | Avoid sp👀ks</h3>
<h2>Queue batches of lightning channels to open in a single transaction</h2>
<a href="https://nolooking.chaincase.app/" target="_blank" style="text-decoration:none"><h1>⚡️&nbsp;<img src="banner.gif" style="display:inline">&nbsp;⚡️</h1></a>
<h2>Alpha [experimental] | Avoid sp👀ks</h2>
</header>
<main class="center-axyz">
<form action="/schedule" method="post" enctype="application/x-www-form-urlencoded"
x-flex direction="column">
<fieldset>
<legend>Queue Inbound Channel</legend>
x-flex direction="column">
<h3>Queue batches of lightning channels to open in a single transaction</h3>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Placing this line here gives the correct location. Even though it probably shouldn't be in the form

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think It's good if the form has a header that says what it's for ✅

<fieldset>
<legend>Lease Inbound Channel</legend>
<x-grid columns="2">
<label for="inboundCapacity" span="1">Get receiving capacity:</label>
<label span="!"><input type="number" id="inboundCapacity" value="1000000" disabled span="1">sats</label><!-- has no name to exclude from request -->
<div span="1"></div>
<div span="1">
<label for="wantsInbound">Get inbound channel quote (~30,000 sats)</label>
<label for="wantsInbound">Get inbound channel quote&nbsp;<br>Approx cost: 30,000 sats</label>
<input type="hidden" id="hiddenWantsInbound" value="false" name="wants_inbound_quote">
<input type="checkbox" id="wantsInbound" name="wants_inbound_quote" value="true" checked>
</div>
Expand All @@ -53,8 +52,8 @@ <h2>Queue batches of lightning channels to open in a single transaction</h2>
</x-grid>
<p>
<x-flex>
<button type="button" class="is-circle" onclick="add_channel()">+</button>
<button type="button" class="is-circle" onclick="remove_channel()">-</button>
<button type="button" class="is-circle colored-button" onclick="add_channel()">+</button>
<button type="button" class="is-circle colored-button" onclick="remove_channel()">-</button>
</x-flex>
</p>
</fieldset>
Expand All @@ -64,7 +63,7 @@ <h2>Queue batches of lightning channels to open in a single transaction</h2>
</div>
<div id="queue">
<x-grid columns=2>
<button type="submit" class="float-right" span="2">Generate Funding Request</button>
<button type="submit" class="float-right colored-button" span="2">Generate Funding Request</button>
</x-grid>
</div>
<output id="queued" class="invisible">
Expand All @@ -81,6 +80,21 @@ <h2>PayJoin here to open these channels</h2>
</form>
</main>
<script type="text/javascript">
function random_style() {
// Generate random colors for background, --primary and --secondary
// RGB triplet of (32 + $[0, 128]) for some base color, which is then reordered for the secondary color
let color_triplet = [32 + Math.floor(Math.random() * 128), 32 + Math.floor(Math.random() * 128), 32 + Math.floor(Math.random() * 128)];
let bg_image = `linear-gradient(
to bottom right,
rgb(${color_triplet.join(", ")}),
rgb(7, 10, 19)
)`;
Comment on lines +88 to +91
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: indent to the previous line

document.body.style.backgroundImage = bg_image;
let shifted = [color_triplet[1], color_triplet[2], color_triplet[0]];
document.querySelector(':root').style.setProperty('--primary', "rgb(" + shifted + ")");
document.querySelector(':root').style.setProperty('--secondary', "rgb(" + color_triplet + ")");
}

function add_channel() {
let channels = document.getElementById("channels");
let indexToAdd = Math.floor(channels.children.length/2)
Expand All @@ -101,6 +115,8 @@ <h2>PayJoin here to open these channels</h2>
channels.removeChild(channels.lastElementChild);
}

random_style()

document.querySelector("#wantsInbound").addEventListener("input", async (event) => {
document.querySelector("#inboundCapacity").value = event.target.checked ? 1000000 : 0;
});
Expand Down Expand Up @@ -141,7 +157,7 @@ <h2>PayJoin here to open these channels</h2>
if (r_json.quote) {
lspResponse.classList.remove("invisible");
let quoteTemplate =`
<h3>Inbound Channel Quote:</h3>
<h2>Inbound Channel Quote:</h2>
<p>
This request includes a ${r_json.quote.price} sats transfer to lease ${r_json.quote.size} sats of inbound capacity for ${r_json.quote.duration} ${r_json.quote.duration == 1 ? "month": "months"}.
<br>
Expand Down
62 changes: 31 additions & 31 deletions public/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,51 @@
:root {
--primary: #d38105;
--primary: rgb(53, 171, 187);
--secondary: rgb(197, 194, 20);
--radius: 20px;
}

html, body {
background-image: url("spookyloin2.png");
color: var(--primary);
font-family: 'Courier New', Courier, monospace;
/* overridden by ~random color within <script> */
background-image: linear-gradient(
to bottom right,
rgb(105, 113, 128),
rgb(7, 10, 19)
);
text-align: left;
width: 100%;
color: rgb(179, 28, 28);
}


h1 {
font-weight: 1000;
font-size: 3em;
text-shadow: 10px 10px 15px rgb(0, 0, 0);
background-image: conic-gradient(
from 0deg at 0% 0%,
rgb(255, 0, 0),
rgb(255, 251, 0)
);
color: transparent;
color: var(--primary);
background-clip: text;
-webkit-background-clip: text;
}

h2 {
font-weight: 600;
background-image: conic-gradient(
from 0deg at 0% 0%,
rgb(255, 174, 0),
rgb(0, 255, 242)
);
color: transparent;
color: var(--secondary);
text-shadow: 5px 3px 5px rgb(0, 0, 0);
background-clip: text;
-webkit-background-clip: text;
}


h3 {
font-weight: 600;
background-image: conic-gradient(
from 0deg at 0% 0%,
rgb(255, 174, 0),
rgb(0, 255, 242)
);
color: transparent;
color: var(--primary);
background-clip: text;
-webkit-background-clip: text;
}

p {
font-weight: 400;
background-image: conic-gradient(
from 0deg at 0% 0%,
rgb(175, 26, 26),
rgba(208, 255, 0, 0.986)
);
color: transparent;
color: var(--primary);
Copy link
Contributor

@DanGould DanGould Nov 21, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO it's an anti-pattern to style top-level typography with --primary and --secondary. Those are your theme colors. If they were colored within a context, or specifically via style attributes for emphasis that would make more sense. they're already themed with color: var(--color).

I'm inclined to let it pass because it's not a regression, but it's a step sideways in terms of keeping a neat theme.

background-clip: text;
-webkit-background-clip: text;
}
Expand All @@ -71,22 +60,33 @@ form > * {
padding-top: 2rem;
}

#qrcode {
margin: 2rem;
}


input {
text-align: right;
}

legend {
color: var(--secondary);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same comment as p, h1, h3 re: color: var(--color);

}

#qrcode {
margin: 2rem;
}

.invisible {
display: none;
}

.colored-button {
color: black;
background: var(--secondary);
}

Comment on lines +81 to +85
Copy link
Contributor

@DanGould DanGould Nov 21, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You missed the checkbox by styling this with a custom class. When you inspect the buttons you applied this too, you can see they're already styled with --buttonColor and --buttonBg, which is the place for this change. (--buttonColor: var(--secondary);)

As-is this change is a regression

.warning {
text-align: center;
border: 1px solid var(--codeBorderColor,var(--inputBorderColor));
color: yellow;
color: var(--secondary);
border-radius: var(--inputRadius);
font-size: 1.3rem;
font-family: var(--fontMono);
Expand Down