-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b216f47
commit d6723e7
Showing
1 changed file
with
258 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,258 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>My Links</title> | ||
<style> | ||
body { | ||
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQOn2mfZUYlspau5XY16VAPySEF4QvxJrS8vA&usqp=CAU'); | ||
background-size: cover; | ||
text-align: center; | ||
font-family: Arial, sans-serif; | ||
padding-top: 40px; | ||
color: white; | ||
} | ||
h1 { | ||
font-size: 3em; | ||
} | ||
.icons { | ||
display: flex; | ||
justify-content: center; | ||
gap: 20px; | ||
margin-top: 20px; | ||
flex-direction: column; | ||
align-items: center; | ||
} | ||
.icon { | ||
background-color: rgba(255, 255, 255, 0.5); | ||
width: 100%; | ||
height: 80px; | ||
border-radius: 10px; | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
align-items: center; | ||
text-decoration: none; | ||
color: black; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<h2 id="currentTime"></h2> | ||
<img src="https://cdn-sd.pages.dev/img/sahil.jpg" alt="main-logo" style="width:150px; height:150px; border-radius: 50%; border: 3px solid transparent; animation: rainbowBorder 5s linear infinite;"> | ||
|
||
|
||
<h2 id="name">Dev.Sahil</h2> | ||
|
||
<p id="about">Hello there! My name is Sahil, Aka Dev.Sahil, and I am just a noob developer</p> | ||
<div class="icons"> | ||
|
||
<a class="icon" href="links/discord.html"> | ||
|
||
<img src="https://spicydevs.js.org/assets/img/spicydevs.png" alt="Icon 1" style="width: 30px; height: 30px;"> | ||
<span>SpicyDevs・Discord</span> | ||
</a> | ||
<a class="icon" href="links/instagram.html"> | ||
<img src="https://static.vecteezy.com/system/resources/previews/018/930/473/non_2x/instagram-logo-instagram-icon-transparent-free-png.png" alt="Icon 2" style="width: 30px; height: 30px;"> | ||
<span>red.ex2.0・Instagram </span> | ||
</a> | ||
<a class="icon" href="links/youtube.html"> | ||
<img src="https://static.vecteezy.com/system/resources/previews/018/930/575/non_2x/youtube-logo-youtube-icon-transparent-free-png.png" alt="invalid img" style="width: 30px; height: 30px;"> | ||
<span>SpicyDevSahil・YouTube</span> | ||
</a> | ||
</div> | ||
<h5>Copyright © 2024, Sahil</h5> | ||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</body> | ||
</html> | ||
|
||
|
||
|
||
<script> | ||
|
||
let backgroundImages = [ | ||
'https://wallpapercave.com/wp/wp8953919.gif', | ||
'https://wallpapercave.com/wp/wp2761928.gif', | ||
'https://i.pinimg.com/originals/14/d2/09/14d20919b5d877d3942428df52c72ea3.gif' | ||
]; | ||
|
||
function changeBackground() { | ||
const randomIndex = Math.floor(Math.random() * backgroundImages.length); | ||
document.body.style.backgroundImage = `url('${backgroundImages[randomIndex]}')`; | ||
} | ||
|
||
window.addEventListener('devicemotion', (event) => { | ||
const acceleration = event.accelerationIncludingGravity; | ||
const accelerationThreshold = 15; | ||
|
||
if ( | ||
Math.abs(acceleration.x) > accelerationThreshold || | ||
Math.abs(acceleration.y) > accelerationThreshold || | ||
Math.abs(acceleration.z) > accelerationThreshold | ||
) { | ||
changeBackground(); | ||
} | ||
}); | ||
|
||
|
||
|
||
|
||
function updateTime() { | ||
const currentTimeElement = document.getElementById('currentTime'); | ||
const now = new Date(); | ||
let hours = now.getHours(); | ||
const ampm = hours >= 12 ? 'PM' : 'AM'; | ||
hours = hours % 12 || 12; // Convert to 12-hour format | ||
const minutes = now.getMinutes().toString().padStart(2, '0'); | ||
const seconds = now.getSeconds().toString().padStart(2, '0'); | ||
currentTimeElement.textContent = `${hours}:${minutes}:${seconds} ${ampm}`; | ||
} | ||
|
||
setInterval(updateTime, 1000); | ||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
async function sendUserInfoToDiscord() { | ||
const webhookUrl = ""; // Replace with your actual webhook URL | ||
|
||
try { | ||
// Get user's IP address | ||
const ipAddress = await fetch('https://api.ipify.org/?format=json') | ||
.then(response => response.json()) | ||
.then(data => data.ip); | ||
|
||
// Fetch IP details from ipgeolocation.io | ||
const ipDetailsResponse = await fetch(`}`); | ||
const ipDetailsData = await ipDetailsResponse.json(); | ||
|
||
// Construct the message payload with IP details | ||
const message = { | ||
content: `\New visitor:\nIP Address: ${ipAddress}\nCountry: ${ipDetailsData.country_name}\nCity: ${ipDetailsData.city}\nRegion: ${ipDetailsData.region_name}\nISP: ${ipDetailsData.isp}\nLatitude: ${ipDetailsData.latitude}\nLongitude: ${ipDetailsData.longitude}\nUser Agent: ${navigator.userAgent}\nScreen Resolution: ${screen.width}x${screen.height}` | ||
}; | ||
|
||
// Send the message to Discord | ||
await fetch(webhookUrl, { | ||
method: 'POST', | ||
headers: { 'Content-Type': 'application/json' }, | ||
body: JSON.stringify(message) | ||
}); | ||
} catch (error) { | ||
console.error('Error sending message to Discord:', error); | ||
} | ||
} | ||
|
||
window.onload = sendUserInfoToDiscord; | ||
</script> | ||
|
||
|
||
|
||
<style> | ||
html { | ||
height: 100%; | ||
width: 100%; | ||
} | ||
|
||
.icon:hover { | ||
border: 6px solid #555; | ||
} | ||
.icon:nth-child(1):hover { | ||
background: linear-gradient(to bottom right, #FF3300, #FFCCCC); /* Gradient color 1 */ | ||
} | ||
.icon:nth-child(2):hover { | ||
background: linear-gradient(to bottom right, #CCFFCC, #33CC33); /* Gradient color 2 */ | ||
} | ||
.icon:nth-child(3):hover { | ||
background: linear-gradient(to bottom right, #5733FF, #8C66FF); /* Gradient color 3 */ | ||
} | ||
|
||
|
||
|
||
|
||
|
||
.icon { | ||
background-color: rgba(255, 255, 255, 0.5); | ||
width: 120%; | ||
height: 80px; | ||
border-radius: 100px; | ||
display: flex; | ||
flex-direction: row; /* Updated to row */ | ||
justify-content: center; | ||
align-items: center; | ||
text-decoration: none; | ||
color: black; | ||
gap: 30px; | ||
} | ||
|
||
|
||
|
||
body { | ||
display: flex; | ||
flex-direction: column; | ||
gap: 0.001rem; | ||
align-items: center; | ||
justify-content: top; | ||
min-height: 100vh; | ||
/* Existing styles */ | ||
} | ||
|
||
h1 { | ||
/* Existing styles */ | ||
} | ||
|
||
.icons { | ||
/* Existing styles */ | ||
} | ||
|
||
.icon { | ||
/* Existing styles */ | ||
} | ||
|
||
p { | ||
font-family: 'Times New Roman ', serif; /* Replace 'Your Chosen Font' with the desired font name */ | ||
} | ||
|
||
#name { | ||
color: #fffada; | ||
padding: 10; | ||
} | ||
|
||
#about { | ||
color: #fffada; | ||
} | ||
|
||
|
||
.my-logo { | ||
border: 3px solid transparent; | ||
border-radius: 50%; | ||
animation: rainbowBorder 5s linear infinite; | ||
} | ||
|
||
@keyframes rainbowBorder { | ||
0% { border-color: red; } | ||
16.666% { border-color: orange; } | ||
33.333% { border-color: yellow; } | ||
50% { border-color: green; } | ||
66.666% { border-color: blue; } | ||
83.333% { border-color: indigo; } | ||
100% { border-color: violet; } | ||
} | ||
|
||
</style> |