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

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

Browse Source
This commit is contained in:
Anatoly Kopyl
2022-03-01 02:26:12 +03:00
parent 59aa29833c
commit db90358498
5 changed files with 79 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1,4 +1,5 @@
node_modules
.DS_Store
.vscode
.env
public/index.html

11
output/template.hbs
View File

@@ -8,11 +8,16 @@
<title>Warframe Market Gaps</title>
</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>
</div>
<label for="minDifference">Filter by difference</label>
<input type="range" min="1" max="60" value="1" id="minDifference">
<span id="filterValue">1</span>
<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>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 MiB

4
public/index.js
View File

@@ -1,4 +1,4 @@
const slider = document.getElementById('minDifference')
const slider = document.getElementById('min-difference')
slider.addEventListener('input', function (event) {
const table = document.getElementById('items')
@@ -10,5 +10,5 @@ slider.addEventListener('input', function (event) {
}
})
document.getElementById('filterValue').innerText = event.target.value
document.getElementById('filter-value').innerText = event.target.value
})

69
public/style.css
View File

@@ -1,14 +1,67 @@
:root {
--bg-darker: #082032;
--bg-main: #2C394B;
--bg-lighter: #334756;
--text-clr: #ececec;
--accent-clr: #FF4C29;
}
* {
font-family: sans-serif;
font-weight: 100;
}
body {
margin: 0;
min-height: 100vh;
background: var(--bg-main);
color: var(--text-clr);
text-align: center;
}
a {
text-decoration: none;
color: black;
color: var(--accent-clr);
}
.hero {
width: 100%;
text-align: center;
padding: 64px;
box-sizing: border-box;
background: url(/assets/banner.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.hero > * {
margin: 20px auto;
}
.hero > h1 {
font-weight: 800;
font-size: 42px;
}
.hero > p {
max-width: 400px;
}
.controls {
margin: 32px auto;
display: flex;
align-items: center;
justify-content: center;
}
.controls > * {
margin: 0 4px;
}
table {
margin: 64px 0;
min-width: 500px;
margin: 32px auto;
border-spacing: 0;
}
@@ -22,6 +75,7 @@ td {
th {
padding: 8px 16px;
background: var(--bg-lighter);
}
.name {
@@ -29,5 +83,14 @@ th {
}
.timestamp {
font-size: small;
font-size: 14px;
padding-bottom: 16px;
position: sticky;
top: 100%;
}
@media screen and (max-width: 500px) {
table {
min-width: 100%;
}
}