Skip to content
Open
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
259 changes: 200 additions & 59 deletions Browser_IDE/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,36 +2,135 @@
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SplashKit Online</title>

<link rel="stylesheet" href="codemirror-5.65.15/lib/codemirror.css">
<link rel="stylesheet" href="codemirror-5.65.15/theme/dracula.css">
<link rel="stylesheet" href="codemirror-5.65.15/addon/hint/show-hint.css">
<link rel="stylesheet" href="codemirror-5.65.15/addon/fold/foldgutter.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="stylesheet.css">

<script src="codemirror-5.65.15/lib/codemirror.js"></script>
<script src="jszip/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
<script src="codemirror-5.65.15/mode/javascript/javascript.js"></script>
<script src="codemirror-5.65.15/addon/edit/closebrackets.js"></script>
<script src="codemirror-5.65.15/addon/selection/active-line.js"></script>
<script src="codemirror-5.65.15/addon/hint/show-hint.js"></script>
<script src="splashkit-javascript-hint.js"></script>
<script src="codemirror-5.65.15/addon/fold/foldcode.js"></script>
<script src="codemirror-5.65.15/addon/fold/foldgutter.js"></script>
<script src="codemirror-5.65.15/addon/fold/brace-fold.js"></script>
<script src="codemirror-5.65.15/addon/fold/comment-fold.js"></script>
<script src="split.js/split.min.js"></script>
<script type="module">import mime from "./mime/src/index.js"; window.mime = mime;</script>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SplashKit Online</title>

<link rel="stylesheet" href="codemirror-5.65.15/lib/codemirror.css">
<link rel="stylesheet" href="codemirror-5.65.15/theme/dracula.css">
<link rel="stylesheet" href="codemirror-5.65.15/addon/hint/show-hint.css">
<link rel="stylesheet" href="codemirror-5.65.15/addon/fold/foldgutter.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="stylesheet.css">

// adding fav icon
Copy link
Contributor

@WhyPenguins WhyPenguins Jan 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This shows up on the page - in html // aren't comments 😋
image

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hey, thank you for your all comments. i will sort them.

<link rel="icon" href="https://thoth-tech.github.io/SplashkitOnline/favicon.ico" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This does work, but it'd be much better if it was still a relative path in case we change where we host SplashKit Online. <link rel="icon" href="favicon.ico"> works fine 😋



<script src="codemirror-5.65.15/lib/codemirror.js"></script>
<script src="jszip/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
<script src="codemirror-5.65.15/mode/javascript/javascript.js"></script>
<script src="codemirror-5.65.15/addon/edit/closebrackets.js"></script>
<script src="codemirror-5.65.15/addon/selection/active-line.js"></script>
<script src="codemirror-5.65.15/addon/hint/show-hint.js"></script>
<script src="splashkit-javascript-hint.js"></script>
<script src="codemirror-5.65.15/addon/fold/foldcode.js"></script>
<script src="codemirror-5.65.15/addon/fold/foldgutter.js"></script>
<script src="codemirror-5.65.15/addon/fold/brace-fold.js"></script>
<script src="codemirror-5.65.15/addon/fold/comment-fold.js"></script>
<script src="split.js/split.min.js"></script>
<script type="module">import mime from "./mime/src/index.js"; window.mime = mime;</script>


<style>
/* Navbar Styling */
.navbar {
display: flex;
align-items: center;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Dropdown Button Styling */
.dropdown {
position: relative;
display: none; /* Initially hidden */
}

.dropbtn {
background-color: darkgrey;
color: white;
padding: 10px 15px;
font-size: 14px;
border: none;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
}

.dropbtn i {
margin-left: 5px;
}

.dropbtn:hover {
background-color: #0056b3;
}

/* Dropdown Content Styling */
.dropdown-content {
display: none;
position: absolute;
background-color: #404040;
color: white;
min-width: 150px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1;
border-radius: 4px;
padding: 5px 0;
}

.dropdown-content button {
background: none;
border: none;
color: white;
padding: 8px 12px;
text-align: left;
text-decoration: none;
display: block;
width: 100%;
cursor: pointer;
}

.dropdown-content button:hover {
background: white;
color: #404040;
}

/* Show Dropdown on Hover */
.dropdown:hover .dropdown-content {
display: block;
}

/* Primary Button Styling */
.run-program {
color: white;
padding: 10px 15px;
font-size: 14px;
border: none;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
margin-right: 10px;
}

.run-program i {
margin-right: 5px;
}

.run-program:hover {
background-color: #218838;
color: green;
}
</style>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should all be in stylesheet.css

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i have updated all the changes

</head>

<body class="sk-body">
<div class="sk-header">
<ul class="sk-menu">
Expand All @@ -42,13 +141,13 @@
<span style="border-left:#404040 1px solid;"></span>
<li><button id="LoadDemo">Load Demo</button></li>
</ul>
<ul class="sk-menu">
<li>
<div>Language:&nbsp;</div>
<select id="languageSelection">
</select>
</li>
</ul>
<ul class="sk-menu">
<li>
<div>Language:&nbsp;</div>
<select id="languageSelection">
</select>
</li>
</ul>
</div>
<div class="sk-main-columns">
<div id="fileViewContainer">
Expand All @@ -62,8 +161,9 @@
</div>
</div>
<input type="file" id="fileuploader" onchange="uploadFileFromInput()" style="display:none;">
<input type="file" id="projectuploader" onchange="scheduleUploadProjectFromInput()" style="display:none;">
<div class = "sk-header-indent sk-contents sk-contents-focusable" tabindex="0">
<input type="file" id="projectuploader" onchange="scheduleUploadProjectFromInput()"
style="display:none;">
<div class="sk-header-indent sk-contents sk-contents-focusable" tabindex="0">
<div id="fileView"></div>
</div>
</div>
Expand All @@ -76,31 +176,67 @@
<div class="sk-column" id="codeViewContainer">
<div class="sk-header sk-header-indent">
<div class="sk-menu">
<ul class="sk-tabs" id="codeViewTabs"></ul>
<button type="button" id="addSourceFile"><i class="bi bi-plus"></i></button>
<ul class="sk-tabs" id="codeViewTabs"></ul>
<button type="button" id="addSourceFile"><i class="bi bi-plus"></i></button>
</div>
<div class="flex-column">
<button type="button" id="runOne"><i class="bi bi-upload"> Update File</i></button>
<button type="button" id="runOne"><i class="bi bi-upload"> Update File</i></button>
</div>
</div>
<div class="sk-contents" style="background-color:#24262d !important; position:relative;"
id="codeEditorContainer">
<div class="sk-code-view-message" id="noEditorsMessage">
<h1>Let's write some code!</h1>
<p>You can add a new code file with the <b>+</b> button, or open one from the <b>FILES</b> view on
the left.</p>
</div>
</div>
<div class="sk-contents" style="background-color:#24262d !important; position:relative;" id="codeEditorContainer">
<div class="sk-code-view-message" id="noEditorsMessage">
<h1>Let's write some code!</h1>
<p>You can add a new code file with the <b>+</b> button, or open one from the <b>FILES</b> view on the left.</p>
</div>
</div>
</div>
<div id="runtimeContainer">
<div class="sk-column">
<div class="sk-header sk-header-indent">
<div class="flex-column">
<button type="button" id="restartProgram" style="display:none"><i class="bi bi-arrow-repeat">Restart</i></button>
<button type="button" id="continueProgram" style="display:none"><i class="bi bi-play-fill">Continue</i></button>
<button type="button" id="runProgram" class="run-program">
<i class="bi bi-gear-fill"></i>
<i class="bi bi-play-fill">Build and Run</i>
</button>
<button type="button" id="stopProgram" style="display:none"><i class="bi bi-pause-fill">Pause</i></button>



<div class="navbar">
<button type="button" id="runProgram" class="run-program">
<i class="bi bi-gear-fill"></i>
<i class="bi bi-play-fill"></i> Build and Run
</button>
<div class="dropdown" id="functionsDropdown">
<button class="dropbtn">
Functions <i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<button type="button" id="restartProgram" style="display:none">
<i class="bi bi-arrow-repeat"></i> Restart
</button>
<button type="button" id="continueProgram" style="display:none">
<i class="bi bi-play-fill"></i> Continue
</button>
<button type="button" id="stopProgram" style="display:none">
<i class="bi bi-pause-fill"></i> Pause
</button>
</div>
</div>
</div>

<script>
// Get the "Build and Run" button and "Functions" dropdown
const runProgramButton = document.getElementById('runProgram');
const functionsDropdown = document.getElementById('functionsDropdown');

// Add a click event listener to the "Build and Run" button
runProgramButton.addEventListener('click', function () {
// Show the "Functions" dropdown by setting its display to 'inline-block'
functionsDropdown.style.display = 'inline-block';
});
</script>




</div>
<div class="sk-header-title">
PROGRAM
Expand All @@ -113,14 +249,18 @@ <h1>Let's write some code!</h1>
</div>
</div>
<div class="sk-collapsed-column sk-hidden">
<button type="button" title="Expand Program" onclick="collapseProgramViewToggle()"><i class="bi bi-terminal"></i></button>
<button type="button" title="Expand Program" onclick="collapseProgramViewToggle()"><i
class="bi bi-terminal"></i></button>
<button id="collapsedRunProgram" type="button" class="run-program" title="Build and Run">
<i class="bi bi-gear-fill"></i>
<i class="bi bi-play-fill"></i>
</button>
<button type="button" id="collapsedRestartProgram" title="Restart" style="display:none"><i class="bi bi-arrow-repeat"></i></button>
<button type="button" id="collapsedContinueProgram" title="Continue" style="display:none"><i class="bi bi-play-fill"></i></button>
<button type="button" id="collapsedStopProgram" title="Pause" style="display:none"><i class="bi bi-pause-fill"></i></button>
<button type="button" id="collapsedRestartProgram" title="Restart" style="display:none"><i
class="bi bi-arrow-repeat"></i></button>
<button type="button" id="collapsedContinueProgram" title="Continue" style="display:none"><i
class="bi bi-play-fill"></i></button>
<button type="button" id="collapsedStopProgram" title="Pause" style="display:none"><i
class="bi bi-pause-fill"></i></button>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Better not to change code that isn't related to the PR - I agree we can improve the formatting, but for now let's leave these parts as-is 😋 Same comments for a few areas above.

</div>
</div>
</div>
Expand All @@ -145,4 +285,5 @@ <h1>Let's write some code!</h1>
<script src="projectLoadUI.js"></script>
<script src="actionQueue.js"></script>
<script src="IDEStartupMain.js"></script>
</html>

</html>
4 changes: 1 addition & 3 deletions Browser_IDE/stylesheet.css
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,7 @@ button:disabled {
cursor: wait;
}

button:hover:enabled {
background-color: #404040;
}
Comment on lines -60 to -62
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This causes none of the other buttons in the IDE to highlight when hovered, would be better to leave this as-was.



select {
-webkit-appearance: button;
Expand Down
Loading