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 node_modules
.DS_Store
.vscode .vscode
.env .env
public/index.html public/index.html

15
output/template.hbs
View File

@@ -8,11 +8,16 @@
<title>Warframe Market Gaps</title> <title>Warframe Market Gaps</title>
</head> </head>
<body> <body>
<h1>Warframe Market Gaps</h1> <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> <div class="controls">
<input type="range" min="1" max="60" value="1" id="minDifference"> <label for="min-difference">Filter by difference:</label>
<span id="filterValue">1</span> <input type="range" min="1" max="60" value="1" id="min-difference">
<span id="filter-value">1</span>
</div>
<table> <table>
<thead> <thead>
@@ -45,4 +50,4 @@
<script src="index.js"></script> <script src="index.js"></script>
</body> </body>
</html> </html>

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) { slider.addEventListener('input', function (event) {
const table = document.getElementById('items') 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-family: sans-serif;
font-weight: 100;
}
body {
margin: 0;
min-height: 100vh;
background: var(--bg-main);
color: var(--text-clr);
text-align: center;
} }
a { a {
text-decoration: none; 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 { table {
margin: 64px 0; min-width: 500px;
margin: 32px auto;
border-spacing: 0; border-spacing: 0;
} }
@@ -22,6 +75,7 @@ td {
th { th {
padding: 8px 16px; padding: 8px 16px;
background: var(--bg-lighter);
} }
.name { .name {
@@ -29,5 +83,14 @@ th {
} }
.timestamp { .timestamp {
font-size: small; font-size: 14px;
padding-bottom: 16px;
position: sticky;
top: 100%;
}
@media screen and (max-width: 500px) {
table {
min-width: 100%;
}
} }