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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
|
---
import Button from '@components/base/Button.astro';
import Card from '@components/base/Card.astro';
import Header from '@components/base/Header.astro';
import Paragraph from '@components/base/Paragraph.astro';
import Section from '@components/base/Section.astro';
import Slider from '@components/base/Slider.astro';
import configConst from '@config';
import Layout from '@layouts/Layout.astro';
import { Code } from 'astro:components';
const modrinthId = configConst.socials.modrinthId;
---
<Layout>
<Section maxWidth="1920px" wFull={true} wrapperClass="h-3/5" class="h-full mt-32 md:mt-28 flex flex-col justify-center items-center max-xl:px-0">
<div class="flex flex-col justify-center items-center max-w-full overflow-hidden">
<div class="flex flex-col justify-between items-center overflow-hidden h-auto lg:h-[290px] max-w-[1920px] relative">
<div class="absolute -bottom-[1px] w-full h-full lg:h-1/2 z-10" style="background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgb(240, 242, 244));"/>
<Slider wrapperClass="-mb-40 mb-2 hidden lg:block" childrenNum={8}>
<Card text="Chatting" icon="chatting"/>
<Card text="PolySprint" icon="polysprint"/>
<Card text="VanillaHUD" icon="vanillahud"/>
<Card text="OverflowAnimations" icon="overflowanimations"/>
<Card text="CrashPatch" icon="crashpatch"/>
<Card text="PolyTime" icon="polytime"/>
<Card text="PolyWeather" icon="polyweather"/>
<Card text="Keystrokes" icon="keystrokes"/>
</Slider>
<Slider dir="right" childrenNum={8}>
<Card text="Chatting" icon="chatting"/>
<Card text="PolySprint" icon="polysprint"/>
<Card text="VanillaHUD" icon="vanillahud"/>
<Card text="OverflowAnimations" icon="overflowanimations"/>
<Card text="CrashPatch" icon="crashpatch"/>
<Card text="PolyTime" icon="polytime"/>
<Card text="PolyWeather" icon="polyweather"/>
<Card text="Keystrokes" icon="keystrokes"/>
</Slider>
</div>
</div>
<div class="flex flex-col justify-start items-center max-w-full mt-6 md:mt-10 gap-6 px-4">
<Header align="center" size="xxl" class="text-navy-peony max-w-[500px]">Redefining modding, one mod at a time</Header>
<div class="flex flex-row justify-center items-center gap-x-2">
<Button style="primary" iconLeft="download" href={`https://modrinth.com/user/${configConst.socials.modrinthId}`}>Download</Button>
<Button style="secondary" iconLeft="github" href={configConst.socials.github}>Source</Button>
</div>
<Paragraph class="text-navy-peony text-lg font-semibold max-w-screen-sm text-center mt-20">
<span id="mod_count">16</span>+ mods. Unparalleled new features. OneConfig. We combine our groundbreaking library with mods with no equivalent anywhere else.
</Paragraph>
</div>
</Section>
<Section tabindex="0">
<div slot="left">
<Header size="lg" class="text-navy-peony"><b id="mod_count_maintained_mods">16</b> maintained mods</Header>
<Paragraph size="sm" class="text-gray-400 max-w-[500px]">
OneConfig is a revolutionary new way to configure mods. It allows you to configure all of your mods in one place, with a beautiful UI.
</Paragraph>
</div>
<div slot="right">
<div class="absolute ml-[21rem] w-1/4 h-full z-10" style="background: linear-gradient(90deg, rgba(246, 246, 246, 0.00) 0%, #F0F2F4 49.21%);"/>
<img src="/media/mods/page_media_1.svg" class="w-[120%] overflow-x-clip" alt="stuff"/>
</div>
</Section>
<Section tabindex="0">
<div slot="left">
<img src="/media/mods/page_media_2.svg" class="max-sm:w-full" alt="stuff"/>
</div>
<div slot="right">
<Header size="lg" class="text-navy-peony">We <b>listen</b> to community feedback</Header>
<Paragraph size="sm" class="text-gray-400 max-w-[500px]">
No more are the days where developers ignore your great new idea. Some of our best mods and ideas are user-suggested, such as BehindYouV3, various Chatting features, and more.
</Paragraph>
</div>
</Section>
<Section maxWidth="1120px" wrapperClass="bg-blue-75 -mb-40" wFull={false} class="pt-10 md:py-20">
<div slot="left">
<!-- TODO: FIX Codeblock overflowing on mobile -->
<div class="max-sm:hidden">
<Code
code={
`public class MyConfig {
@Switch(
name = "Sub Switch",
type = OptionType.SWITCH
)
public static boolean subSwitch = false;
public MyConfig() {
super(new Mod("My Mod", ModType.UTIL_QOL), "config.json");
addDependency("subSwitch", () -> {
// Do stuff here
});
}
}`
}
lang="java"
/>
</div>
</div>
<div slot="right" class="flex flex-col gap-2 text-left items-start">
<Header size="lg" class="text-blue-500">Open source</Header>
<Paragraph class="text-blue-400 max-w-[500px]">
All of our mods are open source, and will continue to be open source. Anyone can learn, contribute, or take from our code (as long as it follows our license).
</Paragraph>
<div class="flex">
<Button href="https://docs.polyfrost.org" iconLeft="book-open" style="secondary" text="Documentation"/>
</div>
</div>
</Section>
<Section maxWidth="1120px" wrapperClass="bg-blue-75" wFull={false} class="py-10 md:py-20 gap-4">
<div slot="left" class="flex flex-col gap-2 text-left items-start">
<Header size="lg" class="text-blue-500">Powered by OneConfig</Header>
<Paragraph class="text-blue-400 max-w-[500px]">
OneConfig brings the simplicity of a client to the everyday user, gives advanced users and developers complete control over everything, while remaining free and open-source.
</Paragraph>
<div class="flex">
<Button href="/projects/oneconfig/download" style="secondary" iconLeft="oneconfig" text="See OneConfig"/>
</div>
</div>
<div slot="right">
<img src="/media/oneconfig/page_media_3.svg" class="max-sm:w-full" alt="stuff"/>
</div>
</Section>
<Section wrapperClass="flex justify-center items-center min-h-screen -mt-40" class="flex-col justify-center items-center">
<div class="flex flex-col gap-y-1 relative justify-center items-center">
<Header size="xl" class="text-navy-peony text-header-page w-11/12 md:max-w-lg text-center">Get our mods, available on Modrinth and GitHub.</Header>
<div class="flex flex-row justify-center items-center gap-x-2">
<Button style="primary" iconLeft="link-external" href={`https://modrinth.com/user/${configConst.socials.modrinthId}`}>Modrinth</Button>
<Button style="primary" iconLeft="github" href={configConst.socials.github}>GitHub</Button>
</div>
</div>
</Section>
</Layout>
<script define:vars={{ modrinthId: modrinthId }}>
async function getModCount() {
const res = await fetch(`https://api.modrinth.com/v2/user/${modrinthId}/projects`);
const data = await res.json();
const mods = data.filter((mod) => {
return mod.slug !== 'oneconfig' && mod.slug !== 'easeify';
});
return mods.length;
}
getModCount().then((size) => {
const modCount = document.getElementById('mod_count');
const modCountMaintainedMods = document.getElementById('mod_count_maintained_mods');
if (modCount)
modCount.textContent = size;
if (modCountMaintainedMods)
modCountMaintainedMods.textContent = size;
});
</script>
|
