VibeCodingStudio commited on
Commit
cef736c
Β·
verified Β·
1 Parent(s): 196a893

https://phantom-digital.com/

Browse files
Files changed (7) hide show
  1. README.md +8 -5
  2. components/footer.js +70 -0
  3. components/hero.js +95 -0
  4. components/navbar.js +93 -0
  5. index.html +109 -19
  6. script.js +42 -0
  7. style.css +26 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Icracked Universe Explorer
3
- emoji: πŸŒ–
4
- colorFrom: purple
5
- colorTo: gray
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: iCracked Universe Explorer πŸ”“
3
+ colorFrom: blue
4
+ colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/footer.js ADDED
@@ -0,0 +1,70 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ footer {
7
+ background-color: white;
8
+ border-top: 1px solid #e5e7eb;
9
+ }
10
+ .dark footer {
11
+ background-color: #1f2937;
12
+ border-top: 1px solid #374151;
13
+ }
14
+ .footer-container {
15
+ max-width: 1200px;
16
+ margin: 0 auto;
17
+ padding: 2rem 1rem;
18
+ display: flex;
19
+ flex-direction: column;
20
+ align-items: center;
21
+ text-align: center;
22
+ }
23
+ .footer-links {
24
+ display: flex;
25
+ gap: 1.5rem;
26
+ margin-bottom: 1.5rem;
27
+ }
28
+ .footer-link {
29
+ color: #4b5563;
30
+ text-decoration: none;
31
+ transition: color 0.2s;
32
+ }
33
+ .dark .footer-link {
34
+ color: #d1d5db;
35
+ }
36
+ .footer-link:hover {
37
+ color: #6366f1;
38
+ }
39
+ .copyright {
40
+ color: #6b7280;
41
+ font-size: 0.875rem;
42
+ }
43
+ .dark .copyright {
44
+ color: #9ca3af;
45
+ }
46
+ @media (max-width: 640px) {
47
+ .footer-links {
48
+ flex-direction: column;
49
+ gap: 0.75rem;
50
+ }
51
+ }
52
+ </style>
53
+ <footer>
54
+ <div class="footer-container">
55
+ <div class="footer-links">
56
+ <a href="#" class="footer-link">Home</a>
57
+ <a href="#deepseek" class="footer-link">DeepSeek</a>
58
+ <a href="#tools" class="footer-link">Tools</a>
59
+ <a href="#resources" class="footer-link">Resources</a>
60
+ <a href="#" class="footer-link">About</a>
61
+ </div>
62
+ <p class="copyright">
63
+ Β© ${new Date().getFullYear()} iCracked Universe Explorer. All information provided for educational purposes only.
64
+ </p>
65
+ </div>
66
+ </footer>
67
+ `;
68
+ }
69
+ }
70
+ customElements.define('custom-footer', CustomFooter);
components/hero.js ADDED
@@ -0,0 +1,95 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomHero extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .hero {
7
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
8
+ color: white;
9
+ padding: 5rem 1rem;
10
+ text-align: center;
11
+ position: relative;
12
+ overflow: hidden;
13
+ }
14
+ .dark .hero {
15
+ background: linear-gradient(135deg, #4338ca 0%, #7c3aed 100%);
16
+ }
17
+ .hero-content {
18
+ max-width: 1200px;
19
+ margin: 0 auto;
20
+ position: relative;
21
+ z-index: 2;
22
+ }
23
+ .hero h1 {
24
+ font-size: 3rem;
25
+ font-weight: 800;
26
+ margin-bottom: 1.5rem;
27
+ line-height: 1.2;
28
+ }
29
+ .hero p {
30
+ font-size: 1.25rem;
31
+ max-width: 800px;
32
+ margin: 0 auto 2rem auto;
33
+ opacity: 0.9;
34
+ }
35
+ .hero-buttons {
36
+ display: flex;
37
+ gap: 1rem;
38
+ justify-content: center;
39
+ flex-wrap: wrap;
40
+ }
41
+ .hero-button {
42
+ padding: 0.75rem 1.5rem;
43
+ border-radius: 0.5rem;
44
+ font-weight: 600;
45
+ transition: all 0.2s;
46
+ }
47
+ .primary-button {
48
+ background: white;
49
+ color: #6366f1;
50
+ }
51
+ .primary-button:hover {
52
+ transform: translateY(-2px);
53
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
54
+ }
55
+ .secondary-button {
56
+ background: rgba(255, 255, 255, 0.1);
57
+ color: white;
58
+ border: 1px solid rgba(255, 255, 255, 0.2);
59
+ }
60
+ .secondary-button:hover {
61
+ background: rgba(255, 255, 255, 0.2);
62
+ }
63
+ .hero-pattern {
64
+ position: absolute;
65
+ top: 0;
66
+ left: 0;
67
+ width: 100%;
68
+ height: 100%;
69
+ opacity: 0.1;
70
+ background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
71
+ }
72
+ @media (max-width: 768px) {
73
+ .hero h1 {
74
+ font-size: 2.25rem;
75
+ }
76
+ .hero p {
77
+ font-size: 1.1rem;
78
+ }
79
+ }
80
+ </style>
81
+ <div class="hero">
82
+ <div class="hero-pattern"></div>
83
+ <div class="hero-content">
84
+ <h1>Unlock Your Device's Full Potential</h1>
85
+ <p>Discover the ultimate jailbreak tools and resources to customize your iOS experience beyond Apple's limitations</p>
86
+ <div class="hero-buttons">
87
+ <a href="#tools" class="hero-button primary-button">Explore Tools</a>
88
+ <a href="#deepseek" class="hero-button secondary-button">Learn More</a>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ `;
93
+ }
94
+ }
95
+ customElements.define('custom-hero', CustomHero);
components/navbar.js ADDED
@@ -0,0 +1,93 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ nav {
7
+ background-color: white;
8
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
9
+ }
10
+ .dark nav {
11
+ background-color: #1f2937;
12
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
13
+ }
14
+ .nav-container {
15
+ max-width: 1200px;
16
+ margin: 0 auto;
17
+ padding: 1rem;
18
+ display: flex;
19
+ justify-content: space-between;
20
+ align-items: center;
21
+ }
22
+ .logo {
23
+ font-weight: 700;
24
+ font-size: 1.25rem;
25
+ color: #111827;
26
+ text-decoration: none;
27
+ display: flex;
28
+ align-items: center;
29
+ }
30
+ .dark .logo {
31
+ color: #f9fafb;
32
+ }
33
+ .nav-links {
34
+ display: flex;
35
+ gap: 1.5rem;
36
+ align-items: center;
37
+ }
38
+ .nav-link {
39
+ color: #4b5563;
40
+ text-decoration: none;
41
+ font-weight: 500;
42
+ transition: color 0.2s;
43
+ }
44
+ .dark .nav-link {
45
+ color: #d1d5db;
46
+ }
47
+ .nav-link:hover {
48
+ color: #6366f1;
49
+ }
50
+ .theme-toggle {
51
+ background: none;
52
+ border: none;
53
+ cursor: pointer;
54
+ color: #4b5563;
55
+ padding: 0.5rem;
56
+ border-radius: 0.375rem;
57
+ transition: all 0.2s;
58
+ }
59
+ .dark .theme-toggle {
60
+ color: #d1d5db;
61
+ }
62
+ .theme-toggle:hover {
63
+ background-color: #f3f4f6;
64
+ }
65
+ .dark .theme-toggle:hover {
66
+ background-color: #374151;
67
+ }
68
+ @media (max-width: 640px) {
69
+ .nav-links {
70
+ gap: 1rem;
71
+ }
72
+ }
73
+ </style>
74
+ <nav>
75
+ <div class="nav-container">
76
+ <a href="/" class="logo">
77
+ <i data-feather="lock"></i>
78
+ <span class="ml-2">iCracked Universe</span>
79
+ </a>
80
+ <div class="nav-links">
81
+ <a href="#deepseek" class="nav-link">DeepSeek</a>
82
+ <a href="#tools" class="nav-link">Tools</a>
83
+ <a href="#resources" class="nav-link">Resources</a>
84
+ <button id="theme-toggle" class="theme-toggle">
85
+ <i data-feather="moon"></i>
86
+ </button>
87
+ </div>
88
+ </div>
89
+ </nav>
90
+ `;
91
+ }
92
+ }
93
+ customElements.define('custom-navbar', CustomNavbar);
index.html CHANGED
@@ -1,19 +1,109 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Jailbreak Index Explorer</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: {
18
+ 500: '#6366f1',
19
+ },
20
+ secondary: {
21
+ 500: '#10b981',
22
+ }
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ </head>
29
+ <body class="bg-gray-100 dark:bg-gray-900 min-h-screen">
30
+ <custom-navbar></custom-navbar>
31
+ <custom-hero></custom-hero>
32
+
33
+ <main class="container mx-auto px-4 py-8">
34
+ <div class="max-w-4xl mx-auto">
35
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden mb-8">
36
+ <div class="p-6">
37
+ <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">The Jailbreak Index</h1>
38
+ <p class="text-gray-600 dark:text-gray-300 mb-6">Your ultimate guide to iOS jailbreaking tools and resources</p>
39
+
40
+ <div class="flex flex-wrap gap-4 mb-6">
41
+ <a href="#deepseek" class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg transition-colors">
42
+ DeepSeek
43
+ </a>
44
+ <a href="#tools" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-lg transition-colors">
45
+ Tools
46
+ </a>
47
+ <a href="#resources" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-lg transition-colors">
48
+ Resources
49
+ </a>
50
+ </div>
51
+ </div>
52
+ </div>
53
+
54
+ <section id="deepseek" class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden mb-8">
55
+ <div class="p-6">
56
+ <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
57
+ <i data-feather="search" class="mr-2"></i> DeepSeek
58
+ </h2>
59
+ <p class="text-gray-600 dark:text-gray-300 mb-4">
60
+ Find detailed information about jailbreak tools, compatibility, and installation guides.
61
+ </p>
62
+
63
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
64
+ <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
65
+ <h3 class="font-semibold text-gray-900 dark:text-white mb-2">iOS Versions</h3>
66
+ <p class="text-gray-600 dark:text-gray-300">Check compatibility for your device</p>
67
+ </div>
68
+ <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
69
+ <h3 class="font-semibold text-gray-900 dark:text-white mb-2">Jailbreak Tools</h3>
70
+ <p class="text-gray-600 dark:text-gray-300">Latest available jailbreaks</p>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ </section>
75
+
76
+ <section id="tools" class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden mb-8">
77
+ <div class="p-6">
78
+ <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
79
+ <i data-feather="tool" class="mr-2"></i> Jailbreak Tools
80
+ </h2>
81
+
82
+ <div class="space-y-4">
83
+ <div class="p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
84
+ <h3 class="font-semibold text-gray-900 dark:text-white">Checkra1n</h3>
85
+ <p class="text-gray-600 dark:text-gray-300 text-sm">A semi-tethered jailbreak for iOS 12.0 and up to 14.8.1</p>
86
+ </div>
87
+ <div class="p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
88
+ <h3 class="font-semibold text-gray-900 dark:text-white">Unc0ver</h3>
89
+ <p class="text-gray-600 dark:text-gray-300 text-sm">Supports iOS 11.0 through 14.8</p>
90
+ </div>
91
+ <div class="p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
92
+ <h3 class="font-semibold text-gray-900 dark:text-white">Taurine</h3>
93
+ <p class="text-gray-600 dark:text-gray-300 text-sm">For iOS 14.0 - 14.3</p>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </section>
98
+ </div>
99
+ </main>
100
+
101
+ <custom-footer></custom-footer>
102
+ <script src="components/navbar.js"></script>
103
+ <script src="components/hero.js"></script>
104
+ <script src="components/footer.js"></script>
105
+ <script src="script.js"></script>
106
+ <script>feather.replace();</script>
107
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
108
+ </body>
109
+ </html>
script.js ADDED
@@ -0,0 +1,42 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', function() {
2
+ // Smooth scrolling for anchor links
3
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
4
+ anchor.addEventListener('click', function (e) {
5
+ e.preventDefault();
6
+
7
+ const targetId = this.getAttribute('href');
8
+ if (targetId === '#') return;
9
+
10
+ const targetElement = document.querySelector(targetId);
11
+ if (targetElement) {
12
+ targetElement.scrollIntoView({
13
+ behavior: 'smooth',
14
+ block: 'start'
15
+ });
16
+ }
17
+ });
18
+ });
19
+
20
+ // Theme toggle functionality
21
+ const themeToggle = document.getElementById('theme-toggle');
22
+ if (themeToggle) {
23
+ themeToggle.addEventListener('click', function() {
24
+ const html = document.documentElement;
25
+ if (html.classList.contains('dark')) {
26
+ html.classList.remove('dark');
27
+ localStorage.setItem('theme', 'light');
28
+ } else {
29
+ html.classList.add('dark');
30
+ localStorage.setItem('theme', 'dark');
31
+ }
32
+ });
33
+ }
34
+
35
+ // Check for saved theme preference
36
+ if (localStorage.getItem('theme') === 'dark' ||
37
+ (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
38
+ document.documentElement.classList.add('dark');
39
+ } else {
40
+ document.documentElement.classList.remove('dark');
41
+ }
42
+ });
style.css CHANGED
@@ -1,28 +1,36 @@
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
  }
 
 
 
 
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
2
  body {
3
+ font-family: 'Inter', sans-serif;
4
+ transition: background-color 0.3s ease;
5
+ scroll-behavior: smooth;
6
+ }
7
+ /* Custom scrollbar */
8
+ ::-webkit-scrollbar {
9
+ width: 8px;
10
+ height: 8px;
11
+ }
12
+
13
+ ::-webkit-scrollbar-track {
14
+ background: #f1f1f1;
15
  }
16
 
17
+ ::-webkit-scrollbar-thumb {
18
+ background: #888;
19
+ border-radius: 4px;
20
  }
21
 
22
+ ::-webkit-scrollbar-thumb:hover {
23
+ background: #555;
 
 
 
24
  }
25
 
26
+ .dark ::-webkit-scrollbar-track {
27
+ background: #1f2937;
 
 
 
 
28
  }
29
 
30
+ .dark ::-webkit-scrollbar-thumb {
31
+ background: #4b5563;
32
  }
33
+
34
+ .dark ::-webkit-scrollbar-thumb:hover {
35
+ background: #6b7280;
36
+ }