├── README.md
├── css
    ├── styles-appdetailsview.css
    ├── styles-trollapps-other.css
    └── styles-trollapps.css
├── index.html
├── js
    ├── default-sources.js
    └── index.js
└── repo
    ├── app-details
        └── index.html
    └── index.html


/README.md:
--------------------------------------------------------------------------------
1 | # trollapps-web
2 | 
3 | web version of trollapps


--------------------------------------------------------------------------------
/css/styles-appdetailsview.css:
--------------------------------------------------------------------------------
 1 | .page-top-appdetails {
 2 |     position: fixed;
 3 |     width: 100%;
 4 |     height: 200px;
 5 |     z-index: 50000;
 6 |     background-color: rgba(255, 255, 255, 0.75);
 7 |     margin-bottom: 900px;
 8 |     -webkit-backdrop-filter: saturate(180%) blur(20px);
 9 |     backdrop-filter: saturate(180%) blur(20px);
10 |   }
11 | 
12 |   .page-header-appdetails {
13 |     position: fixed;
14 |     top: 96px; /* Adjust the top distance as needed */
15 |     left: 42px; /* Adjust the left distance as needed */
16 |   }
17 | 
18 |   @media only screen and (max-width: 768px) {
19 |     .page-top-appdetails {
20 |         margin-bottom: 900px;
21 |         height: 320px;
22 |     }
23 | 
24 |     .page-header-appdetails {
25 |         top: 32px;
26 |     }
27 |   }
28 | 
29 |   @media (prefers-color-scheme: dark) {
30 |     .page-top-appdetails {
31 |       background-color: rgba(0, 0, 0, 0.75);
32 |     }
33 |   }


--------------------------------------------------------------------------------
/css/styles-trollapps-other.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     font-family: Arial, sans-serif;
  3 |     display: flex;
  4 |     flex-direction: column; /* Stack flex containers vertically */
  5 |     min-height: 100vh; /* Ensure the body takes at least the full height of the viewport */
  6 |     margin: 0;
  7 |   }
  8 |   
  9 |   .container {
 10 |     text-align: center;
 11 |   }
 12 |   
 13 |   .add-button {
 14 |     position: fixed;
 15 |     background-color: transparent;
 16 |     border: none;
 17 |     cursor: pointer;
 18 |     color: #007BFF;
 19 |     top: 25px;
 20 |     right: 25px;
 21 |     font-size: 2em;
 22 |   }
 23 |   
 24 |   #links-container {
 25 |     padding: 10px;
 26 |     text-align: left;
 27 |     max-width: 80%;
 28 |     min-width: 80%;
 29 |     background-color: #f2f2f2;
 30 |     border-radius: 16px;
 31 |     margin: auto;
 32 |     margin-top: 200px; /* Adjust the top margin to create space for the fixed header and button */
 33 |     overflow: auto;
 34 |   }
 35 |   
 36 |   .link-item {
 37 |     margin-bottom: 15px !important;
 38 |     margin-top: 10px;
 39 |     border-bottom: 1px solid #ccc;
 40 |     padding: 20px;
 41 |     border-radius: 16px;
 42 |     position: relative;
 43 |     cursor: pointer;
 44 |     transition: background-color 0.3s ease;
 45 |   }
 46 |   
 47 |   .link-item:hover,
 48 |   .link-item:active {
 49 |     background-color: #d9d9d9;
 50 |   }
 51 |   
 52 |   .link-item:hover .link-item-button::before,
 53 |   .link-item:active .link-item-button::before {
 54 |     color: #0056b3;
 55 |   }
 56 |   
 57 |   .link-item-button {
 58 |     position: absolute;
 59 |     top: 50%;
 60 |     right: 0;
 61 |     margin-right: 20px;
 62 |     transform: translateY(-80%);
 63 |     cursor: pointer;
 64 |     line-height: 1;
 65 |   }
 66 |   
 67 |   .link-item-button::before {
 68 |     content: '>';
 69 |     font-size: 1.2em;
 70 |     line-height: 0.8;
 71 |     transition: color 0.3s ease;
 72 |   }
 73 |   
 74 |   .link-item-content {
 75 |     display: flex;
 76 |     align-items: center;
 77 |   }
 78 |   
 79 |   .link-item-content img {
 80 |     width: 50px;
 81 |     height: 50px;
 82 |     border-radius: 10px;
 83 |   }
 84 |   
 85 |   .link-item-content span {
 86 |     font-weight: bold;
 87 |     margin-left: 10px;
 88 |     font-size: 16px;
 89 |     vertical-align: middle;
 90 |   }
 91 |   
 92 |   .link-item:last-child {
 93 |     margin-bottom: 0;
 94 |   }
 95 |   
 96 |   .page-header {
 97 |     position: fixed;
 98 |     top: 55px; /* Adjust the top distance as needed */
 99 |     left: 42px; /* Adjust the left distance as needed */
100 |   }
101 |   
102 |   .page-top {
103 |     position: fixed;
104 |     width: 100%;
105 |     height: 200px;
106 |     z-index: 50000;
107 |     background-color: rgba(255, 255, 255, 0.75);
108 |     margin-bottom: 800px;
109 |     -webkit-backdrop-filter: saturate(180%) blur(20px);
110 |     backdrop-filter: saturate(180%) blur(20px);
111 |   }
112 |   
113 |   @media only screen and (max-width: 768px) {
114 |     .page-top {
115 |         margin-bottom: 1000px;
116 |         height: 140px;
117 |     }
118 |   }
119 |   
120 |   #app-details-container {
121 |     position: relative;
122 |     padding: 10px;
123 |     text-align: left;
124 |     max-width: 80%;
125 |     min-width: 80%;
126 |     border-radius: 16px;
127 |     margin: auto;
128 |     margin-top: 64px;
129 |     overflow: auto;
130 |   }
131 |   
132 |   .app-icon {
133 |     width: 80px;
134 |     height: 80px;
135 |     border-radius: 16px;
136 |     margin-right: 20px;
137 |   }
138 |   
139 |   .app-details {
140 |     display: flex;
141 |     align-items: center;
142 |   }
143 |   
144 |   .app-info {
145 |     flex: 1;
146 |   }
147 |   
148 |   .app-actions {
149 |     position: absolute;
150 |     margin-top: 155px;
151 |     display: flex;
152 |   }
153 |   
154 |   .app-actions button {
155 |     padding: 10px;
156 |     font-size: 16px;
157 |     margin-bottom: 10px;
158 |     background-color: #ededed;
159 |     border-radius: 50px;
160 |   }
161 |   
162 |   .app-actions select {
163 |     padding: 10px;
164 |     font-size: 16px;
165 |     margin-bottom: 10px;
166 |     background-color: white;
167 |     border: none;
168 |     border-radius: 50px;
169 |   }
170 |   
171 |   .screenshots-container {
172 |     margin-top: 64px;
173 |     overflow-x: auto;
174 |     white-space: nowrap;
175 |   }
176 |   
177 |   .screenshots-container img {
178 |     width: auto;
179 |     height: 512px;
180 |     border-radius: 24px;
181 |     margin-right: 10px;
182 |   }
183 |   
184 |   footer {
185 |     background-color: #fff;
186 |     color: rgba(0, 0, 0, 0.4);
187 |     text-align: center;
188 |     padding: 10px 0;
189 |   }
190 |   
191 |   @media (prefers-color-scheme: dark) {
192 |     footer {
193 |       background-color: #000;
194 |       color: rgba(255, 255, 255, 0.5);
195 |     }
196 |   
197 |     body {
198 |       background-color: #000;
199 |       color: #fff;
200 |     }
201 |   
202 |     .page-top {
203 |       background-color: rgba(0, 0, 0, 0.75);
204 |     }
205 |   
206 |     #links-container {
207 |       background-color: #131313;
208 |     }
209 |   
210 |     .link-item {
211 |       border-bottom: 1px solid #212121;
212 |     }
213 |   
214 |     .link-item:hover,
215 |     .link-item:active {
216 |       background-color: #262626;
217 |     }
218 |   
219 |     .link-item-button::before {
220 |       opacity: 0.5;
221 |     }
222 | 
223 |     .app-actions button {
224 |       padding: 10px;
225 |       font-size: 16px;
226 |       margin-bottom: 10px;
227 |       background-color: #131313;
228 |       border-radius: 50px;
229 |       border: 1px solid #181818;
230 |     }
231 | 
232 |     .app-actions select {
233 |       background-color: #000000;
234 |       border: none;
235 |     }
236 |   }


--------------------------------------------------------------------------------
/css/styles-trollapps.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   font-family: Arial, sans-serif;
  3 |   display: flex;
  4 |   flex-direction: column; /* Stack flex containers vertically */
  5 |   min-height: 100vh; /* Ensure the body takes at least the full height of the viewport */
  6 |   margin: 0;
  7 | }
  8 | 
  9 | .container {
 10 |   text-align: center;
 11 | }
 12 | 
 13 | .add-button {
 14 |   position: fixed;
 15 |   background-color: transparent;
 16 |   border: none;
 17 |   cursor: pointer;
 18 |   color: #007BFF;
 19 |   top: 25px;
 20 |   right: 25px;
 21 |   font-size: 2em;
 22 | }
 23 | 
 24 | #links-container {
 25 |   padding: 10px;
 26 |   text-align: left;
 27 |   max-width: 80%;
 28 |   min-width: 80%;
 29 |   background-color: #f2f2f2;
 30 |   border-radius: 16px;
 31 |   margin: auto;
 32 |   margin-top: 200px; /* Adjust the top margin to create space for the fixed header and button */
 33 |   overflow: auto;
 34 | }
 35 | 
 36 | .link-item {
 37 |   margin-bottom: 15px !important;
 38 |   margin-top: 10px;
 39 |   border-bottom: 1px solid #ccc;
 40 |   padding: 20px;
 41 |   border-radius: 16px;
 42 |   position: relative;
 43 |   cursor: pointer;
 44 |   transition: background-color 0.3s ease;
 45 | }
 46 | 
 47 | .link-item:hover,
 48 | .link-item:active {
 49 |   background-color: #d9d9d9;
 50 | }
 51 | 
 52 | .link-item:hover .link-item-button::before,
 53 | .link-item:active .link-item-button::before {
 54 |   color: #0056b3;
 55 | }
 56 | 
 57 | .link-item-button {
 58 |   position: absolute;
 59 |   top: 50%;
 60 |   right: 0;
 61 |   margin-right: 20px;
 62 |   transform: translateY(-80%);
 63 |   cursor: pointer;
 64 |   line-height: 1;
 65 |   opacity: 1;
 66 | }
 67 | 
 68 | .link-item-button::before {
 69 |   content: '>';
 70 |   font-size: 1.2em;
 71 |   line-height: 0.8;
 72 |   transition: color 0.3s ease;
 73 | }
 74 | 
 75 | .link-item-content {
 76 |   display: flex;
 77 |   align-items: center;
 78 | }
 79 | 
 80 | .link-item-content img {
 81 |   width: 50px;
 82 |   height: 50px;
 83 |   border-radius: 50px;
 84 | }
 85 | 
 86 | .link-item-content span {
 87 |   font-weight: bold;
 88 |   margin-left: 10px;
 89 |   font-size: 16px;
 90 |   vertical-align: middle;
 91 | }
 92 | 
 93 | .link-item:last-child {
 94 |   margin-bottom: 0;
 95 | }
 96 | 
 97 | .page-header {
 98 |   position: fixed;
 99 |   top: 55px; /* Adjust the top distance as needed */
100 |   left: 42px; /* Adjust the left distance as needed */
101 | }
102 | 
103 | .page-top {
104 |   position: fixed;
105 |   width: 100%;
106 |   height: 200px;
107 |   z-index: 50000;
108 |   background-color: rgba(255, 255, 255, 0.75);
109 |   margin-bottom: 800px;
110 |   -webkit-backdrop-filter: saturate(180%) blur(20px);
111 |   backdrop-filter: saturate(180%) blur(20px);
112 | }
113 | 
114 | @media only screen and (max-width: 768px) {
115 |   .page-top {
116 |       margin-bottom: 1000px;
117 |       height: 140px;
118 |   }
119 | }
120 | 
121 | #app-details-container {
122 |   position: relative;
123 |   padding: 10px;
124 |   text-align: left;
125 |   max-width: 80%;
126 |   min-width: 80%;
127 |   border-radius: 16px;
128 |   margin: auto;
129 |   margin-top: 64px;
130 |   overflow: auto;
131 | }
132 | 
133 | .app-icon {
134 |   width: 80px;
135 |   height: 80px;
136 |   border-radius: 16px;
137 |   margin-right: 20px;
138 | }
139 | 
140 | .app-details {
141 |   display: flex;
142 |   align-items: center;
143 | }
144 | 
145 | .app-info {
146 |   flex: 1;
147 | }
148 | 
149 | .app-actions {
150 |   position: absolute;
151 |   margin-top: 155px;
152 |   display: flex;
153 | }
154 | 
155 | .app-actions button {
156 |   padding: 10px;
157 |   font-size: 16px;
158 |   margin-bottom: 10px;
159 | }
160 | 
161 | .app-actions select {
162 |   padding: 10px;
163 |   font-size: 16px;
164 |   margin-bottom: 10px;
165 | }
166 | 
167 | .screenshots-container {
168 |   margin-top: 64px;
169 |   overflow-x: auto;
170 |   white-space: nowrap;
171 | }
172 | 
173 | .screenshots-container img {
174 |   width: auto;
175 |   height: 512px;
176 |   border-radius: 24px;
177 |   margin-right: 10px;
178 | }
179 | 
180 | footer {
181 |   background-color: #fff;
182 |   color: rgba(0, 0, 0, 0.4);
183 |   text-align: center;
184 |   padding: 10px 0;
185 | }
186 | 
187 | @media (prefers-color-scheme: dark) {
188 |   footer {
189 |     background-color: #000;
190 |     color: rgba(255, 255, 255, 0.5);
191 |   }
192 | 
193 |   body {
194 |     background-color: #000;
195 |     color: #fff;
196 |   }
197 | 
198 |   .page-top {
199 |     background-color: rgba(0, 0, 0, 0.75);
200 |   }
201 | 
202 |   #links-container {
203 |     background-color: #131313;
204 |   }
205 | 
206 |   .link-item {
207 |     border-bottom: 1px solid #212121;
208 |   }
209 | 
210 |   .link-item:hover,
211 |   .link-item:active {
212 |     background-color: #262626;
213 |   }
214 | 
215 |   .link-item-button::before {
216 |     opacity: 0.5;
217 |   }
218 | }
219 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 
 7 |     <link rel="shortcut icon" href="../img/ResonanceStoreIcon.webp"/>
 8 |     <link rel="apple-touch-icon" href="../img/ResonanceStoreIcon.webp"/>
 9 |     <link rel="icon" type="image/png" sizes="180x180" href="../img/ResonanceStoreIcon.webp"/>
10 |     <meta name="msapplication-TileColor" content="#A156f6" />
11 |     <meta name="msapplication-TileImage" content="../img/ResonanceStoreIcon.webp"/>
12 |     <meta name="theme-color" content="#A156f6" media="only x">
13 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
14 | 
15 |     <title>TrollApps Web</title>
16 | 
17 |     <link rel="stylesheet" href="https://theresonanceteam.github.io/trollapps-web/css/styles-trollapps.css">
18 | 
19 |     <meta name="title" content="TrollApps Web" />
20 |     <meta name="description" content="Web-based version of TrollApps." />
21 |     
22 |     <!-- Open Graph / Facebook -->
23 |     <meta property="og:type" content="webassets" />
24 |     <meta property="og:url" content="https://theresonanceteam.github.io/trollapps-web" />
25 |     <meta property="og:title" content="TrollApps Web" />
26 |     <meta property="og:description" content="Web-based version of TrollApps."/>
27 |     <meta property="og:image" content="https://theresonanceteam.github.io/img/meta.webp"/>
28 |     
29 |     <!-- Twitter -->
30 |     <meta property="twitter:card" content="summary_large_image" />
31 |     <meta property="twitter:url" content="https://theresonanceteam.github.io/trollapps-web" />
32 |     <meta property="twitter:title" content="TrollApps Web" />
33 |     <meta property="twitter:description" content="Web-based version of TrollApps."/>
34 |     <meta property="twitter:image" content="https://theresonanceteam.github.io/img/meta.webp"/>
35 |   </head>
36 |   <body>
37 | 
38 |     <div class="page-top">
39 |         <h1 class="page-header">Sources</h1>
40 | 
41 |         <div class="container">
42 |             <button onclick="addLink()" class="add-button">+</button>
43 |         </div>
44 |     </div>
45 |     
46 | 
47 |     <div id="links-container"></div>
48 | 
49 |     <script src="https://theresonanceteam.github.io/trollapps-web/js/index.js"></script>
50 |     <script src="https://theresonanceteam.github.io/trollapps-web/js/default-sources.js"></script>
51 | 
52 |     <script>
53 |         // Load default repos on page load
54 |         window.onload = function () {
55 |           defaultRepos.forEach(function (repoURL) {
56 |             loadRepo(repoURL);
57 |           });
58 |         };
59 |     </script>
60 | 
61 | <footer>
62 |   <div class="container">
63 |     <p>© 2023 Resonance Team</p>
64 |   </div>
65 | </footer>
66 |   </body>
67 | </html>
68 | 


--------------------------------------------------------------------------------
/js/default-sources.js:
--------------------------------------------------------------------------------
1 | var defaultRepos = [
2 |     "https://raw.githubusercontent.com/TheResonanceTeam/.default-sources/main/ResonanceTeamRepo.json",
3 |     "https://raw.githubusercontent.com/TheResonanceTeam/.default-sources/main/BonnieRepo_2.0.json",
4 |     "https://raw.githubusercontent.com/TheResonanceTeam/.default-sources/main/haxi0_2.0.json",
5 |     "https://alt.getutm.app",
6 |     "https://altstore.ignitedemulator.com",
7 |     "https://flyinghead.github.io/flycast-builds/altstore.json",
8 |     "https://provenance-emu.com/apps.json"
9 | ];


--------------------------------------------------------------------------------
/js/index.js:
--------------------------------------------------------------------------------
  1 | function addLink() {
  2 |     var link = prompt("Enter a JSON link:");
  3 |     if (link) {
  4 |         // Check if the link starts with "https://"
  5 |         if (!link.startsWith("https://")) {
  6 |             // If not, add "https://" to the beginning of the link
  7 |             link = "https://" + link;
  8 |         }
  9 | 
 10 |         // Check if the link is in the default repos
 11 |         if (defaultRepos.includes(link)) {
 12 |             alert("This repo already exists in the default repos. Skipping.");
 13 |             return;
 14 |         }
 15 |         const savedLinks = getSavedLinksFromCookie() || new Set();
 16 | 
 17 |         // Check if the link is already in the set
 18 |         if (savedLinks.has(link)) {
 19 |             alert("This repo is already added.");
 20 |             return;
 21 |         }
 22 | 
 23 | 
 24 |         fetch(link)
 25 |             .then(response => response.json())
 26 |             .then(data => {
 27 |                 // Save the link as a cookie
 28 |                 saveLinkAsCookie(link);
 29 | 
 30 |                 // Display the link
 31 |                 displayLink(data, link);
 32 |             })
 33 |             .catch(error => console.error('Error fetching data:', error));
 34 |     }
 35 | }
 36 | 
 37 | 
 38 | function saveLinkAsCookie(link) {
 39 |     const savedLinks = getSavedLinksFromCookie() || new Set();
 40 |     savedLinks.add(link);
 41 | 
 42 |     // Set the cookie with the links array
 43 |     document.cookie = `jsonLinks=${encodeURIComponent(JSON.stringify(Array.from(savedLinks)))}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/`;
 44 | }
 45 | 
 46 | function getSavedLinksFromCookie() {
 47 |     // Retrieve saved links from the cookie
 48 |     const cookies = document.cookie.split(';');
 49 |     for (const cookie of cookies) {
 50 |         const [name, value] = cookie.trim().split('=');
 51 |         if (name === 'jsonLinks') {
 52 |             return new Set(JSON.parse(decodeURIComponent(value)));
 53 |         }
 54 |     }
 55 |     return null;
 56 | }
 57 | 
 58 | // Load saved links when the page is loaded
 59 | document.addEventListener('DOMContentLoaded', function () {
 60 |     const savedLinks = getSavedLinksFromCookie();
 61 |     if (savedLinks) {
 62 |         savedLinks.forEach(link => {
 63 |             if(!defaultRepos.includes(link)) {
 64 |                 fetch(link)
 65 |                 .then(response => response.json())
 66 |                 .then(data => displayLink(data, link))
 67 |                 .catch(error => console.error('Error fetching data:', error));
 68 |             }
 69 |         });
 70 |     }
 71 | });
 72 | 
 73 | function loadRepo(url) {
 74 |     fetch(url)
 75 |         .then(response => response.json())
 76 |         .then(data => displayLink(data, url))
 77 |         .catch(error => console.error('Error fetching data:', error));
 78 | }
 79 | 
 80 | function displayLink(data, url) {
 81 |     var linksContainer = document.getElementById("links-container");
 82 |     var linkItem = document.createElement("div");
 83 |     linkItem.className = "link-item";
 84 | 
 85 |     // Set custom data attribute to store the repo link
 86 |     linkItem.setAttribute("data-repo-link", url);
 87 | 
 88 |     linkItem.addEventListener('click', function (e) {
 89 |         e.preventDefault(); // Prevent default behavior for click event
 90 |         this.classList.toggle('active');
 91 |         var link = this.getAttribute('data-repo-link');
 92 |         window.location.href = `https://theresonanceteam.github.io/trollapps-web/repo/index.html?url=${encodeURIComponent(link)}`;
 93 |     });
 94 | 
 95 |     // Adding the link-item-content for better organization
 96 |     var linkItemContent = document.createElement("div");
 97 |     linkItemContent.className = "link-item-content";
 98 | 
 99 |     // Displaying the iconURL on the left
100 |     var iconImage = document.createElement("img");
101 |     if(data.name == "UTM Repository") {
102 |         iconImage.src = "https://raw.githubusercontent.com/utmapp/UTM/main/Platform/Assets.xcassets/AppIcon.appiconset/Icon.png";
103 |     } else if (data.name == "Provenance EMU") {
104 |         iconImage.src = "https://provenance-emu.com/images/icons/icon.512x512.png";
105 |     } else if (data.name == "Flyinghead") {
106 |         iconImage.src = "https://github.com/flyinghead/flycast/raw/master/shell/linux/flycast.png";
107 |     } else {
108 |         iconImage.src = data.iconURL;
109 |     }
110 |     iconImage.alt = "Source Icon";
111 |     iconImage.style.borderRadius = "50px";
112 |     linkItemContent.appendChild(iconImage);
113 | 
114 |     // Displaying the name of the source
115 |     var sourceName = document.createElement("span");
116 |     sourceName.textContent = data.name;
117 |     sourceName.style.fontWeight = "bold";
118 |     sourceName.style.marginLeft = "10px";
119 |     sourceName.style.fontSize = "16px";
120 |     sourceName.style.verticalAlign = "middle";
121 |     linkItemContent.appendChild(sourceName);
122 | 
123 |     linkItem.appendChild(linkItemContent);
124 | 
125 |     // Adding the link-item-button
126 |     var linkItemButton = document.createElement("div");
127 |     linkItemButton.className = "link-item-button";
128 |     linkItem.appendChild(linkItemButton);
129 | 
130 |     linksContainer.appendChild(linkItem);
131 | }
132 | 


--------------------------------------------------------------------------------
/repo/app-details/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |     <title>TrollApps Web</title>
  8 |     <link rel="stylesheet" href="https://theresonanceteam.github.io/trollapps-web/css/styles-trollapps-other.css">
  9 |     <link rel="stylesheet" href="https://theresonanceteam.github.io/trollapps-web/css/styles-appdetailsview.css">
 10 | </head>
 11 | <body>
 12 | 
 13 | <!--<div class="page-top-appdetails">
 14 |     <h1 class="page-header-appdetails">App Details</h1>
 15 |     <div class="container">
 16 |          <button onclick="addLink()" class="add-button">+</button>
 17 |     </div>
 18 | </div>-->
 19 | 
 20 | <div id="app-details-container"></div>
 21 | 
 22 | <script>
 23 |     document.addEventListener("DOMContentLoaded", function () {
 24 |         // Get the app and url queries from the URL
 25 |         const urlParams = new URLSearchParams(window.location.search);
 26 |         const appName = urlParams.get("app");
 27 |         const jsonUrl = urlParams.get("url");
 28 | 
 29 |         // Check if both parameters are present
 30 |         if (appName !== null && jsonUrl !== null) {
 31 |             // Fetch the JSON data
 32 |             fetch(jsonUrl)
 33 |                 .then(response => response.json())
 34 |                 .then(data => displayAppDetails(data, appName))
 35 |                 .catch(error => console.error('Error fetching data:', error));
 36 |         }
 37 |     });
 38 | 
 39 |     // Function to display app details
 40 |     function displayAppDetails(data, appName) {
 41 |         const appDetailsContainer = document.getElementById('app-details-container');
 42 | 
 43 |         // Find the app with the specified name
 44 |         const app = data.apps.find(app => app.name === appName);
 45 | 
 46 |         if (app) {
 47 |             // Create elements to display app details
 48 |             const detailsContainer = document.createElement('div');
 49 |             detailsContainer.className = 'app-details';
 50 | 
 51 |             const iconImage = document.createElement('img');
 52 |             iconImage.src = app.iconURL;
 53 |             iconImage.alt = `${app.name} Icon`;
 54 |             iconImage.className = 'app-icon';
 55 |             detailsContainer.appendChild(iconImage);
 56 | 
 57 |             const infoContainer = document.createElement('div');
 58 |             infoContainer.className = 'app-info';
 59 | 
 60 |             const appNameElement = document.createElement('h2');
 61 |             appNameElement.textContent = app.name;
 62 |             appNameElement.style.fontWeight = 'bold';
 63 |             appNameElement.style.fontSize = '20px';
 64 |             infoContainer.appendChild(appNameElement);
 65 | 
 66 |             const developerNameElement = document.createElement('p');
 67 |             developerNameElement.textContent = `${app.developerName}`;
 68 |             infoContainer.appendChild(developerNameElement);
 69 | 
 70 |             detailsContainer.appendChild(infoContainer);
 71 | 
 72 |             const actionContainer = document.createElement('div');
 73 |             actionContainer.className = 'app-actions';
 74 | 
 75 |             const installButton = document.createElement('button');
 76 |             installButton.textContent = 'Install';
 77 |             installButton.addEventListener('click', function () {
 78 |                 if(app.versions != null) {
 79 |                     const selectedVersion = versionDropdown.value;
 80 |                     const selectedVersionData = app.versions.find(version => version.version === selectedVersion);
 81 |                     if (selectedVersionData) {
 82 |                         window.location.href = 'apple-magnifier://install?url=' + selectedVersionData.downloadURL;
 83 |                     }
 84 |                 } else {
 85 |                     window.location.href = 'apple-magnifier://install?url=' + app.downloadURL;
 86 |                 }
 87 |             });
 88 |             actionContainer.appendChild(installButton);
 89 | 
 90 |             const downloadIPAButton = document.createElement('button');
 91 |             downloadIPAButton.textContent = 'Get IPA';
 92 |             downloadIPAButton.addEventListener('click', function () {
 93 |                 if(app.versions != null) {
 94 |                     const selectedVersion = versionDropdown.value;
 95 |                     const selectedVersionData = app.versions.find(version => version.version === selectedVersion);
 96 |                     if (selectedVersionData) {
 97 |                         window.location.href = selectedVersionData.downloadURL;
 98 |                     }
 99 |                 } else {
100 |                     window.location.href = app.downloadURL;
101 |                 }
102 |             });
103 |             actionContainer.appendChild(downloadIPAButton);
104 | 
105 |             const versionDropdown = document.createElement('select');
106 |             if(app.versions != null) {
107 |                 
108 |             app.versions.forEach(version => {
109 |                 const option = document.createElement('option');
110 |                 option.value = version.version;
111 |                 option.textContent = `Version ${version.version}`;
112 |                 versionDropdown.appendChild(option);
113 |             });
114 |             actionContainer.appendChild(versionDropdown);
115 |             }
116 |             
117 | 
118 |             detailsContainer.appendChild(actionContainer);
119 | 
120 |             appDetailsContainer.appendChild(detailsContainer);
121 | 
122 |             // Display screenshot URLs at the bottom
123 |             const screenshotsContainer = document.createElement('div');
124 |             screenshotsContainer.className = 'screenshots-container';
125 | 
126 |             app.screenshotURLs.forEach(url => {
127 |                 const screenshotImage = document.createElement('img');
128 |                 screenshotImage.src = url;
129 |                 screenshotImage.alt = `${app.name} Screenshot`;
130 |                 screenshotsContainer.appendChild(screenshotImage);
131 |             });
132 | 
133 |             appDetailsContainer.appendChild(screenshotsContainer);
134 |         } else {
135 |             // Display a message if the app is not found
136 |             const errorMessageElement = document.createElement('p');
137 |             errorMessageElement.textContent = 'App not found.';
138 |             appDetailsContainer.appendChild(errorMessageElement);
139 |         }
140 |     }
141 | </script>
142 | 
143 | <footer>
144 |     <div class="container">
145 |       <p>© 2023 Resonance Team</p>
146 |     </div>
147 | </footer>
148 | </body>
149 | </html>
150 | 


--------------------------------------------------------------------------------
/repo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <title>TrollApps Web</title>
 8 |     <link rel="stylesheet" href="https://theresonanceteam.github.io/trollapps-web/css/styles-trollapps-other.css">
 9 | </head>
10 | <body>
11 | 
12 | <div class="page-top">
13 |     <h1 class="page-header">Apps</h1>
14 |     <div class="container">
15 |         <!-- <button onclick="addLink()" class="add-button">+</button> -->
16 |     </div>
17 | </div>
18 | 
19 | <div id="links-container"></div>
20 | 
21 | <script>
22 |     document.addEventListener("DOMContentLoaded", function () {
23 |         // Fetch the JSON data from the URL query parameter
24 |         const urlParams = new URLSearchParams(window.location.search);
25 |         const jsonUrl = urlParams.get("url");
26 | 
27 |         if (jsonUrl) {
28 |             fetch(jsonUrl)
29 |                 .then(response => response.json())
30 |                 .then(data => displayApps(data.apps, jsonUrl))
31 |                 .catch(error => console.error('Error fetching data:', error));
32 |         }
33 |     });
34 | 
35 |     // Function to display app information in the links-container
36 |     function displayApps(apps, repoUrl) {
37 |         const linksContainer = document.getElementById('links-container');
38 | 
39 |         // Loop through each app and create a link-item for it
40 |         apps.forEach(app => {
41 |             const linkItem = document.createElement('div');
42 |             linkItem.className = 'link-item';
43 |             linkItem.setAttribute("app-name", app.name);
44 | 
45 |             linkItem.addEventListener('click', function (e) {
46 |                 e.preventDefault();
47 |                 this.classList.toggle('active');
48 |                 var app = this.getAttribute('app-name');
49 |                 window.location.href = `https://theresonanceteam.github.io/trollapps-web/repo/app-details/index.html?app=${encodeURIComponent(app)}&url=${encodeURIComponent(repoUrl)}`;
50 |             });
51 | 
52 |             const linkItemContent = document.createElement('div');
53 |             linkItemContent.className = 'link-item-content';
54 | 
55 |             const iconImage = document.createElement('img');
56 |             iconImage.src = app.iconURL;
57 |             iconImage.alt = `${app.name} Icon`;
58 |             linkItemContent.appendChild(iconImage);
59 | 
60 |             const appName = document.createElement('span');
61 |             appName.textContent = app.name;
62 |             appName.style.fontWeight = 'bold';
63 |             appName.style.marginLeft = '10px';
64 |             appName.style.fontSize = '16px';
65 |             appName.style.verticalAlign = 'middle';
66 |             linkItemContent.appendChild(appName);
67 | 
68 |             linkItem.appendChild(linkItemContent);
69 | 
70 |             const linkItemButton = document.createElement('div');
71 |             linkItemButton.className = 'link-item-button';
72 |             linkItem.appendChild(linkItemButton);
73 | 
74 |             linksContainer.appendChild(linkItem);
75 |         });
76 |     }
77 | </script>
78 | 
79 | <footer>
80 |     <div class="container">
81 |       <p>© 2023 Resonance Team</p>
82 |     </div>
83 | </footer>
84 | </body>
85 | </html>
86 | 


--------------------------------------------------------------------------------