Hugging Face's logo

Spaces:
oopshnik
/
cosmic-checkboxes
Running

App Files Community
oopshnik commited on
Commit
6e41318
·
verified ·
1 Parent(s): 991c76b

Make me code with Space grokest text:

Browse files
Files changed (5) hide show
  1. README.md +6 -3
  2. components/cosmic-footer.js +50 -0
  3. index.html +2 -19
  4. script.js +36 -0
  5. style.css +94 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Cosmic Checkboxes
3
- emoji: 🐨
4
  colorFrom: red
5
  colorTo: green
 
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: Cosmic Checkboxes 🌌
 
3
  colorFrom: red
4
  colorTo: green
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/cosmic-footer.js ADDED
@@ -0,0 +1,50 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CosmicFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ footer {
7
+ margin-top: 3rem;
8
+ padding: 1rem;
9
+ text-align: center;
10
+ font-size: 0.8rem;
11
+ color: #777;
12
+ border-top: 1px solid #333;
13
+ }
14
+ .stars {
15
+ position: relative;
16
+ height: 1px;
17
+ margin: 1rem 0;
18
+ }
19
+ .star {
20
+ position: absolute;
21
+ width: 2px;
22
+ height: 2px;
23
+ background: white;
24
+ border-radius: 50%;
25
+ animation: twinkle 2s infinite alternate;
26
+ }
27
+ @keyframes twinkle {
28
+ 0% { opacity: 0.2; }
29
+ 100% { opacity: 1; }
30
+ }
31
+ </style>
32
+ <footer>
33
+ <div class="stars" id="stars"></div>
34
+ <p>Cosmic Checkboxes &copy; ${new Date().getFullYear()}</p>
35
+ </footer>
36
+ `;
37
+
38
+ // Generate random stars
39
+ const starsContainer = this.shadowRoot.getElementById('stars');
40
+ for (let i = 0; i < 20; i++) {
41
+ const star = document.createElement('div');
42
+ star.className = 'star';
43
+ star.style.left = `${Math.random() * 100}%`;
44
+ star.style.top = `${Math.random() * 100}%`;
45
+ star.style.animationDelay = `${Math.random() * 2}s`;
46
+ starsContainer.appendChild(star);
47
+ }
48
+ }
49
+ }
50
+ customElements.define('cosmic-footer', CosmicFooter);
index.html CHANGED
@@ -1,19 +1,2 @@
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
+
2
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
script.js ADDED
@@ -0,0 +1,36 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Add ripple effect to checkboxes
2
+ document.querySelectorAll('.checkbox-label').forEach(label => {
3
+ label.addEventListener('click', (e) => {
4
+ // Create ripple element
5
+ const ripple = document.createElement('span');
6
+ ripple.classList.add('ripple-effect');
7
+
8
+ // Position the ripple
9
+ const checkbox = label.querySelector('.checkbox-custom, .animated-checkbox, .icon-checkbox');
10
+ const rect = checkbox.getBoundingClientRect();
11
+ const size = Math.max(rect.width, rect.height);
12
+
13
+ ripple.style.width = ripple.style.height = `${size}px`;
14
+ ripple.style.left = `${e.clientX - rect.left - size/2}px`;
15
+ ripple.style.top = `${e.clientY - rect.top - size/2}px`;
16
+
17
+ // Add ripple to checkbox
18
+ checkbox.appendChild(ripple);
19
+
20
+ // Remove ripple after animation
21
+ setTimeout(() => {
22
+ ripple.remove();
23
+ }, 600);
24
+ });
25
+ });
26
+
27
+ // Add keyboard navigation
28
+ document.querySelectorAll('.checkbox-input').forEach(checkbox => {
29
+ checkbox.addEventListener('keydown', (e) => {
30
+ if (e.key === 'Enter' || e.key === ' ') {
31
+ e.preventDefault();
32
+ checkbox.checked = !checkbox.checked;
33
+ checkbox.dispatchEvent(new Event('change'));
34
+ }
35
+ });
36
+ });
style.css CHANGED
@@ -1,28 +1,104 @@
 
 
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
+
2
+ /* Cosmic Theme */
3
  body {
4
+ background: #000;
5
+ color: #fff;
6
+ font-family: 'Space Mono', monospace;
7
+ min-height: 100vh;
8
+ padding: 2rem;
9
+ }
10
+
11
+ /* Base Checkbox Styles */
12
+ .checkbox-container {
13
+ @apply relative;
14
+ }
15
+ .checkbox-label {
16
+ @apply flex items-center cursor-pointer select-none;
17
+ }
18
+
19
+ .checkbox-input {
20
+ @apply absolute opacity-0 h-0 w-0;
21
+ }
22
+
23
+ .checkbox-text {
24
+ @apply ml-3 text-gray-700 font-medium;
25
+ }
26
+
27
+ /* Simple Checkbox */
28
+ .checkbox-custom {
29
+ @apply relative h-6 w-6 rounded border-2 border-gray-300 transition-all duration-200;
30
+ }
31
+
32
+ .checkbox-input:checked ~ .checkbox-custom {
33
+ @apply bg-indigo-500 border-indigo-500;
34
+ }
35
+
36
+ .checkbox-input:checked ~ .checkbox-custom::after {
37
+ content: '';
38
+ @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-2 h-3 border-r-2 border-b-2 border-white rotate-45;
39
+ }
40
+
41
+ /* Animated Checkbox */
42
+ .animated-checkbox {
43
+ @apply relative h-6 w-12 rounded-full bg-gray-300 transition-all duration-300;
44
  }
45
 
46
+ .animated-checkbox-inner {
47
+ @apply absolute top-1 left-1 h-4 w-4 rounded-full bg-white shadow-md transition-all duration-300;
 
48
  }
49
 
50
+ .checkbox-input:checked ~ .animated-checkbox {
51
+ @apply bg-indigo-500;
 
 
 
52
  }
53
 
54
+ .checkbox-input:checked ~ .animated-checkbox .animated-checkbox-inner {
55
+ @apply transform translate-x-6;
 
 
 
 
56
  }
57
 
58
+ /* Icon Checkbox */
59
+ .icon-checkbox {
60
+ @apply relative h-6 w-6 rounded border-2 border-gray-300 flex items-center justify-center transition-all duration-200;
61
  }
62
+
63
+ .icon-check {
64
+ @apply text-transparent w-4 h-4 stroke-[3px] transition-all duration-200;
65
+ }
66
+ .checkbox-input:checked ~ .checkbox-custom {
67
+ @apply bg-transparent border-white;
68
+ box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
69
+ }
70
+
71
+ .checkbox-input:checked ~ .checkbox-custom::after {
72
+ @apply border-white;
73
+ }
74
+
75
+ .checkbox-input:checked ~ .animated-checkbox {
76
+ @apply bg-transparent border-white;
77
+ }
78
+
79
+ .checkbox-input:checked ~ .animated-checkbox .animated-checkbox-inner {
80
+ @apply bg-white;
81
+ box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
82
+ }
83
+
84
+ .checkbox-input:checked ~ .icon-checkbox {
85
+ @apply bg-transparent border-white;
86
+ box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
87
+ }
88
+ .checkbox-input:checked ~ .icon-checkbox .icon-check {
89
+ @apply text-white;
90
+ }
91
+
92
+ /* Hover Effects */
93
+ .checkbox-label:hover .checkbox-custom,
94
+ .checkbox-label:hover .animated-checkbox,
95
+ .checkbox-label:hover .icon-checkbox {
96
+ @apply shadow-md;
97
+ }
98
+
99
+ /* Focus Styles */
100
+ .checkbox-input:focus ~ .checkbox-custom,
101
+ .checkbox-input:focus ~ .animated-checkbox,
102
+ .checkbox-input:focus ~ .icon-checkbox {
103
+ @apply ring-2 ring-indigo-200;
104
+ }