WT/SIMPLE_START.html at main · ampedprojects5-coder/WT · 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Start Car Wash App - Simple Guide</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .container {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            max-width: 700px;
            width: 100%;
            padding: 40px;
        }
        h1 {
            color: #333;
            margin-bottom: 10px;
            font-size: 28px;
        }
        .subtitle {
            color: #666;
            margin-bottom: 30px;
            font-size: 16px;
        }
        .method {
            background: #f8f9fa;
            border-left: 4px solid #667eea;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 8px;
        }
        .method h2 {
            color: #667eea;
            margin-bottom: 15px;
            font-size: 20px;
        }
        .method ol {
            margin-left: 20px;
            line-height: 2;
            color: #333;
        }
        .method code {
            background: #e9ecef;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
        }
        .button {
            display: inline-block;
            background: #667eea;
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: bold;
            margin-top: 10px;
            transition: background 0.3s;
        }
        .button:hover {
            background: #5568d3;
        }
        .note {
            background: #fff3cd;
            border: 1px solid #ffc107;
            padding: 15px;
            border-radius: 8px;
            margin-top: 20px;
            color: #856404;
        }
        .success {
            background: #d4edda;
            border: 1px solid #28a745;
            color: #155724;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🚀 Start Your Car Wash App</h1>
        <p class="subtitle">Choose the easiest method for you:</p>

        <div class="method">
            <h2>Method 1: VS Code (Easiest if you have it)</h2>
            <ol>
                <li>Open this folder in VS Code</li>
                <li>Press <code>Ctrl + `</code> (backtick) to open terminal</li>
                <li>Type: <code>npm install</code> (first time only)</li>
                <li>Type: <code>npm run dev</code></li>
                <li>Browser opens automatically!</li>
            </ol>
        </div>

        <div class="method">
            <h2>Method 2: Windows Terminal (Simple)</h2>
            <ol>
                <li>Right-click in this folder</li>
                <li>Select "Open in Terminal" or "Open PowerShell window here"</li>
                <li>Type: <code>npm install</code> and press Enter</li>
                <li>Wait for it to finish</li>
                <li>Type: <code>npm run dev</code> and press Enter</li>
                <li>Open browser to: <code>http://localhost:3000</code></li>
            </ol>
        </div>

        <div class="method">
            <h2>Method 3: Command Prompt (Classic)</h2>
            <ol>
                <li>Press <code>Windows Key + R</code></li>
                <li>Type: <code>cmd</code> and press Enter</li>
                <li>Type: <code>cd /d "C:\Users\trmab\OneDrive\Documents\work\Application"</code></li>
                <li>Type: <code>npm install</code> (first time only)</li>
                <li>Type: <code>npm run dev</code></li>
                <li>Copy the URL shown and paste in browser</li>
            </ol>
        </div>

        <div class="method">
            <h2>Method 4: One-Line Start (If npm works)</h2>
            <ol>
                <li>Open terminal in this folder</li>
                <li>Type this one line:</li>
            </ol>
            <div style="background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 8px; margin-top: 10px; font-family: monospace;">
                npm install && npm run dev
            </div>
            <p style="margin-top: 10px; color: #666; font-size: 14px;">
                This installs everything and starts the app in one command!
            </p>
        </div>

        <div class="note">
            <strong>💡 Tip:</strong> If you see "npm is not recognized", you need to install Node.js first.
            Open <code>INSTALL_NODEJS.txt</code> for instructions.
        </div>

        <div class="note success" style="margin-top: 20px;">
            <strong>✅ When it works:</strong> You'll see "Local: http://localhost:3000" in the terminal.
            The app should open automatically, or just go to that URL in your browser.
        </div>
    </div>
</body>
</html>