Skip to content

Commit

Permalink
Add glitch.je navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@lukeeey
lukeeey committed Aug 28, 2024
1 parent 6754f89 commit 829371f
Show file tree
Hide file tree
Showing 2 changed files with 186 additions and 57 deletions.
76 changes: 19 additions & 57 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@
crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

<link rel="stylesheet" href="style.css">

<!-- https://itsjavi.com/bootstrap-colorpicker/tutorial-p02_Advanced_Examples.html -->
<style>
.colorpicker.colorpicker-2x {
Expand Down Expand Up @@ -50,64 +52,24 @@
margin: -5px 0 0 -5px;
}
</style>

<style>
.title {
font-size: 50px;
font-weight: 700;
}

.btn-black,
.btn-black:hover {
color: white;
background-color: black;
border-color: black;
}

.btn-gray {
color: black;
background-color: #e5e7eb;
border-color: #e5e7eb;
}

.btn-gray:hover {
background-color: #cfd3da;
border-color: #cfd3da;
}

.btn {
border-radius: 0;
}

.color-picker {
color: transparent;
outline: none;
border: none;
width: 100%;
}

.color-picker-wrapper {
border: 1px solid #e6e6e6;
padding: 5px;
}

#qrcode-placeholder {
opacity: 0.5;
width: 100%;
}

@media screen and (min-width: 768px) {
.title {
font-size: 60px;
}
}
</style>
</head>

<body>
<div class="glitch-nav">
<div class="glitch-nav-title">
<p class="glitch-nav-glitch">Glitch.je</p>
</div>

<ul class="glitch-nav-items">
<li class="glitch-nav-item"><a href="https://data.glitch.je">Open Data</a></li>
<li class="glitch-nav-item glitch-nav-item-active"><a href="https://qrcode.glitch.je">QR Code</a></li>
<li class="glitch-nav-item"><a href="https://cls.glitch.je">CLS Queues</a></li>
</ul>
</div>
<div class="container pt-5">
<div class="text-center mb-5">
<h1 class="title">QR Code Generator</h1>
<p class="summary">A simple QR code generator in your browser!</p>
</div>
<div class="row">
<div class="col-12 col-lg-7">
Expand All @@ -125,7 +87,7 @@ <h1 class="title">QR Code Generator</h1>
<textarea id="text" name="text" class="form-control" maxlength="2048"></textarea>
</div>

<button class="btn btn-block btn-gray my-4" type="button" data-toggle="collapse"
<button class="btn btn-block btn-gray my-4 rounded-lg" type="button" data-toggle="collapse"
data-target="#colors-container" data-collapse-button>
<i class="fa fa-fw fa-palette fa-sm mr-1"></i> Colours
<i class="fa fa-fw fa-chevron-down fa-sm" data-chevron-icon></i>
Expand Down Expand Up @@ -156,7 +118,7 @@ <h1 class="title">QR Code Generator</h1>
</div>
</div>

<button class="btn btn-block btn-gray my-4" type="button" data-toggle="collapse"
<button class="btn btn-block btn-gray my-4 rounded-lg" type="button" data-toggle="collapse"
data-target="#options-container" data-collapse-button>
<i class="fa fa-fw fa-wrench fa-sm mr-1"></i> Options
<i class="fa fa-fw fa-chevron-down fa-sm" data-chevron-icon></i>
Expand All @@ -175,7 +137,7 @@ <h1 class="title">QR Code Generator</h1>
</div>
</div>

<button id="create-button" type="button" class="btn btn-block btn-black">Create</button>
<button id="create-button" type="button" class="btn btn-block btn-black rounded-lg">Create</button>
</div>
</div>
</div>
Expand All @@ -186,7 +148,7 @@ <h1 class="title">QR Code Generator</h1>
<div id="qrcode"></div>
</div>
</div>
<button id="download-button" type="button" class="btn btn-block btn-black dropdown-toggle"
<button id="download-button" type="button" class="btn btn-block btn-black dropdown-toggle rounded-lg"
data-toggle="dropdown" disabled>Download</button>
<div class="dropdown-menu">
<div id="download-png" class="dropdown-item">Download as PNG</div>
Expand All @@ -195,7 +157,7 @@ <h1 class="title">QR Code Generator</h1>
</div>
</div>

<footer class="d-flex justify-content-between mt-5">
<footer class="d-flex justify-content-between mt-5 mb-5">
<p>Created by <a href="https://github.com/lukeeey">Luke</a></p>
<p><a href="https://github.com/glitchjsy/qrcode">Source code</a></p>
</footer>
Expand Down
167 changes: 167 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
p {
padding: 0;
margin: 0;
}

.title {
font-size: 60px;
font-weight: 700;
}

.summary {
font-size: 28px;
}

.btn-black,
.btn-black:hover {
color: white;
background-color: black;
border-color: black;
}

.btn-gray {
color: black;
background-color: #e5e7eb;
border-color: #e5e7eb;
}

.btn-gray:hover {
background-color: #cfd3da;
border-color: #cfd3da;
}

.btn {
border-radius: 0;
}

.color-picker {
color: transparent;
outline: none;
border: none;
width: 100%;
}

.color-picker-wrapper {
border: 1px solid #e6e6e6;
padding: 5px;
}

#qrcode-placeholder {
opacity: 0.5;
width: 100%;
}

@media screen and (max-width: 768px) {
.title {
font-size: 40px;
}
.summary {
font-size: 24px;
}
}

/* =================================== */
/* Glitch Navbar */
/* =================================== */
.glitch-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 32px;
background-color: black;
}

.glitch-nav-title {
font-size: 1.5rem;
color: #fff;
font-weight: bold;
}

.glitch-nav-items {
list-style: none;
display: flex;
gap: 1rem;
padding-top: 15px;
}

.glitch-nav-item a {
text-decoration: none;
color: #fff;
font-size: 1rem;
padding: 0.5rem 1rem;
transition: background-color 0.3s ease;
}

.glitch-nav-item a:hover {
background-color: rgba(75, 180, 255);
border-radius: 4px;
border-radius: 36px;
}

.glitch-nav-item-active a {
background-color: rgba(75, 180, 225, 0.3);
border-radius: 36px;
}

.glitch-nav-glitch {
font-size: 36px;
font-weight: bold;
text-transform: uppercase;
position: relative;
text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
0.025em 0.04em 0 #fffc00;
animation: glitch 725ms infinite;
}

@media screen and (max-width: 768px) {
.glitch-nav {
padding: 10px 0;
flex-direction: column;
}

.glitch-nav-items {
row-gap: 25px;
padding: 0;
padding-top: 5px;
flex-wrap: wrap;
justify-content: center;
}
}

/* https://codepen.io/cbanlawi/pen/xxRBeMY */
@keyframes glitch {
0% {
text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
0.025em 0.04em 0 #fffc00;
}

15% {
text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
0.025em 0.04em 0 #fffc00;
}

16% {
text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff,
-0.05em -0.05em 0 #fffc00;
}

49% {
text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff,
-0.05em -0.05em 0 #fffc00;
}

50% {
text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff,
0 -0.04em 0 #fffc00;
}

99% {
text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff,
0 -0.04em 0 #fffc00;
}

100% {
text-shadow: -0.05em 0 0 #00fffc, -0.025em -0.04em 0 #fc00ff,
-0.04em -0.025em 0 #fffc00;
}
}

0 comments on commit 829371f

Please # to comment.