ide/index.html at main · kiit-code/ide · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Page</title>
    <!-- Load Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <style>
        body,
        .bg-light {
            background-color: #f8f9fa !important;
            color: #343a40;
        }

        #sidebar {
            /* height: 100vh; */

            background-color: #497398;
            color: #f8f9fa;
        }

        #content {
            height: 70vh;
        }

        .form-control {
            background-color: #ffffff;
            color: #343a40;
        }

        .btn-primary {
            background-color: #6c757d;
            border-color: #6c757d;
        }

        .header {
            background-color: #343a40;
            color: #f8f9fa;
            padding: 10px 0;
            margin-bottom: 10px;
        }

        .sidebar-btn {
            margin: 10px 0;
            width: 100%;
        }

        .sidebar-btn:hover {
            background-color: #989eb8;
            border-color: #6c757d;
        }

        .view100height {
            height: 100vh;
        }
    </style>
</head>

<body>
    <div class="header text-center">
        <h1>KIIT-IDE</h1>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div id="sidebar" class="col-md-2 view100height">
                <div class="d-flex flex-column align-items-start justify-content-start h-100">
                    <button class="btn btn-light sidebar-btn" onclick="updateHeader('Question 1')">Question 1</button>
                    <button class="btn btn-light sidebar-btn" onclick="updateHeader('Question 2')">Question 2</button>
                    <button class="btn btn-light sidebar-btn" onclick="updateHeader('Question 3')">Question 3</button>
                    <button class="btn btn-light sidebar-btn" onclick="updateHeader('Question 4')">Question 4</button>
                    <button class="btn btn-light sidebar-btn" onclick="updateHeader('Question 5')">Question 5</button>

                    <div class="d-flex flex-column align-items-start justify-content-end h-100"">
                    <p>Name: Aniruddha Mukherjee</p>
                    <p>Email: 2205533@kiit.ac.in</p>
                    <p>Roll: 2205533</p>
                    <p>Course ID: CS10001</p>
                </div>
                </div>
            </div>

            <div class=" col-md-10">
                        <!-- your code... -->
                        <div class="view100height">
                            <div class="form-group">
                                <h1 for="question" id="headerTitle">Question:</h1>
                                <p id="question">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
                                    odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Lorem ipsum dolor,
                                    sit amet consectetur adipisicing elit. Ducimus similique perferendis, provident
                                    praesentium cum accusantium repellendus natus atque voluptatem nostrum quibusdam, et
                                    dolorum adipisci non vero fuga ex animi nihil. Lorem ipsum dolor sit, amet
                                    consectetur adipisicing elit. Nam, iure. Optio dignissimos, odio dolorem sequi
                                    provident quos! Quaerat pariatur molestias voluptates incidunt laboriosam, maiores
                                    harum a culpa blanditiis dicta vitae?</p>
                            </div>
                            <form>
                                <div class="form-group">
                                    <label for="language">Choose your programming language:</label>
                                    <select id="language" class="form-control w-30">
                                        <option>JavaScript</option>
                                        <option>Python</option>
                                        <option>Java</option>
                                        <!-- More options... -->
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="content">Write your code here:</label>
                                    <textarea id="content" class="form-control" rows="10"
onpaste="return false;"></textarea>
                                </div>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- JavaScript function to update the header -->
            <script>
                function updateHeader(text) {
                    document.getElementById('headerTitle').innerText = text;
                }
            </script>

            <!-- Load Bootstrap JavaScript -->
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>

</html>