anatolykopyl/warframe-center
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Redesign
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Anatoly Kopyl
2022-03-07 00:31:24 +03:00
parent e88692dea8
commit f6d600e9ae
6 changed files with 136 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
output/template.hbs
View File

@@ -24,40 +24,49 @@
</head> </head>
<body> <body>
<div class="hero"> <div class="hero">
<h1>Warframe Market Gaps</h1> <img id="gunner1" src="./assets/gunner1.png">
<p>Find a profitable difference between the price of the set and the price of the sum of it's parts.</p> <div class="main">
<img class="logo" src="./assets/warframe_logo.png">
<div class="text">
<h1>Market Gaps</h1>
<p>Find a profitable difference between the price of the set and the price of the sum of it's parts.</p>
</div>
</div>
<img id="gunner2" src="./assets/gunner2.png">
</div> </div>
<div class="controls"> <div class="main-column">
<label for="min-difference">Filter by difference:</label> <div class="controls">
<input type="range" min="1" max="60" value="1" id="min-difference"> <label for="min-difference">Filter by difference:</label>
<span id="filter-value">1</span> <input type="range" min="1" max="60" value="1" id="min-difference">
</div> <span id="filter-value">1</span>
</div>
<table> <table>
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parts price</th> <th>Parts price</th>
<th>Set price</th> <th>Set price</th>
<th>Difference</th> <th>Difference</th>
</tr> </tr>
</thead> </thead>
<tbody id="items"> <tbody id="items">
{{#each items}} {{#each items}}
<tr data-difference="{{this.difference}}"> <tr data-difference="{{this.difference}}">
<td class="name"> <td class="name">
<a href="{{this.link}}" target="_blank"> <a href="{{this.link}}" target="_blank">
{{this.name}} {{this.name}}
</a> </a>
</td> </td>
<td>{{this.parts}}</td> <td>{{this.parts}}</td>
<td>{{this.set}}</td> <td>{{this.set}}</td>
<td>{{this.difference}}</td> <td>{{this.difference}}</td>
</tr> </tr>
{{/each}} {{/each}}
</tbody> </tbody>
</table> </table>
</div>
<div class="timestamp"> <div class="timestamp">
Generated at {{timestamp}} Generated at {{timestamp}}

BIN
public/assets/gunner1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
public/assets/gunner2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
public/assets/warframe_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 265 KiB

11
public/index.js
View File

@@ -12,3 +12,14 @@ slider.addEventListener('input', function (event) {
document.getElementById('filter-value').innerText = event.target.value 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)`
})

106
public/style.css
View File

@@ -1,9 +1,9 @@
:root { :root {
--bg-darker: #082032; --bg-main: white;
--bg-main: #2C394B; --brand-clr: rgb(26, 34, 58);
--bg-lighter: #334756; --bg: rgb(16, 22, 25);
--text-clr: #ececec; --text-clr: black;
--accent-clr: #FF4C29; --accent-clr: red;
} }
* { * {
@@ -12,9 +12,10 @@
} }
body { body {
position: relative;
margin: 0; margin: 0;
min-height: 100vh; min-height: 100vh;
background: var(--bg-main); background: var(--bg);
color: var(--text-clr); color: var(--text-clr);
text-align: center; text-align: center;
} }
@@ -24,28 +25,72 @@ a {
color: var(--accent-clr); 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 { .hero {
width: 100%; width: 100%;
text-align: center; padding: 128px 0;
padding: 64px; position: relative;
box-sizing: border-box; box-sizing: border-box;
background: url(/assets/banner.png); background: white;
background-position: center; color: black;
background-repeat: no-repeat; text-align: center;
background-size: cover;
} }
.hero > * { .hero > .main {
margin: 20px auto; position: relative;
margin: auto;
display: flex;
flex-direction: column;
z-index: 10;
color: var(--brand-clr);
} }
.hero > h1 { .hero .logo, .hero .text {
font-weight: 800; margin: auto;
font-size: 42px; width: 400px;
} }
.hero > p { #gunner1, #gunner2 {
max-width: 400px; position: absolute;
max-width: 500px;
height: 500px;
object-fit: contain;
transition: transform .1s;
top: calc(50% - 250px);
}
#gunner1 {
left: 0;
}
#gunner2 {
right: 0;
} }
.controls { .controls {
@@ -53,6 +98,9 @@ a {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: var(--bg-main);
padding: 8px;
width: max-content;
} }
.controls > * { .controls > * {
@@ -63,6 +111,7 @@ table {
min-width: 500px; min-width: 500px;
margin: 32px auto; margin: 32px auto;
border-spacing: 0; border-spacing: 0;
background: var(--bg-main);
} }
tr { tr {
@@ -75,7 +124,7 @@ td {
th { th {
padding: 8px 16px; padding: 8px 16px;
background: var(--bg-lighter); font-weight: 400;
} }
.name { .name {
@@ -87,10 +136,25 @@ th {
padding-bottom: 16px; padding-bottom: 16px;
position: sticky; position: sticky;
top: 100%; top: 100%;
color: white;
} }
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {
.hero .logo {
width: 100%;
}
#gunner1, #gunner2 {
display: none;
}
.main-column {
width: 100%;
border: none;
padding: 72px 0;
}
table { table {
min-width: 100%; min-width: 100%;
} }
} }