├── LICENSE
├── README.md
├── Styles
├── Generic
│ ├── Banner
│ │ ├── Addons.png
│ │ ├── Admin.png
│ │ ├── Generic.png
│ │ └── Themes.png
│ └── Icon
│ │ ├── Addons.png
│ │ ├── Admin.png
│ │ ├── Generic.png
│ │ └── Themes.png
├── icon.png
├── index.css
├── index.js
├── index.mustache
└── tweak.mustache
├── index.py
├── requirements.txt
├── setup.sh
└── util
├── DebianPackager.py
├── DepictionGenerator.py
├── DpkgPy.py
├── PackageLister.py
└── gpg.batchgen
/LICENSE:
--------------------------------------------------------------------------------
1 | Silica MIT License
2 |
3 | Copyright (c) 2019 Shuga Holdings
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | The intended use case does not enable or encourage the violation of any laws
16 | of the United States of America, including (but not limited to) infringing
17 | on other's rights to distribute creative or practical works as they see fit
18 | given that they own the copyright for said work (also known as "piracy").
19 |
20 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
21 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
22 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
23 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
24 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
25 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
26 | SOFTWARE.
27 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Silica
2 |
3 | **Silica** is a static repo generator for jailbroken iOS devices developed by [Shuga](https://shuga.co) and supported by [Ignition](https://ignition.fun).
4 |
5 | The goal behind Silica is simple: make it as easy as possible to make a personal repo that plays nicely with both Cydia and Sileo. Silica generates "static" repos, allowing for repos to be hosted on GitHub Pages for free.
6 |
7 | ## Getting Started
8 |
9 | Silica, by default, is relatively straight-forward to configure. This tutorial is going to assume that you have the following already installed on your machine:
10 | - [Python 3](https://www.python.org/downloads/release/python-373/) (to run Silica)
11 | - `pip3` (for installing Python dependencies)
12 | - [Homebrew](https://brew.sh/) (macOS users only)
13 |
14 | Silica is only officially supported on macOS and Debian-based OSes at the moment. We can not guarantee Windows support at this time. I'm sure you could get this working on other Linux distributions with a bit of tweaking, too. `btw i don't use arch`
15 |
16 | ### Silica for Windows Subsystem for Linux (WSL)
17 |
18 | **If you are not using Windows, skip down to Dependencies.**
19 |
20 | Due to Silica requiring dpkg-deb to properly work, you cannot run Silica in native Windows.
21 | As a result, you need to set your machine up WSL and Ubuntu for Windows, which will allow for Linux
22 | programs to run in Windows via a terminal.
23 |
24 | #### 1. Set up WSL
25 | Please follow [this official tutorial](https://docs.microsoft.com/en-us/windows/wsl/install-win10). Please use Ubuntu for ideal results.
26 |
27 | #### 2. Setting up WSL for `dpkg-deb`
28 | Due to how `dpkg-deb` handles permissions, we need to change some settings to make things work.
29 |
30 | 1. Run `sudo nano /etc/wsl.conf` to edit the WSL config.
31 | 2. Copy and paste the following text into the file.
32 |
33 | ```ini
34 | [automount]
35 | enabled = true
36 | root = /mnt/
37 | options = "umask=22,fmask=11"
38 | ```
39 |
40 | 3. Run the following command to update your `umask` to `0022`.
41 | ```bash
42 | echo "\numask 0022" >> ~/.bashrc
43 | ```
44 |
45 | 4. Open up Windows PowerShell as an administrator by right-clicking on the Windows button.
46 |
47 | 5. Run this command to restart WSL:
48 |
49 | ```powershell
50 | Get-Service LxssManager | Restart-Service
51 | ```
52 |
53 | (Note: Please always run Silica through the Ubuntu program or Windows Terminal.)
54 |
55 | *(Tip courtesy of [/u/zoredache on Reddit](https://www.reddit.com/r/bashonubuntuonwindows/comments/a7v5d8/problems_with_dpkgdeb_bad_permissions_how_do_i/).)*
56 |
57 | ##### 3. Install dependencies
58 |
59 | Like any Debian-based system (like Ubuntu), we need to install some dependencies before downloading Silica.
60 |
61 | ```bash
62 | apt-get install gnupg
63 | apt-get install git
64 | ```
65 |
66 | ##### 3. Getting Silica
67 |
68 | Now it's time to get Silica! Because of how Windows deals with line breaks, we need to download Silica via Git.
69 | If you already downloaded Silica via your web browser, delete it. We'll redownload it in a second.
70 |
71 | Once you are in the directory you want to download Silica to, run this command:
72 |
73 | ```bash
74 | git clone https://github.com/Shugabuga/Silica/
75 | ```
76 |
77 | This will create a new folder for Silica.
78 |
79 | ##### 4. Text Editors and line breaks
80 |
81 | Due to how Windows deals with line breaks, if you wish to create Silica config files by hand, you need to make sure
82 | your text editor uses Unix line breaks. This varies by text editor and IDE, so look for a setting about line breaks
83 | or EOL characters and set it to Unix.
84 |
85 |
86 | **From here, you're all set** for Windows-specific instructions! Now follow the Debian instructions.
87 |
88 | ### Dependencies
89 |
90 | We know that some developers will already have these dependencies installed. If you know you already have a dependency, there is no need to re-install it.
91 |
92 | macOS users are going to want to install a couple of packages. To do so, run these commands in Terminal:
93 | ```bash
94 | brew install dpkg
95 | brew install gnupg
96 | ```
97 |
98 | Users of Debian or its derivatives (like Ubuntu) need to run the following commands *as root* to install needed dependencies:
99 | ```bash
100 | apt-get install gnupg
101 | apt-get install git
102 | ```
103 |
104 | We also use `find`, `bzip2`, and `xz`, but most people have these installed by default.
105 |
106 | (Windows Subsystem for Linux users already did this step.)
107 |
108 | ### Other Dependencies and Settings
109 |
110 | Now that any needed system dependencies are installed, we need to install some Python dependencies and configure `settings.json`. Thankfully, the included `setup.sh` script handles this for you!
111 |
112 | Run the following command and follow the on-screen prompts to set up Silica's core settings, including setting the repo name, default tint color, and whether it should automatically run Git when it finishes updating your repo. This script will also generate a key to sign the `Release.gpg` file which will be stored in your keyring.
113 | ```bash
114 | ./setup.sh
115 | ```
116 |
117 | If this doesn't work, make sure the the file is set as an executable by running `chmod +x setup.sh`.
118 |
119 | The settings you input during the installation process can be later modified in the `Styles/settings.json` file.
120 |
121 | ### Customization
122 |
123 | Most users would like to customize their repos to fit their needs. Everything you need to do this is in the `Styles` folder.
124 |
125 | - `index.mustache` is the template file of the repo's main web page.
126 | - `tweak.mustache` is the template file of the web depictions of the tweaks.
127 | - `index.css` is a CSS file that is applied to every web page generated by Silica.
128 | - `index.js` is a JavaScript file that handles version detection and tab switching on web depictions.
129 | - `settings.json` is auto-generated by the setup script, but you can edit it to change your repo's name, description, default tint color, and more.
130 | - `icon.png` is the repo's icon as it will display in Cydia and Sileo.
131 | - The `Generic` folder includes default image assets.
132 |
133 | #### Image Assets
134 |
135 | All Silica image assets are `.png` files.
136 |
137 | - The `Generic` folder, which contains a `Banner` and `Icon` folder, includes default assets for when a package lacks a banner or an icon. These are named after the package's section. If a section does not have its own image, it will use whatever is stored in `Generic.png`.
138 | - `icon.png` is your repo's icon as displayed in Sileo and Cydia.
139 |
140 | ### Adding Packages
141 |
142 | Silica's `Packages` folder includes all the packages that will live on your repo. A folder in `Packages` represents an individual tweak. The name of the folder does not matter and changing it does nothing; Silica references packages via their "bundle id."
143 |
144 | Inside of a tweak or theme's folder should include a `silica_data` folder (which will be elaborated on later on) and either a .deb file (useful for tweak developers) or the hierarchy of the generated package (the latter which is useful for theme designers). If a .deb file is present, it will take precedence.
145 |
146 | The directory tree should look similar to the following. **Please note how that the .deb file is in its own folder *inside* of `Packages`.**:
147 |
148 | ```
149 | Packages
150 | My Tweak
151 | tweak.deb
152 | silica_data
153 | index.json
154 | description.md
155 | icon.png
156 | banner.png
157 | screenshots
158 | 01.png
159 | 02.png
160 | a_screenshot.png
161 | scripts
162 | prerm
163 | extrainst_
164 | My Theme
165 | Library
166 | Themes
167 | MyTheme.theme
168 | IconBundles
169 | com.anemonetheming.anemone-large.png
170 | silica_data
171 | index.json
172 | description.md
173 | icon.png
174 | banner.png
175 | screenshots
176 | 01.png
177 | 02.png
178 | a_screenshot.png
179 | ```
180 |
181 | #### `silica_data`
182 |
183 | The `silica_data` folder is where the icon, description, screenshot, and other package (tweak/theme) information live. This package is *not* put in the final package file (the ".deb" file). The following files and folders can go in this folder:
184 |
185 | - `index.json` is the only required file. It is a JSON file including information such as the bundle ID, a short tagline description, version compatibility, developer information, changelog data, and more. This file is generated by Silica using user input if it does not exist. More information on this file is in the **Documentation** section of this document.
186 | - `description.md` is a Markdown file that houses the package's description.
187 | - `icon.png` is the package's icon as it appears in depictions and in Sileo. It should be a square PNG file.
188 | - `banner.png` is the package's banner as it appears in depictions and in Sileo. It should be a rectangular PNG file.
189 | - The `screenshots` folder houses any screenshots you want to be displayed alongside the package.
190 | - The `scripts` folder include any pre/post-installation scripts. The contents of this folder will be placed in the package's `DEBIAN` folder.
191 |
192 | The `index.json` file, if missing, will be generated when running Silica.
193 |
194 | ### Generating a Repo
195 |
196 | Once everything is configured as you wish, run the following command to "compile" your repo.
197 |
198 | ```bash
199 | python3 index.py
200 | ```
201 |
202 | From here, Silica will automatically generate a repo and put the output in the `docs` folder. If a package does not have a `silica_data` file, you will be asked some information to help automatically generate it.
203 |
204 | From here, a service such as [GitHub Pages](https://pages.github.com) can be used to host the repo for free.
205 |
206 | ### Hosting with GitHub Pages
207 |
208 | Silica is designed to be used with [GitHub Pages](https://pages.github.com), allowing you to operate a repo for free.
209 |
210 | There are multiple ways to go about this, but this method is recommended for those who are totally unfamiliar with `git` (if you can get `git` up and running, please use that).
211 |
212 | 1. [Create a GitHub account.](https://github.com/join?source=silica-readme)
213 | 2. [Create a new repository.](https://github.com/new) Initialize it with a README.
214 | 3. Drag-and-drop all of the contents of the `docs` directory to the newly-created repository.
215 | 4. Type something in the text box and click the "Commit Changes" button.
216 | 5. Go to your repository's settings and scroll down to the GitHub Pages section.
217 | 6. Set "Source" from "None" to "master branch."
218 | 7. Follow [these steps](https://help.github.com/en/articles/using-a-custom-domain-with-github-pages) to configure your domain with GitHub Pages
219 |
220 | From there, you should be done! Your compiled repo's "source" will have to be publicly viewable if you don't have a Pro account, but that shouldn't matter too much if you only upload the `docs` folder to GitHub.
221 |
222 | If you happen to have `git` installed on your computer and run `git clone https://github.com/your_username/repository_name/`, you can use "master branch /docs folder" as the site source and Silica's automatic Git pushing feature to automate the uploading process. This is recommended if you happen to have a GitHub Pro account.
223 |
224 | ## Documentation
225 |
226 | ### `index.json`
227 | Here is a comprehensive example of an `index.json` file. These reside in the package's `silica_data` folder and is required for the repo to properly compile. You **must** include the `bundle_id`, `name`, `version`, `tagline`, `section`, `works_min`, and `works_max`. All other values are optional, but are recommended (if applicable).
228 |
229 | ```json
230 | {
231 | "bundle_id": "co.shuga.elementary-lite",
232 | "name": "Elementary Lite",
233 | "version": "1.1.2-beta",
234 | "tagline": "A simplistic, glyph-based theme.",
235 | "homepage": "https://shuga.co/repo",
236 | "developer": {
237 | "name": "Shuga",
238 | "email": "sileo@shuga.co"
239 | },
240 | "maintainer": {
241 | "name": "Shuga",
242 | "email": "sileo@shuga.co"
243 | },
244 | "social": [
245 | {
246 | "name": "Twitter",
247 | "url": "https://twitter.com/HeyItsShuga"
248 | },
249 | {
250 | "name": "Website",
251 | "url": "https://shuga.co/"
252 | }
253 | ],
254 | "sponsor": {
255 | "name": "Shuga Studios",
256 | "email": "studios@shuga.co"
257 | },
258 | "section": "Themes",
259 | "pre_dependencies": "",
260 | "dependencies": "com.anemonetheming.anemone",
261 | "conflicts": "",
262 | "replaces": "",
263 | "provides": "",
264 | "other_control": ["Tag: role::enduser", "SomeOtherEntryToControl: True"],
265 |
266 | "tint": "#55c6d3",
267 | "works_min": "8.0",
268 | "works_max": "13.0",
269 | "featured": "true",
270 | "source": "https://github.com/Shugabuga/Silica",
271 | "changelog": [
272 | {
273 | "version": "1.1.2-beta",
274 | "changes": "Thank you for participating in the Elementary beta! All future updates will be given a descriptive changelog with a list of changes."
275 | }
276 | ]
277 | }
278 | ```
279 |
280 | ### `settings.json`
281 |
282 | The `settings.json` file, located in the `Styles` folder, let you configure Silica as a while. Everything in this file is required except for `subfolder`, `social`, `footer`, and `enable_pgp`.
283 |
284 | ```json
285 | {
286 | "name": "Silica Beta Repo",
287 | "description": "A repo used to help develop the Silica static repo compiler.",
288 | "tint": "#2da9f3",
289 | "cname": "silica.shuga.co",
290 | "maintainer": {
291 | "name": "Shuga",
292 | "email": "sileo@shuga.co"
293 | },
294 | "social": [
295 | {
296 | "name": "Twitter",
297 | "url": "https://twitter.com/HeyItsShuga"
298 | },
299 | {
300 | "name": "Website",
301 | "url": "https://shuga.co/"
302 | }
303 | ],
304 | "automatic_git": "false",
305 | "subfolder": "repo",
306 | "footer": "{{repo_name}} Powered by Silica {{silica_version}}",
307 | "enable_gpg": "false"
308 | }
309 | ```
310 |
311 | ### Templating
312 |
313 | The repo's home page and web-based tweak depictions can be customized using a [Mustache-based](https://mustache.github.io/mustache.5.html) templating system. If you want to customize these pages, you can use the following placeholders to extend or personalize your Silica install.
314 |
315 | Customizing your repo is optional, but those migrating from a different repo who want to preserve the look of their old depictions may want to do this, as may those who want to push a brand identity.
316 |
317 | ### `index.mustache` Placeholders
318 |
319 | |Placeholder|Description|
320 | |---|---|
321 | |`{{repo_name}}`|The name of the repo.|
322 | |`{{repo_desc}}`|A short tagline of the repo.|
323 | |`{{repo_url}}`|The domain the repo is hosted on.|
324 | |`{{repo_tint}}`|The repo's default tint color.|
325 | |`{{tint_color}}`|An alias to `{{repo_tint}}`.|
326 | |`{{{repo_carousel}}}`|A scrollable carousel that lists any featured packages.|
327 | |`{{{repo_packages}}}`|A list of every package on the repo.|
328 | |`{{silica_compile_date}}`|The date the repo was compiled on (in YYYY-MM-DD).|
329 | |`{{silica_version}}`|The version of Silica that the repo runs on.|
330 | |`{{footer}}`|The footer.|
331 | |`{{tweak_release}}`|An object including all of the tweaks on the repo and their settings.|
332 |
333 | ### `tweak.mustache` Placeholders
334 |
335 | |Placeholder|Description|
336 | |---|---|
337 | |`{{repo_name}}`|The name of the repo.|
338 | |`{{repo_desc}}`|A short tagline of the repo.|
339 | |`{{repo_url}}`|The domain the repo is hosted on.|
340 | |`{{repo_tint}}`|The repo's default tint color.|
341 | |`{{tint_color}}`|The package's tint color. Defaults to the repo's default tint color.|
342 | |`{{silica_compile_date}}`|The date the repo was compiled on (in YYYY-MM-DD).|
343 | |`{{silica_version}}`|The version of Silica that the repo runs on.|
344 | |`{{footer}}`|The footer.|
345 | |`{{tweak_release}}`|An object including all of the tweaks on the repo and their settings.|
346 | |`{{tweak_name}}`|The name of the package to display.|
347 | |`{{tweak_developer}}`|The author of the displayed package.|
348 | |`{{tweak_version}}`|The current version of the displayed package.|
349 | |`{{tweak_section}}`|The category of the displayed package.|
350 | |`{{tweak_bundle_id}}`|The "Bundle ID" of the displayed package.|
351 | |`{{tweak_compatibility}}`|A string to state what iOS versions a package is compatible with.|
352 | |`{{works_min}}`|The minimum iOS version the package is compatible with.|
353 | |`{{works_max}}`|The maximum iOS version the package is compatible with.|
354 | |`{{tweak_tagline}}`|A short tagline of the displayed package.|
355 | |`{{{tweak_carousel}}}`|A scrollable carousel of the displayed package's screenshots.|
356 | |`{{{tweak_description}}}`|A formatted description of the displayed package. Defaults to `{{tweak_tagline}}`.|
357 | |`{{{changelog}}}`|A formatted list of changes to the displayed package.|
358 | |`{{source}}`|A URL to the package's source code.|
359 |
360 | ### File Structure
361 | This is the structure of user-defined files and folders in Silica. Some of these, such as `settings.json`, may be automatically generated on set-up. Others (such as the `.mustache` template files) don't need to be changed if you want to use the default settings.
362 |
363 | ```
364 | Packages // All tweak/theme information/data will go here, AKA what will mainly be messed with.
365 | [Tweak Folder]
366 | silica_data
367 | index.json // This will allow you to edit data in the generated Control file, as well as the data that web and native depictions will use (such as compatibility information and color tint; icons and screenshots are automatically dealt with.).
368 | description.md // A separate description file, because a one-liner in some JSON isn't any fun!
369 | icon.png // The package icon.
370 | banner.png // The header image.
371 | screenshots
372 | [Assorted images].png
373 | scripts
374 | [Everything here will be put in DEBIAN and is for pre/postinst scripts]
375 | [Mirror of iOS directory listing OR a .deb file]
376 | Styles // Allows users to customize how Silica looks
377 | index.mustache // This controls the compiled index.html file.
378 | tweak.mustache // This controls the per-tweak web depictions generated.
379 | settings.json // This allows you to edit data in the generated Release file, maintainer links, and some other things that Sileo native depictions may need
380 | index.css // Stylesheet
381 | index.js // JavaScript
382 | icon.png // Repo icon.
383 | ```
384 |
--------------------------------------------------------------------------------
/Styles/Generic/Banner/Addons.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shugabuga/Silica/cae0e2956c77e40609a2d5b6aeffe04a36f20dc7/Styles/Generic/Banner/Addons.png
--------------------------------------------------------------------------------
/Styles/Generic/Banner/Admin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shugabuga/Silica/cae0e2956c77e40609a2d5b6aeffe04a36f20dc7/Styles/Generic/Banner/Admin.png
--------------------------------------------------------------------------------
/Styles/Generic/Banner/Generic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shugabuga/Silica/cae0e2956c77e40609a2d5b6aeffe04a36f20dc7/Styles/Generic/Banner/Generic.png
--------------------------------------------------------------------------------
/Styles/Generic/Banner/Themes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shugabuga/Silica/cae0e2956c77e40609a2d5b6aeffe04a36f20dc7/Styles/Generic/Banner/Themes.png
--------------------------------------------------------------------------------
/Styles/Generic/Icon/Addons.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shugabuga/Silica/cae0e2956c77e40609a2d5b6aeffe04a36f20dc7/Styles/Generic/Icon/Addons.png
--------------------------------------------------------------------------------
/Styles/Generic/Icon/Admin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shugabuga/Silica/cae0e2956c77e40609a2d5b6aeffe04a36f20dc7/Styles/Generic/Icon/Admin.png
--------------------------------------------------------------------------------
/Styles/Generic/Icon/Generic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shugabuga/Silica/cae0e2956c77e40609a2d5b6aeffe04a36f20dc7/Styles/Generic/Icon/Generic.png
--------------------------------------------------------------------------------
/Styles/Generic/Icon/Themes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shugabuga/Silica/cae0e2956c77e40609a2d5b6aeffe04a36f20dc7/Styles/Generic/Icon/Themes.png
--------------------------------------------------------------------------------
/Styles/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shugabuga/Silica/cae0e2956c77e40609a2d5b6aeffe04a36f20dc7/Styles/icon.png
--------------------------------------------------------------------------------
/Styles/index.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | }
4 |
5 | .body {
6 | font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
7 | margin-top: 20px;
8 | margin-bottom: 20px;
9 |
10 | }
11 |
12 | @media only screen and (max-width: 600px) {
13 | .body {
14 | margin-left: 20px;
15 | margin-right: 20px;
16 | }
17 | .scroll_view {
18 | width: calc(100vw - 60px);
19 | }
20 | }
21 | @media only screen and (min-width: 601px) {
22 | .body {
23 | width: 500px;
24 | margin-left: auto;
25 | margin-right: auto;
26 | }
27 | .scroll_view {
28 | width: calc(500px - 40px);
29 | }
30 | }
31 |
32 | h1, h2, h3, h4, h5, h6, p {
33 | margin: 2px;
34 | }
35 |
36 | .caption {
37 | color: #bbb;
38 | font-size: 16px;
39 | }
40 |
41 | .header {
42 | margin-top: 40px;
43 | margin-bottom: 25px;
44 | }
45 |
46 | .scroll_view {
47 | overflow-x: scroll;
48 | overflow-y: hidden;
49 | margin: 10px;
50 | white-space: nowrap;
51 | -webkit-overflow-scrolling: touch;
52 | }
53 |
54 | .scroll_view > .card {
55 | background-color: #ccc;
56 | background-position: center;
57 | background-repeat: no-repeat;
58 | background-size: cover;
59 | padding: 10px;
60 | margin: 10px;
61 | border-radius: 10px;
62 | font-weight: bold;
63 | height: 125px;
64 | width: 275px;
65 | position: relative;
66 | display: inline-block;
67 | }
68 |
69 | .scroll_view > .img_card {
70 | background-color: #ccc;
71 | width: 250px;
72 | margin: 5px;
73 | border-radius: 10px;
74 | font-weight: bold;
75 | position: relative;
76 | display: inline-block;
77 | }
78 |
79 | .card > p {
80 | color: white;
81 | bottom: 15px;
82 | left: 15px;
83 | font-size: 25px;
84 | position: absolute;
85 | text-shadow: 0 0 10px rgba(0,0,0,0.8);
86 | }
87 |
88 | .center {
89 | text-align: center;
90 | }
91 |
92 | .left_float {
93 | float: left;
94 | }
95 |
96 | .right_float {
97 | float: right;
98 | }
99 |
100 | .add_sileo {
101 | font-size: 2em;
102 | cursor: pointer;
103 | text-decoration: none;
104 | }
105 |
106 | .add_sileo:hover, a:hover {
107 | opacity: 0.8;
108 | cursor: pointer;
109 | }
110 |
111 | .package {
112 | margin-bottom: 40px;
113 | }
114 |
115 | .package > img {
116 | border-radius: 20px;
117 | width: 75px;
118 | height: 75px;
119 | float: left;
120 | }
121 |
122 | .package_info {
123 | margin-left: 90px;
124 | }
125 |
126 | .package_name {
127 | font-weight: bold;
128 | font-size: 21px;
129 | }
130 |
131 | .package_caption {
132 | margin-top: 7px;
133 | color: #999;
134 | }
135 |
136 | .cell > .title {
137 | float: left;
138 | color: #999;
139 | }
140 |
141 | .cell > .text {
142 | float: right;
143 | }
144 |
145 | h3 {
146 | margin-top: 15px;
147 | margin-bottom: 15px;
148 | }
149 |
150 | .footer {
151 | margin-top: 20px;
152 | }
153 |
154 | .subtle_link, .subtle_link > div > div, .subtle_link > div > div > p {
155 | text-decoration: none;
156 | color: black;
157 | }
158 |
159 | .subtle_link:hover, .subtle_link > *:hover {
160 | opacity: 0.8;
161 | }
162 |
163 | .green {
164 | color: #00b90c;
165 | }
166 |
167 | .red {
168 | color: #ba0000;
169 | }
170 |
171 | .banner_underlay {
172 | background-size: cover;
173 | background-position: center;
174 | height: 150px;
175 | width: 100%;
176 | border-radius: 8px;
177 | z-index: -2;
178 | margin-bottom: 25px;
179 | top: 0;
180 | }
181 |
182 | .changelog {
183 | display: none;
184 | }
185 |
186 | .nav {
187 | display: flex;
188 | margin: 20px;
189 | float: center;
190 | }
191 |
192 | .nav_btn {
193 | width: 50%;
194 | display:inline;
195 | text-align: center;
196 | color: #999;
197 | font-weight: 500;
198 | padding-bottom: 10px;
199 | cursor: pointer;
200 | }
201 |
202 | .changelog_entry {
203 | margin-bottom: 18px;
204 | }
205 |
206 | a {
207 | text-decoration: none;
208 | }
209 |
210 | .table-btn, .table-btn > div {
211 | padding-top: 10px;
212 | padding-bottom: 10px;
213 | }
214 |
215 | .table-btn:after {
216 | content: "›";
217 | font-size:30px;
218 | transform: translateY(-40px);
219 | float: right;
220 | }
221 |
222 | @media (prefers-color-scheme: dark) {
223 | body {
224 | background: #161616;
225 | color: white;
226 | }
227 |
228 | .subtle_link, .subtle_link > div > div, .subtle_link > div > div > p {
229 | color: white;
230 | }
231 | }
--------------------------------------------------------------------------------
/Styles/index.js:
--------------------------------------------------------------------------------
1 | function compatible(works_min, works_max, tweak_compatibility) {
2 | let currentiOS = parseFloat(('' + (/CPU.*OS ([0-9_]{1,})|(CPU like).*AppleWebKit.*Mobile/i.exec(navigator.userAgent) || [0,''])[1]).replace('undefined', '3_2').replace('_', '.').replace('_', ''));
3 | works_min = numerize(works_min);
4 | works_max = numerize(works_max);
5 | let el = document.querySelector(".compatibility");
6 | if (currentiOS < works_min) {
7 | el.innerHTML = "Your version of iOS is too old for this package. This package works on " + tweak_compatibility + ".";
8 | el.classList.add("red")
9 | } else if(currentiOS > works_max) {
10 | el.innerHTML = "Your version of iOS is too new for this package. This package works on " + tweak_compatibility + ".";
11 | el.classList.add("red")
12 | } else if(String(currentiOS) != "NaN") {
13 | el.innerHTML = "This package works on your device!";
14 | el.classList.add("green")
15 | }
16 | }
17 | function numerize(x) {
18 | return x.substring(0,x.indexOf(".")) + "." + x.substring(x.indexOf(".")+1).replace(".","")
19 | }
20 | function swap(hide, show) {
21 | for (var i = document.querySelectorAll(hide).length - 1; i >= 0; i--) {
22 | document.querySelectorAll(hide)[i].style.display = "none";
23 | }
24 | for (var i = document.querySelectorAll(show).length - 1; i >= 0; i--) {
25 | document.querySelectorAll(show)[i].style.display = "block";
26 | }
27 | document.querySelector(".nav_btn" + show + "_btn").classList.add("active");
28 | document.querySelector(".nav_btn" + hide + "_btn").classList.remove("active")
29 | }
30 |
31 | function externalize() {
32 | for (var i = document.querySelectorAll("a").length - 1; i >= 0; i--) {
33 | document.querySelectorAll("a")[0].setAttribute("target","blank")
34 | }
35 | }
36 | function darkMode(isOled) {
37 | var darkColor = isOled ? "black" : "#161616";
38 | document.querySelector("body").style.color = "white";
39 | document.querySelector("body").style.background = darkColor;
40 | for (var i = document.querySelectorAll(".subtle_link, .subtle_link > div > div, .subtle_link > div > div > p").length - 1; i >= 0; i--) {
41 | document.querySelectorAll(".subtle_link, .subtle_link > div > div, .subtle_link > div > div > p")[i].style.color = "white";
42 | }
43 | }
44 | if (navigator.userAgent.toLowerCase().indexOf("dark") != -1) {
45 | darkMode(navigator.userAgent.toLowerCase().indexOf("oled") != -1 || navigator.userAgent.toLowerCase().indexOf("pure-black") != -1);
46 | }
--------------------------------------------------------------------------------
/Styles/index.mustache:
--------------------------------------------------------------------------------
1 |
2 |
3 |