diff --git a/output/template.hbs b/output/template.hbs
index 2b0c5d6..267fc1f 100644
--- a/output/template.hbs
+++ b/output/template.hbs
@@ -24,40 +24,49 @@
-
Warframe Market Gaps
-
Find a profitable difference between the price of the set and the price of the sum of it's parts.
+
+
+
+
+
Market Gaps
+
Find a profitable difference between the price of the set and the price of the sum of it's parts.
+
+
+
-
-
- 1
-
+
+
+
+
+ 1
+
-
-
-
- | Name |
- Parts price |
- Set price |
- Difference |
-
-
-
- {{#each items}}
-
- |
-
- {{this.name}}
-
- |
- {{this.parts}} |
- {{this.set}} |
- {{this.difference}} |
-
- {{/each}}
-
-
+
+
+
+ | Name |
+ Parts price |
+ Set price |
+ Difference |
+
+
+
+ {{#each items}}
+
+ |
+
+ {{this.name}}
+
+ |
+ {{this.parts}} |
+ {{this.set}} |
+ {{this.difference}} |
+
+ {{/each}}
+
+
+
Generated at {{timestamp}}
diff --git a/public/assets/gunner1.png b/public/assets/gunner1.png
new file mode 100644
index 0000000..6991bb5
Binary files /dev/null and b/public/assets/gunner1.png differ
diff --git a/public/assets/gunner2.png b/public/assets/gunner2.png
new file mode 100644
index 0000000..4ba999f
Binary files /dev/null and b/public/assets/gunner2.png differ
diff --git a/public/assets/warframe_logo.png b/public/assets/warframe_logo.png
new file mode 100644
index 0000000..aa73b4b
Binary files /dev/null and b/public/assets/warframe_logo.png differ
diff --git a/public/index.js b/public/index.js
index 99ff52f..5abaeb4 100644
--- a/public/index.js
+++ b/public/index.js
@@ -12,3 +12,14 @@ slider.addEventListener('input', function (event) {
document.getElementById('filter-value').innerText = event.target.value
})
+
+document.addEventListener('scroll', function () {
+ const gunner1 = document.getElementById('gunner1')
+ const gunner2 = document.getElementById('gunner2')
+
+ gunner1.style.transform = `translateX(${-window.scrollY}px)`
+ gunner2.style.transform = `translateX(${window.scrollY}px)`
+
+ gunner1.style.filter = `blur(${window.scrollY / 50}px)`
+ gunner2.style.filter = `blur(${window.scrollY / 50}px)`
+})
diff --git a/public/style.css b/public/style.css
index 025a740..15d332f 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,9 +1,9 @@
:root {
- --bg-darker: #082032;
- --bg-main: #2C394B;
- --bg-lighter: #334756;
- --text-clr: #ececec;
- --accent-clr: #FF4C29;
+ --bg-main: white;
+ --brand-clr: rgb(26, 34, 58);
+ --bg: rgb(16, 22, 25);
+ --text-clr: black;
+ --accent-clr: red;
}
* {
@@ -12,9 +12,10 @@
}
body {
+ position: relative;
margin: 0;
min-height: 100vh;
- background: var(--bg-main);
+ background: var(--bg);
color: var(--text-clr);
text-align: center;
}
@@ -24,28 +25,72 @@ a {
color: var(--accent-clr);
}
+.main-column {
+ width: 800px;
+ background: var(--bg-main);
+ padding: 32px 128px;
+ box-sizing: border-box;
+ margin: 128px auto;
+ border: 2px solid var(--accent-clr);
+}
+
+.main-column::before {
+ position: absolute;
+ left: 0px;
+ width: 50%;
+ border-top: 2px solid var(--accent-clr);
+ z-index: -1;
+ content: '';
+}
+
+.main-column::after {
+ position: absolute;
+ right: 0px;
+ width: 50%;
+ border-top: 2px solid var(--accent-clr);
+ z-index: -1;
+ content: '';
+}
+
.hero {
width: 100%;
- text-align: center;
- padding: 64px;
+ padding: 128px 0;
+ position: relative;
box-sizing: border-box;
- background: url(/assets/banner.png);
- background-position: center;
- background-repeat: no-repeat;
- background-size: cover;
+ background: white;
+ color: black;
+ text-align: center;
}
-.hero > * {
- margin: 20px auto;
+.hero > .main {
+ position: relative;
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ z-index: 10;
+ color: var(--brand-clr);
}
-.hero > h1 {
- font-weight: 800;
- font-size: 42px;
+.hero .logo, .hero .text {
+ margin: auto;
+ width: 400px;
}
-.hero > p {
- max-width: 400px;
+#gunner1, #gunner2 {
+ position: absolute;
+ max-width: 500px;
+ height: 500px;
+ object-fit: contain;
+ transition: transform .1s;
+ top: calc(50% - 250px);
+}
+
+#gunner1 {
+ left: 0;
+}
+
+#gunner2 {
+ right: 0;
}
.controls {
@@ -53,6 +98,9 @@ a {
display: flex;
align-items: center;
justify-content: center;
+ background: var(--bg-main);
+ padding: 8px;
+ width: max-content;
}
.controls > * {
@@ -63,6 +111,7 @@ table {
min-width: 500px;
margin: 32px auto;
border-spacing: 0;
+ background: var(--bg-main);
}
tr {
@@ -75,7 +124,7 @@ td {
th {
padding: 8px 16px;
- background: var(--bg-lighter);
+ font-weight: 400;
}
.name {
@@ -87,10 +136,25 @@ th {
padding-bottom: 16px;
position: sticky;
top: 100%;
+ color: white;
}
@media screen and (max-width: 500px) {
+ .hero .logo {
+ width: 100%;
+ }
+
+ #gunner1, #gunner2 {
+ display: none;
+ }
+
+ .main-column {
+ width: 100%;
+ border: none;
+ padding: 72px 0;
+ }
+
table {
min-width: 100%;
}
-}
\ No newline at end of file
+}