|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>NeonTweet - Twitter Style WebApp</title> |
|
<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"> |
|
<style> |
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap'); |
|
|
|
body { |
|
font-family: 'Orbitron', sans-serif; |
|
background-color: #0a0a0a; |
|
color: #e0e0e0; |
|
} |
|
|
|
.neon-green { |
|
color: #00ff9d; |
|
text-shadow: 0 0 5px #00ff9d, 0 0 10px #00ff9d; |
|
} |
|
|
|
.neon-blue { |
|
color: #00e1ff; |
|
text-shadow: 0 0 5px #00e1ff, 0 0 10px #00e1ff; |
|
} |
|
|
|
.neon-border-green { |
|
border: 1px solid #00ff9d; |
|
box-shadow: 0 0 10px #00ff9d, inset 0 0 10px #00ff9d; |
|
} |
|
|
|
.neon-border-blue { |
|
border: 1px solid #00e1ff; |
|
box-shadow: 0 0 10px #00e1ff, inset 0 0 10px #00e1ff; |
|
} |
|
|
|
.neon-bg-green { |
|
background-color: rgba(0, 255, 157, 0.1); |
|
} |
|
|
|
.neon-bg-blue { |
|
background-color: rgba(0, 225, 255, 0.1); |
|
} |
|
|
|
.neon-btn-green { |
|
background-color: rgba(0, 255, 157, 0.2); |
|
border: 1px solid #00ff9d; |
|
color: #00ff9d; |
|
transition: all 0.3s; |
|
} |
|
|
|
.neon-btn-green:hover { |
|
background-color: rgba(0, 255, 157, 0.4); |
|
box-shadow: 0 0 15px #00ff9d; |
|
} |
|
|
|
.neon-btn-blue { |
|
background-color: rgba(0, 225, 255, 0.2); |
|
border: 1px solid #00e1ff; |
|
color: #00e1ff; |
|
transition: all 0.3s; |
|
} |
|
|
|
.neon-btn-blue:hover { |
|
background-color: rgba(0, 225, 255, 0.4); |
|
box-shadow: 0 0 15px #00e1ff; |
|
} |
|
|
|
.neon-textarea { |
|
background-color: rgba(20, 20, 20, 0.8); |
|
border: 1px solid #00e1ff; |
|
color: #e0e0e0; |
|
transition: all 0.3s; |
|
} |
|
|
|
.neon-textarea:focus { |
|
outline: none; |
|
box-shadow: 0 0 10px #00e1ff; |
|
} |
|
|
|
.pulse { |
|
animation: pulse 2s infinite; |
|
} |
|
|
|
@keyframes pulse { |
|
0% { |
|
opacity: 0.7; |
|
} |
|
50% { |
|
opacity: 1; |
|
} |
|
100% { |
|
opacity: 0.7; |
|
} |
|
} |
|
|
|
.glow { |
|
animation: glow 3s infinite alternate; |
|
} |
|
|
|
@keyframes glow { |
|
from { |
|
text-shadow: 0 0 5px #00ff9d, 0 0 10px #00ff9d; |
|
} |
|
to { |
|
text-shadow: 0 0 10px #00ff9d, 0 0 20px #00ff9d, 0 0 30px #00ff9d; |
|
} |
|
} |
|
</style> |
|
</head> |
|
<body class="min-h-screen"> |
|
<div class="container mx-auto max-w-6xl"> |
|
|
|
<header class="flex justify-between items-center p-4 neon-border-green rounded-lg mt-4 neon-bg-green"> |
|
<div class="flex items-center space-x-2"> |
|
<i class="fas fa-bolt neon-blue text-2xl"></i> |
|
<h1 class="text-2xl font-bold neon-green glow">NeonTweet</h1> |
|
</div> |
|
<div class="flex items-center space-x-4"> |
|
<button class="px-4 py-2 rounded-full neon-btn-green"> |
|
<i class="fas fa-home mr-2"></i> Home |
|
</button> |
|
<button class="px-4 py-2 rounded-full neon-btn-blue"> |
|
<i class="fas fa-user mr-2"></i> Profile |
|
</button> |
|
<div class="relative"> |
|
<img src="https://via.placeholder.com/40" alt="Profile" class="w-10 h-10 rounded-full neon-border-blue cursor-pointer"> |
|
<div class="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full pulse"></div> |
|
</div> |
|
</div> |
|
</header> |
|
|
|
|
|
<div class="flex mt-6 space-x-6"> |
|
|
|
<div class="w-1/4 neon-bg-blue neon-border-blue rounded-lg p-4 h-fit"> |
|
<div class="flex items-center space-x-3 mb-6"> |
|
<img src="https://via.placeholder.com/60" alt="Profile" class="w-12 h-12 rounded-full neon-border-green"> |
|
<div> |
|
<h3 class="font-bold neon-green">NeonUser</h3> |
|
<p class="text-xs text-gray-400">@neonuser</p> |
|
</div> |
|
</div> |
|
|
|
<div class="space-y-4"> |
|
<div class="flex items-center space-x-3 neon-btn-blue p-2 rounded-lg cursor-pointer"> |
|
<i class="fas fa-hashtag"></i> |
|
<span>Explore</span> |
|
</div> |
|
<div class="flex items-center space-x-3 neon-btn-green p-2 rounded-lg cursor-pointer"> |
|
<i class="fas fa-bell"></i> |
|
<span>Notifications</span> |
|
</div> |
|
<div class="flex items-center space-x-3 neon-btn-blue p-2 rounded-lg cursor-pointer"> |
|
<i class="fas fa-envelope"></i> |
|
<span>Messages</span> |
|
</div> |
|
<div class="flex items-center space-x-3 neon-btn-green p-2 rounded-lg cursor-pointer"> |
|
<i class="fas fa-bookmark"></i> |
|
<span>Bookmarks</span> |
|
</div> |
|
<div class="flex items-center space-x-3 neon-btn-blue p-2 rounded-lg cursor-pointer"> |
|
<i class="fas fa-list"></i> |
|
<span>Lists</span> |
|
</div> |
|
</div> |
|
|
|
<button class="w-full mt-6 py-2 rounded-full neon-btn-green font-bold"> |
|
<i class="fas fa-feather-alt mr-2"></i> Tweet |
|
</button> |
|
</div> |
|
|
|
|
|
<div class="w-2/4 space-y-4"> |
|
|
|
<div class="neon-border-blue rounded-lg p-4 neon-bg-blue"> |
|
<div class="flex space-x-3"> |
|
<img src="https://via.placeholder.com/50" alt="Profile" class="w-12 h-12 rounded-full neon-border-green"> |
|
<textarea class="w-full neon-textarea rounded-lg p-3 resize-none" placeholder="What's happening in the neon world?"></textarea> |
|
</div> |
|
<div class="flex justify-between items-center mt-4"> |
|
<div class="flex space-x-4"> |
|
<i class="fas fa-image neon-blue cursor-pointer hover:text-green-400"></i> |
|
<i class="fas fa-poll neon-blue cursor-pointer hover:text-green-400"></i> |
|
<i class="fas fa-smile neon-blue cursor-pointer hover:text-green-400"></i> |
|
<i class="fas fa-calendar-alt neon-blue cursor-pointer hover:text-green-400"></i> |
|
</div> |
|
<button class="px-4 py-2 rounded-full neon-btn-green font-bold"> |
|
Tweet |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
|
<div class="neon-border-green rounded-lg p-4 neon-bg-green"> |
|
<div class="flex space-x-3"> |
|
<img src="https://via.placeholder.com/50" alt="Profile" class="w-12 h-12 rounded-full neon-border-blue"> |
|
<div class="flex-1"> |
|
<div class="flex items-center space-x-2"> |
|
<span class="font-bold neon-blue">CyberPunk</span> |
|
<span class="text-gray-400 text-sm">@cyberpunk</span> |
|
<span class="text-gray-400 text-sm">路 2h</span> |
|
</div> |
|
<p class="mt-1">Just discovered this amazing neon cityscape. The colors are out of this world! #NeonVibes</p> |
|
<div class="mt-3 flex justify-between text-gray-400"> |
|
<div class="flex items-center space-x-1 hover:text-green-400 cursor-pointer"> |
|
<i class="far fa-comment"></i> |
|
<span>24</span> |
|
</div> |
|
<div class="flex items-center space-x-1 hover:text-green-400 cursor-pointer"> |
|
<i class="fas fa-retweet"></i> |
|
<span>56</span> |
|
</div> |
|
<div class="flex items-center space-x-1 hover:text-pink-400 cursor-pointer"> |
|
<i class="far fa-heart"></i> |
|
<span>128</span> |
|
</div> |
|
<div class="flex items-center space-x-1 hover:text-blue-400 cursor-pointer"> |
|
<i class="fas fa-share"></i> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="neon-border-blue rounded-lg p-4 neon-bg-blue"> |
|
<div class="flex space-x-3"> |
|
<img src="https://via.placeholder.com/50" alt="Profile" class="w-12 h-12 rounded-full neon-border-green"> |
|
<div class="flex-1"> |
|
<div class="flex items-center space-x-2"> |
|
<span class="font-bold neon-green">TechGuru</span> |
|
<span class="text-gray-400 text-sm">@techguru</span> |
|
<span class="text-gray-400 text-sm">路 4h</span> |
|
</div> |
|
<p class="mt-1">The future of UI is here with these amazing neon designs. The contrast and glow effects create such an immersive experience!</p> |
|
<div class="mt-3 flex justify-between text-gray-400"> |
|
<div class="flex items-center space-x-1 hover:text-green-400 cursor-pointer"> |
|
<i class="far fa-comment"></i> |
|
<span>42</span> |
|
</div> |
|
<div class="flex items-center space-x-1 hover:text-green-400 cursor-pointer"> |
|
<i class="fas fa-retweet"></i> |
|
<span>89</span> |
|
</div> |
|
<div class="flex items-center space-x-1 hover:text-pink-400 cursor-pointer"> |
|
<i class="far fa-heart"></i> |
|
<span>256</span> |
|
</div> |
|
<div class="flex items-center space-x-1 hover:text-blue-400 cursor-pointer"> |
|
<i class="fas fa-share"></i> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="neon-border-green rounded-lg p-4 neon-bg-green"> |
|
<div class="flex space-x-3"> |
|
<img src="https://via.placeholder.com/50" alt="Profile" class="w-12 h-12 rounded-full neon-border-blue"> |
|
<div class="flex-1"> |
|
<div class="flex items-center space-x-2"> |
|
<span class="font-bold neon-blue">DesignMaster</span> |
|
<span class="text-gray-400 text-sm">@designmaster</span> |
|
<span class="text-gray-400 text-sm">路 6h</span> |
|
</div> |
|
<p class="mt-1">Working on a new cyberpunk-inspired project. The combination of black backgrounds with neon green and blue accents is just perfect for that futuristic feel.</p> |
|
<div class="mt-3 flex justify-between text-gray-400"> |
|
<div class="flex items-center space-x-1 hover:text-green-400 cursor-pointer"> |
|
<i class="far fa-comment"></i> |
|
<span>18</span> |
|
</div> |
|
<div class="flex items-center space-x-1 hover:text-green-400 cursor-pointer"> |
|
<i class="fas fa-retweet"></i> |
|
<span>34</span> |
|
</div> |
|
<div class="flex items-center space-x-1 hover:text-pink-400 cursor-pointer"> |
|
<i class="far fa-heart"></i> |
|
<span>187</span> |
|
</div> |
|
<div class="flex items-center space-x-1 hover:text-blue-400 cursor-pointer"> |
|
<i class="fas fa-share"></i> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="w-1/4 space-y-4"> |
|
|
|
<div class="neon-border-blue rounded-lg p-3 neon-bg-blue"> |
|
<div class="relative"> |
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
<input type="text" placeholder="Search NeonTweet" class="w-full bg-gray-900 bg-opacity-50 border border-gray-700 rounded-full py-2 pl-10 pr-4 text-white focus:outline-none focus:border-green-400"> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="neon-border-green rounded-lg p-4 neon-bg-green"> |
|
<h3 class="font-bold text-lg neon-blue mb-4">Trends for you</h3> |
|
<div class="space-y-4"> |
|
<div class="cursor-pointer hover:bg-gray-800 p-2 rounded-lg"> |
|
<p class="text-xs text-gray-400">Technology 路 Trending</p> |
|
<p class="font-bold neon-blue">#NeonUI</p> |
|
<p class="text-xs text-gray-400">5,234 Tweets</p> |
|
</div> |
|
<div class="cursor-pointer hover:bg-gray-800 p-2 rounded-lg"> |
|
<p class="text-xs text-gray-400">Gaming 路 Trending</p> |
|
<p class="font-bold neon-green">#Cyberpunk2077</p> |
|
<p class="text-xs text-gray-400">12.8K Tweets</p> |
|
</div> |
|
<div class="cursor-pointer hover:bg-gray-800 p-2 rounded-lg"> |
|
<p class="text-xs text-gray-400">Music 路 Trending</p> |
|
<p class="font-bold neon-blue">#Synthwave</p> |
|
<p class="text-xs text-gray-400">8,542 Tweets</p> |
|
</div> |
|
<div class="cursor-pointer hover:bg-gray-800 p-2 rounded-lg"> |
|
<p class="text-xs text-gray-400">Art 路 Trending</p> |
|
<p class="font-bold neon-green">#NeonArt</p> |
|
<p class="text-xs text-gray-400">3,127 Tweets</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="neon-border-blue rounded-lg p-4 neon-bg-blue"> |
|
<h3 class="font-bold text-lg neon-green mb-4">Who to follow</h3> |
|
<div class="space-y-4"> |
|
<div class="flex items-center justify-between"> |
|
<div class="flex items-center space-x-3"> |
|
<img src="https://via.placeholder.com/40" alt="Profile" class="w-10 h-10 rounded-full neon-border-green"> |
|
<div> |
|
<p class="font-bold neon-blue">UI Designer</p> |
|
<p class="text-xs text-gray-400">@uidesigner</p> |
|
</div> |
|
</div> |
|
<button class="px-3 py-1 text-xs rounded-full neon-btn-green">Follow</button> |
|
</div> |
|
<div class="flex items-center justify-between"> |
|
<div class="flex items-center space-x-3"> |
|
<img src="https://via.placeholder.com/40" alt="Profile" class="w-10 h-10 rounded-full neon-border-blue"> |
|
<div> |
|
<p class="font-bold neon-green">Code Master</p> |
|
<p class="text-xs text-gray-400">@codemaster</p> |
|
</div> |
|
</div> |
|
<button class="px-3 py-1 text-xs rounded-full neon-btn-blue">Follow</button> |
|
</div> |
|
<div class="flex items-center justify-between"> |
|
<div class="flex items-center space-x-3"> |
|
<img src="https://via.placeholder.com/40" alt="Profile" class="w-10 h-10 rounded-full neon-border-green"> |
|
<div> |
|
<p class="font-bold neon-blue">Future Tech</p> |
|
<p class="text-xs text-gray-400">@futuretech</p> |
|
</div> |
|
</div> |
|
<button class="px-3 py-1 text-xs rounded-full neon-btn-green">Follow</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="fixed bottom-0 left-0 right-0 bg-black bg-opacity-90 p-3 flex justify-around items-center md:hidden neon-border-green"> |
|
<i class="fas fa-home text-2xl neon-blue cursor-pointer"></i> |
|
<i class="fas fa-search text-2xl neon-green cursor-pointer"></i> |
|
<i class="fas fa-bell text-2xl neon-blue cursor-pointer"></i> |
|
<i class="fas fa-envelope text-2xl neon-green cursor-pointer"></i> |
|
</div> |
|
|
|
<script> |
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
const tweetBtn = document.querySelector('.neon-btn-green:last-child'); |
|
const tweetTextarea = document.querySelector('.neon-textarea'); |
|
|
|
tweetBtn.addEventListener('click', function() { |
|
const tweetContent = tweetTextarea.value.trim(); |
|
if (tweetContent) { |
|
|
|
alert(`Tweet posted: "${tweetContent}"`); |
|
tweetTextarea.value = ''; |
|
} else { |
|
alert("Please write something to tweet!"); |
|
} |
|
}); |
|
|
|
|
|
const neonBtns = document.querySelectorAll('.neon-btn-green, .neon-btn-blue'); |
|
neonBtns.forEach(btn => { |
|
btn.addEventListener('mouseenter', function() { |
|
this.style.transform = 'scale(1.05)'; |
|
}); |
|
btn.addEventListener('mouseleave', function() { |
|
this.style.transform = 'scale(1)'; |
|
}); |
|
}); |
|
}); |
|
</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=dmoedbeck/neontweet" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
