Merge branch 'master' of github.com:Polyfrost/OneConfig

merge or smthing

9 files changed, 304 insertions, 36 deletions

diff --git a/src/main/java/io/polyfrost/oneconfig/gui/OneConfigGui.java b/src/main/java/io/polyfrost/oneconfig/gui/OneConfigGui.java
index 0879bd4..bc30257 100644
--- a/src/main/java/io/polyfrost/oneconfig/gui/OneConfigGui.java
+++ b/src/main/java/io/polyfrost/oneconfig/gui/OneConfigGui.java
@@ -1,15 +1,18 @@
 package io.polyfrost.oneconfig.gui;
 
 import io.polyfrost.oneconfig.config.OneConfigConfig;
-import io.polyfrost.oneconfig.gui.elements.BasicButton;
 import io.polyfrost.oneconfig.gui.elements.BasicElement;
 import io.polyfrost.oneconfig.gui.elements.TextInputField;
+import io.polyfrost.oneconfig.gui.pages.HomePage;
+import io.polyfrost.oneconfig.gui.pages.Page;
 import io.polyfrost.oneconfig.lwjgl.RenderManager;
 import io.polyfrost.oneconfig.lwjgl.font.Fonts;
+import io.polyfrost.oneconfig.utils.MathUtils;
 import net.minecraft.client.gui.GuiScreen;
+import org.jetbrains.annotations.NotNull;
 import org.lwjgl.input.Keyboard;
-import org.lwjgl.nanovg.NVGColor;
-import org.lwjgl.nanovg.NanoVG;
+
+import static org.lwjgl.nanovg.NanoVG.*;
 
 public class OneConfigGui extends GuiScreen {
     public static OneConfigGui INSTANCE;
@@ -20,8 +23,12 @@ public class OneConfigGui extends GuiScreen {
 
     private final SideBar sideBar = new SideBar();
 
+    protected Page currentPage;
+    protected Page prevPage;
+    private float pageProgress = -224f;
+
     private final TextInputField textInputField = new TextInputField(776, 32, "Search all of OneConfig...", false, false);
-    private final BasicButton btn = new BasicButton(184, 36, "Socials", "/assets/oneconfig/textures/share.png", "/assets/oneconfig/textures/share2.png", 1, BasicButton.ALIGNMENT_CENTER);
+
 
     public OneConfigGui() {
         INSTANCE = this;
@@ -30,6 +37,8 @@ public class OneConfigGui extends GuiScreen {
     public void drawScreen(int mouseX, int mouseY, float partialTicks) {
         super.drawScreen(mouseX, mouseY, partialTicks);
         RenderManager.setupAndDraw((vg) -> {
+            if(currentPage == null) currentPage = new HomePage();
+            //nvgScale(vg, 0.5f, 0.5f);
             if(OneConfigConfig.ROUNDED_CORNERS) {
                 RenderManager.drawRoundedRect(vg, 544, 140, 1056, 800, OneConfigConfig.GRAY_800, OneConfigConfig.CORNER_RADIUS_WIN);
                 RenderManager.drawRoundedRect(vg, 320, 140, 244, 800, OneConfigConfig.GRAY_900_80, OneConfigConfig.CORNER_RADIUS_WIN);
@@ -43,17 +52,28 @@ public class OneConfigGui extends GuiScreen {
             RenderManager.drawLine(vg, 544, 140, 544, 940, 1, OneConfigConfig.GRAY_700);
 
             RenderManager.drawImage(vg, "/assets/oneconfig/textures/icon.png", x + 19, y + 19, 42, 42);
-            RenderManager.drawString(vg, "OneConfig", x + 69, y + 23, OneConfigConfig.WHITE, 18f, Fonts.INTER_BOLD);
-            RenderManager.drawString(vg, "By Polyfrost", 389, 183, OneConfigConfig.WHITE, 12f, Fonts.INTER_REGULAR);
+            RenderManager.drawString(vg, "OneConfig", x + 69, y + 32, OneConfigConfig.WHITE, 18f, Fonts.INTER_BOLD);        // added half line height to center text
+            RenderManager.drawString(vg, "By Polyfrost", x + 69, y + 51, OneConfigConfig.WHITE, 12f, Fonts.INTER_REGULAR);
             //element.setColorPalette(0);
-            try {
-                sideBar.draw(vg, x, y);
-                //element.draw(vg, 0, 0);
-                textInputField.draw(vg, 792, 548);
-                btn.draw(vg, 976, 870);
-            } catch (Exception e) {
-                e.printStackTrace();
+            sideBar.draw(vg, x, y);
+            nvgScissor(vg, x + 224, y + 72, 1056, 728);
+            if(prevPage != null) {
+                pageProgress = MathUtils.easeInOutCirc(50, pageProgress, 832 - pageProgress, 220);
+                prevPage.draw(vg, (int) (x - pageProgress), y + 72);
+                RenderManager.drawLine(vg, (int) (x - pageProgress + 1055), y + 72, (int) (x - pageProgress + 1057), y + 800, 2, OneConfigConfig.GRAY_700);     // TODO might remove this
+                currentPage.draw(vg, (int) (x - pageProgress + 1056), y + 72);
+                if(pageProgress > 828f) {
+                    prevPage = null;
+                    pageProgress = -224f;
+                }
+            } else {
+                currentPage.draw(vg, (int) (x - pageProgress), y + 72);
             }
+            nvgResetScissor(vg);
+            RenderManager.drawString(vg, currentPage.getTitle(), x + 336, y + 36, OneConfigConfig.WHITE_90, 32f, Fonts.INTER_SEMIBOLD);
+
+                //textInputField.draw(vg, 792, 548);
+                //btn.draw(vg, 976, 870);
 
             //RenderManager.drawGradientRoundedRect(vg, 100, 100, 500, 100, OneConfigConfig.BLUE_600, OneConfigConfig.BLUE_500, OneConfigConfig.CORNER_RADIUS_WIN);
 
@@ -70,6 +90,13 @@ public class OneConfigGui extends GuiScreen {
         }
     }
 
+    public void openPage(@NotNull Page page) {
+        if(prevPage == null) {
+            prevPage = currentPage;
+        }
+        currentPage = page;
+    }
+
 
     @Override
     public boolean doesGuiPauseGame() {
diff --git a/src/main/java/io/polyfrost/oneconfig/gui/SideBar.java b/src/main/java/io/polyfrost/oneconfig/gui/SideBar.java
index 0b8659f..7f84049 100644
--- a/src/main/java/io/polyfrost/oneconfig/gui/SideBar.java
+++ b/src/main/java/io/polyfrost/oneconfig/gui/SideBar.java
@@ -2,6 +2,8 @@ package io.polyfrost.oneconfig.gui;
 
 import io.polyfrost.oneconfig.config.OneConfigConfig;
 import io.polyfrost.oneconfig.gui.elements.BasicButton;
+import io.polyfrost.oneconfig.gui.pages.HomePage;
+import io.polyfrost.oneconfig.gui.pages.ModsPage;
 import io.polyfrost.oneconfig.lwjgl.RenderManager;
 import io.polyfrost.oneconfig.lwjgl.font.Fonts;
 import io.polyfrost.oneconfig.utils.MathUtils;
@@ -15,17 +17,17 @@ public class SideBar {
     private float targetY = 0, currentY = 0;
 
     public SideBar() {
-        btnList.add(new BasicButton(192, 36, "Dashboard", "/assets/oneconfig/textures/share.png", null, -3, BasicButton.ALIGNMENT_LEFT));
+        btnList.add(new BasicButton(192, 36, "Dashboard", "/assets/oneconfig/textures/share.png", null, -3, BasicButton.ALIGNMENT_LEFT, new HomePage()));
         btnList.add(new BasicButton(192, 36, "Global Search", "/assets/oneconfig/textures/share.png", null, -3, BasicButton.ALIGNMENT_LEFT));
-        btnList.add(new BasicButton(192, 36, "Mods", "/assets/oneconfig/textures/share.png", null, -3, BasicButton.ALIGNMENT_LEFT));
+        btnList.add(new BasicButton(192, 36, "Mods", "/assets/oneconfig/textures/share.png", null, -3, BasicButton.ALIGNMENT_LEFT, new ModsPage()));
         btnList.add(new BasicButton(192, 36, "Performance", "/assets/oneconfig/textures/share.png", null, -3, BasicButton.ALIGNMENT_LEFT));
         btnList.add(new BasicButton(192, 36, "Profiles", "/assets/oneconfig/textures/share.png", null, -3, BasicButton.ALIGNMENT_LEFT));
         btnList.add(new BasicButton(192, 36, "Updates", "/assets/oneconfig/textures/share.png", null, -3, BasicButton.ALIGNMENT_LEFT));
         btnList.add(new BasicButton(192, 36, "Screenshots", "/assets/oneconfig/textures/share.png", null, -3, BasicButton.ALIGNMENT_LEFT));
         btnList.add(new BasicButton(192, 36, "HUD Settings", "/assets/oneconfig/textures/share.png", null, -3, BasicButton.ALIGNMENT_LEFT));
         btnList.add(new BasicButton(192, 36, "General", "/assets/oneconfig/textures/share.png", null, -3, BasicButton.ALIGNMENT_LEFT));
-        btnList.add(new BasicButton(192, 36, "Close", "/assets/oneconfig/textures/share.png", null, -3, BasicButton.ALIGNMENT_LEFT));
-        btnList.add(new BasicButton(192, 36, "Minimize", "/assets/oneconfig/textures/share.png", null, -3, BasicButton.ALIGNMENT_LEFT));
+        btnList.add(new BasicButton(192, 36, "Close", "/assets/oneconfig/textures/share.png", null, -1, BasicButton.ALIGNMENT_LEFT));
+        btnList.add(new BasicButton(192, 36, "Minimize", "/assets/oneconfig/textures/share.png", null, -1, BasicButton.ALIGNMENT_LEFT));
         btnList.add(new BasicButton(192, 36, "Edit HUD", "/assets/oneconfig/textures/share.png", null, 0, BasicButton.ALIGNMENT_LEFT));
     }
 
@@ -36,7 +38,7 @@ public class SideBar {
         RenderManager.drawRoundedRect(vg, x + 16, currentY, 192, 36, OneConfigConfig.BLUE_600, OneConfigConfig.CORNER_RADIUS);
         int i = 0;
         if (targetY == 0) {
-            targetY = x + 16;
+            targetY = y + 96;
             currentY = targetY;
         }
         for (BasicButton btn : btnList) {
@@ -55,7 +57,7 @@ public class SideBar {
             }
 
             if (btn.isClicked()) {
-                targetY = btn.y;
+                if(i < 520) targetY = btn.y;
             }
         }
 
diff --git a/src/main/java/io/polyfrost/oneconfig/gui/elements/BasicButton.java b/src/main/java/io/polyfrost/oneconfig/gui/elements/BasicButton.java
index 39d5e9c..8fc2a63 100644
--- a/src/main/java/io/polyfrost/oneconfig/gui/elements/BasicButton.java
+++ b/src/main/java/io/polyfrost/oneconfig/gui/elements/BasicButton.java
@@ -1,14 +1,14 @@
 package io.polyfrost.oneconfig.gui.elements;
 
 import io.polyfrost.oneconfig.config.OneConfigConfig;
+import io.polyfrost.oneconfig.gui.OneConfigGui;
+import io.polyfrost.oneconfig.gui.pages.Page;
 import io.polyfrost.oneconfig.lwjgl.RenderManager;
 import io.polyfrost.oneconfig.lwjgl.font.Fonts;
 import io.polyfrost.oneconfig.utils.ColorUtils;
 import org.jetbrains.annotations.NotNull;
 import org.jetbrains.annotations.Nullable;
 
-import static org.lwjgl.nanovg.NanoVG.nvgTextBounds;
-
 public class BasicButton extends BasicElement {
 
     protected String text;
@@ -21,6 +21,10 @@ public class BasicButton extends BasicElement {
     public static final int ALIGNMENT_LEFT = 0;
     public static final int ALIGNMENT_CENTER = 1;
 
+    private boolean toggleable;
+
+    private Page page;
+
     /**
      * Create a new basic button. Used mostly on the homepage and the sidebar. Note: The button will not be drawn until you call {@link #draw(long, int, int)}.
      * The button's content is centered on its total length, so the text is not always in the middle.
@@ -45,6 +49,17 @@ public class BasicButton extends BasicElement {
         }
     }
 
+    public BasicButton(int width, int height, @NotNull String text, @Nullable String fileNameLeftIco, @Nullable String fileNameRightIco, int colorPalette, int alignment, Page page) {
+        this(width, height, text, fileNameLeftIco, fileNameRightIco, colorPalette, alignment);
+        this.page = page;
+    }
+
+    public BasicButton(int width, int height, @NotNull String text, @Nullable String fileNameLeftIco, @Nullable String fileNameRightIco, int colorPalette, int alignment, boolean toggleable) {
+        this(width, height, text, fileNameLeftIco, fileNameRightIco, colorPalette, alignment);
+        this.toggleable = toggleable;
+    }
+
+
 
     @Override
     public void draw(long vg, int x, int y) {
@@ -68,7 +83,7 @@ public class BasicButton extends BasicElement {
 
         if(thisAlignment == ALIGNMENT_CENTER) {
             int middle = x + this.width / 2;
-            RenderManager.drawString(vg, text, middle - contentWidth / 2 + (fileNameLeftIco != null ? 28 : 0), y + ((float) height / 2), textColor, fontSize, Fonts.INTER_MEDIUM);
+            RenderManager.drawString(vg, text, middle - contentWidth / 2 + (fileNameLeftIco != null ? 28 : 0), y + ((float) height / 2) + 1, textColor, fontSize, Fonts.INTER_MEDIUM);
             if (fileNameLeftIco != null) {
                 RenderManager.drawImage(vg, fileNameLeftIco, middle - contentWidth / 2, y + 8, 20, 20);
             }
@@ -79,9 +94,9 @@ public class BasicButton extends BasicElement {
         if(thisAlignment == ALIGNMENT_LEFT) {
             if(fileNameLeftIco != null) {
                 RenderManager.drawImage(vg, fileNameLeftIco, x + 12, y + 8, 20, 20);
-                RenderManager.drawString(vg, text, x + 40, y + ((float) height / 2), textColor, fontSize, Fonts.INTER_MEDIUM);
+                RenderManager.drawString(vg, text, x + 40, y + ((float) height / 2) + 1, textColor, fontSize, Fonts.INTER_MEDIUM);
             } else {
-                RenderManager.drawString(vg, text, x + 12, y + ((float) height / 2), textColor, fontSize, Fonts.INTER_MEDIUM);
+                RenderManager.drawString(vg, text, x + 12, y + ((float) height / 2) + 1, textColor, fontSize, Fonts.INTER_MEDIUM);
             }
             if(fileNameRightIco != null) {
                 RenderManager.drawImage(vg, fileNameRightIco, x + width - 28, y + 8, 20, 20);
@@ -93,10 +108,21 @@ public class BasicButton extends BasicElement {
                 currentColor = OneConfigConfig.TRANSPARENT;
                 return;
             }
-            currentColor = ColorUtils.getColor(currentColor, colorPalette, hovered, clicked);
-
+            if(!toggleable) {
+                currentColor = ColorUtils.getColor(currentColor, colorPalette, hovered, clicked);
+            } else {
+                if (toggled) {
+                    currentColor = ColorUtils.smoothColor(currentColor, OneConfigConfig.GRAY_500, OneConfigConfig.BLUE_600, true, 30f);
+                } else currentColor = ColorUtils.getColor(currentColor, colorPalette, hovered, clicked);
+            }
         }
     }
 
 
+    @Override
+    public void onClick() {
+        if(this.page != null) {
+            OneConfigGui.INSTANCE.openPage(page);
+        }
+    }
 }
diff --git a/src/main/java/io/polyfrost/oneconfig/gui/elements/BasicElement.java b/src/main/java/io/polyfrost/oneconfig/gui/elements/BasicElement.java
index 765a271..dd72217 100644
--- a/src/main/java/io/polyfrost/oneconfig/gui/elements/BasicElement.java
+++ b/src/main/java/io/polyfrost/oneconfig/gui/elements/BasicElement.java
@@ -2,7 +2,7 @@ package io.polyfrost.oneconfig.gui.elements;
 
 import io.polyfrost.oneconfig.lwjgl.RenderManager;
 import io.polyfrost.oneconfig.utils.ColorUtils;
-import net.minecraft.client.Minecraft;
+import io.polyfrost.oneconfig.utils.InputUtils;
 import org.lwjgl.input.Mouse;
 
 public class BasicElement {
@@ -40,19 +40,22 @@ public class BasicElement {
     }
 
     public void update(int x, int y) {
-        int mouseX = Mouse.getX();
-        int mouseY = Minecraft.getMinecraft().displayHeight - Math.abs(Mouse.getY());
-        int buttonRight = x + width;
-        int buttonBottom = y + height;
-
-        hovered = mouseX > x - hitBoxX && mouseY > y - hitBoxY && mouseX < buttonRight + hitBoxX && mouseY < buttonBottom + hitBoxY;
-        if (Mouse.isButtonDown(0) && clicked) {
-            toggled = !toggled;
+        hovered = InputUtils.isAreaHovered(x - hitBoxX, y - hitBoxY, width + hitBoxX, height + hitBoxY);
+
+        if (hovered) {
+            if (Mouse.isButtonDown(0) && !clicked) {
+                toggled = !toggled;
+                onClick();
+            }
+            clicked = Mouse.isButtonDown(0);
         }
-        clicked = Mouse.isButtonDown(0) && hovered;
     }
 
 
+    public void onClick() {
+
+    }
+
     public void setCustomHitbox(int x, int y) {
         hitBoxX = x;
         hitBoxY = y;
diff --git a/src/main/java/io/polyfrost/oneconfig/gui/elements/ModCard.java b/src/main/java/io/polyfrost/oneconfig/gui/elements/ModCard.java
new file mode 100644
index 0000000..38304e4
--- /dev/null
+++ b/src/main/java/io/polyfrost/oneconfig/gui/elements/ModCard.java
@@ -0,0 +1,104 @@
+package io.polyfrost.oneconfig.gui.elements;
+
+import io.polyfrost.oneconfig.config.OneConfigConfig;
+import io.polyfrost.oneconfig.config.data.ModData;
+import io.polyfrost.oneconfig.lwjgl.RenderManager;
+import io.polyfrost.oneconfig.lwjgl.font.Fonts;
+import io.polyfrost.oneconfig.utils.ColorUtils;
+import io.polyfrost.oneconfig.utils.InputUtils;
+import net.minecraft.client.Minecraft;
+import org.jetbrains.annotations.NotNull;
+import org.jetbrains.annotations.Nullable;
+import org.lwjgl.nanovg.NanoVG;
+
+public class ModCard extends BasicElement {
+    private final String iconPath;
+    private final ModData modData;
+    private final BasicElement favoriteHitbox = new BasicElement(32, 32, -2, true);
+    private boolean active, disabled, favorite;
+    private int colorGray = OneConfigConfig.GRAY_600;
+    private int colorPrimary = OneConfigConfig.BLUE_600;
+    private boolean isHoveredMain = false;
+
+    public ModCard(@NotNull ModData mod, @Nullable String iconPath, boolean active, boolean disabled, boolean favorite) {
+        super(244, 119, false);
+        this.modData = mod;
+        this.iconPath = iconPath;
+        this.active = active;
+        toggled = active;
+        this.disabled = disabled;
+        this.favorite = favorite;
+    }
+
+    @Override
+    public void draw(long vg, int x, int y) {
+        if(disabled) NanoVG.nvgGlobalAlpha(vg, 0.5f);
+        RenderManager.drawRoundedRectVaried(vg, x, y, width, 87, colorGray, 12f, 12f, 0f, 0f);
+        RenderManager.drawRoundedRectVaried(vg, x, y + 87, width, 32, colorPrimary, 0f, 0f, 12f, 12f);
+        RenderManager.drawLine(vg, x, y + 86, x + width, y + 86, 2,OneConfigConfig.GRAY_300);
+        //RenderManager.drawRect(vg, x, y + 87, width, 12, colorPrimary);
+        if(iconPath != null) {
+            RenderManager.drawImage(vg, iconPath, x, y, width, 87);
+        } else {
+            RenderManager.drawImage(vg, "/assets/oneconfig/textures/box.png", x + 98, y + 19, 48, 48);
+        }
+        //favoriteHitbox.draw(vg, x + 212, y + 87);
+        favoriteHitbox.update(x + 212, y + 87);
+        favoriteHitbox.currentColor = ColorUtils.getColor(favoriteHitbox.currentColor, favoriteHitbox.colorPalette, favoriteHitbox.hovered, favoriteHitbox.clicked);
+        RenderManager.drawRoundedRectVaried(vg, x + 212, y + 87, 32, 32, favoriteHitbox.currentColor, 0f, 0f, 12f, 0f);
+        favorite = favoriteHitbox.isToggled();
+        RenderManager.drawString(vg, modData.name, x + 12, y + 102, OneConfigConfig.WHITE, 14f, Fonts.INTER_MEDIUM);
+        if(favorite) {
+            RenderManager.drawImage(vg, "/assets/oneconfig/textures/love.png", x + 220, y + 95, 16, 16);
+        } else {
+            RenderManager.drawImage(vg, "/assets/oneconfig/textures/love_empty.png", x + 220, y + 95, 16, 16);
+        }
+        super.update(x, y);
+        isHoveredMain = InputUtils.isAreaHovered(x, y, width, 87);
+        boolean isHoveredSecondary = InputUtils.isAreaHovered(x, y + 87, width - 32, 32) && !disabled;
+        colorGray = ColorUtils.getColor(colorGray, 0, isHoveredMain, clicked && isHoveredMain);
+        if(active && !disabled) {
+            colorPrimary = ColorUtils.getColor(colorPrimary, 1, isHoveredSecondary, clicked && isHoveredSecondary);
+        } else colorPrimary = ColorUtils.smoothColor(colorPrimary, OneConfigConfig.GRAY_500, OneConfigConfig.GRAY_400, isHoveredSecondary, 20f);
+
+        if(clicked && isHoveredMain) {
+            if(!active) toggled = false;
+        }
+        if(clicked && favoriteHitbox.hovered) toggled = false;
+        if(clicked && !isHoveredSecondary && active) toggled = true;
+        if(!active & disabled) toggled = false;
+        //RenderManager.drawString(vg, "active=" + active, x + 300, y + 12, OneConfigConfig.WHITE, 12f, Fonts.INTER_MEDIUM);        // TODO remove debug stuff
+        //RenderManager.drawString(vg, "disabled=" + disabled, x + 300, y + 24, OneConfigConfig.WHITE, 12f, Fonts.INTER_MEDIUM);
+        //RenderManager.drawString(vg, "favorite=" + favorite, x + 300, y + 36, OneConfigConfig.WHITE, 12f, Fonts.INTER_MEDIUM);
+
+
+        active = toggled;
+        NanoVG.nvgGlobalAlpha(vg, 1f);
+    }
+
+    public void onClick() {
+        if(isHoveredMain) {
+            Minecraft.getMinecraft().thePlayer.sendChatMessage("you thought you opened the config for " + modData.name + " but actually it doesnt exist");
+        }
+    }
+
+    public ModData getModData() {
+        return modData;
+    }
+
+    public boolean isDisabled() {
+        return disabled;
+    }
+
+    public boolean isActive() {
+        return active;
+    }
+
+    public void setDisabled(boolean disabled) {
+        this.disabled = disabled;
+    }
+
+    public boolean isFavorite() {
+        return favorite;
+    }
+}
diff --git a/src/main/java/io/polyfrost/oneconfig/gui/elements/SearchField.java b/src/main/java/io/polyfrost/oneconfig/gui/elements/SearchField.java
new file mode 100644
index 0000000..93df1b4
--- /dev/null
+++ b/src/main/java/io/polyfrost/oneconfig/gui/elements/SearchField.java
@@ -0,0 +1,14 @@
+package io.polyfrost.oneconfig.gui.elements;
+
+public class SearchField extends TextInputField{
+
+    public SearchField(int width, int height, String defaultText, boolean multiLine, boolean password) {
+        super(width, height, defaultText, multiLine, password);
+    }
+
+    @Override
+    public void draw(long vg, int x, int y) {
+        super.draw(vg, x, y);
+        // TODO
+    }
+}
diff --git a/src/main/java/io/polyfrost/oneconfig/gui/pages/HomePage.java b/src/main/java/io/polyfrost/oneconfig/gui/pages/HomePage.java
new file mode 100644
index 0000000..d38f565
--- /dev/null
+++ b/src/main/java/io/polyfrost/oneconfig/gui/pages/HomePage.java
@@ -0,0 +1,21 @@
+package io.polyfrost.oneconfig.gui.pages;
+
+import io.polyfrost.oneconfig.config.OneConfigConfig;
+import io.polyfrost.oneconfig.gui.elements.BasicButton;
+import io.polyfrost.oneconfig.lwjgl.RenderManager;
+import io.polyfrost.oneconfig.lwjgl.font.Fonts;
+
+public class HomePage extends Page {
+    private final BasicButton btn = new BasicButton(184, 36, "Socials", "/assets/oneconfig/textures/share.png", "/assets/oneconfig/textures/share2.png", 1, BasicButton.ALIGNMENT_CENTER);
+    public HomePage() {
+        super("Home Dashboard");
+    }
+
+    public void draw(long vg, int x, int y) {
+        RenderManager.drawRoundedRect(vg, x, y, 184, 36, -1, 12f);
+        RenderManager.drawString(vg, "This is a cool string to test pages", x + 32, y + 72, -1, 36f, Fonts.INTER_BOLD);
+        RenderManager.drawRoundedRect(vg, x + 350, y + 310, 300, 200, OneConfigConfig.BLUE_600, 14f);
+        //RenderManager.drawRoundedRect(vg);
+        btn.draw(vg, x + 432, y + 658);
+    }
+}
diff --git a/src/main/java/io/polyfrost/oneconfig/gui/pages/ModsPage.java b/src/main/java/io/polyfrost/oneconfig/gui/pages/ModsPage.java
new file mode 100644
index 0000000..856b2f3
--- /dev/null
+++ b/src/main/java/io/polyfrost/oneconfig/gui/pages/ModsPage.java
@@ -0,0 +1,52 @@
+package io.polyfrost.oneconfig.gui.pages;
+
+import io.polyfrost.oneconfig.OneConfig;
+import io.polyfrost.oneconfig.config.data.ModData;
+import io.polyfrost.oneconfig.gui.elements.BasicButton;
+import io.polyfrost.oneconfig.gui.elements.ModCard;
+
+import java.util.ArrayList;
+import java.util.List;
+
+public class ModsPage extends Page {
+    private final BasicButton allBtn = new BasicButton(49, 40, "All", null, null, 0, BasicButton.ALIGNMENT_CENTER, true);
+    private final BasicButton newBtn = new BasicButton(64, 40, "New", null, null, 0, BasicButton.ALIGNMENT_CENTER, true);
+    private final BasicButton combatBtn = new BasicButton(104, 40, "Combat", null, null, 0, BasicButton.ALIGNMENT_CENTER, true);
+    private final BasicButton hudBtn = new BasicButton(104, 40, "HUD & QoL", null, null, 0, BasicButton.ALIGNMENT_CENTER, true);
+    private final BasicButton hypixelBtn = new BasicButton(104, 40, "Hypixel", null, null, 0, BasicButton.ALIGNMENT_CENTER, true);
+    private final BasicButton skyblockBtn = new BasicButton(104, 40, "Skyblock", null, null, 0, BasicButton.ALIGNMENT_CENTER, true);
+    private final BasicButton utilBtn = new BasicButton(104, 40, "Utility", null, null, 0, BasicButton.ALIGNMENT_CENTER, true);
+    private final BasicButton customBtn = new BasicButton(104, 40, "Custom", null, null, 0, BasicButton.ALIGNMENT_CENTER, true);
+
+    private final List<ModCard> modCards = new ArrayList<>();
+
+    public ModsPage() {
+        super("Mods");
+        for(ModData modData : OneConfig.loadedMods) {
+            modCards.add(new ModCard(modData, null, true, false, false));
+        }
+    }
+
+    public void draw(long vg, int x, int y) {
+        allBtn.draw(vg, x + 16, y + 16);
+        newBtn.draw(vg, x + 92, y + 16);
+        combatBtn.draw(vg, x + 168, y + 16);
+        hudBtn.draw(vg, x + 284, y + 16);
+        hypixelBtn.draw(vg, x + 400, y + 16);
+        skyblockBtn.draw(vg, x + 516, y + 16);
+        utilBtn.draw(vg, x + 632, y + 16);
+        customBtn.draw(vg, x + 748, y + 16);
+
+        int iX = x + 16;
+        int iY = y + 72;
+        for(ModCard modCard : modCards) {
+            modCard.draw(vg, iX, iY);
+            iX += 260;
+            if(iX > x + 796) {
+                iX = x + 16;
+                iY += 135;
+            }
+        }
+
+    }
+}
diff --git a/src/main/java/io/polyfrost/oneconfig/gui/pages/Page.java b/src/main/java/io/polyfrost/oneconfig/gui/pages/Page.java
index 72fa3a3..492a1f9 100644
--- a/src/main/java/io/polyfrost/oneconfig/gui/pages/Page.java
+++ b/src/main/java/io/polyfrost/oneconfig/gui/pages/Page.java
@@ -1,4 +1,23 @@
 package io.polyfrost.oneconfig.gui.pages;
 
+import io.polyfrost.oneconfig.lwjgl.RenderManager;
+import io.polyfrost.oneconfig.lwjgl.font.Fonts;
+
+/**
+ * A page is a 1056x728 rectangle of the GUI. It is the main content of the gui, and can be switched back and forwards easily. All the content of OneConfig is in a page.
+ */
 public class Page {
+    protected final String title;
+
+    Page(String title) {
+        this.title = title;
+    }
+
+    public void draw(long vg, int x, int y) {
+        RenderManager.drawString(vg, "If you are seeing this, something went quite wrong.", x + 12, y + 12, -1, 24f, Fonts.INTER_BOLD);
+    }
+
+    public String getTitle() {
+        return title;
+    }
 }