Skip to content

Rakllan/Shoutout

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Apache License

This project is licensed under the Apache 2.0 License

Shoutout Creator

This web application helps you create visually appealing shoutout codes for sharing your fiction on Royal Road.

Features

  • Fetches Data: Automatically retrieves title, description, and cover image from a provided URL (likely a Royal Road fiction URL for now).
  • Customizable: Allows you to edit the fetched information and adjust:
    • Background, text and title colors.
    • Content and title fonts (from a selection of Google Fonts).
    • Image placement (top, bottom, left, right).
    • Text alignment (left, center, right).
  • Preview: Shows a live preview of the generated shoutout, both for desktop and mobile views.(Which is bad)
  • Copy to Clipboard: Provides a button to copy the generated HTML code to your clipboard.
  • Loading indicator: To shows users system is not hanged.(will change this)
  • Alert: Used alert for showing status
  • Ripple Effect: Adds a ripple effect on button clicks for visual feedback.

Technologies Used

  • HTML
  • CSS
  • JavaScript

How to Use (Basic)

  1. Open the index.html file in a web browser.
  2. Enter the URL of your fiction in the "Enter Fiction URL" input field.
  3. Click "Fetch Data".
  4. Customize the appearance using the color pickers, font selectors, and placement/alignment buttons.
  5. Click "Copy to Clipboard" to copy the HTML code.
  6. Preview based on the required sizes by pressing "Desktop" or "Mobile" buttons
  7. Send the code to other's or you can use it yourselves.

I plan to keep this project updated, although it is not yet fully efficient. It is heavily inspired by finitevoid's shoutout creator. I will continue to update it for a while.

🚀If you find this project helpful, please consider giving it a star on GitHub✨ and contributing to its development. Your support and contributions are greatly appreciated!💪

Releases

No releases published

Packages

No packages published

Languages

  • HTML 100.0%