Hugging Face's logo

Spaces:
ProjectGenesis
/
glow-switch-control-panel
Running

App Files Community
ProjectGenesis commited on
Commit
758010d
·
verified ·
1 Parent(s): b1feefd

<div class="control-panel">

Browse files

<ul>
<li>
<label>
<input type="checkbox">
<div class="icon"><i class="fa fa-phone"></i></div>
</label>
</li>

<li>
<label>
<input type="checkbox">
<div class="icon"><i class="fa fa-plane"></i></div>
</label>
</li>

<li>
<label>
<input type="checkbox" checked>
<div class="icon"><i class="fa fa-moon-o"></i></div>
</label>
</li>

<li>
<label>
<input type="checkbox" checked>
<div class="icon"><i class="fa fa-wifi"></i></div>
</label>
</li>

<li>
<label>
<input type="checkbox">
<div class="icon"><i class="fa fa-volume-up"></i></div>
</label>
</li>

<li>
<label>
<input type="checkbox">
<div class="icon"><i class="fa fa-map-marker"></i></div>
</label>
</li>
</ul>
</div>

<style>
/* Entire Screen */
.control-panel {
margin: 0;
height: 100vh;
background-color: #121212; /* warm neutral black, not blue-leaning */
display: flex;
align-items: center;
justify-content: center;
}

/* Panel Box */
.control-panel ul {
width: 340px;
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 20px;
margin: 0;
border-radius: 10px;
background-image: linear-gradient(0deg, #0a0a0a, #1a1a1a); /* warm blacks */
border: 3px solid #000;
}

/* List */
.control-panel li {
margin: 15px;
}

label {
position: relative;
}

/* Hide checkbox */
input {
position: absolute;
opacity: 0;
cursor: pointer;
}

/* Icon box */
.icon {
width: 60px;
height: 60px;
background-color: #141414; /* warm-toned gray */
border: 3px solid #000;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.25s ease;
}

/* Icon default */
.icon .fa {
font-size: 30px;
color: #333333; /* warm gray */
transition: color 0.25s ease, text-shadow 0.25s ease;
}

/* ON STATE — PURE ORANGE GLOW ONLY */
input:checked ~ .icon {
background-color: #000;
border-color: #ff7a00; /* neon orange */
box-shadow:
0 0 6px rgba(255,122,0,1),
0 0 14px rgba(255,122,0,0.9),
0 0 24px rgba(255,122,0,0.8);
}

/* ON ICON — WHITE */
input:checked ~ .icon .fa {
color: #ffffff;
text-shadow:
0 0 6px rgba(255,255,255,0.8);
}
</style>

Files changed (4) hide show
  1. README.md +7 -4
  2. index.html +81 -19
  3. script.js +26 -0
  4. style.css +61 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Glow Switch Control Panel
3
- emoji: 🏢
4
- colorFrom: red
5
  colorTo: yellow
 
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: Glow Switch Control Panel 🔥
3
+ colorFrom: yellow
 
4
  colorTo: yellow
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).
index.html CHANGED
@@ -1,19 +1,81 @@
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">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Glow Switch Control Panel</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ </head>
12
+ <body class="bg-gray-900 flex items-center justify-center min-h-screen">
13
+ <div class="control-panel">
14
+ <ul class="grid grid-cols-3 gap-4 p-6">
15
+ <li>
16
+ <label class="cursor-pointer">
17
+ <input type="checkbox" class="absolute opacity-0">
18
+ <div class="icon flex items-center justify-center">
19
+ <i data-feather="phone"></i>
20
+ </div>
21
+ </label>
22
+ </li>
23
+ <li>
24
+ <label class="cursor-pointer">
25
+ <input type="checkbox" class="absolute opacity-0">
26
+ <div class="icon flex items-center justify-center">
27
+ <i data-feather="airplane"></i>
28
+ </div>
29
+ </label>
30
+ </li>
31
+ <li>
32
+ <label class="cursor-pointer">
33
+ <input type="checkbox" checked class="absolute opacity-0">
34
+ <div class="icon flex items-center justify-center">
35
+ <i data-feather="moon"></i>
36
+ </div>
37
+ </label>
38
+ </li>
39
+ <li>
40
+ <label class="cursor-pointer">
41
+ <input type="checkbox" checked class="absolute opacity-0">
42
+ <div class="icon flex items-center justify-center">
43
+ <i data-feather="wifi"></i>
44
+ </div>
45
+ </label>
46
+ </li>
47
+ <li>
48
+ <label class="cursor-pointer">
49
+ <input type="checkbox" class="absolute opacity-0">
50
+ <div class="icon flex items-center justify-center">
51
+ <i data-feather="volume-2"></i>
52
+ </div>
53
+ </label>
54
+ </li>
55
+ <li>
56
+ <label class="cursor-pointer">
57
+ <input type="checkbox" class="absolute opacity-0">
58
+ <div class="icon flex items-center justify-center">
59
+ <i data-feather="map-pin"></i>
60
+ </div>
61
+ </label>
62
+ </li>
63
+ </ul>
64
+ </div>
65
+
66
+ <script>
67
+ feather.replace();
68
+
69
+ // Add click effect to icons
70
+ document.querySelectorAll('.icon').forEach(icon => {
71
+ icon.addEventListener('click', function() {
72
+ this.classList.add('animate-ping');
73
+ setTimeout(() => {
74
+ this.classList.remove('animate-ping');
75
+ }, 300);
76
+ });
77
+ });
78
+ </script>
79
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
80
+ </body>
81
+ </html>
script.js ADDED
@@ -0,0 +1,26 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Add sound effects for toggle
2
+ document.addEventListener('DOMContentLoaded', () => {
3
+ const audioContext = new (window.AudioContext || window.webkitAudioContext)();
4
+
5
+ document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
6
+ checkbox.addEventListener('change', function() {
7
+ playToggleSound(this.checked);
8
+ });
9
+ });
10
+
11
+ function playToggleSound(isOn) {
12
+ const oscillator = audioContext.createOscillator();
13
+ const gainNode = audioContext.createGain();
14
+
15
+ oscillator.type = 'sine';
16
+ oscillator.frequency.value = isOn ? 800 : 400;
17
+ gainNode.gain.value = 0.1;
18
+
19
+ oscillator.connect(gainNode);
20
+ gainNode.connect(audioContext.destination);
21
+
22
+ oscillator.start();
23
+ gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.3);
24
+ oscillator.stop(audioContext.currentTime + 0.3);
25
+ }
26
+ });
style.css CHANGED
@@ -1,28 +1,70 @@
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
+ .control-panel {
2
+ background-color: #121212;
3
+ border-radius: 16px;
4
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
5
+ border: 1px solid rgba(255, 122, 0, 0.1);
6
  }
7
 
8
+ .control-panel ul {
9
+ list-style: none;
10
+ padding: 0;
11
+ margin: 0;
12
  }
13
 
14
+ .icon {
15
+ width: 80px;
16
+ height: 80px;
17
+ background-color: #141414;
18
+ border: 2px solid #000;
19
+ border-radius: 12px;
20
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
21
  }
22
 
23
+ .icon i {
24
+ width: 30px;
25
+ height: 30px;
26
+ color: #333;
27
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
28
  }
29
 
30
+ input:checked ~ .icon {
31
+ background-color: #000;
32
+ border-color: #ff7a00;
33
+ box-shadow:
34
+ 0 0 6px rgba(255, 122, 0, 1),
35
+ 0 0 14px rgba(255, 122, 0, 0.9),
36
+ 0 0 24px rgba(255, 122, 0, 0.8);
37
+ transform: scale(1.05);
38
  }
39
+
40
+ input:checked ~ .icon i {
41
+ color: #ffffff;
42
+ text-shadow:
43
+ 0 0 6px rgba(255, 255, 255, 0.8);
44
+ }
45
+
46
+ /* Responsive adjustments */
47
+ @media (max-width: 640px) {
48
+ .control-panel ul {
49
+ grid-template-columns: repeat(2, 1fr);
50
+ }
51
+ .icon {
52
+ width: 70px;
53
+ height: 70px;
54
+ }
55
+ }
56
+
57
+ /* Animation for click effect */
58
+ @keyframes ping {
59
+ 0% {
60
+ transform: scale(1);
61
+ opacity: 1;
62
+ }
63
+ 75%, 100% {
64
+ transform: scale(1.2);
65
+ opacity: 0;
66
+ }
67
+ }
68
+ .animate-ping {
69
+ animation: ping 0.5s cubic-bezier(0, 0, 0.2, 1);
70
+ }