Rework the main page to look like the donation page and sprinkle some donation page layout on top of it
This commit is contained in:
parent
59ec4c73c5
commit
557a7f8239
GPG Key ID:
1D134A95FE521A7A
30
package.json
30
package.json
|
|
@ -12,31 +12,31 @@
|
|||
"format": "prettier --plugin-search-dir . --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify/json": "^2.2.27",
|
||||
"@iconify/json": "^2.2.94",
|
||||
"@sveltejs/adapter-auto": "^1.0.3",
|
||||
"@sveltejs/adapter-static": "^2.0.1",
|
||||
"@sveltejs/kit": "^1.8.3",
|
||||
"@typescript-eslint/eslint-plugin": "^5.53.0",
|
||||
"@typescript-eslint/parser": "^5.53.0",
|
||||
"@sveltejs/adapter-static": "^2.0.2",
|
||||
"@sveltejs/kit": "^1.22.3",
|
||||
"@typescript-eslint/eslint-plugin": "^5.62.0",
|
||||
"@typescript-eslint/parser": "^5.62.0",
|
||||
"@unocss/preset-icons": "^0.48.5",
|
||||
"@unocss/preset-web-fonts": "^0.48.5",
|
||||
"eslint": "^8.34.0",
|
||||
"eslint-config-prettier": "^8.6.0",
|
||||
"eslint": "^8.45.0",
|
||||
"eslint-config-prettier": "^8.8.0",
|
||||
"eslint-plugin-svelte3": "^4.0.0",
|
||||
"prettier": "^2.8.4",
|
||||
"prettier-plugin-svelte": "^2.9.0",
|
||||
"svelte": "^3.55.1",
|
||||
"svelte-check": "^3.0.4",
|
||||
"prettier": "^2.8.8",
|
||||
"prettier-plugin-svelte": "^2.10.1",
|
||||
"svelte": "^3.59.2",
|
||||
"svelte-check": "^3.4.6",
|
||||
"svelte-dark-mode": "^2.1.0",
|
||||
"svelte-time": "^0.7.1",
|
||||
"tslib": "^2.5.0",
|
||||
"svelte-time": "^0.7.2",
|
||||
"tslib": "^2.6.0",
|
||||
"typescript": "^4.9.5",
|
||||
"unocss": "^0.48.5",
|
||||
"vite": "^4.1.4"
|
||||
"vite": "^4.4.7"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@unocss/reset": "^0.48.5",
|
||||
"dayjs": "^1.11.7"
|
||||
"dayjs": "^1.11.9"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,30 +2,49 @@
|
|||
import data from '$lib/data.json';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
</script>
|
||||
<body class="dark:bg-black bg-gray-300 text-black dark:text-white font-sans" id="content">
|
||||
<div class="text-center">
|
||||
<div class="justify-center flex items-center m-auto shrink overflow-hidden h-screen ">
|
||||
<div class="items-center justify-center">
|
||||
<div in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut}} out:fly={{ duration: 400, x: -50, easing: quintOut}} >
|
||||
<div class="text-4xl"><h1>{data.name}</h1></div>
|
||||
<div class="my-3"><p id="" style="margin-top: -15px;">{@html data.description}</p></div>
|
||||
</div>
|
||||
<hr in:fly={{ delay: 300, duration: 300, x: 0, easing: quintOut}} out:fly={{ duration: 400, x: 0, easing: quintOut}} class="border-black dark:border-white w-100%"/>
|
||||
<div in:fly={{ delay: 300, duration: 300, x: -50, easing: quintOut}} out:fly={{ duration: 400, x: 50, easing: quintOut}} >
|
||||
<div class="justify-center flex flex-row items-center gap-3 text-3xl hover:text-black hover:dark:text-white">
|
||||
<div><a class="i-carbon-logo-github" href="{data.github}{data.gh}" title="Midou's GitHub">G</a></div>
|
||||
<div><a class="i-simple-icons-matrix" href="{data.matrix}{data.mtx}" title="Midou's Matrix">M</a></div>
|
||||
<div><a class="i-mdi-at" href="mailto:{data.mail}" title="Midou's E-Mail">M</a></div>
|
||||
<div><a class="i-ph-currency-circle-dollar-bold text-4xl" href="/donate" title="Donate to Midou.">D</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
<body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans" id="content">
|
||||
<div class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-screen">
|
||||
<!-- Primary content (left) -->
|
||||
<div in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut}} animate=true out:fly={{ duration: 300, y: -50, easing: quintOut}} class="text-center">
|
||||
<div class="justify-center flex flex-col items-center m-auto shrink overflow-hidden h-screen">
|
||||
<div in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut}} animate=true out:fly={{ duration: 300, x: -50, easing: quintOut}} >
|
||||
<h1 class="text-black dark:text-white text-4xl">{data.name}</h1>
|
||||
<p class="text-black dark:text-white pb-5" style="">{@html data.description}</p>
|
||||
</div>
|
||||
<hr transition:fly={{ duration: 300, x: 0, easing: quintOut}} class="border-black w-100%"/>
|
||||
<div in:fly={{ delay: 300, duration: 300, x: -50, easing: quintOut}} out:fly={{ duration: 300, x: 50, easing: quintOut}} >
|
||||
<a href="{data.github}{data.gh}">
|
||||
<div class="flex flex-row py-1">
|
||||
<div class="i-carbon-logo-github text-black text-3xl"></div><p class="text-1xl text-black pl-2">GitHub</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="{data.matrix}{data.mtx}">
|
||||
<div class="flex flex-row py-1">
|
||||
<div class="i-tabler-brand-matrix pl-3 text-black text-3xl"></div><p class="text-1xl text-black pl-2">Matrix</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="mailto:{data.mail}">
|
||||
<div class="flex flex-row py-1">
|
||||
<div class="i-mdi-at pl-3 text-black text-3xl"></div><p class="text-1xl text-black pl-2">Mail</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/donate">
|
||||
<div class="flex flex-row py-1">
|
||||
<div class="i-ph-currency-circle-dollar-bold pl-3 text-black text-3xl"></div><p class="text-1xl text-black pl-2">Donate</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- vertical line -->
|
||||
<div
|
||||
in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut}}
|
||||
out:fly={{ duration: 300, y: 0, easing: quintOut}}
|
||||
class="md:mx-4 md:h-1/2 md:w-1 w-3/4 border-1 bg-black border-black rounded-md"
|
||||
></div>
|
||||
<!-- Secondary content (right) -->
|
||||
<div class="i-gridicons-info text-4xl"></div><h2 class="text-4xl">About</h2>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -6,14 +6,30 @@
|
|||
<body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans" id="content">
|
||||
<div class="text-center">
|
||||
<div class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-screen ">
|
||||
<div in:fly={{ delay: 300, duration: 300, y: -50, easing: quintOut}} out:fly={{ duration: 300, y: 50, easing: quintOut}} class="i-tabler-coin-monero pl-0 md:pl-3 text-black text-5xl"></div>
|
||||
<h1 in:fly={{ delay: 300, duration: 300, y: -50, easing: quintOut}} out:fly={{ duration: 300, y: 50, easing: quintOut}} class="text-black dark:text-white text-4xl md:pr-2">Monero</h1>
|
||||
<div in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut}} out:fly={{ duration: 300, y: 0, easing: quintOut}} class="md:h-1/2 md:w-1 w-3/4 border-1 bg-black border-black rounded-md"></div>
|
||||
<div in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut}} out:fly={{ duration: 300, y: -50, easing: quintOut}} class="flex flex-col md:px-2 text-center md:text-left">
|
||||
<div
|
||||
in:fly={{ delay: 300, duration: 300, y: -50, easing: quintOut}}
|
||||
out:fly={{ duration: 300, y: 50, easing: quintOut}}
|
||||
class="i-tabler-coin-monero pl-0 md:pl-3 text-black text-5xl"
|
||||
></div>
|
||||
<h1
|
||||
in:fly={{ delay: 300, duration: 300, y: -50, easing: quintOut}}
|
||||
out:fly={{ duration: 300, y: 50, easing: quintOut}}
|
||||
class="text-black dark:text-white text-4xl md:pr-2"
|
||||
>Monero</h1>
|
||||
<div
|
||||
in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut}}
|
||||
out:fly={{ duration: 300, y: 0, easing: quintOut}}
|
||||
class="md:h-1/2 md:w-1 w-3/4 border-1 bg-black border-black rounded-md"
|
||||
></div>
|
||||
<div
|
||||
in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut}}
|
||||
out:fly={{ duration: 300, y: -50, easing: quintOut}}
|
||||
class="flex flex-col md:px-2 text-center md:text-left"
|
||||
>
|
||||
<h1 class="text-3xl pb-3">QR code:</h1>
|
||||
<img src="/qr.png" alt="QR code" class="pb-5 justify-center md:w-1.5/4 md:mx-0 mx-10% md:h-1.5/4 w-80% text-center items-center h-auto"/>
|
||||
<img src="/qr.png" alt="QR code" class="pb-5 justify-center md:w-1.5/4 md:mx-0 mx-10 md:h-1.5/4 w-80% text-center items-center h-auto"/>
|
||||
<h1 class="underline-offset-auto hover:underline text-3xl"><a href="monero:44UzWvWS9wELmqPXzLqiPphXVYBbsjkbC7r4RwCSoXC4UyzC2NbPEoPEjxZsGVfbSPbAHUGtpc8GUYUZ8fdu1a4bNAyBPDe"> Monero wallet:</a></h1>
|
||||
<p><code class="break-all">44UzWvWS9wELmqPXzLqiPphXVYBbsjkbC7r4RwCSoXC4UyzC2NbPEoPEjxZsGVfbSPbAHUGtpc8GUYUZ8fdu1a4bNAyBPDe</code></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue