Sunbase-assignment/index.html at master · Atanu8250/Sunbase-assignment · 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
<!DOCTYPE html>
<html lang="en">

<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sunbase Frontend Assignment</title>
     <link rel="stylesheet" href="style.css">
     <script src="script.js" defer></script>
     <script src="https://kit.fontawesome.com/eacbf9e7d4.js" crossorigin="anonymous"></script>
</head>

<body>
     <div class="container">
          <header class="navbar">
               <h1>Form Designer</h1>
               <div class="actions">
                    <input type="checkbox" name="checkbox" id="themeToggle">
                    <label for="themeToggle" class="switch"></label>
                    <button id="previewBtn" class="btn">Preview</button>
                    <button id="saveBtn" class="btn primary">Save</button>
               </div>
          </header>

          <main class="workspace">
               <aside class="components">
                    <h2 class="sidebar-title">Components</h2>
                    <ul class="component-list">

                         <li class="component-item">
                              <button class="component-header" data-type="input">
                                   Input
                                   <span class="expand-icon">+</span>
                              </button>
                         </li>

                         <li class="component-item">
                              <button class="component-header" data-type="select">
                                   Select
                                   <span class="expand-icon">+</span>
                              </button>
                         </li>

                         <li class="component-item">
                              <button class="component-header" data-type="textarea">
                                   Textarea
                                   <span class="expand-icon">+</span>
                              </button>
                         </li>
                         <li class="component-item">
                              <button class="component-header" data-type="checkbox">
                                   Checkbox
                                   <span class="expand-icon">+</span>
                              </button>
                         </li>
                    </ul>
               </aside>

               <section class="form-canvas" id="formCanvas">
                    <!-- dynamic form data will be added -->
               </section>

          </main>

     </div>

     <!-- Preview Modal -->
     <div id="previewModal" class="modal">
          <div id="modalContent" class="modal-content">
               <div class="modal-header">
                    <h2>Form Preview</h2>
                    <button class="close-btn">
                         <i class="fa-solid fa-close"></i>
                    </button>
               </div>
               <div class="modal-body">
                    <div id="previewForm"></div>
                    <div class="preview-actions">
                         <button id="copyHtmlBtn" class="btn">Copy HTML</button>
                    </div>
               </div>
          </div>
     </div>

     <!-- Toast container -->
     <div class="toast-container" id="toastContainer">
     </div>
</body>

</html>