UI Dev Portal

portal/src/assets/svg/Discord.vue

@@ -0,0 +1,8 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" height="1.5em" fill-rule="nonzero">
+        <g fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
+            <path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"></path>
+        </g>
+    </svg>
+</template>
+

portal/src/assets/svg/Github.vue

@@ -0,0 +1,5 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="1.5em" data-v-8f74835b="">
+        <path class="" fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
+        </svg>
+</template>

portal/src/assets/svg/Twitter.vue

@@ -0,0 +1,5 @@
+<template>
+    <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="1.5em" data-v-8f74835b="">
+        <path class="" fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
+    </svg>
+</template>

portal/src/components/Nav.vue

@@ -11,7 +11,9 @@
 			</div>
 		</router-link>
 
-		<button class="toggle-collapse" @click="toggleNav">Menu</button>
+		<button class="toggle-collapse" @click="toggleNav">
+			<Icon />
+		</button>
 		<div class="collapse">
 			<div class="nav-links">
 				<div v-for="link of navLinks" :key="link.route">
@@ -42,6 +44,7 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import Logo from "@svg/Logo.vue";
+import Icon from "@components/util/Icon.vue"
 import { useRoute } from "vue-router";
 
 const route = useRoute();
@@ -108,22 +111,23 @@ nav {
 	.logo {
 		display: flex;
 		color: #e12d2d;
-		width: 1em;
-		height: 1em;
+		width: 1.25em;
+		height: 1.25em;
 		margin-right: 0.25em;
 		font-size: 1.25em;
 		background-repeat: no-repeat;
 		background-size: cover;
+		justify-content: center;
+		align-items: center;
 	}
 
-	.text .name {
+	.name {
 		font-weight: 700;
 		font-family: "Work Sans", sans-serif;
 		font-size: 1.25em;
 	}
 
 	.dev-stage-text {
-		width: 0;
 		position: relative;
 		font-size: 0.5em;
 		bottom: -1em;
@@ -143,7 +147,7 @@ nav {
 .account {
 	display: flex;
 	flex-wrap: wrap;
-	width: 20%;
+	width: 10%;
 }
 
 .env {
@@ -311,7 +315,12 @@ nav {
 
 	.toggle-collapse {
 		margin-left: auto;
-		display: block;
+		display: flex;
+		align-content: center;
+	}
+
+	.text{
+		width: auto;
 	}
 }
 </style>

portal/src/components/util/Icon.vue

@@ -1,18 +1,5 @@
 <template>
-	<font-awesome-icon :size="size" :icon="[lib ?? (pro ? 'far' : 'fas'), icon]" />
-</template>
-
-<script setup lang="ts">
-import { useStore } from "@/store/main";
-import { storeToRefs } from "pinia";
-
-defineProps<{
-	icon: string;
-	lib?: string;
-	size?: Size;
-}>();
-
-const { faPro: pro } = storeToRefs(useStore());
-
-type Size = "xs" | "sm" | "md" | "lg" | "xl";
-</script>
+	<svg xmlns="http://www.w3.org/2000/svg" height="1em" fill="#FFFFFF" viewBox="0 0 50 50">
+		<path d="M 0 7.5 L 0 12.5 L 50 12.5 L 50 7.5 Z M 0 22.5 L 0 27.5 L 50 27.5 L 50 22.5 Z M 0 37.5 L 0 42.5 L 50 42.5 L 50 37.5 Z"></path>
+	</svg>
+</template>

portal/src/views/Apps/Apps.vue

@@ -1,6 +1,6 @@
 <template>
 	<main class="apps">
-		<p>In development</p>
+		<h1>In Development...</h1>
 	</main>
 </template>
 
@@ -14,8 +14,10 @@ main.apps {
 	margin-right: 15%;
 	margin-left: 15%;
 
-	p {
-		margin-bottom: 1em;
+	h1 {
+		margin-top: 5em;
+		font-size: 2em;
+		text-align: center;
 	}
 }
 </style>

portal/src/views/Intro/Intro.vue

@@ -1,27 +1,218 @@
 <template>
-	<main class="intro">
-		<p>
-			Hello and welcome to 7TV's Developer Portal! This area exists to provide documentation for developers to
-			integrate with our API.
-			<br />
-			Head over to the docs page to get started!
-		</p>
-		<br />
+	<main class="home">
+		<div class="info">
+			<div class="info-content">
+				<div class="container"> 
+					<div class="logo">
+						<Logo />
+					</div>
+					<div class="info-text">
+						<h1>Welcome to 7TV's Developer Portal!</h1>
+						<p>
+							 This area exists to provide documentation for developers to
+							integrate with our API.
+							<br />
+							Head over to the docs page to get started!
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="page-body">
+			<div class="home-content">
+				<h1>In Development...</h1>		
+			</div>
+		</div>
+		<div class="socials">
+			<div class="social">
+				<a class="social-split" href="https://discord.com/invite/2hhY2s3x" target="_blank">
+					<Discord />
+					<span>
+						<p>Join 7TV on Discord</p>
+						<i v-if="discord.count >= 0"><p>{{discord.count}} online now</p></i>
+					</span>
+				</a>
+			</div>
+			<div class="social">
+				<a class="social-split" href="https://twitter.com/Official_7TV" target="_blank">
+					<Twitter />
+					<span>
+						<p>Follow us on Twitter</p>
+					</span>
+				</a>
+			</div>
+			<div class="social">
+				<a class="social-split" href="https://github.com/SevenTV" target="_blank">
+					<Github />
+					<span>
+						<p>Contribute</p>
+					</span>
+				</a>
+			</div>
+		</div>
 	</main>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from "vue";
+import Logo from "@svg/Logo.vue";
+import Discord from "@svg/Discord.vue";
+import Twitter from "@svg/Twitter.vue";
+import Github from "@svg/Github.vue";
+
+
+const discord = ref({
+	name: "",
+	invite: "",
+	count: -1,
+});
+{
+	const req = new XMLHttpRequest();
+	req.open("GET", "https://discord.com/api/guilds/817075418054000661/widget.json");
+	req.onload = () => {
+		const data = JSON.parse(req.responseText);
+		discord.value.name = data.name;
+		discord.value.invite = data.instant_invite;
+		discord.value.count = data.presence_count;
+	};
+	req.send();
+}
+
+</script>
 
 <style scoped lang="scss">
 @import "@style/themes.scss";
 
-main.intro {
-	padding-top: 1em;
-	margin-right: 15%;
-	margin-left: 15%;
+main.home{
+	position: relative;
+	display: flex;
+	flex-direction: column;
+}
+.info{
+	display: grid;
+	width: 100%;
+	place-items: center;
+	background-image: linear-gradient(25deg, #e12d2d, #f25ddc);;
+	clip-path: polygon(100% 85%,0 100%,0 0,100% 0);
+}
+
+.container{
+	display: flex;
+	flex-grow: 1;
+	justify-content: center;
+	flex-wrap: wrap;
+	align-items: center;
+	padding-bottom: 5em;
+}
+
+.info-content{
+	display: flex;
+	flex-grow: 1;
+	padding-top: 5%;
+	justify-content: space-between;
+	font-size: 1.25rem;
+}
 
-	p {
-		margin-bottom: 1em;
+.info-text{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+	margin-left: 3em;
+}
+
+.logo{
+	color: #c91d1d;
+	font-size: 16em;
+}
+
+.info-text:nth-child(1){
+	font-size: 3em;
+	font-weight: 600;
+	width: 8em;
+	font-family: Work Sans,sans-serif;
+}
+
+.info-text:nth-child(2){
+	font-size: 1.15em;
+	font-weight: 400;
+	width: 20em;
+}
+
+.page-body{
+	display: flex;
+	flex-grow: 1;
+}
+
+.home-content{
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+
+.home-content h1{
+	color: #727272;
+	margin-top: 2.5em;
+	font-size: 2em;
+	text-align: center;
+}
+
+.socials{
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+	background: #121717;
+}
+
+.social{
+	padding: 1.5em 1em;
+	display: grid;
+	color: inherit;
+	text-decoration: none;
+}
+
+.social-split{
+	display: grid;
+	grid-template-rows: 2em auto;
+	gap: .5em;
+	place-items: center;
+	text-align: center;
+	color: inherit;
+}
+
+@include breakpoint(lg, max) {
+
+	.info{
+		font-size: 1rem !important;
+		flex-wrap: wrap;
+		padding-bottom: 3.5em;
+
+		.container{
+			padding-top: 2.5em;
+			padding-bottom: 2.5em !important;
+		}
+		.info-content{
+			flex-direction: column;
+		}
+
+		.logo{
+			font-size: 9em !important;
+		}
+
+		.info-text{
+			margin-left: .5em;
+		}
+
+		.info-text:nth-child(1){
+			font-size: 2em;
+		}
+
+		.info-text:nth-child(2){
+			font-size: .9em;
+			font-weight: 400;
+			width: 18em;
+		}
 	}
+
 }
+
 </style>