|
|
<!DOCTYPE html> |
|
|
<html lang="en" class="scroll-smooth"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Modern Portfolio Hub | Digital Identity</title> |
|
|
<meta name="description" content="Premium digital identity hub with AI automation and prompt gallery"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<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: { |
|
|
primary: { |
|
|
50: '#f0f9ff', |
|
|
100: '#e0f2fe', |
|
|
200: '#bae6fd', |
|
|
300: '#7dd3fc', |
|
|
400: '#38bdf8', |
|
|
500: '#0ea5e9', |
|
|
600: '#0284c7', |
|
|
700: '#0369a1', |
|
|
800: '#075985', |
|
|
900: '#0c4a6e', |
|
|
}, |
|
|
secondary: { |
|
|
50: '#f5f3ff', |
|
|
100: '#ede9fe', |
|
|
200: '#ddd6fe', |
|
|
300: '#c4b5fd', |
|
|
400: '#a78bfa', |
|
|
500: '#8b5cf6', |
|
|
600: '#7c3aed', |
|
|
700: '#6d28d9', |
|
|
800: '#5b21b6', |
|
|
900: '#4c1d95', |
|
|
}, |
|
|
accent: { |
|
|
50: '#ecfdf5', |
|
|
100: '#d1fae5', |
|
|
200: '#a7f3d0', |
|
|
300: '#6ee7b7', |
|
|
400: '#34d399', |
|
|
500: '#10b981', |
|
|
600: '#059669', |
|
|
700: '#047857', |
|
|
800: '#065f46', |
|
|
900: '#064e3b', |
|
|
} |
|
|
}, |
|
|
animation: { |
|
|
'gradient-x': 'gradient-x 15s ease infinite', |
|
|
'gradient-y': 'gradient-y 15s ease infinite', |
|
|
'gradient-xy': 'gradient-xy 15s ease infinite', |
|
|
'float': 'float 6s ease-in-out infinite', |
|
|
'blob': 'blob 7s infinite', |
|
|
'pulse-slow': 'pulse 5s infinite', |
|
|
'wave': 'wave 2s ease-in-out infinite', |
|
|
}, |
|
|
keyframes: { |
|
|
'gradient-x': { |
|
|
'0%, 100%': { |
|
|
'background-size': '200% 200%', |
|
|
'background-position': 'left center' |
|
|
}, |
|
|
'50%': { |
|
|
'background-size': '200% 200%', |
|
|
'background-position': 'right center' |
|
|
} |
|
|
}, |
|
|
'gradient-y': { |
|
|
'0%, 100%': { |
|
|
'background-size': '400% 400%', |
|
|
'background-position': 'center top' |
|
|
}, |
|
|
'50%': { |
|
|
'background-size': '200% 200%', |
|
|
'background-position': 'center bottom' |
|
|
} |
|
|
}, |
|
|
'gradient-xy': { |
|
|
'0%, 100%': { |
|
|
'background-size': '400% 400%', |
|
|
'background-position': 'left center' |
|
|
}, |
|
|
'50%': { |
|
|
'background-size': '200% 200%', |
|
|
'background-position': 'right center' |
|
|
} |
|
|
}, |
|
|
'float': { |
|
|
'0%, 100%': { transform: 'translateY(0)' }, |
|
|
'50%': { transform: 'translateY(-10px)' } |
|
|
}, |
|
|
'blob': { |
|
|
'0%': { transform: 'translate(0px, 0px) scale(1)' }, |
|
|
'33%': { transform: 'translate(30px, -50px) scale(1.1)' }, |
|
|
'66%': { transform: 'translate(-20px, 20px) scale(0.9)' }, |
|
|
'100%': { transform: 'translate(0px, 0px) scale(1)' } |
|
|
}, |
|
|
'wave': { |
|
|
'0%, 100%': { transform: 'rotate(0deg)' }, |
|
|
'25%': { transform: 'rotate(5deg)' }, |
|
|
'75%': { transform: 'rotate(-5deg)' } |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
transition: background-color 0.3s ease; |
|
|
} |
|
|
|
|
|
.title-font { |
|
|
font-family: 'Space Grotesk', sans-serif; |
|
|
} |
|
|
|
|
|
.profile-pic { |
|
|
width: 160px; |
|
|
height: 160px; |
|
|
background-position: center; |
|
|
background-size: cover; |
|
|
transition: all 0.5s ease; |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
|
border: 3px solid white; |
|
|
} |
|
|
|
|
|
.profile-pic:hover { |
|
|
transform: rotate(5deg) scale(1.05); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.link-card { |
|
|
transition: all 0.3s ease; |
|
|
transform-origin: center; |
|
|
background-size: 200% 200%; |
|
|
background-image: linear-gradient(135deg, var(--gradient-from), var(--gradient-to)); |
|
|
} |
|
|
|
|
|
.link-card:hover { |
|
|
transform: translateY(-5px) scale(1.02); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.theme-toggle { |
|
|
position: relative; |
|
|
width: 60px; |
|
|
height: 30px; |
|
|
} |
|
|
|
|
|
.theme-toggle input { |
|
|
opacity: 0; |
|
|
width: 0; |
|
|
height: 0; |
|
|
} |
|
|
|
|
|
.slider { |
|
|
position: absolute; |
|
|
cursor: pointer; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background-color: #0c4a6e; |
|
|
transition: .4s; |
|
|
border-radius: 34px; |
|
|
} |
|
|
|
|
|
.slider:before { |
|
|
position: absolute; |
|
|
content: ""; |
|
|
height: 22px; |
|
|
width: 22px; |
|
|
left: 4px; |
|
|
bottom: 4px; |
|
|
background-color: white; |
|
|
transition: .4s; |
|
|
border-radius: 50%; |
|
|
} |
|
|
|
|
|
input:checked + .slider { |
|
|
background-color: #38bdf8; |
|
|
} |
|
|
|
|
|
input:checked + .slider:before { |
|
|
transform: translateX(30px); |
|
|
} |
|
|
|
|
|
.dark .slider { |
|
|
background-color: #1e293b; |
|
|
} |
|
|
|
|
|
.dark input:checked + .slider { |
|
|
background-color: #0ea5e9; |
|
|
} |
|
|
|
|
|
.social-icon { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.social-icon:hover { |
|
|
transform: scale(1.2) translateY(-3px); |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
.theme-icon { |
|
|
transition: transform 0.5s ease; |
|
|
} |
|
|
|
|
|
.animate-spin-slow { |
|
|
animation: spin 2s linear infinite; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); |
|
|
background-size: 400% 400%; |
|
|
animation: gradient 15s ease infinite; |
|
|
} |
|
|
|
|
|
@keyframes gradient { |
|
|
0% { |
|
|
background-position: 0% 50%; |
|
|
} |
|
|
50% { |
|
|
background-position: 100% 50%; |
|
|
} |
|
|
100% { |
|
|
background-position: 0% 50%; |
|
|
} |
|
|
} |
|
|
|
|
|
.blob { |
|
|
position: absolute; |
|
|
width: 500px; |
|
|
height: 500px; |
|
|
background: linear-gradient( |
|
|
180deg, |
|
|
rgba(47, 184, 255, 0.42) 31.77%, |
|
|
#5c9df1 100% |
|
|
); |
|
|
mix-blend-mode: color-dodge; |
|
|
filter: blur(60px); |
|
|
z-index: -1; |
|
|
animation: blob 7s infinite; |
|
|
} |
|
|
|
|
|
.modal { |
|
|
transition: opacity 0.3s ease, transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.modal-enter { |
|
|
opacity: 0; |
|
|
transform: scale(0.9); |
|
|
} |
|
|
|
|
|
.modal-enter-active { |
|
|
opacity: 1; |
|
|
transform: scale(1); |
|
|
} |
|
|
|
|
|
.modal-exit { |
|
|
opacity: 1; |
|
|
transform: scale(1); |
|
|
} |
|
|
|
|
|
.modal-exit-active { |
|
|
opacity: 0; |
|
|
transform: scale(0.9); |
|
|
} |
|
|
|
|
|
.prompt-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.prompt-card:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.copy-btn { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.copy-btn:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.copy-btn:active { |
|
|
transform: scale(0.95); |
|
|
} |
|
|
|
|
|
.tooltip { |
|
|
position: absolute; |
|
|
top: -30px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
background-color: #333; |
|
|
color: white; |
|
|
padding: 4px 8px; |
|
|
border-radius: 4px; |
|
|
font-size: 12px; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.copy-btn:hover .tooltip { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.search-bar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.search-bar:focus { |
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); |
|
|
} |
|
|
|
|
|
.chat-bubble { |
|
|
animation: float 4s ease-in-out infinite; |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.theme-selector { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.theme-selector:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.theme-selector.active { |
|
|
transform: scale(1.1); |
|
|
box-shadow: 0 0 0 2px white, 0 0 0 4px currentColor; |
|
|
} |
|
|
|
|
|
|
|
|
.chatbot-container { |
|
|
position: fixed; |
|
|
bottom: 100px; |
|
|
right: 30px; |
|
|
width: 350px; |
|
|
max-height: 500px; |
|
|
background-color: white; |
|
|
border-radius: 16px; |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
overflow: hidden; |
|
|
transform: translateY(20px); |
|
|
opacity: 0; |
|
|
transition: all 0.3s ease; |
|
|
z-index: 1000; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.chatbot-container.open { |
|
|
transform: translateY(0); |
|
|
opacity: 1; |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.chatbot-header { |
|
|
background-color: #0ea5e9; |
|
|
color: white; |
|
|
padding: 14px 16px; |
|
|
font-weight: 600; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.chatbot-messages { |
|
|
height: 350px; |
|
|
padding: 16px; |
|
|
overflow-y: auto; |
|
|
background-color: #f9fafb; |
|
|
} |
|
|
|
|
|
.message { |
|
|
margin-bottom: 12px; |
|
|
max-width: 80%; |
|
|
padding: 10px 14px; |
|
|
border-radius: 18px; |
|
|
font-size: 14px; |
|
|
line-height: 1.4; |
|
|
} |
|
|
|
|
|
.user-message { |
|
|
background-color: #0ea5e9; |
|
|
color: white; |
|
|
margin-left: auto; |
|
|
border-bottom-right-radius: 4px; |
|
|
} |
|
|
|
|
|
.bot-message { |
|
|
background-color: #e5e7eb; |
|
|
color: #111827; |
|
|
margin-right: auto; |
|
|
border-bottom-left-radius: 4px; |
|
|
} |
|
|
|
|
|
.chatbot-input { |
|
|
display: flex; |
|
|
padding: 12px; |
|
|
border-top: 1px solid #e5e7eb; |
|
|
background-color: white; |
|
|
} |
|
|
|
|
|
.chatbot-input input { |
|
|
flex: 1; |
|
|
padding: 10px 14px; |
|
|
border: 1px solid #e5e7eb; |
|
|
border-radius: 20px; |
|
|
outline: none; |
|
|
font-size: 14px; |
|
|
} |
|
|
|
|
|
.chatbot-input button { |
|
|
margin-left: 8px; |
|
|
background-color: #0ea5e9; |
|
|
color: white; |
|
|
border: none; |
|
|
border-radius: 50%; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.dark .chatbot-container { |
|
|
background-color: #1f2937; |
|
|
} |
|
|
|
|
|
.dark .chatbot-header { |
|
|
background-color: #075985; |
|
|
} |
|
|
|
|
|
.dark .chatbot-messages { |
|
|
background-color: #111827; |
|
|
} |
|
|
|
|
|
.dark .bot-message { |
|
|
background-color: #374151; |
|
|
color: #f3f4f6; |
|
|
} |
|
|
|
|
|
.dark .chatbot-input { |
|
|
border-top-color: #374151; |
|
|
background-color: #1f2937; |
|
|
} |
|
|
|
|
|
.dark .chatbot-input input { |
|
|
background-color: #1f2937; |
|
|
border-color: #374151; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.dark .chatbot-input button { |
|
|
background-color: #075985; |
|
|
} |
|
|
|
|
|
|
|
|
.kynos-gradient { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #ff758c 100%); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
animation: gradient-x 8s ease infinite; |
|
|
background-size: 200% 200%; |
|
|
} |
|
|
|
|
|
.glass-effect { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
backdrop-filter: blur(10px); |
|
|
-webkit-backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.2); |
|
|
} |
|
|
|
|
|
.dark .glass-effect { |
|
|
background: rgba(0, 0, 0, 0.1); |
|
|
border: 1px solid rgba(255, 255, 255, 0.05); |
|
|
} |
|
|
|
|
|
.parallax-layer { |
|
|
transition: transform 0.3s ease-out; |
|
|
} |
|
|
|
|
|
.neon-shadow { |
|
|
box-shadow: 0 0 10px rgba(59, 130, 246, 0.5), 0 0 20px rgba(59, 130, 246, 0.3); |
|
|
} |
|
|
|
|
|
.dark .neon-shadow { |
|
|
box-shadow: 0 0 10px rgba(59, 130, 246, 0.8), 0 0 20px rgba(59, 130, 246, 0.5); |
|
|
} |
|
|
|
|
|
.hover-3d { |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
} |
|
|
|
|
|
.hover-3d:hover { |
|
|
transform: perspective(1000px) rotateX(5deg) rotateY(5deg) translate3d(0, -5px, 0); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.wave-animation { |
|
|
animation: wave 2s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
.particle { |
|
|
position: absolute; |
|
|
border-radius: 50%; |
|
|
pointer-events: none; |
|
|
z-index: -1; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-100 min-h-screen relative overflow-x-hidden"> |
|
|
|
|
|
<div class="blob absolute top-0 -right-40 w-[500px] h-[500px] rounded-full opacity-20 dark:opacity-30"></div> |
|
|
<div class="blob absolute bottom-0 -left-40 w-[500px] h-[500px] rounded-full opacity-20 dark:opacity-30 animation-delay-3000"></div> |
|
|
|
|
|
|
|
|
<div id="particles-js"></div> |
|
|
|
|
|
|
|
|
<div id="chatbotContainer" class="chatbot-container glass-effect"> |
|
|
<div class="chatbot-header"> |
|
|
<span>Kynos AI Assistant</span> |
|
|
<button id="closeChatbot" class="text-white"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="chatbot-messages" id="chatMessages"> |
|
|
<div class="message bot-message"> |
|
|
Hello! I'm Kynos AI. How can I help you today? |
|
|
</div> |
|
|
</div> |
|
|
<div class="chatbot-input"> |
|
|
<input type="text" id="chatInput" placeholder="Type your message..."> |
|
|
<button id="sendMessage"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fixed bottom-6 right-6 z-50"> |
|
|
<div id="chatBubble" class="chat-bubble bg-white dark:bg-gray-800 w-16 h-16 rounded-full flex items-center justify-center cursor-pointer shadow-xl neon-shadow hover-3d"> |
|
|
<i class="fas fa-comment-dots text-2xl text-primary-600 dark:text-primary-400"></i> |
|
|
<span class="absolute top-0 right-0 w-5 h-5 bg-accent-500 rounded-full flex items-center justify-center text-white text-xs font-bold">1</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="container mx-auto px-4 py-8 max-w-4xl relative z-10"> |
|
|
|
|
|
<div class="flex justify-between items-center mb-8"> |
|
|
<div class="flex space-x-2"> |
|
|
<div class="theme-selector w-6 h-6 rounded-full bg-primary-500 cursor-pointer active" data-theme="primary"></div> |
|
|
<div class="theme-selector w-6 h-6 rounded-full bg-secondary-500 cursor-pointer" data-theme="secondary"></div> |
|
|
<div class="theme-selector w-6 h-6 rounded-full bg-accent-500 cursor-pointer" data-theme="accent"></div> |
|
|
</div> |
|
|
|
|
|
<label class="theme-toggle flex items-center cursor-pointer"> |
|
|
<input type="checkbox" id="themeToggle"> |
|
|
<span class="slider relative inline-block"></span> |
|
|
<span class="ml-2 theme-icon" id="themeIcon"> |
|
|
<i class="fas fa-sun text-yellow-400 dark:text-yellow-200"></i> |
|
|
</span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col items-center text-center mb-12"> |
|
|
<div class="profile-pic rounded-full mb-6 flex items-center justify-center text-white animate-float hover-3d" style="background-image: url('https://kynosai.io/wp-content/uploads/2025/05/KTMCD.jpg')"></div> |
|
|
<h1 class="text-4xl font-bold mb-2 title-font">Kay</h1> |
|
|
<h2 class="text-3xl font-semibold mb-2 title-font kynos-gradient">Kynos AI</h2> |
|
|
<p class="text-lg text-gray-500 dark:text-gray-400 max-w-lg">Building intelligent systems and exploring the frontiers of AI.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Search links..." class="search-bar w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-primary-500 glass-effect"> |
|
|
<i class="fas fa-search absolute right-4 top-3.5 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-12"> |
|
|
|
|
|
<a href="#" target="_blank" class="link-card bg-gradient-to-br from-primary-100 to-primary-200 dark:from-primary-900 dark:to-primary-800 p-6 rounded-2xl shadow-lg flex items-center hover:shadow-xl transition-all duration-300 hover-3d" style="--gradient-from: #bae6fd; --gradient-to: #7dd3fc;"> |
|
|
<div class="w-12 h-12 rounded-xl bg-white dark:bg-gray-800 flex items-center justify-center mr-4 shadow-sm"> |
|
|
<i class="fas fa-file-alt text-xl text-primary-600 dark:text-primary-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg">Resume</h3> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">My professional experience</p> |
|
|
</div> |
|
|
<div class="ml-auto"> |
|
|
<i class="fas fa-arrow-right text-gray-500"></i> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="https://kynosai.io" target="_blank" class="link-card bg-gradient-to-br from-secondary-100 to-secondary-200 dark:from-secondary-900 dark:to-secondary-800 p-6 rounded-2xl shadow-lg flex items-center hover:shadow-xl transition-all duration-300 hover-3d" style="--gradient-from: #ddd6fe; --gradient-to: #c4b5fd;"> |
|
|
<div class="w-12 h-12 rounded-xl bg-white dark:bg-gray-800 flex items-center justify-center mr-4 shadow-sm"> |
|
|
<i class="fas fa-globe text-xl text-secondary-600 dark:text-secondary-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg">Website</h3> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">kynosai.io</p> |
|
|
</div> |
|
|
<div class="ml-auto"> |
|
|
<i class="fas fa-arrow-right text-gray-500"></i> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="https://github.com/Kaytech90" target="_blank" class="link-card bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700 p-6 rounded-2xl shadow-lg flex items-center hover:shadow-xl transition-all duration-300 hover-3d" style="--gradient-from: #e5e7eb; --gradient-to: #d1d5db;"> |
|
|
<div class="w-12 h-12 rounded-xl bg-white dark:bg-gray-800 flex items-center justify-center mr-4 shadow-sm"> |
|
|
<i class="fab fa-github text-xl text-gray-700 dark:text-gray-300"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg">GitHub</h3> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">My open-source contributions</p> |
|
|
</div> |
|
|
<div class="ml-auto"> |
|
|
<i class="fas fa-arrow-right text-gray-500"></i> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="http://www.tiktok.com/@kynos.io" target="_blank" class="link-card bg-gradient-to-br from-pink-100 to-pink-200 dark:from-pink-900 dark:to-pink-800 p-6 rounded-2xl shadow-lg flex items-center hover:shadow-xl transition-all duration-300 hover-3d" style="--gradient-from: #fbcfe8; --gradient-to: #f9a8d4;"> |
|
|
<div class="w-12 h-12 rounded-xl bg-white dark:bg-gray-800 flex items-center justify-center mr-4 shadow-sm"> |
|
|
<i class="fab fa-tiktok text-xl text-pink-600 dark:text-pink-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg">TikTok</h3> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">@kynos.io</p> |
|
|
</div> |
|
|
<div class="ml-auto"> |
|
|
<i class="fas fa-arrow-right text-gray-500"></i> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="#" id="aiAutomationBtn" class="link-card bg-gradient-to-br from-accent-100 to-accent-200 dark:from-accent-900 dark:to-accent-800 p-6 rounded-2xl shadow-lg flex items-center hover:shadow-xl transition-all duration-300 hover-3d" style="--gradient-from: #a7f3d0; --gradient-to: #6ee7b7;"> |
|
|
<div class="w-12 h-12 rounded-xl bg-white dark:bg-gray-800 flex items-center justify-center mr-4 shadow-sm"> |
|
|
<i class="fas fa-robot text-xl text-accent-600 dark:text-accent-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg">AI Automation</h3> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">Explore my automation tools</p> |
|
|
</div> |
|
|
<div class="ml-auto"> |
|
|
<i class="fas fa-arrow-right text-gray-500"></i> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="https://huggingface.co/KynosAi" target="_blank" class="link-card bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 p-6 rounded-2xl shadow-lg flex items-center hover:shadow-xl transition-all duration-300 hover-3d" style="--gradient-from: #e9d5ff; --gradient-to: #d8b4fe;"> |
|
|
<div class="w-12 h-12 rounded-xl bg-white dark:bg-gray-800 flex items-center justify-center mr-4 shadow-sm"> |
|
|
<i class="fas fa-brain text-xl text-purple-600 dark:text-purple-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg">Hugging Face</h3> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">My AI models</p> |
|
|
</div> |
|
|
<div class="ml-auto"> |
|
|
<i class="fas fa-arrow-right text-gray-500"></i> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="mailto:[email protected]" class="link-card bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900 dark:to-blue-800 p-6 rounded-2xl shadow-lg flex items-center hover:shadow-xl transition-all duration-300 hover-3d" style="--gradient-from: #bfdbfe; --gradient-to: #93c5fd;"> |
|
|
<div class="w-12 h-12 rounded-xl bg-white dark:bg-gray-800 flex items-center justify-center mr-4 shadow-sm"> |
|
|
<i class="fas fa-envelope text-xl text-blue-600 dark:text-blue-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg">Contact Me</h3> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">[email protected]</p> |
|
|
</div> |
|
|
<div class="ml-auto"> |
|
|
<i class="fas fa-arrow-right text-gray-500"></i> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="#" id="themesBtn" class="link-card bg-gradient-to-br from-yellow-100 to-yellow-200 dark:from-yellow-900 dark:to-yellow-800 p-6 rounded-2xl shadow-lg flex items-center hover:shadow-xl transition-all duration-300 hover-3d" style="--gradient-from: #fef08a; --gradient-to: #fde047;"> |
|
|
<div class="w-12 h-12 rounded-xl bg-white dark:bg-gray-800 flex items-center justify-center mr-4 shadow-sm"> |
|
|
<i class="fas fa-palette text-xl text-yellow-600 dark:text-yellow-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg">Themes</h3> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">Try different styles</p> |
|
|
</div> |
|
|
<div class="ml-auto"> |
|
|
<i class="fas fa-arrow-right text-gray-500"></i> |
|
|
</div> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col items-center text-center border-t border-gray-200 dark:border-gray-700 pt-8"> |
|
|
<div class="flex space-x-4 mb-6"> |
|
|
<a href="https://github.com/Kaytech90" target="_blank" class="social-icon w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center hover:bg-gray-300 dark:hover:bg-gray-600 wave-animation"> |
|
|
<i class="fab fa-github text-gray-700 dark:text-gray-300"></i> |
|
|
</a> |
|
|
<a href="http://www.tiktok.com/@kynos.io" target="_blank" class="social-icon w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center hover:bg-pink-100 dark:hover:bg-pink-900 wave-animation"> |
|
|
<i class="fab fa-tiktok text-gray-700 dark:text-gray-300"></i> |
|
|
</a> |
|
|
<a href="https://huggingface.co/KynosAi" target="_blank" class="social-icon w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center hover:bg-yellow-100 dark:hover:bg-yellow-900 wave-animation"> |
|
|
<i class="fas fa-brain text-gray-700 dark:text-gray-300"></i> |
|
|
</a> |
|
|
<a href="https://kynosai.io" target="_blank" class="social-icon w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center hover:bg-blue-100 dark:hover:bg-blue-900 wave-animation"> |
|
|
<i class="fas fa-globe text-gray-700 dark:text-gray-300"></i> |
|
|
</a> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">© 2023 Kynos AI. All rights reserved.</p> |
|
|
<p class="text-xs text-gray-400 dark:text-gray-500">Visitors: <span id="visitorCount">1,248</span></p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="aiAutomationModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto glass-effect hover-3d"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold">AI Automation Tools</h2> |
|
|
<button id="closeAiModal" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"> |
|
|
<i class="fas fa-times text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-xl"> |
|
|
<h3 class="font-bold text-lg mb-2 flex items-center"> |
|
|
<i class="fas fa-robot text-accent-600 dark:text-accent-400 mr-2"></i> |
|
|
Notion Automation |
|
|
</h3> |
|
|
<p class="text-gray-600 dark:text-gray-300 mb-3">Automated workflows for Notion including content aggregation, database management, and task automation.</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-3 py-1 bg-accent-100 dark:bg-accent-900 text-accent-800 dark:text-accent-200 rounded-full text-sm">Content Aggregation</span> |
|
|
<span class="px-3 py-1 bg-accent-100 dark:bg-accent-900 text-accent-800 dark:text-accent-200 rounded-full text-sm">Database Sync</span> |
|
|
<span class="px-3 py-1 bg-accent-100 dark:bg-accent-900 text-accent-800 dark:text-accent-200 rounded-full text-sm">Task Automation</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-xl"> |
|
|
<h3 class="font-bold text-lg mb-2 flex items-center"> |
|
|
<i class="fas fa-code-branch text-primary-600 dark:text-primary-400 mr-2"></i> |
|
|
GitHub Bots |
|
|
</h3> |
|
|
<p class="text-gray-600 dark:text-gray-300 mb-3">Automated code review, issue management, and CI/CD pipeline enhancements.</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-3 py-1 bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200 rounded-full text-sm">Code Review</span> |
|
|
<span class="px-3 py-1 bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200 rounded-full text-sm">Issue Triage</span> |
|
|
<span class="px-3 py-1 bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200 rounded-full text-sm">CI/CD</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-xl"> |
|
|
<h3 class="font-bold text-lg mb-2 flex items-center"> |
|
|
<i class="fas fa-envelope text-secondary-600 dark:text-secondary-400 mr-2"></i> |
|
|
Email Automation |
|
|
</h3> |
|
|
<p class="text-gray-600 dark:text-gray-300 mb-3">Smart email categorization, automated responses, and follow-up reminders.</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-3 py-1 bg-secondary-100 dark:bg-secondary-900 text-secondary-800 dark:text-secondary-200 rounded-full text-sm">Smart Filtering</span> |
|
|
<span class="px-3 py-1 bg-secondary-100 dark:bg-secondary-900 text-secondary-800 dark:text-secondary-200 rounded-full text-sm">Auto Responses</span> |
|
|
<span class="px-3 py-1 bg-secondary-100 dark:bg-secondary-900 text-secondary-800 dark:text-secondary-200 rounded-full text-sm">Follow-ups</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<h3 class="font-bold text-lg mb-3">Request Custom Automation</h3> |
|
|
<form class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-gray-700 dark:text-gray-300 mb-1">What would you like to automate?</label> |
|
|
<textarea class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 dark:text-gray-300 mb-1">Your email</label> |
|
|
<input type="email" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500"> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-primary-600 hover:bg-primary-700 text-white py-2 px-4 rounded-lg transition duration-300">Submit Request</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="promptGalleryModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto glass-effect hover-3d"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold">Prompt Gallery</h2> |
|
|
<button id="closePromptModal" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"> |
|
|
<i class="fas fa-times text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<button class="px-3 py-1 bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200 rounded-full text-sm hover:bg-primary-200 dark:hover:bg-primary-800">All</button> |
|
|
<button class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-full text-sm hover:bg-gray-200 dark:hover:bg-gray-600">Writing</button> |
|
|
<button class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-full text-sm hover:bg-gray-200 dark:hover:bg-gray-600">Coding</button> |
|
|
<button class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-full text-sm hover:bg-gray-200 dark:hover:bg-gray-600">Design</button> |
|
|
<button class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-full text-sm hover:bg-gray-200 dark:hover:bg-gray-600">Marketing</button> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Search prompts..." class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500"> |
|
|
<i class="fas fa-search absolute right-4 top-2.5 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="prompt-card bg-gray-50 dark:bg-gray-700 p-4 rounded-xl border border-gray-200 dark:border-gray-600"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-bold">Technical Blog Post Generator</h3> |
|
|
<button class="copy-btn relative px-2 py-1 bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200 rounded-lg text-sm"> |
|
|
Copy |
|
|
<span class="tooltip">Copied!</span> |
|
|
</button> |
|
|
</div> |
|
|
<p class="text-gray-600 dark:text-gray-300 text-sm mb-3">"Write a comprehensive technical blog post about [topic] that explains [concept] in simple terms. Include: 1) An engaging introduction with a real-world analogy, 2) Clear explanations with code examples where applicable, 3) Best practices and common pitfalls, 4) A conclusion summarizing key takeaways and next steps for readers."</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-2 py-1 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 rounded-full text-xs">Writing</span> |
|
|
<span class="px-2 py-1 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 rounded-full text-xs">Technical</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="prompt-card bg-gray-50 dark:bg-gray-700 p-4 rounded-xl border border-gray-200 dark:border-gray-600"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-bold">React Component Generator</h3> |
|
|
<button class="copy-btn relative px-2 py-1 bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200 rounded-lg text-sm"> |
|
|
Copy |
|
|
<span class="tooltip">Copied!</span> |
|
|
</button> |
|
|
</div> |
|
|
<p class="text-gray-600 dark:text-gray-300 text-sm mb-3">"Create a React functional component called [ComponentName] that implements [functionality]. The component should: 1) Accept these props: [list props], 2) Use [state management approach] for state, 3) Include TypeScript interfaces for props and state, 4) Follow best practices for accessibility and performance, 5) Include unit tests using Jest and React Testing Library with 90%+ coverage."</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-2 py-1 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 rounded-full text-xs">Coding</span> |
|
|
<span class="px-2 py-1 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 rounded-full text-xs">React</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="prompt-card bg-gray-50 dark:bg-gray-700 p-4 rounded-xl border border-gray-200 dark:border-gray-600"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-bold">UI Design System Generator</h3> |
|
|
<button class="copy-btn relative px-2 py-1 bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200 rounded-lg text-sm"> |
|
|
Copy |
|
|
<span class="tooltip">Copied!</span> |
|
|
</button> |
|
|
</div> |
|
|
<p class="text-gray-600 dark:text-gray-300 text-sm mb-3">"Design a comprehensive UI design system for a [type of application] with these characteristics: [describe brand attributes]. Include: 1) A color palette with primary, secondary, and accent colors, 2) Typography scale with appropriate font pairings, 3) Button styles in various states, 4) Form elements, 5) Card and container styles, 6) Spacing system, 7) Dark mode implementation. Provide Figma/Sketch components and CSS variables implementation."</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-2 py-1 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 rounded-full text-xs">Design</span> |
|
|
<span class="px-2 py-1 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 rounded-full text-xs">UI/UX</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="prompt-card bg-gray-50 dark:bg-gray-700 p-4 rounded-xl border border-gray-200 dark:border-gray-600"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-bold">Social Media Campaign Planner</h3> |
|
|
<button class="copy-btn relative px-2 py-1 bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200 rounded-lg text-sm"> |
|
|
Copy |
|
|
<span class="tooltip">Copied!</span> |
|
|
</button> |
|
|
</div> |
|
|
<p class="text-gray-600 dark:text-gray-300 text-sm mb-3">"Create a 30-day social media content calendar for promoting [product/service] on [platforms]. Include: 1) Campaign goals and KPIs, 2) Daily post themes with content types (image, video, carousel, etc.), 3) Hashtag strategy, 4) Engagement tactics, 5) Influencer collaboration ideas, 6) Performance tracking methods. Provide sample captions for 3 key posts that align with our brand voice: [describe voice]."</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-2 py-1 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 rounded-full text-xs">Marketing</span> |
|
|
<span class="px-2 py-1 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 rounded-full text-xs">Social Media</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 text-center"> |
|
|
<button class="px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-lg transition duration-300"> |
|
|
Load More Prompts |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="themesModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl p-6 w-full max-w-md glass-effect hover-3d"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold">Choose a Theme</h2> |
|
|
<button id="closeThemesModal" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"> |
|
|
<i class="fas fa-times text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="theme-option p-4 rounded-xl border-2 border-primary-500 cursor-pointer hover:bg-primary-50 dark:hover:bg-gray-700"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-6 h-6 rounded-full bg-primary-500 mr-2"></div> |
|
|
<h3 class="font-medium">Ocean</h3> |
|
|
</div> |
|
|
<div class="flex"> |
|
|
<div class="w-4 h-8 bg-primary-400"></div> |
|
|
<div class="w-4 h-8 bg-primary-500"></div> |
|
|
<div class="w-4 h-8 bg-primary-600"></div> |
|
|
<div class="w-4 h-8 bg-primary-700"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="theme-option p-4 rounded-xl border-2 border-secondary-500 cursor-pointer hover:bg-secondary-50 dark:hover:bg-gray-700"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-6 h-6 rounded-full bg-secondary-500 mr-2"></div> |
|
|
<h3 class="font-medium">Royal</h3> |
|
|
</div> |
|
|
<div class="flex"> |
|
|
<div class="w-4 h-8 bg-secondary-400"></div> |
|
|
<div class="w-4 h-8 bg-secondary-500"></div> |
|
|
<div class="w-4 h-8 bg-secondary-600"></div> |
|
|
<div class="w-4 h-8 bg-secondary-700"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="theme-option p-4 rounded-xl border-2 border-accent-500 cursor-pointer hover:bg-accent-50 dark:hover:bg-gray-700"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-6 h-6 rounded-full bg-accent-500 mr-2"></div> |
|
|
<h3 class="font-medium">Emerald</h3> |
|
|
</div> |
|
|
<div class="flex"> |
|
|
<div class="w-4 h-8 bg-accent-400"></div> |
|
|
<div class="w-4 h-8 bg-accent-500"></div> |
|
|
<div class="w-4 h-8 bg-accent-600"></div> |
|
|
<div class="w-4 h-8 bg-accent-700"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="theme-option p-4 rounded-xl border-2 border-pink-500 cursor-pointer hover:bg-pink-50 dark:hover:bg-gray-700"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-6 h-6 rounded-full bg-pink-500 mr-2"></div> |
|
|
<h3 class="font-medium">Rose</h3> |
|
|
</div> |
|
|
<div class="flex"> |
|
|
<div class="w-4 h-8 bg-pink-400"></div> |
|
|
<div class="w-4 h-8 bg-pink-500"></div> |
|
|
<div class="w-4 h-8 bg-pink-600"></div> |
|
|
<div class="w-4 h-8 bg-pink-700"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="theme-option p-4 rounded-xl border-2 border-yellow-500 cursor-pointer hover:bg-yellow-50 dark:hover:bg-gray-700"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-6 h-6 rounded-full bg-yellow-500 mr-2"></div> |
|
|
<h3 class="font-medium">Sunshine</h3> |
|
|
</div> |
|
|
<div class="flex"> |
|
|
<div class="w-4 h-8 bg-yellow-400"></div> |
|
|
<div class="w-4 h-8 bg-yellow-500"></div> |
|
|
<div class="w-4 h-8 bg-yellow-600"></div> |
|
|
<div class="w-4 h-8 bg-yellow-700"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="theme-option p-4 rounded-xl border-2 border-purple-500 cursor-pointer hover:bg-purple-50 dark:hover:bg-gray-700"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-6 h-6 rounded-full bg-purple-500 mr-2"></div> |
|
|
<h3 class="font-medium">Twilight</h3> |
|
|
</div> |
|
|
<div class="flex"> |
|
|
<div class="w-4 h-8 bg-purple-400"></div> |
|
|
<div class="w-4 h-8 bg-purple-500"></div> |
|
|
<div class="w-4 h-8 bg-purple-600"></div> |
|
|
<div class="w-4 h-8 bg-purple-700"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<h3 class="font-bold mb-2">Custom Theme</h3> |
|
|
<div class="flex space-x-4"> |
|
|
<div> |
|
|
<label class="block text-sm text-gray-600 dark:text-gray-300 mb-1">Primary</label> |
|
|
<input type="color" class="w-12 h-12 rounded-lg cursor-pointer" value="#0ea5e9"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm text-gray-600 dark:text-gray-300 mb-1">Secondary</label> |
|
|
<input type="color" class="w-12 h-12 rounded-lg cursor-pointer" value="#8b5cf6"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm text-gray-600 dark:text-gray-300 mb-1">Accent</label> |
|
|
<input type="color" class="w-12 h-12 rounded-lg cursor-pointer" value="#10b981"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-between"> |
|
|
<button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition duration-300"> |
|
|
Reset |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-lg transition duration-300"> |
|
|
Apply Theme |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const themeToggle = document.getElementById('themeToggle'); |
|
|
const themeIcon = document.getElementById('themeIcon'); |
|
|
|
|
|
|
|
|
if (localStorage.getItem('color-theme') === 'dark' || (!localStorage.getItem('color-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
|
|
document.documentElement.classList.add('dark'); |
|
|
themeToggle.checked = true; |
|
|
themeIcon.innerHTML = '<i class="fas fa-moon text-indigo-200"></i>'; |
|
|
} else { |
|
|
document.documentElement.classList.remove('dark'); |
|
|
themeToggle.checked = false; |
|
|
themeIcon.innerHTML = '<i class="fas fa-sun text-yellow-400"></i>'; |
|
|
} |
|
|
|
|
|
themeToggle.addEventListener('change', function() { |
|
|
if (this.checked) { |
|
|
document.documentElement.classList.add('dark'); |
|
|
localStorage.setItem('color-theme', 'dark'); |
|
|
themeIcon.innerHTML = '<i class="fas fa-moon text-indigo-200"></i>'; |
|
|
} else { |
|
|
document.documentElement.classList.remove('dark'); |
|
|
localStorage.setItem('color-theme', 'light'); |
|
|
themeIcon.innerHTML = '<i class="fas fa-sun text-yellow-400"></i>'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const themeSelectors = document.querySelectorAll('.theme-selector'); |
|
|
|
|
|
themeSelectors.forEach(selector => { |
|
|
selector.addEventListener('click', function() { |
|
|
|
|
|
themeSelectors.forEach(s => s.classList.remove('active')); |
|
|
|
|
|
|
|
|
this.classList.add('active'); |
|
|
|
|
|
|
|
|
const theme = this.getAttribute('data-theme'); |
|
|
|
|
|
|
|
|
console.log(`Theme changed to ${theme}`); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const chatBubble = document.getElementById('chatBubble'); |
|
|
const chatbotContainer = document.getElementById('chatbotContainer'); |
|
|
const closeChatbot = document.getElementById('closeChatbot'); |
|
|
const sendMessage = document.getElementById('sendMessage'); |
|
|
const chatInput = document.getElementById('chatInput'); |
|
|
const chatMessages = document.getElementById('chatMessages'); |
|
|
|
|
|
chatBubble.addEventListener('click', function() { |
|
|
chatbotContainer.classList.toggle('open'); |
|
|
}); |
|
|
|
|
|
closeChatbot.addEventListener('click', function() { |
|
|
chatbotContainer.classList.remove('open'); |
|
|
}); |
|
|
|
|
|
sendMessage.addEventListener('click', function() { |
|
|
sendChatMessage(); |
|
|
}); |
|
|
|
|
|
chatInput.addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') { |
|
|
sendChatMessage(); |
|
|
} |
|
|
}); |
|
|
|
|
|
function sendChatMessage() { |
|
|
const message = chatInput.value.trim(); |
|
|
if (message) { |
|
|
|
|
|
const userMessage = document.createElement('div'); |
|
|
userMessage.className = 'message user-message'; |
|
|
userMessage.textContent = message; |
|
|
chatMessages.appendChild(userMessage); |
|
|
|
|
|
|
|
|
chatInput.value = ''; |
|
|
|
|
|
|
|
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const botMessage = document.createElement('div'); |
|
|
botMessage.className = 'message bot-message'; |
|
|
botMessage.textContent = getBotResponse(message); |
|
|
chatMessages.appendChild(botMessage); |
|
|
|
|
|
|
|
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
|
}, 1000); |
|
|
} |
|
|
} |
|
|
|
|
|
function getBotResponse(message) { |
|
|
const responses = [ |
|
|
"I understand you're asking about: " + message + ". Can you elaborate more?", |
|
|
"That's an interesting question about " + message + ". Here's what I know...", |
|
|
"I'm still learning about " + message + ". Could you ask me something else?", |
|
|
"Thanks for your message! How can I assist you further?", |
|
|
"I've processed your request about " + message + ". What would you like to know specifically?" |
|
|
]; |
|
|
|
|
|
return responses[Math.floor(Math.random() * responses.length)]; |
|
|
} |
|
|
|
|
|
|
|
|
const aiAutomationBtn = document.getElementById('aiAutomationBtn'); |
|
|
const aiAutomationModal = document.getElementById('aiAutomationModal'); |
|
|
const closeAiModal = document.getElementById('closeAiModal'); |
|
|
|
|
|
const themesBtn = document.getElementById('themesBtn'); |
|
|
const themesModal = document.getElementById('themesModal'); |
|
|
const closeThemesModal = document.getElementById('closeThemesModal'); |
|
|
|
|
|
aiAutomationBtn.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
aiAutomationModal.classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
closeAiModal.addEventListener('click', function() { |
|
|
aiAutomationModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
themesBtn.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
themesModal.classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
closeThemesModal.addEventListener('click', function() { |
|
|
themesModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('click', function(e) { |
|
|
if (e.target === aiAutomationModal) { |
|
|
aiAutomationModal.classList.add('hidden'); |
|
|
} |
|
|
if (e.target === themesModal) { |
|
|
themesModal.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.copy-btn').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
const promptCard = this.closest('.prompt-card'); |
|
|
const promptText = promptCard.querySelector('p').textContent; |
|
|
|
|
|
navigator.clipboard.writeText(promptText).then(() => { |
|
|
const tooltip = this.querySelector('.tooltip'); |
|
|
tooltip.textContent = 'Copied!'; |
|
|
tooltip.style.opacity = '1'; |
|
|
|
|
|
setTimeout(() => { |
|
|
tooltip.style.opacity = '0'; |
|
|
}, 2000); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const visitorCount = document.getElementById('visitorCount'); |
|
|
let count = 1248; |
|
|
|
|
|
setInterval(() => { |
|
|
count += Math.floor(Math.random() * 5); |
|
|
visitorCount.textContent = count.toLocaleString(); |
|
|
}, 10000); |
|
|
|
|
|
|
|
|
function createParticles() { |
|
|
const colors = ['#3b82f6', '#8b5cf6', '#10b981', '#f59e0b', '#ec4899']; |
|
|
|
|
|
for (let i = 0; i < 30; i++) { |
|
|
const particle = document.createElement('div'); |
|
|
particle.className = 'particle'; |
|
|
|
|
|
|
|
|
const size = Math.random() * 5 + 2; |
|
|
const posX = Math.random() * window.innerWidth; |
|
|
const posY = Math.random() * window.innerHeight; |
|
|
const color = colors[Math.floor(Math.random() * colors.length)]; |
|
|
const duration = Math.random() * 20 + 10; |
|
|
const delay = Math.random() * 5; |
|
|
|
|
|
|
|
|
particle.style.width = `${size}px`; |
|
|
particle.style.height = `${size}px`; |
|
|
particle.style.backgroundColor = color; |
|
|
particle.style.left = `${posX}px`; |
|
|
particle.style.top = `${posY}px`; |
|
|
particle.style.opacity = Math.random() * 0.5 + 0.1; |
|
|
particle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`; |
|
|
|
|
|
document.body.appendChild(particle); |
|
|
|
|
|
|
|
|
animateParticle(particle); |
|
|
} |
|
|
} |
|
|
|
|
|
function animateParticle(particle) { |
|
|
let x = parseFloat(particle.style.left); |
|
|
let y = parseFloat(particle.style.top); |
|
|
let xSpeed = (Math.random() - 0.5) * 0.5; |
|
|
let ySpeed = (Math.random() - 0.5) * 0.5; |
|
|
|
|
|
function move() { |
|
|
x += xSpeed; |
|
|
y += ySpeed; |
|
|
|
|
|
|
|
|
if (x <= 0 || x >= window.innerWidth) xSpeed *= -1; |
|
|
if (y <= 0 || y >= window.innerHeight) ySpeed *= -1; |
|
|
|
|
|
particle.style.left = `${x}px`; |
|
|
particle.style.top = `${y}px`; |
|
|
|
|
|
requestAnimationFrame(move); |
|
|
} |
|
|
|
|
|
move(); |
|
|
} |
|
|
|
|
|
|
|
|
createParticles(); |
|
|
|
|
|
|
|
|
document.addEventListener('mousemove', function(e) { |
|
|
const x = e.clientX / window.innerWidth; |
|
|
const y = e.clientY / window.innerHeight; |
|
|
|
|
|
document.querySelectorAll('.parallax-layer').forEach((layer, index) => { |
|
|
const speed = (index + 1) * 0.02; |
|
|
const xMove = x * speed * 100; |
|
|
const yMove = y * speed * 100; |
|
|
|
|
|
layer.style.transform = `translate(${xMove}px, ${yMove}px)`; |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=KynosAi/portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
