Hugging Face's logo

Spaces:
Skyd3d
/
skydy
Running

App Files Community
Skyd3d commited on
Commit
9e05b36
·
verified ·
1 Parent(s): abf56a8

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +134 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Skydy
3
- emoji: 🦀
4
- colorFrom: purple
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: skydy
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: gray
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,134 @@
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>Character Customizer</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
+ .character-container {
11
+ position: relative;
12
+ width: 300px;
13
+ height: 500px;
14
+ margin: 0 auto;
15
+ }
16
+ .character-layer {
17
+ position: absolute;
18
+ top: 0;
19
+ left: 0;
20
+ width: 100%;
21
+ height: 100%;
22
+ background-size: contain;
23
+ background-repeat: no-repeat;
24
+ background-position: center;
25
+ }
26
+ .category-btn.active {
27
+ background-color: #3b82f6;
28
+ color: white;
29
+ }
30
+ .item-thumbnail {
31
+ transition: all 0.2s ease;
32
+ }
33
+ .item-thumbnail:hover {
34
+ transform: scale(1.05);
35
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
36
+ }
37
+ .item-thumbnail.selected {
38
+ border: 3px solid #3b82f6;
39
+ }
40
+ #characterPreview {
41
+ background-color: #f3f4f6;
42
+ border-radius: 10px;
43
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
44
+ }
45
+ .upload-modal {
46
+ display: none;
47
+ position: fixed;
48
+ top: 0;
49
+ left: 0;
50
+ width: 100%;
51
+ height: 100%;
52
+ background-color: rgba(0,0,0,0.5);
53
+ z-index: 1000;
54
+ }
55
+ .upload-modal-content {
56
+ animation: modalFadeIn 0.3s ease-out;
57
+ }
58
+ @keyframes modalFadeIn {
59
+ from {
60
+ opacity: 0;
61
+ transform: translateY(-20px);
62
+ }
63
+ to {
64
+ opacity: 1;
65
+ transform: translateY(0);
66
+ }
67
+ }
68
+ </style>
69
+ </head>
70
+ <body class="bg-gray-100 min-h-screen">
71
+ <!-- Header -->
72
+ <header class="bg-white shadow-sm">
73
+ <div class="container mx-auto px-4 py-6">
74
+ <div class="flex justify-between items-center">
75
+ <h1 class="text-3xl font-bold text-blue-600">Character Customizer</h1>
76
+ <button id="adminBtn" class="bg-gray-800 text-white px-4 py-2 rounded-lg flex items-center">
77
+ <i class="fas fa-user-cog mr-2"></i> Admin Panel
78
+ </button>
79
+ </div>
80
+ </div>
81
+ </header>
82
+
83
+ <!-- Main Content -->
84
+ <main class="container mx-auto px-4 py-8">
85
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
86
+ <!-- Character Preview -->
87
+ <div class="lg:col-span-1">
88
+ <div class="bg-white rounded-xl shadow-lg p-6 sticky top-8">
89
+ <h2 class="text-2xl font-bold mb-6 text-center">Your Character</h2>
90
+ <div id="characterPreview" class="character-container mb-6">
91
+ <!-- Character layers will be added here dynamically -->
92
+ <div id="baseCharacter" class="character-layer" style="background-image: url('https://via.placeholder.com/300x500?text=Base+Character');"></div>
93
+ <div id="faceMaskLayer" class="character-layer"></div>
94
+ <div id="pantsLayer" class="character-layer"></div>
95
+ <div id="hairLayer" class="character-layer"></div>
96
+ <div id="capeLayer" class="character-layer"></div>
97
+ <div id="backpackLayer" class="character-layer"></div>
98
+ </div>
99
+ <div class="flex justify-between items-center">
100
+ <button id="randomizeBtn" class="bg-blue-100 text-blue-600 px-4 py-2 rounded-lg flex items-center">
101
+ <i class="fas fa-random mr-2"></i> Randomize
102
+ </button>
103
+ <button id="downloadBtn" class="bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center">
104
+ <i class="fas fa-download mr-2"></i> Download
105
+ </button>
106
+ </div>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- Customization Panel -->
111
+ <div class="lg:col-span-2">
112
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
113
+ <!-- Category Tabs -->
114
+ <div class="flex border-b">
115
+ <button class="category-btn active px-6 py-4 font-medium" data-category="faceMask">
116
+ <i class="fas fa-mask mr-2"></i> Face Masks
117
+ </button>
118
+ <button class="category-btn px-6 py-4 font-medium" data-category="pants">
119
+ <i class="fas fa-tshirt mr-2"></i> Pants
120
+ </button>
121
+ <button class="category-btn px-6 py-4 font-medium" data-category="hair">
122
+ <i class="fas fa-cut mr-2"></i> Hair
123
+ </button>
124
+ <button class="category-btn px-6 py-4 font-medium" data-category="cape">
125
+ <i class="fas fa-scarf mr-2"></i> Capes
126
+ </button>
127
+ <button class="category-btn px-6 py-4 font-medium" data-category="backpack">
128
+ <i class="fas fa-backpack mr-2"></i> Backpacks
129
+ </button>
130
+ </div>
131
+
132
+ <!-- Items Grid -->
133
+ <div class="p
134
+ </html>