codegirl007
/
system-design-game
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

more styling of game

pull/1/head
Stephanie Gredell 7 months ago
parent
e45bc45ea5
commit
bbe6ac61a4
1 changed files with 149 additions and 112 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 49
      game.html

49
game.html
Unescape View File

@ -11,7 +11,6 @@
body { body {
margin: 0; margin: 0;
height: 100vh;
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
background-color: #161b22; background-color: #161b22;
color: #ccc; color: #ccc;
@ -80,7 +79,7 @@
} }
#canvas { #canvas {
width: 100%; width: 100%;
height: 100%; height: 90%;
background: #121212; background: #121212;
border: 2px dashed #30363d; border: 2px dashed #30363d;
border-radius: 8px; border-radius: 8px;
@ -300,9 +299,41 @@
height: 100%; height: 100%;
overflow:hidden; overflow:hidden;
} }
#sd-header {
width: 100%;
background: none;
padding: 12px 24px;
font-size: 24px;
font-weight: bold;
color: #00ff88;
border-bottom: 1px solid #333;
}
#page-container {
display: flex;
flex-direction: column;
width: 100%;
}
#main-content {
display: flex;
flex-direction: row;
height: 100%;
background: radial-gradient(circle at 30% 50%, rgba(0, 255, 136, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(255, 107, 53, 0.1) 0%, transparent 50%)
}
#challenge-container {
background: #121212;
margin: 12px 24px;
border: 2px solid #30363d;
border-radius: 8px;
}
</style> </style>
</head> </head>
<body> <body>
<div id="page-container">
<div id="sd-header">System Design Game</div>
<div id="main-content">
<div id="challenge-container"> <div id="challenge-container">
Challenges Challenges
</div> </div>
@ -324,7 +355,7 @@
<!-- Design--> <!-- Design-->
<div id="content2" class="tab-content"> <div id="content2" class="tab-content">
<div id="sidebar"> <div id="sidebar">
<div class="component-icon" draggable="true" data-type="client"> <div class="component-icon" draggable="true" data-type="user">
user user
<span class="tooltip">simulates user traffic</span> <span class="tooltip">simulates user traffic</span>
</div> </div>
@ -334,12 +365,12 @@
<span class="tooltip">cost: $5/mo<br>distributes traffic evenly<br>latency: 5 ms</span> <span class="tooltip">cost: $5/mo<br>distributes traffic evenly<br>latency: 5 ms</span>
</div> </div>
<div class="component-icon" draggable="true" data-type="webserversmall"> <div class="component-icon" draggable="true" data-type="webserver (small)">
web server (small) web server (small)
<span class="tooltip">cost: $10/mo<br>capacity: 100 rps<br>base latency: 50 ms</span> <span class="tooltip">cost: $10/mo<br>capacity: 100 rps<br>base latency: 50 ms</span>
</div> </div>
<div class="component-icon" draggable="true" data-type="webservermedium"> <div class="component-icon" draggable="true" data-type="webserver (medium)">
web server (medium) web server (medium)
<span class="tooltip">cost: $20/mo<br>capacity: 200 rps<br>base latency: 40 ms</span> <span class="tooltip">cost: $20/mo<br>capacity: 200 rps<br>base latency: 40 ms</span>
</div> </div>
@ -390,7 +421,7 @@
</div> </div>
<div id="arrow-tool">arrow tool</div> <div id="arrow-tool">arrow tool</div>
<button id="run-button" disabled>run simulation</button> <button id="run-button" disabled>Test Design</button>
</div> </div>
<div id="canvas-container"> <div id="canvas-container">
@ -432,6 +463,10 @@
</div> </div>
<button id="node-props-save" disabled>save</button> <button id="node-props-save" disabled>save</button>
</div> </div>
<div id="bottom-panel">
Hi
</div>
</div> </div>
</div> </div>
@ -440,6 +475,8 @@
<div id="content3" class="tab-content">This is Tab 3 content.</div> <div id="content3" class="tab-content">This is Tab 3 content.</div>
</div> </div>
</div> </div>
</div>
</div>
<script> <script>
let nodeIdCounter = 1; let nodeIdCounter = 1;

Write Preview
Loading…
Cancel
Save