https://github.com/boss294/modern-ip-address-tracker

Detailed information on how to find the IP address. Provides usage scenarios for an IP address. Styled with a semi-transparent background and centered content. Close button to dismiss the popup. Buttons:
https://github.com/boss294/modern-ip-address-tracker

ip-tracker

Last synced: 2 months ago
JSON representation

Detailed information on how to find the IP address. Provides usage scenarios for an IP address. Styled with a semi-transparent background and centered content. Close button to dismiss the popup. Buttons:

• Host: GitHub
• URL: https://github.com/boss294/modern-ip-address-tracker
• Owner: BOSS294
• License: mit
• Created: 2024-07-19T14:05:51.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-07-19T14:44:32.000Z (almost 2 years ago)
• Last Synced: 2026-01-01T20:20:04.250Z (6 months ago)
• Topics: ip-tracker
• Language: HTML
• Homepage:
• Size: 127 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Modern-IP-Address-Tracker

![image](https://github.com/user-attachments/assets/d840e7d1-abd5-4735-9643-66b3287e0c67)

Features

Background Image:

Full-screen background image with background-size: cover to ensure it covers the entire viewport.

IP Address Retrieval:

Uses the fetch API to get the public IP address from https://api.ipify.org?format=json.

Displays the IP address in a SweetAlert popup.

Option to copy the IP address to the clipboard with success/error notifications.

Popup:

Detailed information on how to find the IP address.

Provides usage scenarios for an IP address.

Styled with a semi-transparent background and centered content.

Close button to dismiss the popup.

Buttons:

Two buttons: "Get IP Address" and "How to Get Your IP".

Styled with a modern look, including border-radius, hover effects, and color transitions.

Styling:

Body: Flexbox centering with a background image, no margin, and sans-serif font.

Buttons: Transparent background with white border and text, hover effects including background color change and slight elevation.

Popup: Centered on screen, semi-transparent dark background, white content box with rounded corners, shadow effects.

Popup Content: Text is styled for readability, icons used for visual enhancement.

Icons:

Material Icons from Google Fonts used for visual elements in the popup (info, check_circle).

Responsiveness:

Popup and buttons are designed to be responsive and adapt to different screen sizes.

Error Handling:

SweetAlert is used to handle and display errors if the IP retrieval fails or if the clipboard copy operation fails.