-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
136 lines (131 loc) · 7.74 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wisdom Whisper - Modern Advice App</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
neon: {
50: '#F0FDF4',
100: '#DCFCE7',
200: '#BBF7D0',
300: '#86EFAC',
400: '#4ADE80',
500: '#22C55E',
600: '#16A34A',
700: '#15803D',
800: '#166534',
900: '#14532D',
},
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
},
},
};
function toggleTheme() {
const htmlElement = document.documentElement;
htmlElement.classList.toggle('dark');
if (htmlElement.classList.contains('dark')) {
localStorage.setItem('theme', 'dark');
} else {
localStorage.setItem('theme', 'light');
}
}
document.addEventListener('DOMContentLoaded', () => {
const currentTheme = localStorage.getItem('theme');
if (currentTheme === 'dark') {
document.documentElement.classList.add('dark');
}
});
</script>
<style>
body {
font-weight: 500;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.float { animation: float 3s ease-in-out infinite; }
@keyframes glow {
0%, 100% { text-shadow: 0 0 5px rgba(34, 197, 94, 0.5); }
50% { text-shadow: 0 0 20px rgba(34, 197, 94, 0.8); }
}
.glow { animation: glow 2s ease-in-out infinite; }
</style>
</head>
<body class="min-h-screen flex flex-col bg-slate-200 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-300">
<nav class="p-4 md:px-6 md:py-4 bg-gray-800 shadow-lg">
<div class="container mx-auto flex flex-wrap justify-between items-center">
<a href="#" class="text-neon-400 text-2xl font-bold glow">WW</a>
<button id="mobile-menu-button" class="md:hidden text-gray-300 hover:text-white">
<i class="fas fa-bars"></i>
</button>
<div id="menu" class="hidden md:flex w-full md:w-auto mt-4 md:mt-0">
<a href="#" class="block md:inline-block mt-4 md:mt-0 md:ml-6 text-gray-300 hover:text-neon-400 transition">Home</a>
<a href="#" class="block md:inline-block mt-4 md:mt-0 md:ml-6 text-gray-300 hover:text-neon-400 transition">Categories</a>
<a href="#" class="block md:inline-block mt-4 md:mt-0 md:ml-6 text-gray-300 hover:text-neon-400 transition">Favorites</a>
<a href="#" class="block md:inline-block mt-4 md:mt-0 md:ml-6 text-gray-300 hover:text-neon-400 transition">About</a>
</div>
</div>
</nav>
<main class="flex-grow flex items-center justify-center p-4 md:p-6">
<div class="max-w-2xl w-full">
<h1 class="text-3xl md:text-6xl text-gray-900 font-bold mb-8 text-center leading-wide dark:text-slate-100">
Wisdom<span class="text-neon-400 glow "> Whisper</span>
</h1>
<div id="advice" class="mb-8 p-6 md:p-8 bg-gray-800 rounded-3xl shadow-lg min-h-[200px] flex flex-col items-center justify-center relative overflow-hidden group">
<div class="absolute top-2 right-2 flex space-x-2">
<button onclick="favoriteAdvice()" class="text-gray-400 hover:text-neon-400 transition">
<i class="far fa-heart text-xl"></i>
</button>
<button onclick="copyAdvice()" class="text-gray-400 hover:text-neon-400 transition">
<i class="far fa-copy text-xl"></i>
</button>
</div>
<p id="advice-text" class="text-xl md:text-2xl text-gray-200 font-light leading-relaxed text-center mb-4">Tap below for a spark of insight...</p>
<p id="advice-author" class="text-neon-400 font-medium"></p>
</div>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4 mb-8">
<button onclick="getAdvice()" class="bg-neon-500 text-white font-semibold py-3 px-8 rounded-full transition duration-300 ease-in-out hover:bg-neon-600 focus:outline-none focus:ring-2 focus:ring-neon-400 focus:ring-opacity-50 flex items-center justify-center shadow-md hover:shadow-lg">
<i class="fas fa-lightbulb mr-2"></i> Inspire Me
</button>
<button onclick="shareAdvice()" class="bg-gray-700 text-neon-400 font-semibold py-3 px-8 rounded-full transition duration-300 ease-in-out hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-neon-400 focus:ring-opacity-50 flex items-center justify-center border border-neon-500 shadow-md hover:shadow-lg">
<i class="fas fa-share-alt mr-2"></i> Share Wisdom
</button>
</div>
<!-- <div class="flex flex-wrap justify-center mb-8 gap-2">
<button onclick="filterAdvice('motivation')" class="px-4 py-2 rounded-full bg-gray-700 text-neon-400 hover:bg-gray-600 transition">Motivation</button>
<button onclick="filterAdvice('success')" class="px-4 py-2 rounded-full bg-gray-700 text-neon-400 hover:bg-gray-600 transition">Success</button>
<button onclick="filterAdvice('happiness')" class="px-4 py-2 rounded-full bg-gray-700 text-neon-400 hover:bg-gray-600 transition">Happiness</button>
<button onclick="filterAdvice('wisdom')" class="px-4 py-2 rounded-full bg-gray-700 text-neon-400 hover:bg-gray-600 transition">Wisdom</button>
</div> -->
<div class="text-center mt-6">
<button onclick="toggleTheme()" class="px-4 py-2 rounded-full bg-gray-700 text-neon-400 hover:bg-gray-600 transition">
<i class="fas fa-adjust mr-2"></i> Toggle Theme
</button>
</div>
</div>
</main>
<footer class="px-6 border-t hover:border-neon-500 border-gray-400 w-full py-3 justify-between text-slate-300 hover:text-gray-200 bg-gray-900 shadow-inner w-full flex">
<p class="mb-0">© 2024 Wisdom Whisper | Crafted with love by <a href="https://instagram.com/zaid_suiii">Zaid Rakhange</a>.</p>
<div class="flex space-x-4">
<a href="#" class="hover:text-neon-400 transition"><i class="fab fa-twitter"></i></a>
<a href="#" class="hover:text-neon-400 transition"><i class="fab fa-instagram"></i></a>
<a href="#" class="hover:text-neon-400 transition"><i class="fab fa-facebook"></i></a>
</div>
</footer>
</body>
<script src="app.js"></script>
</html>