<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>MARS</title>
<script src="https://codemirror.net/6/codemirror.js"></script>
<script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200;400;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
type="text/css"
href="https://unpkg.com/augmented-ui@2/augmented-ui.min.css"
/>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<link rel="icon" href="/red_circle.svg" />
<style>
html,
body {
font-family: "Titillium Web", sans-serif;
margin: 0;
padding: 0;
background: black;
height: 100%;
}
.layout {
display: grid;
grid-template-columns: 3rem auto 3rem;
grid-template-rows: 4rem auto;
height: 100%;
}
.header {
padding: 0.5rem;
color: #fba244;
padding-left: 1rem;
grid-column: span 2;
}
.actions {
grid-row: span 2;
width: 3rem;
border-right: solid 1px #333;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 1rem;
transform: translate(-44px, 0px);
transition: transform 0.3s;
}
.actions:hover {
transform: translate(0px, 0px);
}
.notebook {
padding: 0 1rem;
}
.notebook-name {
color: #ece8e9;
margin-left: 0.3rem;
}
.icon-button {
color: #929292;
margin: 0.5rem;
cursor: pointer;
}
#run-all:hover {
color: white;
cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🚀</text></svg>"),
auto;
}
.code-cell-output {
color: #929292;
padding: 1.4rem 0.7rem 0.7rem 0.7rem;
clip-path: polygon(30px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 30px);
background: black;
border-radius: 5px;
min-height: 30px;
}
.code-cell-minimize {
color: #777;
position: absolute;
top: 6px;
left: 6px;
line-height: 5px;
cursor: pointer;
user-select: none;
}
.code-cell-output-container {
margin: 1rem 0;
position: relative;
}
.code-cell-output-shell {
color: #929292;
padding: 1px;
clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 10px);
background: #333;
position: relative;
}
.code-cell-menu {
line-height: 1rem;
position: absolute;
left: 30px;
color: #555;
z-index: 999;
user-select: none;
white-space: nowrap;
margin: 0.2rem;
}
.code-cell-menu-item {
line-height: 1rem;
text-transform: uppercase;
font-size: 10px;
display: inline-block;
font-weight: 700;
cursor: pointer;
}
.code-cell-menu-item:hover {
text-decoration: underline;
}
.code-cell-editor {
overflow-x: hidden;
}
.code-cell-loading,
.code-cell-loading:after {
border-radius: 50%;
width: 1rem;
height: 1rem;
}
.code-cell-loading {
margin: 0px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 0.1em solid rgba(255, 255, 255, 0.2);
border-right: 0.1em solid rgba(255, 255, 255, 0.2);
border-bottom: 0.1em solid rgba(255, 255, 255, 0.2);
border-left: 0.1em solid #ffffff;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.code-editor-row {
display: grid;
grid-template-columns: auto 30px;
width: 100%;
}
.code-editor-row-end {
background-color: #3a1100;
color: #e0a877;
border: solid 1px #e0a877;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.code-cell-delete {
color: #e83716;
cursor: pointer;
font-size: 12px;
padding-top: 2px;
padding-left: 7px;
}
.material-icon {
font-size: unset;
line-height: unset;
}
.add-cell {
margin: 1rem;
border: solid 1px white;
text-align: center;
margin: 1rem;
border: dashed 1px #929292;
text-align: center;
color: #929292;
cursor: pointer;
opacity: 0.5;
border-radius: 5px;
transition: opacity 1s;
}
.add-cell:hover {
opacity: 1;
}
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(13deg, #2e2e2e 14%, #2e2e2e 64%);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(13deg, #2e2e2e 14%, #2e2e2e 64%);
}
::-webkit-scrollbar-track {
background: #000000;
border-radius: 10px;
box-shadow: inset 7px 10px 12px #636363;
}
</style>
</head>
<body>
<loading-screen></loading-screen>
<div class="layout" style="opacity: 0; transition: opacity 1s ease-in-out">
<div class="actions">
<div class="icon-button" id="run-all">
<span class="material-icons"> play_circle_outline </span>
</div>
<div class="icon-button" id="add-cell">
<span class="material-icons"> add </span>
</div>
<cpu-info></cpu-info>
</div>
<div class="header">
<text-typography type="title">MARS</text-typography>
<span class="notebook-name"
><text-typography type="h3">demo notebook</text-typography>
</span>
</div>
<div>
<div class="notebook">
<code-cell></code-cell>
</div>
<div class="add-cell">
<span class="material-icons" style="font-size: 12px"> add </span>
</div>
</div>
</div>
<script type="module" src="/index.js"></script>
</body>
</html>
