Hugging Face's logo

Spaces:
tinazone
/
word-to-code
Running

App Files Community
word-to-code
File size: 2,442 Bytes 
21d7fc3
 
 
 
 
 
 
fba22b7
 
21d7fc3
 
 
 
fba22b7
 
 
 
 
 
 
 
 
 
 
21d7fc3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
 
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    @apply antialiased;
    height: 100%;
    -webkit-text-size-adjust: 100%;
  }
  
  body {
    @apply bg-black text-white;
    min-height: 100%;
    position: relative;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    overscroll-behavior-y: none;
  }

  #__next {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
}

@layer components {
  .example-button {
    @apply px-6 py-2.5 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition-colors duration-200;
  }

  .input-field {
    @apply flex-1 px-6 py-4 bg-zinc-900 border border-zinc-800 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:border-zinc-700 transition-colors;
  }

  .generate-button {
    @apply px-8 py-4 rounded-xl font-medium transition-colors duration-200;
  }

  .generate-button-enabled {
    @apply bg-white text-black hover:bg-gray-100;
  }

  .generate-button-disabled {
    @apply bg-zinc-800 text-gray-400 cursor-not-allowed;
  }

  .preview-container {
    @apply w-full aspect-square bg-zinc-900 border border-zinc-800 rounded-2xl flex items-center justify-center overflow-hidden;
  }

  .canvas-container {
    @apply w-[600px] h-[600px] relative;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  @apply w-2 h-2;
}

::-webkit-scrollbar-track {
  @apply bg-zinc-900;
}

::-webkit-scrollbar-thumb {
  @apply bg-zinc-700 rounded-sm hover:bg-zinc-600;
}

/* Test class to verify CSS is loading */
.test-style {
  @apply bg-red-500;
}

@font-face {
  font-family: 'Google Sans Display';
  src: url('/fonts/GoogleSansDisplay-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Google Sans Mono';
  src: url('/fonts/GoogleSansMono-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
  --font-google-sans-display: 'Google Sans Display', system-ui, -apple-system;
  --font-google-sans-mono: 'Google Sans Mono', monospace;
  --foreground: #ffffff;
  --background: #000000;
}

.code-panel {
  font-family: var(--font-google-sans-mono);
}

.output-panel {
  display: flex;
  width: 414px;
  height: 779px;
  padding: 23px 25px;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 26px;
  background: rgba(0, 0, 0, 0.05);
}

input::placeholder {
  color: #666;
}

button:focus {
  outline: none;
}