finishing the project
BIN
assets/fonts/Rubik.ttf
Normal file
BIN
assets/fonts/RubikItalic.ttf
Normal file
BIN
assets/images/ico/favicon.ico
Normal file
After Width: | Height: | Size: 5.6 KiB |
1
assets/images/svg/arrow_down.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>
|
After Width: | Height: | Size: 171 B |
1
assets/images/svg/download.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
|
After Width: | Height: | Size: 198 B |
1
assets/images/svg/pause.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
|
After Width: | Height: | Size: 188 B |
1
assets/images/svg/play_arrow.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M8 5v14l11-7z"/></svg>
|
After Width: | Height: | Size: 170 B |
1
assets/images/svg/restart.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><g><path d="M12,5V2L8,6l4,4V7c3.31,0,6,2.69,6,6c0,2.97-2.17,5.43-5,5.91v2.02c3.95-0.49,7-3.85,7-7.93C20,8.58,16.42,5,12,5z"/><path d="M6,13c0-1.65,0.67-3.15,1.76-4.24L6.34,7.34C4.9,8.79,4,10.79,4,13c0,4.08,3.05,7.44,7,7.93v-2.02 C8.17,18.43,6,15.97,6,13z"/></g></g></svg>
|
After Width: | Height: | Size: 456 B |
1
assets/images/svg/upload.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/></svg>
|
After Width: | Height: | Size: 194 B |
75
index.html
@ -3,14 +3,83 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<script src="script/main.js"></script>
|
||||
<title>Particle Sandbox</title>
|
||||
<script defer src="script/main.js"></script>
|
||||
<link rel="stylesheet" href="style/main.css" />
|
||||
<link
|
||||
rel="shortcut icon"
|
||||
href="assets/images/ico/favicon.ico"
|
||||
type="image/x-icon"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<canvas></canvas>
|
||||
<section class="gui">
|
||||
<h2 class="label">Particles</h2>
|
||||
<div class="content">
|
||||
<div class="head">
|
||||
<h1 class="title">Particle Sandbox</h1>
|
||||
<div class="head-buttons">
|
||||
<button class="play-pause">
|
||||
<img
|
||||
src="/assets/images/svg/play_arrow.svg"
|
||||
alt="play-pause"
|
||||
height="16"
|
||||
width="16"
|
||||
/>
|
||||
</button>
|
||||
<button class="reset">
|
||||
<img
|
||||
src="/assets/images/svg/restart.svg"
|
||||
alt="reset"
|
||||
height="16"
|
||||
width="16"
|
||||
/>
|
||||
</button>
|
||||
<button class="minimize">
|
||||
<img
|
||||
src="/assets/images/svg/arrow_down.svg"
|
||||
alt="minimize"
|
||||
height="16"
|
||||
width="16"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="category">
|
||||
<div class="category-head">
|
||||
<button class="add particle">+</button>
|
||||
<h2 class="label">Particles</h2>
|
||||
</div>
|
||||
<div class="particle-containers"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="category-head">
|
||||
<button class="add interaction">+</button>
|
||||
<h2 class="label">Interactions</h2>
|
||||
</div>
|
||||
<div class="interaction-containers"></div>
|
||||
</div>
|
||||
<div class="down-buttons">
|
||||
<button class="save">
|
||||
<img
|
||||
src="assets/images/svg/upload.svg"
|
||||
alt="upload"
|
||||
height="16"
|
||||
width="16"
|
||||
/>
|
||||
<p>Export this scene</p>
|
||||
</button>
|
||||
<button class="load">
|
||||
<img
|
||||
src="assets/images/svg/download.svg"
|
||||
alt="download"
|
||||
height="16"
|
||||
width="16"
|
||||
/>
|
||||
<p>Import a scene</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|