web-maker/create.html at main · Shriii19/web-maker · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Create Website - TruckCraft Studio</title>
  <meta name="description" content="Start building your VTC website now. Visual editor, live preview, instant customization. Create professional trucking websites in minutes.">
  <link rel="stylesheet" href="assets/style.css">
  <link rel="stylesheet" href="assets/responsive-enhancements.css">
  <link rel="stylesheet" href="assets/alignment-fixes.css">
  <link rel="stylesheet" href="assets/preloader.css">
  <link rel="icon" href="assets/logo.png">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <script src="assets/preloader.js"></script>
</head>
<body>
  <!-- Preloader -->
  <script>document.write(PreloaderHandler.getHTML());</script>

  <!-- Skip to main content for accessibility -->
  <a href="#main-content" class="skip-link">Skip to main content</a>

  <!-- Navigation will be inserted by JavaScript -->
  <!-- Main Content -->

    <!-- Main Content Area -->
    <main class="main-content" id="main-content" role="main">
      <div class="content-container">
        <!-- Create Website Page -->
        <section class="page-section">
          <div class="editor-header">
            <h2>VTC Website Builder</h2>
            <div class="editor-controls">
              <button class="btn-outline" id="reset-btn">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
                </svg>
                Reset
              </button>
              <button class="btn-outline" id="save-btn">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/>
                </svg>
                Save
              </button>
            </div>
          </div>

          <div class="editor-layout">
            <div class="editor-sidebar">
              <div class="sidebar-section">
                <h3>Quick Settings</h3>
                <div class="form-group">
                  <label>Company Name</label>
                  <input type="text" id="company-name" placeholder="My VTC" value="My VTC">
                </div>
                <div class="form-group">
                  <label>Tagline</label>
                  <input type="text" id="company-tagline" placeholder="Drive together..." value="Drive together. Deliver success.">
                </div>
                <div class="form-group">
                  <label>Discord Link</label>
                  <input type="url" id="discord-link" placeholder="https://discord.gg/D442vYePUR" value="https://discord.gg/D442vYePUR">
                </div>
                <div class="form-group">
                  <label>Primary Color</label>
                  <input type="color" id="primary-color" value="#00b894">
                </div>
              </div>

              <div class="sidebar-section">
                <h3>Actions</h3>
                <button class="btn-primary full-width" id="apply-changes">Apply Changes</button>
                <button class="btn-secondary full-width" id="download-btn">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z"/>
                  </svg>
                  Download
                </button>
                <button class="btn-outline full-width" id="host-btn">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
                  </svg>
                  Deploy Online
                </button>
              </div>
            </div>

            <div class="editor-main">
              <div class="editor-tabs">
                <button class="tab-btn active" data-tab="visual">Visual Editor</button>
                <button class="tab-btn" data-tab="code">Code Editor</button>
              </div>

              <div class="tab-content">
                <div id="visual-editor" class="tab-pane active">
                  <div class="preview-container">
                    <div class="preview-toolbar">
                      <div class="device-toggle">
                        <button class="device-btn active" data-device="desktop">
                          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7l-2 3v1h8v-1l-2-3h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 12H3V4h18v10z"/>
                          </svg>
                        </button>
                        <button class="device-btn" data-device="tablet">
                          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M19 1H5c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm-7 18c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm5.25-3H6.75V4h10.5v12z"/>
                          </svg>
                        </button>
                        <button class="device-btn" data-device="mobile">
                          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M16 1H8C6.34 1 5 2.34 5 4v16c0 1.66 1.34 3 3 3h8c1.66 0 3-1.34 3-3V4c0-1.66-1.34-3-3-3zm-2 20h-4v-1h4v1zm3.25-3H6.75V4h10.5v14z"/>
                          </svg>
                        </button>
                      </div>
                    </div>
                    <iframe id="live-preview" class="preview-frame desktop"></iframe>
                  </div>
                </div>

                <div id="code-editor-pane" class="tab-pane">
                  <textarea id="code-editor" spellcheck="false" placeholder="Edit your HTML code here..."></textarea>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </main>
  <!-- Footer -->
  <footer class="site-footer" role="contentinfo"><div class="footer-container"><div class="footer-main"><div class="footer-brand"><a href="index.html" class="footer-logo" aria-label="TruckCraft Studio Home"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M16 2L3 9v14l13 7 13-7V9L16 2z" fill="currentColor" opacity="0.2"/><path d="M16 8l8 4.5v9L16 26l-8-4.5v-9L16 8z" fill="currentColor"/><circle cx="16" cy="16" r="3" fill="white"/></svg><span>TruckCraft Studio</span></a><p class="footer-tagline">Create stunning VTC websites with ease. Professional tools for virtual trucking companies.</p><div class="footer-socials" role="list"><a href="https://twitter.com/your-handle" class="footer-social-link" aria-label="Follow us on Twitter" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"/></svg></a><a href="https://linkedin.com/company/your-company" class="footer-social-link" aria-label="Connect on LinkedIn" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"/><circle cx="4" cy="4" r="2"/></svg></a><a href="https://github.com/Shriii19/web-maker" class="footer-social-link" aria-label="View on GitHub" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"/></svg></a></div></div><nav class="footer-links"><ul class="footer-links-list"><li><a href="about.html">About Us</a></li><li><a href="features.html">Features</a></li><li><a href="pricing.html">Pricing</a></li><li><a href="contact.html">Contact</a></li></ul></nav><nav class="footer-links"><ul class="footer-links-list"><li><a href="templates.html">Templates</a></li><li><a href="pro-templates.html">Pro Templates</a></li><li><a href="create.html">Create Website</a></li></ul></nav><nav class="footer-links"><ul class="footer-links-list"><li><a href="help.html">Help Center</a></li><li><a href="documentation.html">Documentation</a></li><li><a href="tutorials.html">Tutorials</a></li></ul></nav></div><div class="footer-bottom"><p class="footer-copyright">© <span id="current-year">2025</span> TruckCraft Studio. All rights reserved.</p><nav aria-label="Legal"><ul class="footer-legal"><li><a href="terms.html">Terms of Service</a></li><li><a href="privacy.html">Privacy Policy</a></li></ul></nav></div></div></footer>

  <link rel="stylesheet" href="assets/footer.css">
  <script src="assets/global-error-handler.js" defer></script>
  <script src="assets/scroll-animations.js" defer></script>
  <script src="assets/main.js" defer></script>
  <script src="assets/footer.js" defer></script>
  <script src="assets/template-loader.js" defer></script>
</body>
</html>