Spaces:
Running
Running
Add 3 files
Browse files- README.md +7 -5
- index.html +777 -19
- prompts.txt +1 -0
README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
-
colorFrom:
|
| 5 |
-
colorTo:
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
|
| 1 |
---
|
| 2 |
+
title: uranus
|
| 3 |
+
emoji: 🐳
|
| 4 |
+
colorFrom: blue
|
| 5 |
+
colorTo: pink
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite
|
| 10 |
---
|
| 11 |
|
| 12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
index.html
CHANGED
|
@@ -1,19 +1,777 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Uranus Explorer | The Ice Giant</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 9 |
+
<style>
|
| 10 |
+
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Space+Grotesk:wght@300;500;700&display=swap');
|
| 11 |
+
|
| 12 |
+
body {
|
| 13 |
+
font-family: 'Space Grotesk', sans-serif;
|
| 14 |
+
background-color: #0a0a1a;
|
| 15 |
+
color: #e0e0ff;
|
| 16 |
+
overflow-x: hidden;
|
| 17 |
+
}
|
| 18 |
+
|
| 19 |
+
.orbitron {
|
| 20 |
+
font-family: 'Orbitron', sans-serif;
|
| 21 |
+
}
|
| 22 |
+
|
| 23 |
+
.uranus-gradient {
|
| 24 |
+
background: linear-gradient(135deg, #1e90ff 0%, #7cf8ff 50%, #00bfff 100%);
|
| 25 |
+
-webkit-background-clip: text;
|
| 26 |
+
background-clip: text;
|
| 27 |
+
color: transparent;
|
| 28 |
+
}
|
| 29 |
+
|
| 30 |
+
.glow {
|
| 31 |
+
text-shadow: 0 0 10px rgba(30, 144, 255, 0.7);
|
| 32 |
+
}
|
| 33 |
+
|
| 34 |
+
.planet-container {
|
| 35 |
+
position: relative;
|
| 36 |
+
width: 300px;
|
| 37 |
+
height: 300px;
|
| 38 |
+
}
|
| 39 |
+
|
| 40 |
+
.uranus-planet {
|
| 41 |
+
width: 100%;
|
| 42 |
+
height: 100%;
|
| 43 |
+
background: radial-gradient(circle at 30% 30%, #7cf8ff, #1e90ff, #003366);
|
| 44 |
+
border-radius: 50%;
|
| 45 |
+
box-shadow: 0 0 50px rgba(30, 144, 255, 0.5);
|
| 46 |
+
position: relative;
|
| 47 |
+
overflow: hidden;
|
| 48 |
+
}
|
| 49 |
+
|
| 50 |
+
.uranus-planet::before {
|
| 51 |
+
content: '';
|
| 52 |
+
position: absolute;
|
| 53 |
+
top: -10%;
|
| 54 |
+
left: -10%;
|
| 55 |
+
width: 120%;
|
| 56 |
+
height: 120%;
|
| 57 |
+
background: radial-gradient(circle at 30% 30%, transparent 60%, rgba(30, 144, 255, 0.3) 100%);
|
| 58 |
+
border-radius: 50%;
|
| 59 |
+
animation: rotate 60s linear infinite;
|
| 60 |
+
}
|
| 61 |
+
|
| 62 |
+
.uranus-planet::after {
|
| 63 |
+
content: '';
|
| 64 |
+
position: absolute;
|
| 65 |
+
top: 0;
|
| 66 |
+
left: 0;
|
| 67 |
+
width: 100%;
|
| 68 |
+
height: 100%;
|
| 69 |
+
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000b1a' fill-opacity='0.2' d='M49.1,-46.4C60.7,-34.1,65.4,-17,63.9,-0.9C62.4,15.2,54.7,30.4,43.1,42.3C31.4,54.2,15.7,62.8,-0.1,62.9C-15.9,63,-31.8,54.6,-44.5,42.7C-57.2,30.8,-66.7,15.4,-67.7,-0.9C-68.7,-17.2,-61.2,-34.4,-48.5,-46.7C-35.8,-59,-17.9,-66.4,-0.3,-66.1C17.3,-65.8,34.6,-57.8,49.1,-46.4Z' transform='translate(100 100)' /%3E%3C/svg%3E");
|
| 70 |
+
background-size: cover;
|
| 71 |
+
opacity: 0.8;
|
| 72 |
+
animation: rotate 30s linear infinite reverse;
|
| 73 |
+
}
|
| 74 |
+
|
| 75 |
+
.ring {
|
| 76 |
+
position: absolute;
|
| 77 |
+
width: 130%;
|
| 78 |
+
height: 130%;
|
| 79 |
+
top: -15%;
|
| 80 |
+
left: -15%;
|
| 81 |
+
border: 2px solid rgba(124, 248, 255, 0.3);
|
| 82 |
+
border-radius: 50%;
|
| 83 |
+
transform: rotateX(75deg);
|
| 84 |
+
box-shadow: 0 0 20px rgba(124, 248, 255, 0.3);
|
| 85 |
+
}
|
| 86 |
+
|
| 87 |
+
.ring:nth-child(2) {
|
| 88 |
+
width: 160%;
|
| 89 |
+
height: 160%;
|
| 90 |
+
top: -30%;
|
| 91 |
+
left: -30%;
|
| 92 |
+
opacity: 0.5;
|
| 93 |
+
}
|
| 94 |
+
|
| 95 |
+
@keyframes rotate {
|
| 96 |
+
from { transform: rotate(0deg); }
|
| 97 |
+
to { transform: rotate(360deg); }
|
| 98 |
+
}
|
| 99 |
+
|
| 100 |
+
.data-card {
|
| 101 |
+
background: rgba(10, 20, 40, 0.5);
|
| 102 |
+
backdrop-filter: blur(10px);
|
| 103 |
+
border: 1px solid rgba(30, 144, 255, 0.2);
|
| 104 |
+
transition: all 0.3s ease;
|
| 105 |
+
}
|
| 106 |
+
|
| 107 |
+
.data-card:hover {
|
| 108 |
+
transform: translateY(-5px);
|
| 109 |
+
box-shadow: 0 10px 20px rgba(30, 144, 255, 0.2);
|
| 110 |
+
border-color: rgba(30, 144, 255, 0.5);
|
| 111 |
+
}
|
| 112 |
+
|
| 113 |
+
.timeline-item::before {
|
| 114 |
+
content: '';
|
| 115 |
+
position: absolute;
|
| 116 |
+
left: -40px;
|
| 117 |
+
top: 0;
|
| 118 |
+
width: 20px;
|
| 119 |
+
height: 20px;
|
| 120 |
+
border-radius: 50%;
|
| 121 |
+
background: linear-gradient(135deg, #1e90ff, #7cf8ff);
|
| 122 |
+
box-shadow: 0 0 10px rgba(30, 144, 255, 0.7);
|
| 123 |
+
}
|
| 124 |
+
|
| 125 |
+
.timeline-line {
|
| 126 |
+
position: absolute;
|
| 127 |
+
left: -30px;
|
| 128 |
+
top: 20px;
|
| 129 |
+
bottom: 0;
|
| 130 |
+
width: 2px;
|
| 131 |
+
background: linear-gradient(to bottom, #1e90ff, #7cf8ff);
|
| 132 |
+
}
|
| 133 |
+
|
| 134 |
+
.moon-card {
|
| 135 |
+
background: rgba(10, 20, 40, 0.3);
|
| 136 |
+
border: 1px solid rgba(30, 144, 255, 0.1);
|
| 137 |
+
transition: all 0.3s ease;
|
| 138 |
+
}
|
| 139 |
+
|
| 140 |
+
.moon-card:hover {
|
| 141 |
+
background: rgba(10, 20, 40, 0.5);
|
| 142 |
+
border-color: rgba(30, 144, 255, 0.3);
|
| 143 |
+
transform: translateY(-5px);
|
| 144 |
+
}
|
| 145 |
+
|
| 146 |
+
.nav-link {
|
| 147 |
+
position: relative;
|
| 148 |
+
}
|
| 149 |
+
|
| 150 |
+
.nav-link::after {
|
| 151 |
+
content: '';
|
| 152 |
+
position: absolute;
|
| 153 |
+
bottom: -5px;
|
| 154 |
+
left: 0;
|
| 155 |
+
width: 0;
|
| 156 |
+
height: 2px;
|
| 157 |
+
background: linear-gradient(90deg, #1e90ff, #7cf8ff);
|
| 158 |
+
transition: width 0.3s ease;
|
| 159 |
+
}
|
| 160 |
+
|
| 161 |
+
.nav-link:hover::after {
|
| 162 |
+
width: 100%;
|
| 163 |
+
}
|
| 164 |
+
|
| 165 |
+
.active-nav::after {
|
| 166 |
+
width: 100%;
|
| 167 |
+
}
|
| 168 |
+
|
| 169 |
+
.scroll-down {
|
| 170 |
+
position: absolute;
|
| 171 |
+
bottom: 30px;
|
| 172 |
+
left: 50%;
|
| 173 |
+
transform: translateX(-50%);
|
| 174 |
+
animation: bounce 2s infinite;
|
| 175 |
+
}
|
| 176 |
+
|
| 177 |
+
@keyframes bounce {
|
| 178 |
+
0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
|
| 179 |
+
40% { transform: translateY(-20px) translateX(-50%); }
|
| 180 |
+
60% { transform: translateY(-10px) translateX(-50%); }
|
| 181 |
+
}
|
| 182 |
+
|
| 183 |
+
.section-title {
|
| 184 |
+
position: relative;
|
| 185 |
+
display: inline-block;
|
| 186 |
+
}
|
| 187 |
+
|
| 188 |
+
.section-title::after {
|
| 189 |
+
content: '';
|
| 190 |
+
position: absolute;
|
| 191 |
+
bottom: -10px;
|
| 192 |
+
left: 0;
|
| 193 |
+
width: 50%;
|
| 194 |
+
height: 3px;
|
| 195 |
+
background: linear-gradient(90deg, #1e90ff, #7cf8ff);
|
| 196 |
+
}
|
| 197 |
+
|
| 198 |
+
.explore-btn {
|
| 199 |
+
background: linear-gradient(90deg, #1e90ff, #00bfff);
|
| 200 |
+
box-shadow: 0 0 20px rgba(30, 144, 255, 0.5);
|
| 201 |
+
transition: all 0.3s ease;
|
| 202 |
+
}
|
| 203 |
+
|
| 204 |
+
.explore-btn:hover {
|
| 205 |
+
transform: translateY(-3px);
|
| 206 |
+
box-shadow: 0 0 30px rgba(30, 144, 255, 0.7);
|
| 207 |
+
}
|
| 208 |
+
|
| 209 |
+
.stats-value {
|
| 210 |
+
font-size: 2.5rem;
|
| 211 |
+
background: linear-gradient(135deg, #7cf8ff, #1e90ff);
|
| 212 |
+
-webkit-background-clip: text;
|
| 213 |
+
background-clip: text;
|
| 214 |
+
color: transparent;
|
| 215 |
+
}
|
| 216 |
+
|
| 217 |
+
.stats-label {
|
| 218 |
+
letter-spacing: 2px;
|
| 219 |
+
}
|
| 220 |
+
|
| 221 |
+
@media (max-width: 768px) {
|
| 222 |
+
.planet-container {
|
| 223 |
+
width: 200px;
|
| 224 |
+
height: 200px;
|
| 225 |
+
}
|
| 226 |
+
|
| 227 |
+
.stats-value {
|
| 228 |
+
font-size: 1.8rem;
|
| 229 |
+
}
|
| 230 |
+
}
|
| 231 |
+
</style>
|
| 232 |
+
</head>
|
| 233 |
+
<body>
|
| 234 |
+
<!-- Navigation -->
|
| 235 |
+
<nav class="fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg border-b border-gray-800">
|
| 236 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 237 |
+
<div class="flex items-center justify-between h-16">
|
| 238 |
+
<div class="flex items-center">
|
| 239 |
+
<div class="flex-shrink-0">
|
| 240 |
+
<span class="text-2xl font-bold orbitron uranus-gradient">URANUS EXPLORER</span>
|
| 241 |
+
</div>
|
| 242 |
+
</div>
|
| 243 |
+
<div class="hidden md:block">
|
| 244 |
+
<div class="ml-10 flex items-baseline space-x-8">
|
| 245 |
+
<a href="#home" class="nav-link text-white px-3 py-2 text-sm font-medium">Home</a>
|
| 246 |
+
<a href="#about" class="nav-link text-white px-3 py-2 text-sm font-medium">About</a>
|
| 247 |
+
<a href="#moons" class="nav-link text-white px-3 py-2 text-sm font-medium">Moons</a>
|
| 248 |
+
<a href="#exploration" class="nav-link text-white px-3 py-2 text-sm font-medium">Exploration</a>
|
| 249 |
+
<a href="#facts" class="nav-link text-white px-3 py-2 text-sm font-medium">Facts</a>
|
| 250 |
+
</div>
|
| 251 |
+
</div>
|
| 252 |
+
<div class="md:hidden">
|
| 253 |
+
<button id="mobile-menu-button" class="text-gray-300 hover:text-white focus:outline-none">
|
| 254 |
+
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
| 255 |
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
| 256 |
+
</svg>
|
| 257 |
+
</button>
|
| 258 |
+
</div>
|
| 259 |
+
</div>
|
| 260 |
+
</div>
|
| 261 |
+
|
| 262 |
+
<!-- Mobile menu -->
|
| 263 |
+
<div id="mobile-menu" class="hidden md:hidden bg-gray-900">
|
| 264 |
+
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
| 265 |
+
<a href="#home" class="block px-3 py-2 text-base font-medium text-white">Home</a>
|
| 266 |
+
<a href="#about" class="block px-3 py-2 text-base font-medium text-white">About</a>
|
| 267 |
+
<a href="#moons" class="block px-3 py-2 text-base font-medium text-white">Moons</a>
|
| 268 |
+
<a href="#exploration" class="block px-3 py-2 text-base font-medium text-white">Exploration</a>
|
| 269 |
+
<a href="#facts" class="block px-3 py-2 text-base font-medium text-white">Facts</a>
|
| 270 |
+
</div>
|
| 271 |
+
</div>
|
| 272 |
+
</nav>
|
| 273 |
+
|
| 274 |
+
<!-- Hero Section -->
|
| 275 |
+
<section id="home" class="relative h-screen flex items-center justify-center overflow-hidden pt-16">
|
| 276 |
+
<div class="absolute inset-0 z-0">
|
| 277 |
+
<div class="absolute inset-0 bg-black opacity-70"></div>
|
| 278 |
+
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-80"></div>
|
| 279 |
+
<div class="absolute inset-0 opacity-30" style="background: url('https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?q=80&w=1000') center/cover;"></div>
|
| 280 |
+
</div>
|
| 281 |
+
|
| 282 |
+
<div class="relative z-10 container mx-auto px-6 md:px-12 flex flex-col md:flex-row items-center">
|
| 283 |
+
<div class="md:w-1/2 mb-12 md:mb-0">
|
| 284 |
+
<h1 class="text-4xl md:text-6xl font-bold mb-6 orbitron glow uranus-gradient">THE ICE GIANT</h1>
|
| 285 |
+
<p class="text-xl md:text-2xl mb-8 text-gray-300 max-w-2xl">
|
| 286 |
+
Uranus, the seventh planet from the Sun, is a world of extreme seasons, mysterious weather, and a unique sideways rotation. Explore the secrets of this enigmatic ice giant.
|
| 287 |
+
</p>
|
| 288 |
+
<div class="flex space-x-4">
|
| 289 |
+
<a href="#about" class="explore-btn text-white px-8 py-3 rounded-full font-bold orbitron">EXPLORE</a>
|
| 290 |
+
<a href="#facts" class="border border-blue-400 text-blue-400 hover:bg-blue-900 hover:bg-opacity-30 px-8 py-3 rounded-full font-bold orbitron transition-all">FACTS</a>
|
| 291 |
+
</div>
|
| 292 |
+
</div>
|
| 293 |
+
|
| 294 |
+
<div class="md:w-1/2 flex justify-center">
|
| 295 |
+
<div class="planet-container">
|
| 296 |
+
<div class="uranus-planet"></div>
|
| 297 |
+
<div class="ring"></div>
|
| 298 |
+
<div class="ring"></div>
|
| 299 |
+
</div>
|
| 300 |
+
</div>
|
| 301 |
+
</div>
|
| 302 |
+
|
| 303 |
+
<div class="scroll-down">
|
| 304 |
+
<a href="#about" class="text-blue-400 text-2xl animate-bounce">
|
| 305 |
+
<i class="fas fa-chevron-down"></i>
|
| 306 |
+
</a>
|
| 307 |
+
</div>
|
| 308 |
+
</section>
|
| 309 |
+
|
| 310 |
+
<!-- About Section -->
|
| 311 |
+
<section id="about" class="py-20 bg-gray-900">
|
| 312 |
+
<div class="container mx-auto px-6">
|
| 313 |
+
<h2 class="text-3xl md:text-4xl font-bold mb-16 text-center section-title orbitron uranus-gradient">ABOUT URANUS</h2>
|
| 314 |
+
|
| 315 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-20">
|
| 316 |
+
<div>
|
| 317 |
+
<h3 class="text-2xl md:text-3xl font-bold mb-6 orbitron">The Sideways Planet</h3>
|
| 318 |
+
<p class="text-gray-300 mb-6 text-lg">
|
| 319 |
+
Uranus is unique among the planets in our solar system because it rotates on its side. Its axis is tilted at an angle of about 98 degrees, which means it essentially orbits the Sun on its side.
|
| 320 |
+
</p>
|
| 321 |
+
<p class="text-gray-300 mb-6 text-lg">
|
| 322 |
+
This extreme tilt causes extreme seasons. Each pole gets around 42 years of continuous sunlight, followed by 42 years of darkness. The last equinox on Uranus occurred in 2007.
|
| 323 |
+
</p>
|
| 324 |
+
<div class="grid grid-cols-2 gap-4 mt-8">
|
| 325 |
+
<div class="data-card p-6 rounded-lg">
|
| 326 |
+
<div class="text-blue-400 text-3xl mb-2"><i class="fas fa-temperature-low"></i></div>
|
| 327 |
+
<h4 class="text-xl font-bold mb-2">Temperature</h4>
|
| 328 |
+
<p class="text-gray-300">-224°C to -216°C</p>
|
| 329 |
+
</div>
|
| 330 |
+
<div class="data-card p-6 rounded-lg">
|
| 331 |
+
<div class="text-blue-400 text-3xl mb-2"><i class="fas fa-weight-hanging"></i></div>
|
| 332 |
+
<h4 class="text-xl font-bold mb-2">Gravity</h4>
|
| 333 |
+
<p class="text-gray-300">8.87 m/s² (0.886 g)</p>
|
| 334 |
+
</div>
|
| 335 |
+
</div>
|
| 336 |
+
</div>
|
| 337 |
+
<div class="flex justify-center">
|
| 338 |
+
<div class="relative w-full max-w-md">
|
| 339 |
+
<img src="https://science.nasa.gov/wp-content/uploads/2023/09/uranus-moons-rings-1k.jpg" alt="Uranus with rings" class="rounded-lg shadow-xl w-full">
|
| 340 |
+
<div class="absolute -inset-2 border-2 border-blue-400 rounded-lg opacity-50"></div>
|
| 341 |
+
<div class="absolute -inset-4 border-2 border-blue-400 rounded-lg opacity-30"></div>
|
| 342 |
+
</div>
|
| 343 |
+
</div>
|
| 344 |
+
</div>
|
| 345 |
+
|
| 346 |
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16">
|
| 347 |
+
<div class="data-card p-8 rounded-lg">
|
| 348 |
+
<div class="flex justify-center mb-6">
|
| 349 |
+
<div class="w-16 h-16 bg-blue-900 bg-opacity-50 rounded-full flex items-center justify-center">
|
| 350 |
+
<i class="fas fa-atom text-blue-400 text-2xl"></i>
|
| 351 |
+
</div>
|
| 352 |
+
</div>
|
| 353 |
+
<h3 class="text-xl font-bold mb-4 text-center orbitron">COMPOSITION</h3>
|
| 354 |
+
<p class="text-gray-300 text-center">
|
| 355 |
+
Uranus is an ice giant, composed primarily of water, ammonia, and methane ices, with a small rocky core and a gaseous atmosphere of hydrogen and helium.
|
| 356 |
+
</p>
|
| 357 |
+
</div>
|
| 358 |
+
|
| 359 |
+
<div class="data-card p-8 rounded-lg">
|
| 360 |
+
<div class="flex justify-center mb-6">
|
| 361 |
+
<div class="w-16 h-16 bg-blue-900 bg-opacity-50 rounded-full flex items-center justify-center">
|
| 362 |
+
<i class="fas fa-wind text-blue-400 text-2xl"></i>
|
| 363 |
+
</div>
|
| 364 |
+
</div>
|
| 365 |
+
<h3 class="text-xl font-bold mb-4 text-center orbitron">ATMOSPHERE</h3>
|
| 366 |
+
<p class="text-gray-300 text-center">
|
| 367 |
+
The atmosphere contains methane which gives Uranus its blue-green color. Wind speeds can reach up to 900 km/h (560 mph).
|
| 368 |
+
</p>
|
| 369 |
+
</div>
|
| 370 |
+
|
| 371 |
+
<div class="data-card p-8 rounded-lg">
|
| 372 |
+
<div class="flex justify-center mb-6">
|
| 373 |
+
<div class="w-16 h-16 bg-blue-900 bg-opacity-50 rounded-full flex items-center justify-center">
|
| 374 |
+
<i class="fas fa-ring text-blue-400 text-2xl"></i>
|
| 375 |
+
</div>
|
| 376 |
+
</div>
|
| 377 |
+
<h3 class="text-xl font-bold mb-4 text-center orbitron">RING SYSTEM</h3>
|
| 378 |
+
<p class="text-gray-300 text-center">
|
| 379 |
+
Uranus has 13 known rings, all very faint and dark. The rings are composed of extremely dark particles that vary in size from micrometers to a fraction of a meter.
|
| 380 |
+
</p>
|
| 381 |
+
</div>
|
| 382 |
+
</div>
|
| 383 |
+
</div>
|
| 384 |
+
</section>
|
| 385 |
+
|
| 386 |
+
<!-- Stats Section -->
|
| 387 |
+
<section class="py-20 bg-gradient-to-b from-gray-900 to-blue-900">
|
| 388 |
+
<div class="container mx-auto px-6">
|
| 389 |
+
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
|
| 390 |
+
<div>
|
| 391 |
+
<div class="stats-value orbitron">84</div>
|
| 392 |
+
<div class="stats-label text-gray-300 uppercase text-sm">Earth Years</div>
|
| 393 |
+
<div class="text-blue-400 mt-2">Orbital Period</div>
|
| 394 |
+
</div>
|
| 395 |
+
<div>
|
| 396 |
+
<div class="stats-value orbitron">27</div>
|
| 397 |
+
<div class="stats-label text-gray-300 uppercase text-sm">Known Moons</div>
|
| 398 |
+
<div class="text-blue-400 mt-2">Natural Satellites</div>
|
| 399 |
+
</div>
|
| 400 |
+
<div>
|
| 401 |
+
<div class="stats-value orbitron">2.9</div>
|
| 402 |
+
<div class="stats-label text-gray-300 uppercase text-sm">Billion km</div>
|
| 403 |
+
<div class="text-blue-400 mt-2">From Sun</div>
|
| 404 |
+
</div>
|
| 405 |
+
<div>
|
| 406 |
+
<div class="stats-value orbitron">-197°C</div>
|
| 407 |
+
<div class="stats-label text-gray-300 uppercase text-sm">Average Temp</div>
|
| 408 |
+
<div class="text-blue-400 mt-2">Atmosphere</div>
|
| 409 |
+
</div>
|
| 410 |
+
</div>
|
| 411 |
+
</div>
|
| 412 |
+
</section>
|
| 413 |
+
|
| 414 |
+
<!-- Moons Section -->
|
| 415 |
+
<section id="moons" class="py-20 bg-blue-900 bg-opacity-10">
|
| 416 |
+
<div class="container mx-auto px-6">
|
| 417 |
+
<h2 class="text-3xl md:text-4xl font-bold mb-16 text-center section-title orbitron uranus-gradient">MAJOR MOONS</h2>
|
| 418 |
+
|
| 419 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
| 420 |
+
<div class="moon-card rounded-lg overflow-hidden">
|
| 421 |
+
<div class="h-48 bg-blue-900 bg-opacity-50 flex items-center justify-center">
|
| 422 |
+
<div class="w-32 h-32 rounded-full bg-gradient-to-br from-blue-400 to-blue-800 shadow-lg"></div>
|
| 423 |
+
</div>
|
| 424 |
+
<div class="p-6">
|
| 425 |
+
<h3 class="text-xl font-bold mb-2 orbitron">TITANIA</h3>
|
| 426 |
+
<p class="text-gray-300 mb-4">Largest moon of Uranus with a diameter of 1,578 km. It has a system of enormous canyons and scarps.</p>
|
| 427 |
+
<div class="flex justify-between text-sm text-blue-400">
|
| 428 |
+
<span><i class="fas fa-ruler"></i> 1,578 km</span>
|
| 429 |
+
<span><i class="fas fa-history"></i> 8.7 days</span>
|
| 430 |
+
</div>
|
| 431 |
+
</div>
|
| 432 |
+
</div>
|
| 433 |
+
|
| 434 |
+
<div class="moon-card rounded-lg overflow-hidden">
|
| 435 |
+
<div class="h-48 bg-blue-900 bg-opacity-50 flex items-center justify-center">
|
| 436 |
+
<div class="w-28 h-28 rounded-full bg-gradient-to-br from-blue-300 to-blue-600 shadow-lg"></div>
|
| 437 |
+
</div>
|
| 438 |
+
<div class="p-6">
|
| 439 |
+
<h3 class="text-xl font-bold mb-2 orbitron">OBERON</h3>
|
| 440 |
+
<p class="text-gray-300 mb-4">Second largest moon with a heavily cratered surface and possible subsurface ocean.</p>
|
| 441 |
+
<div class="flex justify-between text-sm text-blue-400">
|
| 442 |
+
<span><i class="fas fa-ruler"></i> 1,523 km</span>
|
| 443 |
+
<span><i class="fas fa-history"></i> 13.5 days</span>
|
| 444 |
+
</div>
|
| 445 |
+
</div>
|
| 446 |
+
</div>
|
| 447 |
+
|
| 448 |
+
<div class="moon-card rounded-lg overflow-hidden">
|
| 449 |
+
<div class="h-48 bg-blue-900 bg-opacity-50 flex items-center justify-center">
|
| 450 |
+
<div class="w-24 h-24 rounded-full bg-gradient-to-br from-blue-200 to-blue-500 shadow-lg"></div>
|
| 451 |
+
</div>
|
| 452 |
+
<div class="p-6">
|
| 453 |
+
<h3 class="text-xl font-bold mb-2 orbitron">UMBRIEL</h3>
|
| 454 |
+
<p class="text-gray-300 mb-4">Darkest moon with a heavily cratered surface and mysterious bright-ringed crater.</p>
|
| 455 |
+
<div class="flex justify-between text-sm text-blue-400">
|
| 456 |
+
<span><i class="fas fa-ruler"></i> 1,170 km</span>
|
| 457 |
+
<span><i class="fas fa-history"></i> 4.1 days</span>
|
| 458 |
+
</div>
|
| 459 |
+
</div>
|
| 460 |
+
</div>
|
| 461 |
+
|
| 462 |
+
<div class="moon-card rounded-lg overflow-hidden">
|
| 463 |
+
<div class="h-48 bg-blue-900 bg-opacity-50 flex items-center justify-center">
|
| 464 |
+
<div class="w-24 h-24 rounded-full bg-gradient-to-br from-blue-100 to-blue-400 shadow-lg"></div>
|
| 465 |
+
</div>
|
| 466 |
+
<div class="p-6">
|
| 467 |
+
<h3 class="text-xl font-bold mb-2 orbitron">ARIEL</h3>
|
| 468 |
+
<p class="text-gray-300 mb-4">Brightest moon with evidence of past geological activity and extensive valley systems.</p>
|
| 469 |
+
<div class="flex justify-between text-sm text-blue-400">
|
| 470 |
+
<span><i class="fas fa-ruler"></i> 1,158 km</span>
|
| 471 |
+
<span><i class="fas fa-history"></i> 2.5 days</span>
|
| 472 |
+
</div>
|
| 473 |
+
</div>
|
| 474 |
+
</div>
|
| 475 |
+
</div>
|
| 476 |
+
|
| 477 |
+
<div class="text-center mt-12">
|
| 478 |
+
<a href="#" class="inline-block border border-blue-400 text-blue-400 hover:bg-blue-900 hover:bg-opacity-30 px-6 py-3 rounded-full font-bold orbitron transition-all">
|
| 479 |
+
VIEW ALL 27 MOONS <i class="fas fa-arrow-right ml-2"></i>
|
| 480 |
+
</a>
|
| 481 |
+
</div>
|
| 482 |
+
</div>
|
| 483 |
+
</section>
|
| 484 |
+
|
| 485 |
+
<!-- Exploration Section -->
|
| 486 |
+
<section id="exploration" class="py-20 bg-gray-900">
|
| 487 |
+
<div class="container mx-auto px-6">
|
| 488 |
+
<h2 class="text-3xl md:text-4xl font-bold mb-16 text-center section-title orbitron uranus-gradient">EXPLORATION</h2>
|
| 489 |
+
|
| 490 |
+
<div class="relative">
|
| 491 |
+
<div class="absolute left-0 top-0 h-full w-2 bg-blue-900 bg-opacity-50 md:left-1/2 md:-ml-1"></div>
|
| 492 |
+
|
| 493 |
+
<div class="relative mb-12">
|
| 494 |
+
<div class="timeline-item pl-10 md:pl-0 md:pr-10 md:w-1/2 md:ml-auto">
|
| 495 |
+
<div class="data-card p-8 rounded-lg">
|
| 496 |
+
<div class="flex items-center mb-4">
|
| 497 |
+
<div class="w-12 h-12 bg-blue-900 rounded-full flex items-center justify-center mr-4">
|
| 498 |
+
<span class="text-blue-400 font-bold orbitron">1986</span>
|
| 499 |
+
</div>
|
| 500 |
+
<h3 class="text-xl font-bold orbitron">VOYAGER 2 FLYBY</h3>
|
| 501 |
+
</div>
|
| 502 |
+
<p class="text-gray-300">
|
| 503 |
+
The only spacecraft to visit Uranus, Voyager 2 flew by the planet in January 1986. It discovered 10 new moons, studied the planet's unique atmosphere, and examined its ring system.
|
| 504 |
+
</p>
|
| 505 |
+
<div class="mt-4 flex flex-wrap gap-2">
|
| 506 |
+
<span class="bg-blue-900 bg-opacity-50 text-blue-400 px-3 py-1 rounded-full text-sm">10 New Moons</span>
|
| 507 |
+
<span class="bg-blue-900 bg-opacity-50 text-blue-400 px-3 py-1 rounded-full text-sm">Ring Studies</span>
|
| 508 |
+
<span class="bg-blue-900 bg-opacity-50 text-blue-400 px-3 py-1 rounded-full text-sm">Atmosphere Data</span>
|
| 509 |
+
</div>
|
| 510 |
+
</div>
|
| 511 |
+
<div class="timeline-line"></div>
|
| 512 |
+
</div>
|
| 513 |
+
</div>
|
| 514 |
+
|
| 515 |
+
<div class="relative mb-12">
|
| 516 |
+
<div class="timeline-item pl-10 md:w-1/2">
|
| 517 |
+
<div class="data-card p-8 rounded-lg">
|
| 518 |
+
<div class="flex items-center mb-4">
|
| 519 |
+
<div class="w-12 h-12 bg-blue-900 rounded-full flex items-center justify-center mr-4">
|
| 520 |
+
<span class="text-blue-400 font-bold orbitron">1990s</span>
|
| 521 |
+
</div>
|
| 522 |
+
<h3 class="text-xl font-bold orbitron">HUBBLE DISCOVERIES</h3>
|
| 523 |
+
</div>
|
| 524 |
+
<p class="text-gray-300">
|
| 525 |
+
The Hubble Space Telescope discovered two additional rings and two small moons (Mab and Cupid) in 2005. It also observed seasonal changes in Uranus's atmosphere.
|
| 526 |
+
</p>
|
| 527 |
+
<div class="mt-4 flex flex-wrap gap-2">
|
| 528 |
+
<span class="bg-blue-900 bg-opacity-50 text-blue-400 px-3 py-1 rounded-full text-sm">New Rings</span>
|
| 529 |
+
<span class="bg-blue-900 bg-opacity-50 text-blue-400 px-3 py-1 rounded-full text-sm">New Moons</span>
|
| 530 |
+
<span class="bg-blue-900 bg-opacity-50 text-blue-400 px-3 py-1 rounded-full text-sm">Atmosphere Studies</span>
|
| 531 |
+
</div>
|
| 532 |
+
</div>
|
| 533 |
+
<div class="timeline-line"></div>
|
| 534 |
+
</div>
|
| 535 |
+
</div>
|
| 536 |
+
|
| 537 |
+
<div class="relative">
|
| 538 |
+
<div class="timeline-item pl-10 md:pl-0 md:pr-10 md:w-1/2 md:ml-auto">
|
| 539 |
+
<div class="data-card p-8 rounded-lg">
|
| 540 |
+
<div class="flex items-center mb-4">
|
| 541 |
+
<div class="w-12 h-12 bg-blue-900 rounded-full flex items-center justify-center mr-4">
|
| 542 |
+
<span class="text-blue-400 font-bold orbitron">Future</span>
|
| 543 |
+
</div>
|
| 544 |
+
<h3 class="text-xl font-bold orbitron">URANUS ORBITER PROBE</h3>
|
| 545 |
+
</div>
|
| 546 |
+
<p class="text-gray-300">
|
| 547 |
+
NASA and ESA are considering missions to Uranus in the 2030s. The Uranus Orbiter and Probe would conduct in-depth studies of the planet's atmosphere, interior, moons, and rings.
|
| 548 |
+
</p>
|
| 549 |
+
<div class="mt-4 flex flex-wrap gap-2">
|
| 550 |
+
<span class="bg-blue-900 bg-opacity-50 text-blue-400 px-3 py-1 rounded-full text-sm">Proposed</span>
|
| 551 |
+
<span class="bg-blue-900 bg-opacity-50 text-blue-400 px-3 py-1 rounded-full text-sm">2030s Launch</span>
|
| 552 |
+
<span class="bg-blue-900 bg-opacity-50 text-blue-400 px-3 py-1 rounded-full text-sm">Comprehensive Study</span>
|
| 553 |
+
</div>
|
| 554 |
+
</div>
|
| 555 |
+
<div class="timeline-line"></div>
|
| 556 |
+
</div>
|
| 557 |
+
</div>
|
| 558 |
+
</div>
|
| 559 |
+
</div>
|
| 560 |
+
</section>
|
| 561 |
+
|
| 562 |
+
<!-- Facts Section -->
|
| 563 |
+
<section id="facts" class="py-20 bg-gradient-to-b from-blue-900 to-gray-900">
|
| 564 |
+
<div class="container mx-auto px-6">
|
| 565 |
+
<h2 class="text-3xl md:text-4xl font-bold mb-16 text-center section-title orbitron uranus-gradient">AMAZING FACTS</h2>
|
| 566 |
+
|
| 567 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
| 568 |
+
<div class="data-card p-8 rounded-lg">
|
| 569 |
+
<div class="flex items-start mb-6">
|
| 570 |
+
<div class="text-blue-400 text-3xl mr-4"><i class="fas fa-question"></i></div>
|
| 571 |
+
<div>
|
| 572 |
+
<h3 class="text-xl font-bold mb-2 orbitron">WHY THE NAME URANUS?</h3>
|
| 573 |
+
<p class="text-gray-300">
|
| 574 |
+
Uranus is named after the Greek god of the sky. In Greek mythology, Uranus was the father of Cronus (Saturn) and grandfather of Zeus (Jupiter).
|
| 575 |
+
</p>
|
| 576 |
+
</div>
|
| 577 |
+
</div>
|
| 578 |
+
</div>
|
| 579 |
+
|
| 580 |
+
<div class="data-card p-8 rounded-lg">
|
| 581 |
+
<div class="flex items-start mb-6">
|
| 582 |
+
<div class="text-blue-400 text-3xl mr-4"><i class="fas fa-eye"></i></div>
|
| 583 |
+
<div>
|
| 584 |
+
<h3 class="text-xl font-bold mb-2 orbitron">VISIBLE TO THE NAKED EYE</h3>
|
| 585 |
+
<p class="text-gray-300">
|
| 586 |
+
Uranus is just barely visible to the naked eye under very dark, clear conditions. It's often mistaken for a star due to its dimness.
|
| 587 |
+
</p>
|
| 588 |
+
</div>
|
| 589 |
+
</div>
|
| 590 |
+
</div>
|
| 591 |
+
|
| 592 |
+
<div class="data-card p-8 rounded-lg">
|
| 593 |
+
<div class="flex items-start mb-6">
|
| 594 |
+
<div class="text-blue-400 text-3xl mr-4"><i class="fas fa-calendar-alt"></i></div>
|
| 595 |
+
<div>
|
| 596 |
+
<h3 class="text-xl font-bold mb-2 orbitron">DISCOVERY DATE</h3>
|
| 597 |
+
<p class="text-gray-300">
|
| 598 |
+
Uranus was discovered by William Herschel on March 13, 1781, expanding the known boundaries of the solar system for the first time in modern history.
|
| 599 |
+
</p>
|
| 600 |
+
</div>
|
| 601 |
+
</div>
|
| 602 |
+
</div>
|
| 603 |
+
|
| 604 |
+
<div class="data-card p-8 rounded-lg">
|
| 605 |
+
<div class="flex items-start mb-6">
|
| 606 |
+
<div class="text-blue-400 text-3xl mr-4"><i class="fas fa-snowflake"></i></div>
|
| 607 |
+
<div>
|
| 608 |
+
<h3 class="text-xl font-bold mb-2 orbitron">COLDEST PLANET</h3>
|
| 609 |
+
<p class="text-gray-300">
|
| 610 |
+
Despite being farther from the Sun, Neptune isn't the coldest planet - Uranus holds that record with temperatures reaching -224°C (-371°F).
|
| 611 |
+
</p>
|
| 612 |
+
</div>
|
| 613 |
+
</div>
|
| 614 |
+
</div>
|
| 615 |
+
</div>
|
| 616 |
+
|
| 617 |
+
<div class="mt-16 text-center">
|
| 618 |
+
<div class="inline-block p-1 rounded-full bg-gradient-to-r from-blue-500 to-blue-800">
|
| 619 |
+
<div class="bg-gray-900 rounded-full px-8 py-4">
|
| 620 |
+
<h3 class="text-xl md:text-2xl font-bold mb-2 orbitron uranus-gradient">WANT MORE URANUS FACTS?</h3>
|
| 621 |
+
<p class="text-gray-300 mb-4 max-w-2xl mx-auto">
|
| 622 |
+
Sign up for our newsletter to receive the latest discoveries and research about the mysterious ice giant.
|
| 623 |
+
</p>
|
| 624 |
+
<form class="flex flex-col sm:flex-row gap-4 justify-center max-w-xl mx-auto">
|
| 625 |
+
<input type="email" placeholder="Your email address" class="px-4 py-3 bg-gray-800 border border-gray-700 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 text-white">
|
| 626 |
+
<button type="submit" class="explore-btn px-6 py-3 rounded-full font-bold orbitron">SUBSCRIBE</button>
|
| 627 |
+
</form>
|
| 628 |
+
</div>
|
| 629 |
+
</div>
|
| 630 |
+
</div>
|
| 631 |
+
</div>
|
| 632 |
+
</section>
|
| 633 |
+
|
| 634 |
+
<!-- Footer -->
|
| 635 |
+
<footer class="bg-black bg-opacity-80 py-12 border-t border-gray-800">
|
| 636 |
+
<div class="container mx-auto px-6">
|
| 637 |
+
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
| 638 |
+
<div>
|
| 639 |
+
<h3 class="text-xl font-bold mb-4 orbitron uranus-gradient">URANUS EXPLORER</h3>
|
| 640 |
+
<p class="text-gray-400">
|
| 641 |
+
Exploring the mysteries of the solar system's most enigmatic ice giant.
|
| 642 |
+
</p>
|
| 643 |
+
<div class="flex space-x-4 mt-6">
|
| 644 |
+
<a href="#" class="text-gray-400 hover:text-blue-400 transition-colors"><i class="fab fa-twitter text-xl"></i></a>
|
| 645 |
+
<a href="#" class="text-gray-400 hover:text-blue-400 transition-colors"><i class="fab fa-facebook text-xl"></i></a>
|
| 646 |
+
<a href="#" class="text-gray-400 hover:text-blue-400 transition-colors"><i class="fab fa-instagram text-xl"></i></a>
|
| 647 |
+
<a href="#" class="text-gray-400 hover:text-blue-400 transition-colors"><i class="fab fa-youtube text-xl"></i></a>
|
| 648 |
+
</div>
|
| 649 |
+
</div>
|
| 650 |
+
|
| 651 |
+
<div>
|
| 652 |
+
<h4 class="text-lg font-bold mb-4 text-white orbitron">EXPLORE</h4>
|
| 653 |
+
<ul class="space-y-2">
|
| 654 |
+
<li><a href="#about" class="text-gray-400 hover:text-blue-400 transition-colors">About Uranus</a></li>
|
| 655 |
+
<li><a href="#moons" class="text-gray-400 hover:text-blue-400 transition-colors">Moons</a></li>
|
| 656 |
+
<li><a href="#exploration" class="text-gray-400 hover:text-blue-400 transition-colors">Exploration</a></li>
|
| 657 |
+
<li><a href="#facts" class="text-gray-400 hover:text-blue-400 transition-colors">Facts</a></li>
|
| 658 |
+
</ul>
|
| 659 |
+
</div>
|
| 660 |
+
|
| 661 |
+
<div>
|
| 662 |
+
<h4 class="text-lg font-bold mb-4 text-white orbitron">RESOURCES</h4>
|
| 663 |
+
<ul class="space-y-2">
|
| 664 |
+
<li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors">NASA</a></li>
|
| 665 |
+
<li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors">ESA</a></li>
|
| 666 |
+
<li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors">JPL</a></li>
|
| 667 |
+
<li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors">Scientific Papers</a></li>
|
| 668 |
+
</ul>
|
| 669 |
+
</div>
|
| 670 |
+
|
| 671 |
+
<div>
|
| 672 |
+
<h4 class="text-lg font-bold mb-4 text-white orbitron">CONTACT</h4>
|
| 673 |
+
<ul class="space-y-2">
|
| 674 |
+
<li class="text-gray-400"><i class="fas fa-envelope mr-2 text-blue-400"></i> contact@uranusexplorer.com</li>
|
| 675 |
+
<li class="text-gray-400"><i class="fas fa-phone mr-2 text-blue-400"></i> +1 (555) 123-4567</li>
|
| 676 |
+
<li class="text-gray-400"><i class="fas fa-map-marker-alt mr-2 text-blue-400"></i> Space Research Center, Earth</li>
|
| 677 |
+
</ul>
|
| 678 |
+
</div>
|
| 679 |
+
</div>
|
| 680 |
+
|
| 681 |
+
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
|
| 682 |
+
<p class="text-gray-500 text-sm mb-4 md:mb-0">
|
| 683 |
+
© 2023 Uranus Explorer. All rights reserved.
|
| 684 |
+
</p>
|
| 685 |
+
<div class="flex space-x-6">
|
| 686 |
+
<a href="#" class="text-gray-500 hover:text-gray-300 text-sm">Privacy Policy</a>
|
| 687 |
+
<a href="#" class="text-gray-500 hover:text-gray-300 text-sm">Terms of Service</a>
|
| 688 |
+
<a href="#" class="text-gray-500 hover:text-gray-300 text-sm">Cookies</a>
|
| 689 |
+
</div>
|
| 690 |
+
</div>
|
| 691 |
+
</div>
|
| 692 |
+
</footer>
|
| 693 |
+
|
| 694 |
+
<script>
|
| 695 |
+
// Mobile menu toggle
|
| 696 |
+
document.getElementById('mobile-menu-button').addEventListener('click', function() {
|
| 697 |
+
const menu = document.getElementById('mobile-menu');
|
| 698 |
+
menu.classList.toggle('hidden');
|
| 699 |
+
});
|
| 700 |
+
|
| 701 |
+
// Smooth scrolling for navigation links
|
| 702 |
+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
| 703 |
+
anchor.addEventListener('click', function (e) {
|
| 704 |
+
e.preventDefault();
|
| 705 |
+
|
| 706 |
+
const targetId = this.getAttribute('href');
|
| 707 |
+
const targetElement = document.querySelector(targetId);
|
| 708 |
+
|
| 709 |
+
if (targetElement) {
|
| 710 |
+
window.scrollTo({
|
| 711 |
+
top: targetElement.offsetTop - 80,
|
| 712 |
+
behavior: 'smooth'
|
| 713 |
+
});
|
| 714 |
+
|
| 715 |
+
// Close mobile menu if open
|
| 716 |
+
const mobileMenu = document.getElementById('mobile-menu');
|
| 717 |
+
if (!mobileMenu.classList.contains('hidden')) {
|
| 718 |
+
mobileMenu.classList.add('hidden');
|
| 719 |
+
}
|
| 720 |
+
}
|
| 721 |
+
});
|
| 722 |
+
});
|
| 723 |
+
|
| 724 |
+
// Highlight active nav link on scroll
|
| 725 |
+
const sections = document.querySelectorAll('section');
|
| 726 |
+
const navLinks = document.querySelectorAll('.nav-link');
|
| 727 |
+
|
| 728 |
+
window.addEventListener('scroll', function() {
|
| 729 |
+
let current = '';
|
| 730 |
+
|
| 731 |
+
sections.forEach(section => {
|
| 732 |
+
const sectionTop = section.offsetTop;
|
| 733 |
+
const sectionHeight = section.clientHeight;
|
| 734 |
+
|
| 735 |
+
if (pageYOffset >= sectionTop - 100) {
|
| 736 |
+
current = section.getAttribute('id');
|
| 737 |
+
}
|
| 738 |
+
});
|
| 739 |
+
|
| 740 |
+
navLinks.forEach(link => {
|
| 741 |
+
link.classList.remove('active-nav');
|
| 742 |
+
if (link.getAttribute('href') === `#${current}`) {
|
| 743 |
+
link.classList.add('active-nav');
|
| 744 |
+
}
|
| 745 |
+
});
|
| 746 |
+
});
|
| 747 |
+
|
| 748 |
+
// Animate stats on scroll into view
|
| 749 |
+
const statsObserver = new IntersectionObserver((entries) => {
|
| 750 |
+
entries.forEach(entry => {
|
| 751 |
+
if (entry.isIntersecting) {
|
| 752 |
+
const stats = document.querySelectorAll('.stats-value');
|
| 753 |
+
stats.forEach(stat => {
|
| 754 |
+
stat.style.animation = 'countUp 2s forwards';
|
| 755 |
+
});
|
| 756 |
+
statsObserver.unobserve(entry.target);
|
| 757 |
+
}
|
| 758 |
+
});
|
| 759 |
+
}, { threshold: 0.5 });
|
| 760 |
+
|
| 761 |
+
const statsSection = document.querySelector('#facts');
|
| 762 |
+
if (statsSection) {
|
| 763 |
+
statsObserver.observe(statsSection);
|
| 764 |
+
}
|
| 765 |
+
|
| 766 |
+
// Add animation for counting up stats
|
| 767 |
+
const style = document.createElement('style');
|
| 768 |
+
style.innerHTML = `
|
| 769 |
+
@keyframes countUp {
|
| 770 |
+
from { opacity: 0; transform: translateY(20px); }
|
| 771 |
+
to { opacity: 1; transform: translateY(0); }
|
| 772 |
+
}
|
| 773 |
+
`;
|
| 774 |
+
document.head.appendChild(style);
|
| 775 |
+
</script>
|
| 776 |
+
<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=AlinCiocan/uranus" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
| 777 |
+
</html>
|
prompts.txt
ADDED
|
@@ -0,0 +1 @@
|
|
|
|
|
|
|
| 1 |
+
Create a uranus site sleek and technological
|