zappy-intake-forms/index.html at master · BlueBash/zappy-intake-forms · GitHub

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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-top-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hybrid Intake Form</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            fontFamily: {
              sans: ['ui-sans-serif', 'system-ui', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'],
            },
            colors: {
              primary: {
                DEFAULT: '#00A896',
                light: '#E0F5F3',
                dark: '#008B7A',
              },
              accent: {
                DEFAULT: '#FF6B6B',
                warm: '#E55555',
              },
              background: {
                DEFAULT: '#fef8f2',
                gradient: 'linear-gradient(to bottom right, #fef8f2, #FEF9F3, #FDF6EF)',
              },
              neutral: {
                400: '#666666',
                500: '#666666',
                600: '#2D3436',
                700: '#2D3436',
              },
            },
            boxShadow: {
              'sm': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)',
              'md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
              'lg': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)',
              'xl': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
            },
            backgroundImage: {
              'gradient-primary': 'linear-gradient(to right, #0D9488, #14B8A6)',
              'gradient-primary-hover': 'linear-gradient(to right, #0F766E, #0D9488)',
              'gradient-progress': 'linear-gradient(to right, #0D9488, #14B8A6)',
              'gradient-decorative': 'linear-gradient(to right, #0D9488, #FF7A59)',
              'gradient-selected': 'linear-gradient(to right, rgba(13, 148, 136, 0.05), rgba(20, 184, 166, 0.05))',
              'gradient-checkmark': 'linear-gradient(to bottom right, #0D9488, #14B8A6)',
              'gradient-background': 'linear-gradient(to bottom right, #FDFBF7, #FEF9F3, #FDF6EF)',
            },
          }
        }
      }
    </script>
    <style>
      :root {
        --primary: #00A896;
        --primary-light: #E0F5F3;
        --primary-dark: #008B7A;
        --accent-warm: #FF6B6B;
        --background: #fef8f2;
        --foreground: #2D3436;
        --card: #ffffff;
        --muted-foreground: #666666;
        --border: #E8E8E8;
        --radius: 0.75rem;
      }

      html {
        font-size: 16px;
      }

      body {
        font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        background: #fef8f2;
        min-height: 100vh;
      }

      #root {
        background: transparent;
        min-height: 100vh;
      }

      /* Custom timing function for smooth animations */
      .transition-elegant {
        transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
      }

      /* Override browser focus states with teal brand color */
      *:focus {
        outline: none;
      }

      *:focus-visible {
        outline: 2px solid #00A896 !important;
        outline-offset: 2px;
        border-radius: 0.375rem;
      }

      /* input:focus, */
      /* input:focus-visible, */
      /* input[type="number"]:focus, */
      /* input[type="text"]:focus, */
      /* input[type="email"]:focus, */
      /* input[type="password"]:focus, */
      select:focus,
      textarea:focus,
      button:focus-visible {
        outline: 2px solid #00A896 !important;
        outline-offset: 2px !important;
        border-color: #00A896 !important;
      }
    </style>
  <script type="importmap">
{
  "imports": {
    "react": "https://aistudiocdn.com/react@^19.1.1",
    "react-dom/": "https://aistudiocdn.com/react-dom@^19.1.1/",
    "react/": "https://aistudiocdn.com/react@^19.1.1/",
    "framer-motion": "https://aistudiocdn.com/framer-motion@^12.23.22",
    "tailwindcss": "https://aistudiocdn.com/tailwindcss@^4.1.13"
  }
}
</script>
<link rel="stylesheet" href="/index.css">
</head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="module" src="/index.tsx"></script>
  </body>
</html>