Update website and README

OculusGooglePhotos-Web/public/index.html

@@ -23,6 +23,17 @@
 	<img id="logo" src="resources/logo.png" alt="Logo">
 	<h1 id="title">VR Gallery for Google Photos</h1>
 	<p id="subtitle">The easiest way to view your 360° media from Google Photos on your Meta Quest.
+	<div id="download-links">
+		<a href="https://sidequestvr.com/app/16980/vr-gallery-for-google-photos" target="_blank" class="nostyle">
+			<img src="resources/sidequest-badge.png" alt="Get it on SideQuest" id="sidequest-download-button">
+		</a>
+		<a href="https://github.com/ericyoondotcom/OculusGooglePhotos/releases/latest" target="_blank" class="nostyle">
+			<button id="github-download-button" class="image-button">
+				<img src="resources/github-logo.png" alt="GitHub logo">
+				<p>Download from GitHub</p>
+			</button>
+		</a>
+	</div>
 	<div id="link-box">
 		<div id="step-0">
 			<h2>Have a link code?</h2>
@@ -33,7 +44,7 @@ <h2>Have a link code?</h2>
 		</div>
 		<div id="step-1">
 			<h2>Authorize VR Gallery to view your Google Photos</h2>
-			<button id="sign-in-button" onclick="onSignInButtonClick()">
+			<button id="sign-in-button" class="image-button" onclick="onSignInButtonClick()">
 				<img src="resources/google-photos-logo.png" alt="Google Photos logo">
 				<p>Connect to Google Photos</p>
 			</button>

OculusGooglePhotos-Web/public/style.css

@@ -12,6 +12,11 @@ body {
 	}
 }
 
+a.nostyle {
+	text-decoration: none;
+	color: inherit;
+}
+
 h1, h2, h3, h4, h5, h6 {
 	margin: 0;
 }
@@ -22,6 +27,34 @@ h2 {
 	font-size: 3vh;
 }
 
+.image-button {
+	margin: 0 auto;
+	display: flex;
+	justify-content: left;
+	align-items: center;
+	gap: 15px;
+	font-size: 20px;
+	background-color: #FFFFFF;
+	color: #777777;
+	border-radius: 3px;
+	padding: 12px 17px;
+	border: #AAAAAA 1px solid;
+	border-radius: 5px;
+	font-family: "Lexend", sans-serif;
+	font-weight: 400;
+	cursor: pointer;
+	transition: opacity 0.3s;
+}
+.image-button:hover {
+	opacity: 0.8;
+}
+.image-button img {
+	height: 30px;
+}
+.image-button p {
+	margin: 0;
+}
+
 #logo {
 	border-radius: 20px;
 	max-height: 15vh;
@@ -31,20 +64,41 @@ h2 {
 #subtitle {
 	margin-top: 2vh;
 	font-size: 2vh;
+	margin-bottom: 4vh;
+}
+
+#download-links {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	gap: 30px;
 	margin-bottom: 7vh;
 }
+#sidequest-download-button {
+	height: 56px;
+	display: block;
+}
+#github-download-button {
+	color: #000000;
+}
 
 #link-box {
 	padding: 1.5vw;
 	border-radius: 15px;
 	text-align: center;
-	box-shadow: 0 0 20px 0 #000000AA;
+	box-shadow: 0 0 15px 0 #00000055;
 	margin-bottom: 7vh;
 }
 #link-box h2 {
 	font-size: 2.5vh;
 	margin-bottom: 2vh;
 }
+@media only screen and (max-width: 1000px) {
+	#link-box h2 {
+		font-size: 1.5vh;
+	}
+}
 #link-box > div {
 	/* start out the page with all steps hidden, they are controlled by JS */
 	display: none;
@@ -83,32 +137,10 @@ h2 {
 }
 
 #sign-in-button {
-	margin: 0 auto;
-	display: flex;
-	justify-content: left;
-	align-items: center;
-	gap: 15px;
-	font-size: 15px;
-	background-color: #FFFFFF;
-	color: #777777;
-	border-radius: 3px;
-	padding: 10px 15px;
-	border: #AAAAAA 1px solid;
 	font-family: "Roboto", sans-serif;
-	font-weight: 400;
-	cursor: pointer;
-	transition: opacity 0.3s;
-}
-#sign-in-button:hover {
-	opacity: 0.8;
-}
-#sign-in-button img {
-	height: 20px;
-}
-#sign-in-button p {
-	margin: 0;
 }
 
+
 @keyframes spinner {
 	from { transform: rotate(0deg); }
 	to { transform: rotate(360deg); }
@@ -142,6 +174,10 @@ h2 {
 	font-size: 2vh;
 	text-align: left;
 }
+#list-container a {
+	text-decoration: underline;
+	color: inherit;
+}
 
 #footer {
 	font-size: 1.5vh;

README.md

@@ -1,19 +1,24 @@
-# OculusGooglePhotos
+# VR Gallery for Google Photos
 Google Photos viewer for Meta Quest.
 
+[<img src="https://gallery.yoonicode.com/resources/sidequest-badge.png" alt="Get it on SideQuest" height="50px">](https://gallery.yoonicode.com/resources/sidequest-badge.png)
+
+
 - View flat and 360° photos and videos from Google Photos
 - Scroll through individual albums or your entire library
 - Your photos data never leaves your device
 - 100% open source
 
+Learn more at [gallery.yoonicode.com](https://gallery.yoonicode.com) • Made by [Eric Yoon](https://yoonicode.com) • Contributions welcome—see LICENSE
 ## Install the app
 ### Install from SideQuest
-The app will become available on SideQuest soon! For now, install the APK manually.
+1. Download the SideQuest desktop app and configure your Meta Quest by following [this guide](https://sidequestvr.com/setup-howto).
+2. [Get the latest app on SideQuest](https://sidequestvr.com/app/16980/vr-gallery-for-google-photos).
 
 ### Install the APK using ADB
 1. Make sure you have the `adb` command line tool installed. [(Installation guide)](https://www.xda-developers.com/install-adb-windows-macos-linux/)
 2. Make sure your Meta Quest is in developer mode. [(Guide)](https://learn.adafruit.com/sideloading-on-oculus-quest/enable-developer-mode)
-3. Download the latest APK from the [Releases tab](https://github.com/ericyoondotcom/OculusGooglePhotos/releases).
+3. Download the latest APK from the [Releases tab](https://github.com/ericyoondotcom/OculusGooglePhotos/releases/latest).
 4. Plug in your Quest to your computer. Accept the prompt on your Quest.
 5. In a new shell, type `adb devices` and verify your Quest is listed. Type `adb install path/to/file.apk`.
 6. Your app is installed under Unknown Sources in your Quest.