Skip to content

Commit

Permalink
feat(frontend): 🎸add basic nft card design
Browse files Browse the repository at this point in the history
  • Loading branch information
@markogracin
markogracin committed Dec 17, 2024
1 parent d0d16b5 commit e68c765
Show file tree
Hide file tree
Showing 5 changed files with 329 additions and 18 deletions.
56 changes: 56 additions & 0 deletions frontend/src/app.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
/* https://www.joshwcomeau.com/css/custom-css-reset/ */

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
box-sizing: border-box;
}

/* 2. Remove default margin */
* {
margin: 0;
}

body {
/* 3. Add accessible line-height */
line-height: 1.5;
/* 4. Improve text rendering */
-webkit-font-smoothing: antialiased;
font-family: arial, "sans-serif";
}

button, input {
border: none;
outline: none;
box-shadow: none;
}

/* 5. Improve media defaults */
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}

/* 6. Inherit fonts for form controls */
input, button, textarea, select {
font: inherit;
}

/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}

/* 8. Improve line wrapping */
p {
text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}

/*
9. Create a root stacking context
*/
#root, #__next {
isolation: isolate;
}
82 changes: 82 additions & 0 deletions frontend/src/lib/components/NftTile.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<script lang="ts">
export let data;
</script>

<figure class="nft-card">
<img src="/0.png" alt="">
<button class="claim-button">
<span class="index-number">#{data?.serialNumber}</span>
<span class="claim-text">Claim</span>
</button>
</figure>

<style>
.nft-card {
background-color: white;
border-radius: 1rem;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
justify-self: center;
padding-bottom: 2rem;
position: relative;
width: 100%;
}
.nft-card img {
border-radius: 1rem;
height: fit-content;
width: fit-content;
}
.claim-button {
background-color: rgb(253 242 248); /* pink-50 */
border-radius: 0.75rem;
bottom: 10px;
cursor: pointer;
font-size: 0.875rem;
height: 40px;
overflow: hidden;
padding: 0.5rem;
position: absolute;
right: 10px;
text-align: right;
text-transform: uppercase;
transition: background-color 0.2s ease-in-out;
width: 102px;
}
.claim-button:hover {
background-color: rgb(239 246 255); /* blue-50 */
}
.index-number {
padding: 0.5rem;
position: absolute;
right: 0;
top: 0;
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.claim-button:hover .index-number {
opacity: 0;
transform: translateY(-40px);
}
.claim-text {
align-items: center;
display: flex;
font-size: 0.75rem;
font-weight: bold;
height: 100%;
opacity: 0;
padding: 0.5rem;
position: absolute;
right: 0;
top: 100%;
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.claim-button:hover .claim-text {
opacity: 1;
transform: translateY(-40px);
}
</style>
12 changes: 12 additions & 0 deletions frontend/src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<script lang="ts">
import '../app.css'
let { children } = $props()
</script>

Expand All @@ -9,3 +11,13 @@
</header>

{@render children()}

<style>
header {
background: #f8f8f8;
padding: 6px 12px;
position: fixed;
width: 100%;
z-index: 9;
}
</style>
197 changes: 179 additions & 18 deletions frontend/src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,192 @@
<script lang="ts">
import NftTile from './NftTile.svelte'
import NftTile from "$lib/components/NftTile.svelte";
let { data } = $props()
</script>

<h1>BIDI</h1>
<main class="page-container">
<div class="grain"></div>

<h2>NFTs</h2>
<div class="content-wrapper">
<div class="cards-grid">
{#if !data.nfts.length}
<p>No NFTs have been minted yet.</p>
{:else}
<ul class="nfts">
{#each data.nfts as nft}
<NftTile data={nft} />
{/each}
</ul>
{/if}
</div>

{#if !data.nfts.length}
<p>No NFTs have been minted yet.</p>
{:else}
<ul class="nfts">
{#each data.nfts as nft}
<li>
<NftTile {...nft} />
</li>
{/each}
</ul>
{/if}
<div class="sidebar">
<div class="relative">
<h2>Create a certificate:</h2>

<div class="form-group">
<label for="latitude" class="form-label">Coordinates:</label>
<div class="coordinates-group">
<input id="latitude" name="latitude" type="text" class="form-input">
<div>/</div>
<input type="text" class="form-input">
</div>
</div>

<div class="form-group">
<label for="natural-object" class="form-label">Type of natural object:</label>
<input id="natural-object" type="text" class="form-input">
</div>

<div class="form-group">
<label for="owner-of-place" class="form-label">Owner of the place:</label>
<input id="owner-of-place" name="owner-of-place" type="text" class="form-input">
</div>

<div class="form-group">
<label for="operations-manager" class="form-label">Operations manager:</label>
<input id="operations-" name="operations-" type="text" class="form-input">
</div>

<div class="form-group">
<label for="date-of-work" class="form-label">Date of work:</label>
<input id="date-of-work" name="date-of-work" type="date" class="form-input">
</div>

<div class="form-group">
<label for="type-of-work" class="form-label">Type of work:</label>
<input id="type-of-work" form="type-of-work" type="text" class="form-input">
</div>

<div class="form-group">
<label for="receiver-id" class="form-label">Receiver ID:</label>
<input id="type-of-work" name="type-of-work" type="text" class="form-input">
</div>

<button class="submit-button">
Submit
</button>
</div>
</div>
</div>
</main>

<style>
.nfts {
.page-container {
background: linear-gradient(to bottom right, #f6d8d5, transparent, #f5f5f5);
min-height: 100vh;
position: relative;
}
.content-wrapper {
display: grid;
gap: 64px;
grid-template-columns: 1fr 320px;
padding: 5rem 3rem 3rem 3rem;
position: relative;
z-index: 2;
}
@media (min-width: 1024px) {
.content-wrapper {
margin-right: 32px;
}
}
.cards-grid {
align-items: start;
display: grid;
gap: 2rem;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.sidebar {
height: fit-content;
max-width: 320px;
position: sticky;
top: 64px;
width: 100%;
}
.sidebar h2 {
font-weight: 900;
margin-bottom: 2rem;
}
.form-group {
display: grid;
grid-template-columns: repeat(auto-fill, 16rem);
gap: 0.25rem;
margin-bottom: 1rem;
}
.form-label {
font-size: 0.875rem;
}
.form-input {
border-radius: 0.5rem;
width: 100%;
padding: 0.5rem;
}
.coordinates-group {
display: flex;
gap: 1rem;
padding-left: 0;
list-style-type: none;
align-items: center;
}
.coordinates-group input {
width: 100%;
}
.submit-button {
position: sticky;
top: 24px;
padding: 1rem;
background-color: #171717;
color: white;
border-radius: 0.5rem;
font-size: 0.875rem;
width: 100%;
display: block;
font-weight: bold;
}
.grain {
z-index: 0;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform: translateZ(0);
}
.grain:before {
content: "";
top: -10rem;
left: -10rem;
width: calc(100% + 20rem);
height: calc(100% + 20rem);
z-index: 9999;
position: fixed;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/5c/Image_gaussian_noise_example.png);
opacity: 0.1;
pointer-events: none;
animation: noise 1s steps(2) infinite;
}
@keyframes noise {
0% { transform: translate3d(0, 9rem, 0) }
10% { transform: translate3d(-1rem, -4rem, 0) }
20% { transform: translate3d(-8rem, 2rem, 0) }
30% { transform: translate3d(9rem, -9rem, 0) }
40% { transform: translate3d(-2rem, 7rem, 0) }
50% { transform: translate3d(-9rem, -4rem, 0) }
60% { transform: translate3d(2rem, 6rem, 0) }
70% { transform: translate3d(7rem, -8rem, 0) }
80% { transform: translate3d(-9rem, 1rem, 0) }
90% { transform: translate3d(6rem, -5rem, 0) }
100% { transform: translate3d(-7rem, 0, 0) }
}
</style>
Binary file added frontend/static/0.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit e68c765

Please sign in to comment.