diff --git a/credits.html b/credits.html new file mode 100644 index 0000000..2383a87 --- /dev/null +++ b/credits.html @@ -0,0 +1,27 @@ + + + + + + Credits + + + + ← Back +
+

Credits

+
+
+ Developer 1 +

WhySooooFurious

+

Main Developer

+
+
+ Developer 2 +

Riqvip

+

Web Designer

+
+
+
+ + diff --git a/guide.html b/guide.html new file mode 100644 index 0000000..30f0069 --- /dev/null +++ b/guide.html @@ -0,0 +1,47 @@ + + + + + + Guide + + + + Back +
+
+

Contents

+ +
+
+
+

Step 1

+

Details about Step 1.

+
+
+

Step 2

+

Details about Step 2.

+
+
+

Step 3

+

Details about Step 3.

+
+
+

Step 4

+

Details about Step 4.

+
+
+

Step 5

+

Details about Step 5.

+
+
+
+
Guide
+ + diff --git a/index.html b/index.html new file mode 100644 index 0000000..af33640 --- /dev/null +++ b/index.html @@ -0,0 +1,19 @@ + + + + + + Ultimate Sideloading Guide + + + +
+

Welcome to the Ultimate Sideloading Guide

+

This guide will help you understand how to sideload apps.

+
+ Guide + Credits +
+
+ + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..5d80d64 --- /dev/null +++ b/styles.css @@ -0,0 +1,229 @@ +body { + margin: 0; + font-family: Arial, sans-serif; + background: grey; + color: #333; + min-height: 100vh; +} + +@keyframes fade-out { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +@keyframes fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +body { + animation: fade-in 0.6s ease-in; +} + +.glass-button:active { + animation: fade-out 0.6s ease-out; +} + +.back-button { + position: absolute; + top: 20px; + left: 20px; + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(10px); + border-radius: 30px; + padding: 10px 20px; + color: #333; + text-decoration: none; + font-size: 1.2em; + transition: transform 0.3s ease, background 0.3s ease; + z-index: 1000; +} + +.back-button:hover { + background: rgba(255, 255, 255, 1); +} + +.back-button:active { + transform: scale(0.95); +} + +.home-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + height: 100vh; +} + +.home-container h1 { + font-size: 3em; + margin-bottom: 10px; + color: #fff; +} + +.home-container p { + font-size: 1.2em; + color: #fff; + margin-bottom: 20px; +} + +.home-button-container { + display: flex; + gap: 15px; +} + +.glass-button { + padding: 15px 30px; + background: rgba(255, 255, 255, 0.8); + border-radius: 30px; + color: #333; + text-decoration: none; + font-size: 1.2em; + transition: transform 0.3s ease, background 0.3s ease; +} + +.glass-button:hover { + background: rgba(255, 255, 255, 1); +} + +.glass-button:active { + transform: scale(0.95); +} + +.page-title { + font-size: 3em; + text-align: center; + margin: 20px 0; + color: #fff; +} + +.content-container { + display: flex; + padding-top: 80px; +} + +.contents { + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(10px); + padding: 20px; + border-radius: 0 10px 10px 0; + width: 20%; + max-height: calc(100vh - 40px); + overflow-y: auto; + position: sticky; + top: 0; + box-sizing: border-box; + color: #333; +} + +.contents ul { + list-style: none; + padding: 0; +} + +.contents li { + margin-bottom: 10px; +} + +.contents a { + color: #333; + text-decoration: none; + font-size: 1.1em; +} + +.steps { + flex: 1; + display: flex; + flex-direction: column; + gap: 20px; + padding: 0 20px; + box-sizing: border-box; +} + +.step-box { + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(10px); + border-radius: 10px; + padding: 20px; + width: 100%; + box-sizing: border-box; + color: #333; + min-height: 15cm; +} + +.step-box h3 { + font-size: 1.5em; +} + +.steps .step-box { + margin-bottom: 20px; +} + +.guide-title { + position: absolute; + top: 20px; + left: 50%; + transform: translateX(-50%); + font-size: 3em; + color: #fff; + text-align: center; + width: 100%; + padding: 20px 0; + box-sizing: border-box; + z-index: 999; +} + +.credits-container { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: 100vh; + text-align: center; +} + +.credits-title { + font-size: 3em; + margin-bottom: 20px; + color: #fff; +} + +.developers { + display: flex; + gap: 40px; +} + +.developer-profile { + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(10px); + border-radius: 15px; + padding: 20px; + text-align: center; + color: #333; + width: 200px; +} + +.developer-profile img { + width: 100px; + height: 100px; + border-radius: 50%; + margin-bottom: 10px; +} + +.developer-profile h4 { + margin: 10px 0; + font-size: 1.5em; +} + +.developer-profile p { + font-size: 1.1em; +}