/Fused-Startpage

Hackable startpage based on a bunch of other startpges

Primary LanguageHTMLThe UnlicenseUnlicense

image

GitHub repo size GitHub Repo stars

📇 Index

ℹ️ About

🚽 Hackable startpage built using only vanilla HTML, CSS, and Javascript
💛 Star or share this repo if you like this project 🤩

🌟 Features

  • 🖼️ An image that does nothing except to display your anime waifus or the shrek full movie gif
  • 🍫 Searchbar using google
  • ⏰ Greeter that greets you good morning and etc.
  • ☁️ Weather API using openweathermap.org
  • 🍮 Bookmark icons to your favorite sites (Youtube, Reddit, etc.)

📷 Screenshot(s)

image

Catppuccin logo from github.com/catppuccin/catppuccin

image

🧰 Configuration & Customization

⚙️ Configuration:

// JSON CONFIG

const config = {
  "name": "uwu nyaaa >//< ", //Your name which will be used to greet you 
  "weather": [
    {
      "API_KEY": "q48tggq389g7b_yourApiKey", //Get one from openweathermap.org
      "City_Name": "London",          // get your city's latitude and longitude on https://openweathermap.org/find
      "latitude": "51.5085",   // Your City's latitude
      "longitude": "0.1257"    // Your City's longitude
    }
  ]
}

// Actual normal javascript

🖌️ Customization:

/* _____________COLOR CUSTOMIZATION____________________ */
:root {
  --background-color: #181926;
  --card-background-color: #1e2030;
  --font-color: #cad3f5;
  --font-color2: #ffff;
  --links: silver; 
  --links-hover: navajowhite;
  --searchbar-border: #1d1f2e;
  --searchbar-focus: #3e3e3e;
  
  /* Bookmark links */
  --bookmark-icons: #535373;
  --link1: red; /* Youtube */
  --link2: orangered; /* Reddit */
  --link3: deepskyblue; /* Facebook */
  --link4: indianred; /* Revolt */
  --link5: whitesmoke; /*Github */
}
/* _______________END OF COLORS_____________________________*/

🔗 You have to edit index.html in order to add/remove/edit links.

<!-- Card 1 links -->
              
<!-- <a class="something" href="https://yourlink.com">Your link title</a> -->
             
<a class="something" href="https://spotify.com">Spotify</a> 
<a class="something" href="https://music.youtube.com">YT Music</a>
<a class="something" href="https://reddit.com/r/unixporn">r/unixprn</a>
<!------------------->

Usage

  • Firefox:
    • Clone or download this repo
    • Host this using XAMPP, MAMPP or whatever as long as it uses http:// or https://
    • Use New Tab Overrider Plugin
      Or:
    • edit mozilla.cfg or something

💿 Live Demo

You try out this startpage here

Note: The weather API does not display the real weather in the live demo as you need an api key for it to work.

🛣️ Roadmap

  • use local storage thing to store api key so it can be used as a github pages site
  • a separate file for configs
  • themes and easier customizability of colors
  • easier customizability of links
  • make it more responsive