sample-todo-app/index.html at master · LambdaTest/sample-todo-app · 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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern To-Do App | TestMu AI</title>

    <!-- AngularJS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Google Fonts: Inter -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

    <style>
        /* Custom styles for a more polished look */
        body {
            font-family: 'Inter', sans-serif;
            /* Using a TestMu AI-inspired background */
            background-color: #f8f9fc;
            /* Subtle repeating TestMu AI logo pattern */
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath d='M25 85 L50 15 L75 85 M35 60 L65 60' stroke='%23eef2f5' stroke-width='8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        }

        /* Added animation for list items appearing */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .todo-item {
            animation: fadeIn 0.3s ease-out;
        }

        /* Custom Checkbox Styling */
        .custom-checkbox {
            -webkit-appearance: none;
            appearance: none;
            position: relative;
            width: 22px;
            height: 22px;
            border: 2px solid #cbd5e1; /* gray-300 */
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.2s, border-color 0.2s;
            flex-shrink: 0;
            margin-right: 16px; /* Spacing between checkbox and text */
        }

        .custom-checkbox:checked {
            /* Updated to TestMu AI color scheme (rose) */
            background-color: #e11d48; /* rose-600 */
            border-color: #e11d48; /* rose-600 */
        }

        /* Checkmark icon for the custom checkbox */
        .custom-checkbox:checked::after {
            content: '';
            position: absolute;
            left: 6px;
            top: 2px;
            width: 7px;
            height: 12px;
            border: solid white;
            border-width: 0 3px 3px 0;
            transform: rotate(45deg);
        }
    </style>

    <script type="text/javascript">
        // AngularJS application module and controller
        angular.module('sampleApp', [])
            .controller('SampleListController', function() {
                var sampleList = this;

                // Initial list of to-do items, expanded to 9 items for consistent XPath
                sampleList.sampletodos = [
                    { text: 'Complete initial setup', done: false, name: 'li1' },
                    { text: 'Deploy to staging environment', done: false, name: 'li2' },
                    { text: 'Run automated tests', done: false, name: 'li3' },
                    { text: 'Review feedback from team', done: false, name: 'li4' },
                    { text: 'Prepare for production release', done: false, name: 'li5' }
                ];

                // Function to add a new to-do item
                sampleList.addsampletodo = function() {
                    if (sampleList.sampletodoText && sampleList.sampletodoText.trim() !== '') {
                        sampleList.sampletodos.push({
                            text: sampleList.sampletodoText,
                            done: false,
                            name: 'li' + (sampleList.sampletodos.length + 1)
                        });
                        sampleList.sampletodoText = ''; // Clear the input field
                    }
                };

                // NOTE: The delete function and button have been removed to match the original DOM structure.

                // Function to calculate the number of remaining (not done) items
                sampleList.remaining = function() {
                    var count = 0;
                    angular.forEach(sampleList.sampletodos, function(sampletodo) {
                        count += sampletodo.done ? 0 : 1;
                    });
                    return count;
                };
            });
    </script>
</head>

<body class="bg-gray-100 flex items-center justify-center min-h-screen px-4">

    <!-- Main application container, structure now matches original page -->
    <div ng-app="sampleApp">
        <div class="w-full max-w-lg"> <!-- This extra div ensures the nesting level is correct -->
            <div class="bg-white/80 backdrop-blur-sm rounded-xl shadow-2xl p-6 sm:p-8" ng-controller="SampleListController as sampleList">

                <!-- Header section with an icon -->
                <header class="flex items-center justify-center flex-col text-center mb-6">
                     <!-- Updated icon to TestMu AI colors -->
                     <div class="flex items-center justify-center bg-rose-100 rounded-full h-16 w-16 mb-4">
                         <svg class="h-8 w-8 text-rose-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                     </div>
                    <h1 class="text-3xl sm:text-4xl font-bold text-gray-800">TestMu AI To-Do</h1>
                    <p class="text-gray-500 mt-2">
                        <span ng-if="sampleList.remaining() > 0">
                            You have {{sampleList.remaining()}} of {{sampleList.sampletodos.length}} tasks remaining.
                        </span>
                        <span ng-if="sampleList.remaining() === 0" class="text-green-500 font-semibold">
                            All tasks completed! Great work!
                        </span>
                    </p>
                </header>

                <!-- To-Do List -->
                <ul class="list-unstyled space-y-3 mb-6">
                    <!-- The <span> is now a direct child of the <li>, matching the original XPath -->
                    <li ng-repeat="sampletodo in sampleList.sampletodos" class="todo-item flex items-center p-3 rounded-lg transition-all duration-200 hover:bg-gray-50 hover:shadow-md">
                        <input type="checkbox" ng-model="sampletodo.done" name="{{sampletodo.name}}" class="custom-checkbox">
                        <span ng-class="{'line-through text-gray-400': sampletodo.done, 'text-gray-700': !sampletodo.done}" class="text-base sm:text-lg transition-colors duration-300 truncate">
                            {{sampletodo.text}}
                        </span>
                    </li>
                </ul>

                <!-- Form to add new to-do items -->
                <form ng-submit="sampleList.addsampletodo()" class="flex flex-col sm:flex-row gap-3">
                    <input
                        type="text"
                        id="sampletodotext"
                        ng-model="sampleList.sampletodoText"
                        size="30"
                        placeholder="Add a new task..."
                        class="flex-grow w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-rose-500 transition-shadow">
                    <!-- Updated button to TestMu AI colors -->
                    <input
                        class="w-full sm:w-auto bg-rose-600 text-white font-semibold px-6 py-3 rounded-lg hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 transition-transform duration-200 active:scale-95 cursor-pointer"
                        type="submit"
                        id="addbutton"
                        value="Add">
                </form>

            </div>
        </div>
    </div>

</body>
</html>