Studio/index.html at main · Faithful-Resource-Pack/Studio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />

		<!-- HTML Meta Tags -->
		<title>Faithful Studio</title>
		<meta name="description" content="Manage your Faithful content and profile with ease." />
		<meta name="theme-color" content="#76C945" />
		<link rel="icon" href="https://database.faithfulpack.net/images/branding/logos/favicon.ico" />

		<!-- Open Graph Meta Tags -->
		<meta property="og:type" content="website" />
		<meta property="og:title" content="Faithful Studio" />
		<meta property="og:description" content="Manage your Faithful content and profile with ease." />
		<meta
			property="og:image"
			content="https://database.faithfulpack.net/images/branding/social_media/banners/universal_banner.png"
		/>

		<!-- Twitter Meta Tags -->
		<meta name="twitter:card" content="summary_large_image" />
		<meta
			name="twitter:description"
			content="Manage your Faithful content and profile with ease."
		/>
		<meta
			name="twitter:image"
			content="https://database.faithfulpack.net/images/branding/social_media/banners/universal_banner.png"
		/>

		<!-- PWA -->
		<link rel="manifest" href="/manifest.json" />
		<!-- these should probably be moved to the branding repo -->
		<link rel="icon" sizes="192x192" href="https://faithfulpack.net/image/pwa/app-192x192.png" />
		<link rel="icon" sizes="512x512" href="https://faithfulpack.net/image/pwa/app-512x512.png" />

		<!-- CSS -->
		<link rel="stylesheet" href="https://database.faithfulpack.net/fonts/Roboto/stylesheet.css" />
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
		/>
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/vuetify@2.6.14/dist/vuetify.min.css"
		/>
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/vue-prism-editor@1.3.0/dist/prismeditor.min.css"
		/>
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/vue-calendar-heatmap@0.8.4/dist/vue-calendar-heatmap.min.css"
		/>
		<link rel="stylesheet" href="./resources/css/main.scss" />
	</head>
	<!-- HTML parsing rules apply here; no auto-closing tags -->
	<body>
		<v-app id="app" ref="app">
			<!-- the placement looks kinda stupid but it needs to be reactive -->
			<link rel="stylesheet" :href="theme.prismURL" />

			<loading-page v-if="appLoading">
				<template #logo>
					<img
						src="https://database.faithfulpack.net/images/branding/logos/transparent/hd/main_logo.gif"
						:alt="lang().global.connection.logo"
						width="256"
						class="ma-n7"
					/>
				</template>
				<template #actions>
					<div v-show="showActions" class="connection-problem text-center">
						<p class="my-3 text--secondary">{{ lang().global.connection.description }}</p>
						<div class="connection-actions">
							<!-- using secondary styles lets us keep the white discord logo on all themes -->
							<v-btn
								color="secondary"
								href="https://discord.gg/sN9YRQbBv7"
								target="_blank"
								rel="noopener noreferrer"
							>
								<i class="v-icon notranslate v-icon--left mdi icon-discord"></i>
								{{ lang().global.connection.contact }}
							</v-btn>
							<v-btn
								color="secondary"
								href="https://status.faithfulpack.net"
								target="_blank"
								rel="noopener noreferrer"
							>
								<v-icon left>mdi-chart-line</v-icon>
								{{ lang().global.connection.status }}
							</v-btn>
						</div>
					</div>
				</template>
			</loading-page>
			<template v-else>
				<nav-app-bar
					:themes="Object.values(theme.availableThemes)"
					:languages="Object.values(translation.availableLangs)"
					:dark-sidebar.sync="darkSidebar"
					@sidebar="sidebarOpen = !sidebarOpen"
					@theme="theme.setTheme($event)"
					@lang="translation.setLang($event)"
				></nav-app-bar>

				<nav-sidebar
					v-model="sidebarOpen"
					:tabs="availableTabs"
					:badges="badgeData"
					:force-dark="darkSidebar"
				></nav-sidebar>

				<v-main id="main">
					<router-view></router-view>
					<nav-footer></nav-footer>
				</v-main>
			</template>
			<!-- snackbar doesn't depend on loading status (can help diagnose errors) -->
			<snackbar-status v-model="snackbar.show" :snackbar="snackbar"></snackbar-status>
		</v-app>

		<!-- main script -->
		<script async src="./index.js" type="module"></script>
	</body>
</html>