Maikoldev/main

src/components/maikoldev/CopyIcon.vue

@@ -0,0 +1,28 @@
+<template>
+	<svg
+		version="1.1"
+		id="Capa_1"
+		xmlns="http://www.w3.org/2000/svg"
+		xmlns:xlink="http://www.w3.org/1999/xlink"
+		x="0px"
+		y="0px"
+		viewBox="0 0 488.3 488.3"
+		style="enable-background: new 0 0 488.3 488.3"
+		xml:space="preserve"
+	>
+		<g>
+			<g>
+				<path
+					d="M314.25,85.4h-227c-21.3,0-38.6,17.3-38.6,38.6v325.7c0,21.3,17.3,38.6,38.6,38.6h227c21.3,0,38.6-17.3,38.6-38.6V124
+			C352.75,102.7,335.45,85.4,314.25,85.4z M325.75,449.6c0,6.4-5.2,11.6-11.6,11.6h-227c-6.4,0-11.6-5.2-11.6-11.6V124
+			c0-6.4,5.2-11.6,11.6-11.6h227c6.4,0,11.6,5.2,11.6,11.6V449.6z"
+				/>
+				<path
+					d="M401.05,0h-227c-21.3,0-38.6,17.3-38.6,38.6c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5c0-6.4,5.2-11.6,11.6-11.6h227
+			c6.4,0,11.6,5.2,11.6,11.6v325.7c0,6.4-5.2,11.6-11.6,11.6c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5c21.3,0,38.6-17.3,38.6-38.6
+			V38.6C439.65,17.3,422.35,0,401.05,0z"
+				/>
+			</g>
+		</g>
+	</svg>
+</template>

src/components/maikoldev/Generator.vue

@@ -0,0 +1,153 @@
+<template>
+	<div>
+		<h1 class="font-special text-4xl mb-10">Strong Password Generator</h1>
+		<div class="card">
+			<div class="relative mb-4">
+				<input
+					ref="password"
+					:class="`form-control transition-all duration-300 ${handleStatus()}`"
+					type="text"
+					v-model="password"
+					readonly
+				/>
+				<button
+					class="absolute top-0 bottom-0 right-14 hover:scale-110 transition-all duration-300"
+					type="button"
+					@click="copyPassword"
+				>
+					<CopyIcon class="icon" width="25" />
+				</button>
+				<button
+					class="
+						absolute
+						top-0
+						bottom-0
+						right-4
+						hover:rotate-90 hover:scale-110
+						transition-all
+						duration-300
+					"
+					type="button"
+					@click="generatePassword"
+				>
+					<ReloadIcon class="icon" width="25" />
+				</button>
+			</div>
+			<div class="progress bg-black-currant h-3 my-4 rounded">
+				<div :class="`bar h-3 rounded ${progressStatus()} transition-all duration-300`"></div>
+			</div>
+			<div>
+				<input type="range" name="" id="" v-model="passwordLength" step="1" min="1" max="20" />
+
+				<span>
+					{{ passwordLength }}
+				</span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import CopyIcon from '@components/maikoldev/CopyIcon.vue'
+import ReloadIcon from '@components/maikoldev/ReloadIcon.vue'
+
+export default {
+	name: 'Generator',
+	data() {
+		return {
+			password: '',
+			passwordLength: 12
+		}
+	},
+	components: {
+		CopyIcon,
+		ReloadIcon
+	},
+	created() {
+		this.generatePassword()
+		// this.statusClass()
+	},
+	methods: {
+		handleStatus() {
+			if (this.passwordLength < 8) {
+				return 'text-red-orange'
+			} else if (this.passwordLength >= 8 && this.passwordLength < 12) {
+				return 'text-terra-cota'
+			} else if (this.passwordLength >= 12) {
+				return 'text-pastel-green'
+			}
+		},
+		progressStatus() {
+			if (this.passwordLength < 3) {
+				return 'bg-red-orange w-0'
+			} else if (this.passwordLength < 8) {
+				return 'bg-red-orange w-[30%] '
+			} else if (this.passwordLength >= 8 && this.passwordLength < 12) {
+				return 'bg-terra-cota w-[50%]'
+			} else if (this.passwordLength >= 12) {
+				return 'bg-pastel-green w-full'
+			}
+		},
+		// generate random password of 8 characters and symbols
+		generatePassword() {
+			let password = ''
+			const characters =
+				'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+~`|}{[]:;?><,./-='
+			const charactersLength = characters.length
+			for (let i = 0; i < this.passwordLength; i++) {
+				password += characters.charAt(Math.floor(Math.random() * charactersLength))
+			}
+
+			this.password = password
+		},
+		copyPassword() {
+			const password = this.password
+
+			if (!password) {
+				return
+			}
+
+			this.$refs.password.select()
+			document.execCommand('copy')
+			alert('Password copied to clipboard')
+		}
+	}
+}
+</script>
+
+<style scoped>
+h1,
+p,
+span {
+	@apply text-manga;
+	text-shadow: 0px 1px 8px rgba(255, 255, 255, 0.5);
+}
+
+.icon {
+	fill: #e5e1e6;
+}
+
+.card {
+	@apply bg-gradient-to-b from-surf to-psybeam;
+	/* background: #fff; */
+	/* box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.5); */
+	/* border-radius: 16px; */
+	padding: 20px;
+	/* clip-path: polygon(12px 0px, 100% 0px, 100% 72%, calc(100% - 12px) 100%, 0px 100%, 0px 12px); */
+	clip-path: polygon(
+		20px 0px,
+		100% 0px,
+		100% calc(100% - 20px),
+		calc(100% - 20px) 100%,
+		0px 100%,
+		0px 20px
+	);
+	/* border: 1px solid #e5e1e6; */
+	box-shadow: rgb(124 127 255) 0px 0px 12px;
+}
+
+input.form-control {
+	@apply bg-black-currant w-full  py-3 px-4 outline-none rounded-2xl text-xl;
+	box-shadow: rgb(255 215 77 / 60%) -1px -1px 6px, rgb(124 127 255 / 60%) 1px 1px 6px;
+}
+</style>

src/components/maikoldev/ReloadIcon.vue

@@ -0,0 +1,31 @@
+<template>
+	<svg
+		version="1.1"
+		id="Capa_1"
+		xmlns="http://www.w3.org/2000/svg"
+		xmlns:xlink="http://www.w3.org/1999/xlink"
+		x="0px"
+		y="0px"
+		viewBox="0 0 489.711 489.711"
+		style="enable-background: new 0 0 489.711 489.711"
+		xml:space="preserve"
+	>
+		<g>
+			<g>
+				<path
+					d="M112.156,97.111c72.3-65.4,180.5-66.4,253.8-6.7l-58.1,2.2c-7.5,0.3-13.3,6.5-13,14c0.3,7.3,6.3,13,13.5,13
+			c0.2,0,0.3,0,0.5,0l89.2-3.3c7.3-0.3,13-6.2,13-13.5v-1c0-0.2,0-0.3,0-0.5v-0.1l0,0l-3.3-88.2c-0.3-7.5-6.6-13.3-14-13
+			c-7.5,0.3-13.3,6.5-13,14l2.1,55.3c-36.3-29.7-81-46.9-128.8-49.3c-59.2-3-116.1,17.3-160,57.1c-60.4,54.7-86,137.9-66.8,217.1
+			c1.5,6.2,7,10.3,13.1,10.3c1.1,0,2.1-0.1,3.2-0.4c7.2-1.8,11.7-9.1,9.9-16.3C36.656,218.211,59.056,145.111,112.156,97.111z"
+				/>
+				<path
+					d="M462.456,195.511c-1.8-7.2-9.1-11.7-16.3-9.9c-7.2,1.8-11.7,9.1-9.9,16.3c16.9,69.6-5.6,142.7-58.7,190.7
+			c-37.3,33.7-84.1,50.3-130.7,50.3c-44.5,0-88.9-15.1-124.7-44.9l58.8-5.3c7.4-0.7,12.9-7.2,12.2-14.7s-7.2-12.9-14.7-12.2l-88.9,8
+			c-7.4,0.7-12.9,7.2-12.2,14.7l8,88.9c0.6,7,6.5,12.3,13.4,12.3c0.4,0,0.8,0,1.2-0.1c7.4-0.7,12.9-7.2,12.2-14.7l-4.8-54.1
+			c36.3,29.4,80.8,46.5,128.3,48.9c3.8,0.2,7.6,0.3,11.3,0.3c55.1,0,107.5-20.2,148.7-57.4
+			C456.056,357.911,481.656,274.811,462.456,195.511z"
+				/>
+			</g>
+		</g>
+	</svg>
+</template>

src/pages/entry/maikoldev/index.astro

@@ -0,0 +1,51 @@
+---
+import Layout from '@layout'
+import MDGenerator from '@components/maikoldev/Generator.vue'
+---
+
+<Layout title='maikoldev'>
+	<style>
+		@font-face {
+			font-family: 'Orbitron';
+			font-style: normal;
+			font-weight: 400;
+			font-display: swap;
+			src: url('/Orbitron-ExtraBold.woff2') format('woff2');
+		}
+		@font-face {
+			font-family: 'Jet Brains Mono';
+			font-style: normal;
+			font-weight: 400;
+			font-display: swap;
+			src: url('/JetBrainsMono-Regular.woff2') format('woff2');
+		}
+		@font-face {
+			font-family: 'Jet Brains Mono';
+			font-style: normal;
+			font-weight: 600;
+			font-display: swap;
+			src: url('/JetBrainsMono-Bold.woff2') format('woff2');
+		}
+
+		main {
+			height: 100%;
+			background: url('/grain-dark.png');
+		}
+
+		main::before {
+			content: '';
+			background: url('/maikoldev/grid-square.svg');
+			z-index: -1;
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			opacity: 0.2;
+			-webkit-mask-image: radial-gradient(70% 80% at 50% 50%, black 40%, transparent 70%);
+			filter: brightness(0.4) sepia(1) hue-rotate(220deg) saturate(8);
+		}
+	</style>
+
+	<main class='flex flex-col justify-center items-center min-h-screen px-8 lg:px-0'>
+		<MDGenerator client:visible />
+	</main>
+</Layout>

tailwind.config.cjs

@@ -25,7 +25,11 @@ module.exports = {
 				psybeam: '#9092ff',
 				giga: '#b4ff39',
 				manga: '#e5e1e6',
-				body: '#170F1E'
+				body: '#170F1E',
+				'black-currant': '#0E0318',
+				'pastel-green': '#7ae582',
+				'red-orange': '#ff331f',
+				'terra-cota': '#ed6a5a'
 			}
 		},
 		fontFamily: {