Hugging Face's logo

Spaces:
Trabalhoemcasa
/
dama
Running

App Files Community
Trabalhoemcasa commited on
Commit
b22635f
·
verified ·
1 Parent(s): e224696

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +97 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Dama
3
- emoji: 🏢
4
- colorFrom: pink
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: dama
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: purple
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,97 @@
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>Minimalist Checkers Game</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ .board {
10
+ display: grid;
11
+ grid-template-columns: repeat(8, 1fr);
12
+ grid-template-rows: repeat(8, 1fr);
13
+ width: 400px;
14
+ height: 400px;
15
+ border: 2px solid #333;
16
+ }
17
+
18
+ .cell {
19
+ display: flex;
20
+ justify-content: center;
21
+ align-items: center;
22
+ cursor: pointer;
23
+ }
24
+
25
+ .dark {
26
+ background-color: #769656;
27
+ }
28
+
29
+ .light {
30
+ background-color: #eeeed2;
31
+ }
32
+
33
+ .piece {
34
+ width: 80%;
35
+ height: 80%;
36
+ border-radius: 50%;
37
+ display: flex;
38
+ justify-content: center;
39
+ align-items: center;
40
+ cursor: pointer;
41
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
42
+ }
43
+
44
+ .human {
45
+ background-color: #333;
46
+ }
47
+
48
+ .ai {
49
+ background-color: #d3d3d3;
50
+ }
51
+
52
+ .king {
53
+ border: 2px solid gold;
54
+ }
55
+
56
+ .selected {
57
+ box-shadow: 0 0 10px 5px rgba(0, 255, 0, 0.7);
58
+ }
59
+
60
+ .valid-move {
61
+ box-shadow: 0 0 10px 5px rgba(0, 0, 255, 0.3);
62
+ }
63
+
64
+ .must-capture {
65
+ animation: pulse 1.5s infinite;
66
+ }
67
+
68
+ @keyframes pulse {
69
+ 0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
70
+ 70% { box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); }
71
+ 100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
72
+ }
73
+
74
+ .game-over {
75
+ position: absolute;
76
+ top: 0;
77
+ left: 0;
78
+ width: 100%;
79
+ height: 100%;
80
+ background-color: rgba(0, 0, 0, 0.7);
81
+ display: flex;
82
+ justify-content: center;
83
+ align-items: center;
84
+ z-index: 100;
85
+ flex-direction: column;
86
+ }
87
+
88
+ .game-over-content {
89
+ background-color: white;
90
+ padding: 2rem;
91
+ border-radius: 10px;
92
+ text-align: center;
93
+ }
94
+ </style>
95
+ </head>
96
+ <body class="bg-gray-100 min-h-screen
97
+ </html>