Added donation button, github button and temporary favicon. also added
modal for more information.
This commit is contained in:
parent
8bafed95d1
commit
8390bad5dd
3 changed files with 235 additions and 14 deletions
BIN
Assets/smily.png
Normal file
BIN
Assets/smily.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
65
index.html
65
index.html
|
|
@ -3,17 +3,44 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>FumbleUpon</title>
|
<title>FumbleAround</title>
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
<link rel="icon" type="image/png" href="./Assets/smily.png">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<div class="logo">FumbleUpon</div>
|
<div class="logo">
|
||||||
|
<img src="./Assets/smily.png" alt="FumbleAround Logo" class="logo-icon">
|
||||||
|
FumbleAround
|
||||||
|
</div>
|
||||||
<div class="header-buttons">
|
<div class="header-buttons">
|
||||||
<button id="darkModeToggle">🌙</button>
|
<div class="social-buttons">
|
||||||
<button id="fumbleButton">Fumble!</button>
|
<button id="helpButton">❓</button>
|
||||||
|
<button id="donateButton">💝</button>
|
||||||
|
<button id="githubButton">
|
||||||
|
<svg viewBox="0 0 24 24" width="24" height="24">
|
||||||
|
<path fill="currentColor" d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="app-controls">
|
||||||
|
<div class="theme-toggle">
|
||||||
|
<button id="darkModeToggle">🌙</button>
|
||||||
|
</div>
|
||||||
|
<button id="fumbleButton">Fumble!</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<div id="helpModal" class="modal">
|
||||||
|
<div class="modal-content">
|
||||||
|
<span class="close-button">×</span>
|
||||||
|
<h2>Disclaimer</h2>
|
||||||
|
<p>FumbleAround uses Wiby.me's search engine to provide random web pages. We are not responsible for the content that appears. Use at your own discretion.</p>
|
||||||
|
<p>This project is a homage to the classic StumbleUpon, reimagined for the modern web.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<iframe id="contentFrame" src="about:blank" title="Content"></iframe>
|
<iframe id="contentFrame" src="about:blank" title="Content"></iframe>
|
||||||
</main>
|
</main>
|
||||||
|
|
@ -41,6 +68,36 @@
|
||||||
darkModeToggle.textContent = isDark ? '☀️' : '🌙';
|
darkModeToggle.textContent = isDark ? '☀️' : '🌙';
|
||||||
localStorage.setItem('darkMode', isDark);
|
localStorage.setItem('darkMode', isDark);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Add GitHub button click handler
|
||||||
|
document.getElementById('githubButton').addEventListener('click', () => {
|
||||||
|
window.open('https://git.mauix.bio/michael/FumbleAround', '_blank');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add donate button click handler
|
||||||
|
document.getElementById('donateButton').addEventListener('click', () => {
|
||||||
|
window.open('https://wiby.me/donate/', '_blank');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add help button click handler
|
||||||
|
const modal = document.getElementById('helpModal');
|
||||||
|
const helpButton = document.getElementById('helpButton');
|
||||||
|
const closeButton = document.querySelector('.close-button');
|
||||||
|
|
||||||
|
helpButton.addEventListener('click', () => {
|
||||||
|
modal.classList.add('show');
|
||||||
|
});
|
||||||
|
|
||||||
|
closeButton.addEventListener('click', () => {
|
||||||
|
modal.classList.remove('show');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close modal when clicking outside
|
||||||
|
window.addEventListener('click', (event) => {
|
||||||
|
if (event.target === modal) {
|
||||||
|
modal.classList.remove('show');
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
184
styles.css
184
styles.css
|
|
@ -27,6 +27,53 @@ header {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #ff4500;
|
color: #ff4500;
|
||||||
transition: color 0.3s ease;
|
transition: color 0.3s ease;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 2rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-controls {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: #f0f0f0;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 25px;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode .app-controls {
|
||||||
|
background: #2a2a2a;
|
||||||
|
}
|
||||||
|
|
||||||
|
#darkModeToggle {
|
||||||
|
padding: 8px;
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
font-size: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: transform 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
#fumbleButton {
|
#fumbleButton {
|
||||||
|
|
@ -34,7 +81,7 @@ header {
|
||||||
background-color: #ff4500;
|
background-color: #ff4500;
|
||||||
color: white;
|
color: white;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 25px;
|
border-radius: 20px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -64,17 +111,10 @@ main {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-buttons {
|
#githubButton {
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#darkModeToggle {
|
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
font-size: 20px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -83,10 +123,67 @@ main {
|
||||||
transition: transform 0.2s;
|
transition: transform 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
#darkModeToggle:hover {
|
#githubButton svg {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
color: #333;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode #githubButton svg {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
#githubButton:hover {
|
||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#githubButton:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
#donateButton {
|
||||||
|
padding: 8px;
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#donateButton:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
#donateButton:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
#helpButton {
|
||||||
|
padding: 8px;
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#helpButton:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
#helpButton:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
/* Dark mode styles - simplified to only affect header */
|
/* Dark mode styles - simplified to only affect header */
|
||||||
.dark-mode header {
|
.dark-mode header {
|
||||||
background-color: #1a1a1a;
|
background-color: #1a1a1a;
|
||||||
|
|
@ -119,4 +216,71 @@ body {
|
||||||
/* Remove these styles */
|
/* Remove these styles */
|
||||||
/* background-color: #1a1a1a; */
|
/* background-color: #1a1a1a; */
|
||||||
/* color: #ffffff; */
|
/* color: #ffffff; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
z-index: 2000;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background-color: #fff;
|
||||||
|
margin: -500px auto 0;
|
||||||
|
padding: 20px;
|
||||||
|
width: 80%;
|
||||||
|
max-width: 500px;
|
||||||
|
border-radius: 8px;
|
||||||
|
position: relative;
|
||||||
|
transition: margin 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
|
transform: perspective(1000px) rotateX(5deg);
|
||||||
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode .modal-content {
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal.show {
|
||||||
|
display: block;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal.show .modal-content {
|
||||||
|
margin-top: 100px;
|
||||||
|
transform: perspective(1000px) rotateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-button {
|
||||||
|
position: absolute;
|
||||||
|
right: 20px;
|
||||||
|
top: 10px;
|
||||||
|
font-size: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode .close-button {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content h2 {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
color: #ff4500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode .modal-content h2 {
|
||||||
|
color: #ff6b4a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content p {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue