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>
<body>
<div class="hero">
<h1>Warframe 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>
<img id="gunner1" src="./assets/gunner1.png">
<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 class="controls">
<label for="min-difference">Filter by difference:</label>
<input type="range" min="1" max="60" value="1" id="min-difference">
<span id="filter-value">1</span>
</div>
<div class="main-column">
<div class="controls">
<label for="min-difference">Filter by difference:</label>
<input type="range" min="1" max="60" value="1" id="min-difference">
<span id="filter-value">1</span>
</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Parts price</th>
<th>Set price</th>
<th>Difference</th>
</tr>
</thead>
<tbody id="items">
{{#each items}}
<tr data-difference="{{this.difference}}">
<td class="name">
<a href="{{this.link}}" target="_blank">
{{this.name}}
</a>
</td>
<td>{{this.parts}}</td>
<td>{{this.set}}</td>
<td>{{this.difference}}</td>
</tr>
{{/each}}
</tbody>
</table>
<table>
<thead>
<tr>
<th>Name</th>
<th>Parts price</th>
<th>Set price</th>
<th>Difference</th>
</tr>
</thead>
<tbody id="items">
{{#each items}}
<tr data-difference="{{this.difference}}">
<td class="name">
<a href="{{this.link}}" target="_blank">
{{this.name}}
</a>
</td>
<td>{{this.parts}}</td>
<td>{{this.set}}</td>
<td>{{this.difference}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
<div class="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.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)`
})

104
public/style.css
View File

@@ -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,9 +136,24 @@ 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%;
}