diff --git a/src/puter-js/test/run.html b/src/puter-js/test/run.html index f5a9f813..0390baa4 100644 --- a/src/puter-js/test/run.html +++ b/src/puter-js/test/run.html @@ -1,7 +1,7 @@
- + @@ -37,6 +37,23 @@ font-size: 16px; cursor: pointer; } + #settings-btn { + margin-left: 10px; + margin-top: 20px; + margin-bottom: 20px; + background-color: #666; + border: none; + color: white; + padding: 10px 20px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + cursor: pointer; + } + #settings-btn:hover { + background-color: #555; + } #unselect-all { margin-left: 20px; cursor: pointer; @@ -261,10 +278,173 @@ color: #333; text-decoration: none; } + + /* Modal styles */ + .modal { + display: none; + position: fixed; + z-index: 2000; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + } + + .modal-content { + background-color: #fefefe; + margin: 10% auto; + padding: 20px; + border: 1px solid #888; + border-radius: 8px; + width: 500px; + max-width: 90%; + position: relative; + } + + .close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; + cursor: pointer; + line-height: 1; + } + + .close:hover, + .close:focus { + color: black; + text-decoration: none; + } + + .modal h2 { + margin-top: 0; + margin-bottom: 20px; + color: #333; + } + + .setting-group { + margin-bottom: 15px; + } + + .setting-group label { + display: block; + margin-bottom: 5px; + font-weight: bold; + color: #555; + } + + .setting-group input { + width: 100%; + padding: 8px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 14px; + box-sizing: border-box; + } + + .modal-buttons { + margin-top: 20px; + text-align: right; + } + + .modal-buttons button { + margin-left: 10px; + padding: 8px 16px; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 14px; + } + + .btn-cancel { + background-color: #ccc; + color: #333; + } + + .btn-cancel:hover { + background-color: #bbb; + } + + .btn-save { + background-color: #4c84af; + color: white; + } + + .btn-save:hover { + background-color: #3a6a8a; + } @@ -789,7 +1011,8 @@