Skip to content

Commit

Permalink
added animated background to frontend
Browse files Browse the repository at this point in the history
  • Loading branch information
@ilovehotcakes
ilovehotcakes committed Jun 6, 2024
1 parent 92d4859 commit b29d98a
Show file tree
Hide file tree
Showing 4 changed files with 304 additions and 94 deletions.
5 changes: 2 additions & 3 deletions src/frontend/assembly.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,7 @@ def process_html():
with open(file_path, 'r') as css_file:
for line in css_file:
if "%" in line:
i = line.index("%")
line = line[:i] + "%" + line[i:]
line = line.replace("%", "%%")
elif "background-image: url" in line and "https://" not in line:
file_path = current_directory + line[27:-3]
line = line[:26] + f"'{base_64(file_path)}');"
Expand All @@ -37,7 +36,7 @@ def process_html():
assembled_html += href_tag
else:
if "%;" in html_line:
html_line = html_line.replace("%;", "%%;")
html_line = html_line.replace("%", "%%")
assembled_html += html_line

assembled_html += ")rawliteral\";"
Expand Down
180 changes: 142 additions & 38 deletions src/frontend/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,84 @@ body {
display: flex;
justify-content: center;
align-items: center;
/* height: 625px; */
width: 100vw;
height: 100vh;
background-image: url(https://wallpapers.com/images/featured/iphone-wltnz5o1xymafqmo.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: 400px 1200px;
margin: 0;
background-color: rgb(50, 50, 50);
overflow: hidden;
}
@property --hue1 {
syntax: '<integer>';
inherits: false;
initial-value: 217;
}
@property --hue2 {
syntax: '<integer>';
inherits: false;
initial-value: 42;
}
@property --hue3 {
syntax: '<integer>';
inherits: false;
initial-value: 306;
}
@property --hue4 {
syntax: '<integer>';
inherits: false;
initial-value: 243;
}
@property --hue5 {
syntax: '<integer>';
inherits: false;
initial-value: 155;
}
@property --hue6 {
syntax: '<integer>';
inherits: false;
initial-value: 247;
}
@property --hue7 {
syntax: '<integer>';
inherits: false;
initial-value: 357;
}
@property --hue8 {
syntax: '<integer>';
inherits: false;
initial-value: 352;
}
@keyframes a {
from {
--hue1: 217;
--hue2: 42;
--hue3: 306;
--hue4: 243;
--hue5: 155;
--hue6: 247;
--hue7: 357;
--hue8: 352;
}
50% {
--hue1: 37;
--hue2: 222;
--hue3: 126;
--hue4: 63;
--hue5: 335;
--hue6: 67;
--hue7: 177;
--hue8: 172;
}
to {
--hue1: 217;
--hue2: 42;
--hue3: 306;
--hue4: 243;
--hue5: 155;
--hue6: 247;
--hue7: 357;
--hue8: 352;
}
}
h2 {
margin: 0;
}
Expand All @@ -27,20 +97,43 @@ h3 {
}
h4 {
margin: 0;
/* font-size: 1.1em;
font-weight: 500; */
color: rgba(210, 210, 210, 0.85);
color: rgb(245,245,245);
}
h5 {
margin: 0;
font-size: 0.7em;
font-weight: 500;
}



.background {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
min-width: 600px;
min-height: 700px;
background-color: hsl(63, 100%, 80%);
background-image:
radial-gradient(at 35% 25%, hsl(var(--hue1), 65%, 70%) 0px, transparent 50%),
radial-gradient(at 4% 92%, hsl(var(--hue2), 89%, 66%) 0px, transparent 50%),
radial-gradient(at 91% 13%, hsl(var(--hue3), 99%, 76%) 0px, transparent 50%),
radial-gradient(at 67% 39%, hsl(var(--hue4), 73%, 64%) 0px, transparent 50%),
radial-gradient(at 38% 70%, hsl(var(--hue5), 96%, 62%) 0px, transparent 50%),
radial-gradient(at 88% 82%, hsl(var(--hue6), 70%, 71%) 0px, transparent 50%),
radial-gradient(at 7% 18%, hsl(var(--hue7), 80%, 72%) 0px, transparent 50%),
radial-gradient(at 15% 51%, hsl(var(--hue8), 81%, 74%) 0px, transparent 50%);
background-position: center;
animation: a 30s linear infinite;
}
.canvas {
position: absolute;
width: 375px;
height: 625px;
border: 1px solid black;
/* border: 1px solid black; */
border: none;
border-radius: 1em;
overflow: hidden;
}
Expand All @@ -52,7 +145,7 @@ h5 {
padding: 0;
width: 100%;
height: 100%;
border: inherit;
border: none;
transition: 0.2s ease;
}
.default-hide {
Expand All @@ -68,20 +161,19 @@ h5 {
border-radius: 1em;
border: none;
transition: 0.2s ease;
overflow: hidden;
}
.glass {
background: linear-gradient(135deg, rgba(145, 145, 145, 0.4), rgba(95, 95, 95, 0.7));
background: linear-gradient(135deg, rgba(145, 145, 145, 0.5), rgba(100, 100, 100, 0.6));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/* border: 1px solid rgba(255, 255, 255, 0.3); */
/* box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.17); */
}



.motor-controls-hide {
left: -110%;
transition: 0.2s ease-in-out;
transition: 0.15s ease-in-out;
}
.motor-controls-header {
top: 7%;
Expand All @@ -90,7 +182,7 @@ h5 {
.motor-controls-body {
top: 36.7%;
height: 63%;
transition: height 0.17s ease-in-out, opacity 75ms ease-in-out;
transition: height 0.12s ease-in-out, opacity 75ms ease-in-out;
}
.name-txt {
position: absolute;
Expand All @@ -101,7 +193,7 @@ h5 {
position: absolute;
top: 50%;
left: 9%;
color: rgb(187, 187, 187);
color: rgb(200, 200, 200);
}
.percent-slider {
top: 0;
Expand Down Expand Up @@ -195,7 +287,7 @@ input[type="range"]:hover::-webkit-slider-thumb {
top: 40%;
width: 1px;
height: 7px;
background-color: rgba(148, 148, 148, 0.75);
background-color: rgba(195, 195, 195, 0.6);
transition: 50ms ease;
}
input[type="range"]:hover ~ .tick {
Expand All @@ -205,7 +297,7 @@ input[type="range"]:hover ~ .tick {
position: absolute;
top: 50%;
font-size: 0.8em;
color: rgba(172, 172, 172, 0.75);
color: rgba(195, 195, 195, 0.6);
transition: 0.25s ease;
}
.zero-mkr {
Expand Down Expand Up @@ -234,7 +326,7 @@ input[type="range"]:hover ~ .hundred-mkr {
background-repeat: no-repeat;
background-position: center;
background-color: rgba(0, 0, 0, 0);
border: inherit;
border: none;
border-radius: 3em;
cursor: pointer;
outline: none;
Expand All @@ -252,7 +344,7 @@ input[type="range"]:hover ~ .hundred-mkr {
background-size: 2.4rem;
}
.stop-btn {
left: 42.9%;
left: 43%;
background-image: url(./img/icon_stop_100x100.png);
}
.close-btn {
Expand Down Expand Up @@ -280,14 +372,14 @@ input[type="range"]:hover ~ .hundred-mkr {
.more-settings-dropdown {
position: absolute;
top: 6%;
left: 87%;
left: 86.2%;
width: 8%;
height: 52.1%;
}
.advanced-controls-dropdown {
position: absolute;
top: 6%;
left: 74%;
left: 73.4%;
width: 8%;
height: 52.1%;
}
Expand Down Expand Up @@ -324,24 +416,14 @@ input[type="checkbox"], input[type="range"] {



.hide {
opacity: 0;
height: 0;
}
.clickable {
cursor: pointer;
}



/* For settings page */
.settings-header {
top: 2%;
height: 6%;
}
.back-arrow {
position: absolute;
top: 28%;
top: 27%;
left: -1.5%;
width: 5.5%;
height: 50%;
Expand Down Expand Up @@ -413,7 +495,7 @@ input[type="checkbox"], input[type="range"] {
width: 15%;
font-size: 1.1em;
text-align: right;
color: rgb(185, 185, 185);
color: rgb(200, 200, 200);
}
.setting-value-txt2 {
position: absolute;
Expand All @@ -422,7 +504,7 @@ input[type="checkbox"], input[type="range"] {
width: 63%;
font-size: 1.1em;
text-align: right;
color: rgb(185, 185, 185);
color: rgb(200, 200, 200);
}
.setting-opening-txt {
left: 69%;
Expand Down Expand Up @@ -478,15 +560,16 @@ input:checked + .toggle-cbx::before {
top: 23.5%;
left: 54%;
width: 38%;
background: linear-gradient(135deg, rgba(80, 80, 80, 0.4), rgba(65, 65, 65, 0.7));
background: linear-gradient(135deg, rgba(80, 80, 80, 0.6), rgba(65, 65, 65, 0.7));
overflow: hidden;
transition: 0.12s ease-in-out;
}
.more-settings-hide {
top: 38%;
left: 90%;
height: 0;
width: 0;
transition: 0.18s ease-in-out;
transition: 0.12s ease-in-out;
}
.more-settings-shift {
left: -60%;
Expand Down Expand Up @@ -533,7 +616,7 @@ input:checked + .toggle-cbx::before {
}
.back-btn {
position: absolute;
top: 11%;
top: 10%;
left: 3.9%;
font-size: 1.1em;
}
Expand Down Expand Up @@ -574,4 +657,25 @@ input[type="number"], input[type="text"] {
}
textarea:focus, input[type="number"]:focus, input[type="text"]:focus {
outline: none;
}



.hide {
opacity: 0;
height: 0;
}
.clickable {
cursor: pointer;
transition: 0.15s ease;
}
.clickable:active {
background-color: rgba(100, 100, 100, 0.6);
transition: 0.1s ease;
}
.shadow {
box-shadow: 0 7px 20px 0 rgba(0, 0, 0, 0.15);
}
.border {
border: 1px solid rgba(255, 255, 255, 0.3);
}
Loading

0 comments on commit b29d98a

Please sign in to comment.