diff --git a/frontend/assets/style.css b/frontend/assets/style.css
index d8f181a..5f0b5cc 100644
--- a/frontend/assets/style.css
+++ b/frontend/assets/style.css
@@ -6,24 +6,22 @@ body {
margin: 0;
height: 100vh;
- padding-left: auto;
- padding-right: auto;
background-color: pink;
display: flex;
align-items: center;
justify-content: center;
- background: url("bg.svg") center center/auto repeat, linear-gradient(
- to bottom, transparent, pink
- );
+ background:
+ url("bg.svg") center center/auto repeat,
+ linear-gradient(to bottom, transparent, pink);
}
.search-grid {
- margin-top: -10em;
+ width: 100%;
- width: 40em;
- height: 30em;
+ margin-left: 10em;
+ margin-right: 10em;
display: grid;
gap: 5em;
@@ -32,6 +30,8 @@ body {
}
.search {
+ width: 100%;
+
grid-row: 2;
grid-column: 1 / span 2;
}
@@ -39,18 +39,23 @@ body {
.search-logo {
grid-row: 1;
height: 100%;
+ width: 100%;
display: flex;
flex-direction: row;
align-items: center;
- justify-content: space-between;
+ justify-content: space-between;
color: black;
}
-@media (min-height: 700px){
+@media (max-height: 300px) {
.search-grid {
- margin-top: 0;
+ grid-template-rows: 4em;
+ }
+
+ .search-logo {
+ display: none;
}
}
@@ -62,7 +67,7 @@ body {
}
.card {
- background-color: rgba(255, 255, 255, .5);
+ background-color: rgba(255, 255, 255, 0.5);
width: 10em;
display: flex;
flex-direction: column;
@@ -85,5 +90,5 @@ body {
background-color: lightblue;
padding: 1em;
- border-radius: .5em;
+ border-radius: 0.5em;
}
diff --git a/frontend/index.html b/frontend/index.html
index 3a945e1..7c58a10 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,67 +1,79 @@
-
+
-
-
-
- {{ .PageTitle }}
+
+
+
+ {{ .PageTitle }}
+
+
+
+
+
+
-
-
+
+ function titleChanger(element) {
+ setTitle(element, phrases[Math.floor(Math.random()*phrases.length)], 0);
+ setTimeout(() => titleChanger(element), 10000);
+ }
+
+ Array.from(document.querySelectorAll(".phrases")).forEach(element => {
+ titleChanger(element);
+ })
+
+ document.addEventListener('DOMContentLoaded', function() {
+ const marqueeElement = document.body;
+ let xPosition = 0;
+ let yPosition = 0;
+ const xSpeed = {{ .BackgroundScrollX }}; // Adjust speed here (lower is slower)
+ const ySpeed = {{ .BackgroundScrollY }};
+
+ function animateMarquee() {
+ xPosition -= xSpeed;
+ yPosition -= ySpeed;
+
+ // Reset position when the image has scrolled completely
+ if (Math.abs(xPosition) >= marqueeElement.offsetWidth) {
+ xPosition = 0;
+ }
+ if (Math.abs(yPosition) >= marqueeElement.offsetHeight) {
+ yPosition = 0;
+ }
+
+ marqueeElement.style.backgroundPosition = `${xPosition}px ${yPosition}px`;
+ requestAnimationFrame(animateMarquee);
+ }
+
+ // Start the animation
+ animateMarquee();
+ });
+
+
diff --git a/internal/rendering/config.go b/internal/rendering/config.go
index 44469a7..35cc0b8 100644
--- a/internal/rendering/config.go
+++ b/internal/rendering/config.go
@@ -22,13 +22,13 @@ type RenderingConfig struct {
func DefaultRenderingConfig() RenderingConfig {
return RenderingConfig{
HeaderPhrases: []string{
- "GirlJuice.Inject()",
- "Child.CrowdKill()",
- "CopCar.Burn()",
- "You.Cute = true",
- "You.Gay = true",
- "Nazi.Punch()",
- "Dolls.GiveGuns()",
+ "GirlJuice.Inject();",
+ "Child.CrowdKill();",
+ "CopCar.Burn();",
+ "You.Cute = true;",
+ "You.Gay = true;",
+ "Nazi.Punch();",
+ "Dolls.GiveGuns();",
},
BackgroundScrollX: "1",
BackgroundScrollY: "0",