feat: website for micmute 🌐

Took 2 hours 4 minutes
rokartur · Jun 5, 2024 · 920341b · 920341b
1 parent 3624691
commit 920341b
Show file tree

Hide file tree

Showing 7 changed files with 356 additions and 0 deletions.
diff --git a/...deproj/project.xcworkspace/xcuserdata/rokartur.xcuserdatad/UserInterfaceState.xcuserstate b/...deproj/project.xcworkspace/xcuserdata/rokartur.xcuserdatad/UserInterfaceState.xcuserstate
diff --git a/Website/favicon.png b/Website/favicon.png
diff --git a/Website/globals.css b/Website/globals.css
@@ -0,0 +1,68 @@
+:root {
+    --font-family: "Inter", sans-serif;
+    --branding: #FF4646;
+    --black: #111;
+    --white: #fff;
+    --gray-50: #FAFAFA;
+    --gray-100: #F5F5F5;
+    --gray-200: #E5E5E5;
+    --gray-300: #D4D4D4;
+    --gray-400: #A3A3A3;
+    --gray-500: #737373;
+    --gray-600: #525252;
+    --gray-700: #404040;
+    --gray-800: #262626;
+    --gray-900: #181616;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+::selection {
+    user-select: none;
+    pointer-events: none;
+}
+
+body {
+    padding: 0;
+    margin: 0;
+
+    width: 100%;
+    min-height: 100vh;
+
+    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, var(--font-family);
+    font-style: normal;
+
+    scroll-behavior: smooth;
+    overflow-x: hidden;
+
+    background: var(--black);
+    color: hsla(0, 0% , 100%, .92);
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+button {
+    all: unset;
+}
+
+a {
+    color: inherit;
+    text-decoration: none
+}
+
+img {
+    user-select: none;
+    pointer-events: none;
+}
+
+h1, h2, h4, h5, h6, p, a, label {
+    max-width: fit-content;
+}
+
+html, div, h1, h2, h3, h4, h5, h6, ul, ol, li, p, blockquote, pre, form, fieldset, table, th, td {
+    margin: 0;
+    padding: 0;
+}
diff --git a/Website/index.css b/Website/index.css
@@ -0,0 +1,198 @@
+main {
+    padding: 112px 0;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+h1 {
+    max-width: 550px;
+    font-size: 72px;
+    font-weight: 700;
+    text-align: center;
+}
+
+@media (width <= 765px) {
+    h1 {
+        max-width: 320px;
+        font-size: 48px;
+    }
+}
+
+h1 span {
+    color: var(--branding);
+}
+
+.heroContainer {
+    padding: 0 20px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 32px;
+}
+
+.heroContainer p {
+    max-width: 550px;
+    font: 400 20px/32px var(--font-family);
+    color: var(--gray-500);
+    text-align: center;
+}
+
+@media (width <= 765px) {
+    .heroContainer p {
+        max-width: 256px;
+        font-size: 18px;
+    }
+}
+
+.logoImage {
+    width: 128px;
+    height: 128px;
+}
+
+.notificationImage {
+    margin: 32px 0 0 0;
+    border-radius: 24px;
+    object-fit: cover;
+    box-shadow: 0 32px 56px rgba(0, 0, 0, 1);
+}
+
+.heroActions {
+    margin: 72px 0 0 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+}
+
+@media (width <= 475px) {
+    .heroActions {
+        flex-direction: column;
+        gap: 32px;
+    }
+}
+
+.downloadButton {
+    padding: 20px 32px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+
+    border-radius: 100px;
+    background-color: var(--branding);
+
+    transition: opacity .2s, transform .2s;
+}
+
+.downloadButton:hover {
+    opacity: .9;
+    transform: translateY(2px);
+    cursor: pointer;
+}
+
+.downloadButton p {
+    padding: 2px 0 0 0;
+    font: 600 16px/24px var(--font-family);
+    color: var(--white);
+}
+
+.releasesButton {
+    padding: 20px 32px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+
+    font: 500 16px/24px var(--font-family);
+    color: var(--white);
+
+    border-radius: 100px;
+    border: 1px solid hsla(213, 4%, 49%, .41);
+    background-color: var(--black);
+
+    transition: opacity .2s, transform .2s;
+}
+
+.releasesButton:hover {
+    opacity: .9;
+    transform: translateY(2px);
+    cursor: pointer;
+}
+
+.reqOS p {
+    margin: -16px 0 0 0;
+    font: 400 16px/20px var(--font-family);
+    color: var(--gray-500);
+}
+
+footer {
+    padding: 64px 0;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 12px;
+}
+
+footer a {
+    font: 400 16px/24px var(--font-family);
+    color: #A3A3A3;
+    text-align: center;
+}
+
+footer a:hover {
+    color: var(--branding);
+    text-decoration: underline;
+}
+
+.featuresSection {
+    padding: 112px 24px;
+
+    display: flex;
+    justify-content: center;
+    align-items: start;
+    flex-wrap: wrap;
+    gap: 72px;
+}
+
+.feature {
+    width: 212px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 26px;
+    flex: 1 0;
+}
+
+.featureIcon {
+    width: 64px;
+    height: 64px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border: 3px solid hsla(0, 0%, 100%, .1);
+    border-radius: 16px;
+}
+
+.featureLabel {
+    font: 600 26px/32px var(--font-family);
+    color: var(--white);
+}
+
+.featureDescription {
+    max-width: 212px;
+    font: 400 16px/20px var(--font-family);
+    color: var(--gray-400);
+    text-align: center;
+}
diff --git a/Website/index.html b/Website/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang='en'>
+<head>
+	<meta charset='UTF-8'>
+	<meta name='viewport'
+				content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'>
+	<meta http-equiv='X-UA-Compatible' content='ie=edge'>
+	<title>Micmute | Native & lightweight menu bar application for toggling microphone mute</title>
+	<meta name='theme-color' content='#111'/>
+	<link rel='icon' type='image/png' href='favicon.png'/>
+	<meta name='google' content='notranslate'/>
+	<link rel='canonical' href='https://micmute.app'/>
+	<meta name='title' content='Micmute'/>
+	<meta property='og:title' content='Micmute'/>
+	<meta property='twitter:title' content='Micmute'/>
+	<meta name='description' content='Native & lightweight menu bar application for toggling microphone mute'/>
+	<meta property='og:description' content='Native & lightweight menu bar application for toggling microphone mute'/>
+	<meta name='image' content='favicon.png'/>
+	<meta property='og:image' itemprop='image' content='favicon.png'/>
+	<link rel='apple-touch-icon' href='favicon.png'>
+	<meta property='og:type' content='website'/>
+	<meta property='og:url' content='https://micmute.app'/>
+	<meta property='og:site_name' content='Micmute'/>
+	<link rel='preconnect' href='https://fonts.googleapis.com'>
+	<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
+	<link href='https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap' rel='stylesheet'>
+	<meta name='robots' content='all'/>
+	<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
+	<meta name='language' content='English'/>
+	<meta name='revisit-after' content='1 days'/>
+	<link rel='stylesheet' href='globals.css'>
+	<link rel='stylesheet' href='index.css'>
+</head>
+<body>
+<main>
+	<section aria-label='main hero section' class='heroContainer'>
+		<img class='logoImage' src='favicon.png' alt='Micmute Icon'>
+		<h1>Do you want more <span>privacy</span>?</h1>
+		<p>Native & lightweight menu bar application for toggling microphone mute</p>
+		<img class='notificationImage' src='notification.png' alt=''>
+		<div class='heroActions'>
+			<a class='downloadButton' href='https://github.com/rokartur/Micmute/releases/download/v2.1.1/Micmute.zip'>
+				<svg width='20px' height='23px'><path fill-rule='evenodd' fill='rgb(255, 255, 255)' d='M16.025,12.256 C16.057,15.670 19.027,16.807 19.060,16.821 C19.035,16.902 18.585,18.441 17.495,20.031 C16.552,21.406 15.574,22.775 14.033,22.804 C12.519,22.831 12.032,21.908 10.301,21.908 C8.570,21.908 8.029,22.775 6.596,22.831 C5.109,22.888 3.976,21.345 3.026,19.975 C1.084,17.174 -0.400,12.059 1.592,8.606 C2.582,6.891 4.351,5.805 6.272,5.778 C7.732,5.750 9.111,6.758 10.004,6.758 C10.896,6.758 12.571,5.546 14.333,5.724 C15.070,5.754 17.140,6.021 18.469,7.962 C18.362,8.028 15.999,9.401 16.025,12.256 M13.179,3.870 C13.969,2.916 14.500,1.589 14.355,0.267 C13.217,0.313 11.841,1.024 11.024,1.977 C10.292,2.822 9.652,4.173 9.824,5.468 C11.093,5.566 12.389,4.825 13.179,3.870 '></path></svg>
+				<p>Download</p>
+			</a>
+			<a class='releasesButton' href='https://github.com/rokartur/Micmute/releases' target='_blank'>
+				Latest Release
+			</a>
+		</div>
+		<div class='reqOS'>
+			<p>Micmute requires macOS 14.0 or newer.</p>
+		</div>
+	</section>
+
+	<section aria-label='features' class='featuresSection'>
+		<div class='feature'>
+			<div class='featureIcon'>
+				<svg width='24' height='24' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M21.5705 4.04146C20.8335 2.63746 18.4095 3.07846 16.3145 3.63946C7.20752 6.99546 3.98552 13.8155 2.85352 17.8785C2.79752 17.9805 2.76352 18.0975 2.76052 18.2225C2.31252 19.9465 2.25152 21.0955 2.25052 21.1335C2.23352 21.5465 2.55452 21.8955 2.96752 21.9125C2.97852 21.9135 2.98952 21.9135 3.00052 21.9135C3.39952 21.9135 3.73152 21.5985 3.74952 21.1955C3.75452 21.0735 3.80052 20.2345 4.08352 18.9805C6.59152 18.8745 9.11652 17.9405 11.5965 16.1965C11.7905 16.0605 11.9085 15.8405 11.9155 15.6045C11.9225 15.3675 11.8165 15.1415 11.6315 14.9955L10.4875 14.0895L14.2415 13.7215C14.3945 13.7065 14.5385 13.6455 14.6555 13.5455C14.7365 13.4775 16.6475 11.8415 18.4655 9.93446C21.2305 7.03446 22.1875 5.21746 21.5705 4.04146Z' fill='white'/><path fill-rule='evenodd' clip-rule='evenodd' d='M17.1266 20.414H10.7166C10.3026 20.414 9.96661 20.75 9.96661 21.164C9.96661 21.578 10.3026 21.914 10.7166 21.914H17.1266C17.5406 21.914 17.8766 21.578 17.8766 21.164C17.8766 20.75 17.5406 20.414 17.1266 20.414Z' fill='white'/></svg>
+			</div>
+			<p class='featureLabel'>Lightweight</p>
+			<p class='featureDescription'>Only <span>9MB</span> in size and <span>35MB</span> of RAM usage.</p>
+		</div>
+
+		<div class='feature'>
+			<div class='featureIcon'>
+				<svg width='24' height='24' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12.1836 7.01578C11.7736 7.01578 11.4336 6.68578 11.4336 6.27578V6.26578C11.4336 5.84578 11.7736 5.51578 12.1836 5.51578C12.6036 5.51578 12.9336 5.84578 12.9336 6.26578C12.9336 6.67578 12.6036 7.01578 12.1836 7.01578ZM19.9136 10.7858C19.4836 10.3558 18.9036 10.1158 18.3036 10.1158H18.2936L16.5536 10.1258C16.1036 10.1258 15.6636 9.92578 15.3636 9.58578C15.0636 9.24578 14.9236 8.79578 14.9736 8.33578L15.2236 6.21578C15.2236 4.54578 13.8536 3.17578 12.1836 3.17578C10.5036 3.17578 9.14358 4.54578 9.14358 6.27578L9.39358 8.32578C9.44358 8.77578 9.30358 9.23578 9.00358 9.57578C8.69358 9.92578 8.26358 10.1158 7.80358 10.1158H6.07358C4.81358 10.1158 3.80358 11.1358 3.79358 12.3858C3.79358 12.9958 4.03358 13.5758 4.46358 14.0058C4.89358 14.4358 5.46358 14.6758 6.07358 14.6758H18.3036C19.5536 14.6758 20.5736 13.6458 20.5736 12.3958C20.5736 11.7858 20.3436 11.2158 19.9136 10.7858Z' fill='white'/><path fill-rule='evenodd' clip-rule='evenodd' d='M19.4158 16.7351V15.7991C19.4158 15.5231 19.1918 15.2991 18.9158 15.2991H5.45278C5.17678 15.2991 4.95278 15.5231 4.95278 15.7991V16.7551C5.02278 18.5131 4.33678 19.7661 4.01078 20.2661C3.79078 20.6291 3.75378 21.0501 3.90878 21.4221C4.06278 21.7931 4.38878 22.0621 4.72978 22.1371C4.82478 22.1751 4.82478 22.1751 6.04978 22.1771H6.05678C6.91578 22.1771 7.70278 21.7451 8.16278 21.0211L8.53178 20.4411L8.56678 20.9171C8.61978 21.6241 9.21478 22.1781 9.92178 22.1781H11.0928C19.4998 22.1741 19.4998 22.1741 19.5678 22.1591C19.9798 22.0621 20.3058 21.7931 20.4598 21.4211C20.6148 21.0491 20.5768 20.6281 20.3278 20.2231C20.0298 19.7661 19.3448 18.5141 19.4158 16.7351Z' fill='white'/></svg>
+			</div>
+			<p class='featureLabel'>Appearance</p>
+			<p class='featureDescription'>You can customize the appearance of the app to your preference.</p>
+		</div>
+
+		<div class='feature'>
+			<div class='featureIcon'>
+				<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M17.12 11.7196C16.642 11.7196 16.254 11.3306 16.254 10.8536C16.254 10.3756 16.642 9.98761 17.12 9.98761C17.598 9.98761 17.986 10.3756 17.986 10.8536C17.986 11.3306 17.598 11.7196 17.12 11.7196ZM15.411 14.5996C14.933 14.5996 14.545 14.2106 14.545 13.7326C14.545 13.2556 14.933 12.8666 15.411 12.8666C15.889 12.8666 16.277 13.2556 16.277 13.7326C16.277 14.2106 15.889 14.5996 15.411 14.5996ZM14.823 18.1586H9.17804C8.76404 18.1586 8.42804 17.8226 8.42804 17.4086C8.42804 16.9946 8.76404 16.6586 9.17804 16.6586H14.823C15.237 16.6586 15.573 16.9946 15.573 17.4086C15.573 17.8226 15.237 18.1586 14.823 18.1586ZM7.71304 13.7326C7.71304 13.2556 8.10104 12.8666 8.57904 12.8666C9.05704 12.8666 9.44504 13.2556 9.44504 13.7326C9.44504 14.2106 9.05704 14.5996 8.57904 14.5996C8.10104 14.5996 7.71304 14.2106 7.71304 13.7326ZM6.87004 11.7196C6.39204 11.7196 6.00404 11.3306 6.00404 10.8536C6.00404 10.3756 6.39204 9.98761 6.87004 9.98761C7.34804 9.98761 7.73604 10.3756 7.73604 10.8536C7.73604 11.3306 7.34804 11.7196 6.87004 11.7196ZM10.288 9.98761C10.766 9.98761 11.154 10.3756 11.154 10.8536C11.154 11.3306 10.766 11.7196 10.288 11.7196C9.81004 11.7196 9.42204 11.3306 9.42204 10.8536C9.42204 10.3756 9.81004 9.98761 10.288 9.98761ZM11.995 12.8666C12.473 12.8666 12.861 13.2556 12.861 13.7326C12.861 14.2106 12.473 14.5996 11.995 14.5996C11.517 14.5996 11.129 14.2106 11.129 13.7326C11.129 13.2556 11.517 12.8666 11.995 12.8666ZM13.702 9.98761C14.18 9.98761 14.568 10.3756 14.568 10.8536C14.568 11.3306 14.18 11.7196 13.702 11.7196C13.224 11.7196 12.836 11.3306 12.836 10.8536C12.836 10.3756 13.224 9.98761 13.702 9.98761ZM16.229 6.40961H12.894V6.27061C12.873 4.80361 11.668 3.61761 10.21 3.61761H9.20204C8.92804 3.61761 8.70304 3.39661 8.70104 3.12261C8.69704 2.70861 8.34904 2.36961 7.94404 2.37961C7.53004 2.38361 7.19704 2.72261 7.20104 3.13661C7.21204 4.23361 8.10704 5.11761 9.19404 5.11761H10.195C10.802 5.10161 11.385 5.63961 11.394 6.28161V6.40961H7.77104C4.47104 6.40961 2.50004 8.34361 2.50004 11.5826V16.4556C2.49504 18.0186 2.96404 19.3186 3.85604 20.2136C4.77404 21.1346 6.12404 21.6206 7.76204 21.6206H16.229C19.529 21.6206 21.5 19.6906 21.5 16.4576V11.6586C21.5 8.37161 19.529 6.40961 16.229 6.40961Z' fill='white'/></svg>
+			</div>
+			<p class='featureLabel'>Hotkeys</p>
+			<p class='featureDescription'>You can now change the keyboard shortcut to your preference.</p>
+		</div>
+	</section>
+</main>
+
+<footer>
+	<a href='https://github.com/rokartur' target='_blank'>@rokartur</a>
+	<a href='https://github.com/rokartur/xddd.info' target='_blank'>@repository</a>
+</footer>
+</body>
+</html>
+
diff --git a/Website/notification.png b/Website/notification.png
diff --git a/Website/robots.txt b/Website/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: