Hugging Face's logo

Spaces:
hunnid13
/
retrogem-hunter
Running

App Files Community
hunnid13 commited on
Commit
a50c149
·
verified ·
1 Parent(s): d8a8663

fa o analiza si zi-mi ce parere ai

Browse files
Files changed (3) hide show
  1. README.md +8 -5
  2. components/header.js +65 -0
  3. index.html +112 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Retrogem Hunter
3
- emoji: 👀
4
- colorFrom: gray
5
- colorTo: indigo
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: RetroGem Hunter 🕹️✨
3
+ colorFrom: blue
4
+ colorTo: red
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/header.js ADDED
@@ -0,0 +1,65 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomHeader extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ header {
7
+ padding: 1rem 2rem;
8
+ color: white;
9
+ position: relative;
10
+ z-index: 10;
11
+ }
12
+ .header-content {
13
+ max-width: 1200px;
14
+ margin: 0 auto;
15
+ display: flex;
16
+ justify-content: space-between;
17
+ align-items: center;
18
+ }
19
+ .logo {
20
+ font-size: 1.5rem;
21
+ font-weight: bold;
22
+ display: flex;
23
+ align-items: center;
24
+ gap: 0.5rem;
25
+ }
26
+ nav ul {
27
+ display: flex;
28
+ gap: 1.5rem;
29
+ list-style: none;
30
+ }
31
+ nav a {
32
+ color: white;
33
+ text-decoration: none;
34
+ font-weight: 500;
35
+ transition: opacity 0.2s;
36
+ display: flex;
37
+ align-items: center;
38
+ gap: 0.3rem;
39
+ }
40
+ nav a:hover {
41
+ opacity: 0.8;
42
+ }
43
+ .icon {
44
+ width: 20px;
45
+ height: 20px;
46
+ }
47
+ </style>
48
+ <header>
49
+ <div class="header-content">
50
+ <div class="logo">
51
+ <span>RetroGem Hunter 🕹️✨</span>
52
+ </div>
53
+ <nav>
54
+ <ul>
55
+ <li><a href="/"><i data-feather="home" class="icon"></i> Home</a></li>
56
+ <li><a href="#"><i data-feather="info" class="icon"></i> About</a></li>
57
+ <li><a href="#"><i data-feather="help-circle" class="icon"></i> FAQ</a></li>
58
+ </ul>
59
+ </nav>
60
+ </div>
61
+ </header>
62
+ `;
63
+ }
64
+ }
65
+ customElements.define('custom-header', CustomHeader);
index.html CHANGED
@@ -1,19 +1,112 @@
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="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>RetroGem Hunter 🕹️✨</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
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ retro: {
17
+ 100: '#f0e6ff',
18
+ 200: '#d9b3ff',
19
+ 300: '#c280ff',
20
+ 400: '#ab4dff',
21
+ 500: '#8a2be2',
22
+ 600: '#6a1b9a',
23
+ 700: '#4a148c',
24
+ 800: '#330066',
25
+ 900: '#1a0033',
26
+ }
27
+ }
28
+ }
29
+ }
30
+ }
31
+ </script>
32
+ </head>
33
+ <body class="bg-gray-50 text-gray-900 font-sans">
34
+ <custom-header></custom-header>
35
+
36
+ <main class="container mx-auto px-4 py-8">
37
+ <section class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6 mb-8">
38
+ <div class="text-center mb-8">
39
+ <h1 class="text-4xl font-bold text-retro-600 mb-2">RetroGem Hunter 🕹️✨</h1>
40
+ <p class="text-lg text-gray-600">Unearth rare gaming treasures in retro giveaways</p>
41
+ </div>
42
+
43
+ <div class="grid md:grid-cols-2 gap-8">
44
+ <div class="bg-retro-50 p-6 rounded-lg border border-retro-200">
45
+ <h2 class="text-2xl font-semibold text-retro-700 mb-4">Analyze Giveaway</h2>
46
+ <form id="giveawayForm" class="space-y-4">
47
+ <div>
48
+ <label for="giveawayUrl" class="block text-sm font-medium text-gray-700 mb-1">Giveaway URL</label>
49
+ <input type="url" id="giveawayUrl" required
50
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-retro-500 focus:border-retro-500"
51
+ placeholder="https://giveaways.retroplay.r/...">
52
+ </div>
53
+ <button type="submit"
54
+ class="w-full bg-retro-600 hover:bg-retro-700 text-white font-medium py-2 px-4 rounded-lg transition duration-200 flex items-center justify-center">
55
+ <i data-feather="search" class="mr-2"></i> Analyze
56
+ </button>
57
+ </form>
58
+ </div>
59
+
60
+ <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
61
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4">Recent Analyses</h2>
62
+ <div class="space-y-4">
63
+ <div class="p-3 bg-white rounded-lg border border-gray-200 hover:shadow transition cursor-pointer">
64
+ <h3 class="font-medium text-retro-600">NES Classic Giveaway</h3>
65
+ <p class="text-sm text-gray-500">Analyzed 2 days ago</p>
66
+ </div>
67
+ <div class="p-3 bg-white rounded-lg border border-gray-200 hover:shadow transition cursor-pointer">
68
+ <h3 class="font-medium text-retro-600">Sega Genesis Collection</h3>
69
+ <p class="text-sm text-gray-500">Analyzed 1 week ago</p>
70
+ </div>
71
+ <div class="p-3 bg-white rounded-lg border border-gray-200 hover:shadow transition cursor-pointer">
72
+ <h3 class="font-medium text-retro-600">PS1 Hidden Gems</h3>
73
+ <p class="text-sm text-gray-500">Analyzed 2 weeks ago</p>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </section>
79
+ <section id="results" class="hidden max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6 mb-8 animate-fade-in">
80
+ <div class="flex justify-between items-center mb-6">
81
+ <h2 class="text-2xl font-bold text-retro-700">Analysis Results</h2>
82
+ <button id="backBtn" class="text-retro-600 hover:text-retro-800 flex items-center">
83
+ <i data-feather="arrow-left" class="mr-1"></i> Back
84
+ </button>
85
+ </div>
86
+
87
+ <div class="grid md:grid-cols-3 gap-6 mb-8">
88
+ <div class="bg-retro-50 p-4 rounded-lg text-center">
89
+ <div class="text-retro-600 mb-2">
90
+ <i data-feather="award" class="w-8 h-8 mx-auto"></i>
91
+ </div>
92
+ <h3 class="font-semibold text-gray-800">Total Giveaways</h3>
93
+ <p class="text-3xl font-bold text-retro-600">42</p>
94
+ </div>
95
+
96
+ <div class="bg-purple-50 p-4 rounded-lg text-center">
97
+ <div class="text-purple-600 mb-2">
98
+ <i data-feather="star" class="w-8 h-8 mx-auto"></i>
99
+ </div>
100
+ <h3 class="font-semibold text-gray-800">Rare Items</h3>
101
+ <p class="text-3xl font-bold text-purple-600">8</p>
102
+ </div>
103
+
104
+ <div class="bg-green-50 p-4 rounded-lg text-center">
105
+ <div class="text-green-600 mb-2">
106
+ <i data-feather="clock" class="w-8 h-8 mx-auto"></i>
107
+ </div>
108
+ <h3 class="font-semibold text-gray-800">Ending Soon</h3>
109
+ <p class="text
110
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
111
+ </body>
112
+ </html>