Skip to content

Commit a20b67d

Browse files
huanhuan
authored
Add initial index.html with basic layout and styles
1 parent 207a4e4 commit a20b67d

1 file changed

Lines changed: 127 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
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" />
6+
<title>Ship.Fail — Organization</title>
7+
<meta name="description" content="Ship.Fail GitHub Organization Gateway" />
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
11+
<script src="https://cdn.tailwindcss.com"></script>
12+
<script>
13+
tailwind.config = {
14+
darkMode: 'class',
15+
theme: {
16+
extend: {
17+
colors: {
18+
gray: {
19+
50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af',
20+
500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712',
21+
}
22+
}
23+
}
24+
}
25+
}
26+
</script>
27+
<style>
28+
:root { --brand: #7c3aed; --brand-2: #22d3ee; }
29+
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
30+
.glass { backdrop-filter: blur(12px); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); }
31+
.dark .glass { background: rgba(17, 24, 39, 0.4); border: 1px solid rgba(255, 255, 255, 0.05); }
32+
33+
/* Adjusted gradients for full screen splash */
34+
.gradient-dark { background: radial-gradient(circle at 50% 0%, rgba(124,58,237,0.15), transparent 40%), radial-gradient(circle at 80% 80%, rgba(34,211,238,0.1), transparent 40%); }
35+
.gradient-light { background: radial-gradient(circle at 50% 0%, rgba(124,58,237,0.05), transparent 40%), radial-gradient(circle at 80% 80%, rgba(34,211,238,0.05), transparent 40%); }
36+
</style>
37+
<script>
38+
// System preference detection and theme handling
39+
function updateTheme() {
40+
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
41+
document.documentElement.classList.add('dark');
42+
} else {
43+
document.documentElement.classList.remove('dark');
44+
}
45+
}
46+
updateTheme();
47+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme);
48+
</script>
49+
</head>
50+
<body class="bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-100 gradient-light dark:gradient-dark transition-colors duration-500 h-screen w-screen overflow-hidden flex flex-col items-center justify-center relative selection:bg-violet-500/30">
51+
52+
<!-- Theme Toggle (Absolute Top Right) -->
53+
<button id="theme-toggle" type="button" class="absolute top-6 right-6 p-2.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-violet-500/50">
54+
<svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
55+
<svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 100 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
56+
</button>
57+
58+
<!-- Main Content -->
59+
<main class="w-full max-w-md px-6 text-center z-10">
60+
61+
<!-- Logo Animation -->
62+
<div class="mb-8 relative inline-block group">
63+
<div class="absolute inset-0 bg-violet-600 blur-2xl opacity-20 group-hover:opacity-40 transition-opacity duration-500 rounded-full"></div>
64+
<span class="relative inline-flex h-24 w-24 items-center justify-center rounded-2xl bg-violet-600 text-white text-4xl font-extrabold shadow-2xl transform group-hover:scale-105 transition-transform duration-300">SF</span>
65+
</div>
66+
67+
<h1 class="text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white mb-2">Ship<span class="text-violet-600 dark:text-violet-400">.Fail</span></h1>
68+
<p class="text-lg text-gray-600 dark:text-gray-400 mb-10">GitHub for Hackathon Ideas</p>
69+
70+
<!-- CTAs -->
71+
<div class="space-y-4">
72+
<a href="https://ship.fail" class="group relative flex items-center justify-center w-full p-4 text-base font-semibold text-white transition-all duration-200 bg-violet-600 rounded-xl hover:bg-violet-500 hover:shadow-lg hover:shadow-violet-500/25 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-violet-600 dark:focus:ring-offset-gray-900">
73+
<span class="absolute inset-0 w-full h-full rounded-xl opacity-0 group-hover:opacity-10 bg-white transition-opacity"></span>
74+
<span>Visit Official Website</span>
75+
<svg class="w-5 h-5 ml-2 -mr-1 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
76+
</a>
77+
78+
<a href="https://github.com/ShipFail" class="group flex items-center justify-center w-full p-4 text-base font-medium text-gray-700 dark:text-gray-200 transition-all duration-200 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-200 dark:focus:ring-gray-700 dark:focus:ring-offset-gray-900">
79+
<svg class="w-5 h-5 mr-2 text-gray-500 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white transition-colors" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
80+
<span>View Organization on GitHub</span>
81+
</a>
82+
</div>
83+
84+
<div class="mt-12 text-xs text-gray-400 dark:text-gray-500">
85+
<p>&copy; <span id="year"></span> Ship.Fail</p>
86+
</div>
87+
</main>
88+
89+
<script>
90+
document.getElementById('year').textContent = new Date().getFullYear();
91+
92+
var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
93+
var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
94+
var themeToggleBtn = document.getElementById('theme-toggle');
95+
96+
// Initial icon state
97+
if (document.documentElement.classList.contains('dark')) {
98+
themeToggleLightIcon.classList.remove('hidden');
99+
} else {
100+
themeToggleDarkIcon.classList.remove('hidden');
101+
}
102+
103+
themeToggleBtn.addEventListener('click', function() {
104+
themeToggleDarkIcon.classList.toggle('hidden');
105+
themeToggleLightIcon.classList.toggle('hidden');
106+
107+
if (localStorage.getItem('theme')) {
108+
if (localStorage.getItem('theme') === 'light') {
109+
document.documentElement.classList.add('dark');
110+
localStorage.setItem('theme', 'dark');
111+
} else {
112+
document.documentElement.classList.remove('dark');
113+
localStorage.setItem('theme', 'light');
114+
}
115+
} else {
116+
if (document.documentElement.classList.contains('dark')) {
117+
document.documentElement.classList.remove('dark');
118+
localStorage.setItem('theme', 'light');
119+
} else {
120+
document.documentElement.classList.add('dark');
121+
localStorage.setItem('theme', 'dark');
122+
}
123+
}
124+
});
125+
</script>
126+
</body>
127+
</html>

0 commit comments

Comments
 (0)