Hugging Face's logo

Spaces:
Rmpmartinspro
/
sf-d4f
Running

App Files Community
Rmpmartinspro commited on
Commit
a977abc
•
1 Parent(s): 9df232b

Add 3 files

Browse files
Files changed (3) hide show
  1. index.html +1 -19
  2. main.js +41 -0
  3. style.css +54 -17
index.html CHANGED
@@ -1,19 +1 @@
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
+ <html><head><link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>MusicGen</title></head>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
main.js ADDED
@@ -0,0 +1,41 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ const form = document.querySelector('form');
2
+ const input = document.querySelector('input[type="text"]');
3
+ const searchButton = document.querySelector('input[type="submit"]');
4
+
5
+ const resultsDiv = document.querySelector('.results');
6
+
7
+ form.addEventListener('submit', handleSubmit);
8
+ searchButton.addEventListener('click', handleSubmit);
9
+
10
+ function handleSubmit(event) {
11
+ event.preventDefault();
12
+ const inputValue = input.value;
13
+ if (inputValue.length > 0) {
14
+ const request = new XMLHttpRequest();
15
+ request.open('GET', `//api.dataseer.com/v1/music?keywords=${inputValue}`, true);
16
+ request.onload = function () {
17
+ if (request.status === 200) {
18
+ const data = JSON.parse(request.responseText);
19
+ if (data.results) {
20
+ renderResults(data.results);
21
+ }
22
+ } else {
23
+ alert('Error getting results');
24
+ }
25
+ };
26
+ request.send();
27
+ }
28
+ }
29
+
30
+ function renderResults(results) {
31
+ resultsDiv.innerHTML = '';
32
+ results.forEach((result) => {
33
+ const artist = document.createElement('div');
34
+ artist.className = 'result';
35
+ const title = document.createElement('h3');
36
+ const text = document.createTextNode(result.name);
37
+ title.appendChild(text);
38
+ artist.appendChild(title);
39
+ resultsDiv.appendChild(artist);
40
+ });
41
+ }
style.css CHANGED
@@ -1,28 +1,65 @@
 
 
 
 
 
 
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
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ }
6
+
7
  body {
8
+ font-family: Arial, sans-serif;
9
+ background-color: #f4f4f4;
10
  }
11
 
12
  h1 {
13
+ text-align: center;
14
+ padding: 20px;
15
  }
16
 
17
+ form {
18
+ display: flex;
19
+ justify-content: center;
 
 
20
  }
21
 
22
+ input[type="text"] {
23
+ width: 200px;
24
+ padding: 10px;
25
+ border: 1px solid #ccc;
26
+ border-radius: 5px;
27
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
28
+ margin: 10px;
29
  }
30
 
31
+ input[type="submit"] {
32
+ background-color: #4CAF50;
33
+ color: white;
34
+ padding: 10px;
35
+ font-size: 16px;
36
+ border: none;
37
+ border-radius: 5px;
38
+ cursor: pointer;
39
+ margin: 10px;
40
  }
41
+
42
+ input[type="submit"]:hover {
43
+ background-color: #45a049;
44
+ }
45
+
46
+ .results {
47
+ display: flex;
48
+ flex-wrap: wrap;
49
+ justify-content: center;
50
+ text-align: center;
51
+ }
52
+
53
+ .result {
54
+ background-color: #8b9dc3;
55
+ padding: 20px;
56
+ color: white;
57
+ width: 200px;
58
+ margin: 10px;
59
+ border-radius: 5px;
60
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
61
+ }
62
+
63
+ .result:hover {
64
+ background-color: #7981a8;
65
+ }