Kelder/planet-wars
33
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

BEAUtiful webpage + content

Browse source
This commit is contained in:
ajuvercr 2019-09-21 16:54:48 +02:00
parent e4c3fc7c6c
commit c4ed747c2b
15 changed files with 7086 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

119
backend/games/hungergames.json Normal file
View file

File diff suppressed because one or more lines are too long

1166
backend/games/large.json Normal file
View file

File diff suppressed because one or more lines are too long

5
backend/games/map.json
View file

File diff suppressed because one or more lines are too long

2788
backend/games/pietmap.json Normal file
View file

File diff suppressed because one or more lines are too long

1515
backend/games/spiral.json Normal file
View file

File diff suppressed because one or more lines are too long

537
backend/games/spiral2.json Normal file
View file

File diff suppressed because one or more lines are too long

241
backend/maps/hungergames.json Normal file
View file

@ -0,0 +1,241 @@
{
"planets": [
{
"name": "guns1",
"x": -1,
"y": -1,
"ship_count": 0
},
{
"name": "guns2",
"x": -2,
"y": -1,
"ship_count": 0
},
{
"name": "guns3",
"x": -1,
"y": -2,
"ship_count": 0
},
{
"name": "food1",
"x": 1,
"y": -1,
"ship_count": 0
},
{
"name": "food2",
"x": 2,
"y": -1,
"ship_count": 0
},
{
"name": "food3",
"x": 1,
"y": -2,
"ship_count": 0
},
{
"name": "swords1",
"x": -1,
"y": 1,
"ship_count": 0
},
{
"name": "swords2",
"x": -2,
"y": 1,
"ship_count": 0
},
{
"name": "swords3",
"x": -1,
"y": 2,
"ship_count": 0
},
{
"name": "explosives1",
"x": 1,
"y": 1,
"ship_count": 0
},
{
"name": "explosives2",
"x": 2,
"y": 1,
"ship_count": 0
},
{
"name": "explosives3",
"x": 1,
"y": 2,
"ship_count": 0
},
{
"name": "trap-1",
"x": 5,
"y": 0,
"ship_count": 50
},
{
"name": "trap-2",
"x": 2.5,
"y": 4.330,
"ship_count": 50
},
{
"name": "trap-3",
"x": -2.5,
"y": 4.33,
"ship_count": 50
},
{
"name": "trap-4",
"x": -5,
"y": 0,
"ship_count": 50
},
{
"name": "trap-5",
"x": -2.5,
"y": -4.33,
"ship_count": 50
},
{
"name": "trap-6",
"x": 2.5,
"y": -4.33,
"ship_count": 50
},
{
"name": "plate-1",
"x": 25,
"y": 0,
"ship_count": 5,
"owner": 1
},
{
"name": "plate-2",
"x": 23.776,
"y": 7.752,
"ship_count": 5
},
{
"name": "plate-3",
"x": 20.225,
"y": 14.695,
"ship_count": 5,
"owner": 5
},
{
"name": "plate-4",
"x": 14.695,
"y": 20.225,
"ship_count": 5
},
{
"name": "plate-5",
"x": 7.725,
"y": 23.776,
"ship_count": 5
},
{
"name": "plate-6",
"x": 0,
"y": 25,
"ship_count": 5,
"owner": 3
},
{
"name": "plate-7",
"x": -7.725,
"y": 23.776,
"ship_count": 5
},
{
"name": "plate-8",
"x": -14.695,
"y": 20.225,
"ship_count": 5,
"owner": 7
},
{
"name": "plate-9",
"x": -20.225,
"y": 14.695,
"ship_count": 5
},
{
"name": "plate-10",
"x": -23.776,
"y": 7.752,
"ship_count": 5
},
{
"name": "plate-11",
"x": -25,
"y": 0,
"ship_count": 5,
"owner": 2
},
{
"name": "plate-12",
"x": -23.776,
"y": -7.752,
"ship_count": 5
},
{
"name": "plate-13",
"x": -20.225,
"y": -14.695,
"ship_count": 5,
"owner": 6
},
{
"name": "plate-14",
"x": -14.695,
"y": -20.225,
"ship_count": 5
},
{
"name": "plate-15",
"x": -7.725,
"y": -23.776,
"ship_count": 5
},
{
"name": "plate-16",
"x": 0,
"y": -25,
"ship_count": 5,
"owner": 4
},
{
"name": "plate-17",
"x": 7.725,
"y": -23.776,
"ship_count": 5
},
{
"name": "plate-18",
"x": 14.695,
"y": -20.225,
"ship_count": 5,
"owner": 8
},
{
"name": "plate-19",
"x": 20.225,
"y": -14.695,
"ship_count": 5
},
{
"name": "plate-20",
"x": 23.776,
"y": -7.725,
"ship_count": 5
}
]
}

144
backend/maps/large.json Normal file
View file

@ -0,0 +1,144 @@
{
"planets": [
{
"name": "OJCKCVKJGJ",
"owner": 1,
"ship_count": 1,
"x": 78,
"y": 31
},
{
"name": "OTJPKJXLQX",
"owner": 2,
"ship_count": 1,
"x": 30,
"y": 74
},
{
"name": "RSSGYXGAIS",
"owner": 3,
"ship_count": 1,
"x": 48,
"y": 80
},
{
"name": "LWMVSTXKRV",
"owner": 4,
"ship_count": 1,
"x": 19,
"y": 96
},
{
"name": "QUQGQOWETI",
"owner": null,
"ship_count": 0,
"x": 33,
"y": 99
},
{
"name": "VNZZPHTSZM",
"owner": null,
"ship_count": 0,
"x": 87,
"y": 67
},
{
"name": "OZIYOLKDIR",
"owner": null,
"ship_count": 0,
"x": 11,
"y": 25
},
{
"name": "VSLGCPXQUN",
"owner": null,
"ship_count": 0,
"x": 9,
"y": 32
},
{
"name": "DLSGAMDSAK",
"owner": null,
"ship_count": 0,
"x": 25,
"y": 24
},
{
"name": "JXTLWRHRRP",
"owner": null,
"ship_count": 0,
"x": 21,
"y": 53
},
{
"name": "RULUVNQJTY",
"owner": null,
"ship_count": 0,
"x": 31,
"y": 52
},
{
"name": "ETCCAQPWNK",
"owner": null,
"ship_count": 0,
"x": 38,
"y": 70
},
{
"name": "OVXRCBSXZK",
"owner": null,
"ship_count": 0,
"x": 53,
"y": 93
},
{
"name": "HEYBAGEYJB",
"owner": null,
"ship_count": 0,
"x": 98,
"y": 56
},
{
"name": "XVJXNQDAQE",
"owner": null,
"ship_count": 0,
"x": 51,
"y": 2
},
{
"name": "MJXGGQIJTD",
"owner": null,
"ship_count": 0,
"x": 22,
"y": 85
},
{
"name": "KEYMTVEOQP",
"owner": null,
"ship_count": 0,
"x": 92,
"y": 78
},
{
"name": "NWMMEHPPYR",
"owner": null,
"ship_count": 0,
"x": 2,
"y": 43
},
{
"name": "UUZZZWSZUT",
"owner": null,
"ship_count": 0,
"x": 41,
"y": 23
},
{
"name": "KOLNGIUGEX",
"owner": null,
"ship_count": 0,
"x": 4,
"y": 90
}
]
}

1
backend/maps/pietmap.json Normal file
View file

@ -0,0 +1 @@
{"planets":[{"name":"PIET4+1","x":12,"y":3,"ship_count":6,"owner":2},{"name":"PIET5+1","x":15,"y":3,"ship_count":6},{"name":"PIET6+1","x":18,"y":3,"ship_count":6},{"name":"PIET3+2","x":9,"y":6,"ship_count":6},{"name":"PIET5+2","x":15,"y":6,"ship_count":6},{"name":"PIET7+2","x":21,"y":6,"ship_count":6},{"name":"PIET3+3","x":9,"y":9,"ship_count":6},{"name":"PIET8+3","x":24,"y":9,"ship_count":6},{"name":"PIET3+4","x":9,"y":12,"ship_count":6},{"name":"PIET9+4","x":27,"y":12,"ship_count":6},{"name":"PIET4+5","x":12,"y":15,"ship_count":6},{"name":"PIET5+5","x":15,"y":15,"ship_count":6},{"name":"PIET6+5","x":18,"y":15,"ship_count":6},{"name":"PIET7+5","x":21,"y":15,"ship_count":6},{"name":"PIET8+5","x":24,"y":15,"ship_count":6},{"name":"PIET9+5","x":27,"y":15,"ship_count":6},{"name":"PIET4+6","x":12,"y":18,"ship_count":6},{"name":"PIET10+6","x":30,"y":18,"ship_count":6},{"name":"PIET5+7","x":15,"y":21,"ship_count":6},{"name":"PIET11+7","x":33,"y":21,"ship_count":6},{"name":"PIET5+8","x":15,"y":24,"ship_count":6},{"name":"PIET12+8","x":36,"y":24,"ship_count":6},{"name":"PIET13+8","x":39,"y":24,"ship_count":6},{"name":"PIET6+9","x":18,"y":27,"ship_count":6},{"name":"PIET14+9","x":42,"y":27,"ship_count":6},{"name":"PIET7+10","x":21,"y":30,"ship_count":6},{"name":"PIET15+10","x":45,"y":30,"ship_count":6},{"name":"PIET8+11","x":24,"y":33,"ship_count":6},{"name":"PIET9+11","x":27,"y":33,"ship_count":6},{"name":"PIET16+11","x":48,"y":33,"ship_count":6},{"name":"PIET7+12","x":21,"y":36,"ship_count":6},{"name":"PIET10+12","x":30,"y":36,"ship_count":6},{"name":"PIET16+12","x":48,"y":36,"ship_count":6},{"name":"PIET6+13","x":18,"y":39,"ship_count":6},{"name":"PIET16+13","x":48,"y":39,"ship_count":6},{"name":"PIET6+14","x":18,"y":42,"ship_count":6},{"name":"PIET16+14","x":48,"y":42,"ship_count":6,"owner":1},{"name":"PIET7+15","x":21,"y":45,"ship_count":6},{"name":"PIET9+15","x":27,"y":45,"ship_count":6},{"name":"PIET16+15","x":48,"y":45,"ship_count":6},{"name":"PIET7+16","x":21,"y":48,"ship_count":6},{"name":"PIET8+16","x":24,"y":48,"ship_count":6},{"name":"PIET9+16","x":27,"y":48,"ship_count":6},{"name":"PIET15+16","x":45,"y":48,"ship_count":6},{"name":"PIET16+16","x":48,"y":48,"ship_count":6},{"name":"PIET10+17","x":30,"y":51,"ship_count":6},{"name":"PIET14+17","x":42,"y":51,"ship_count":6},{"name":"PIET15+17","x":45,"y":51,"ship_count":6},{"name":"PIET11+18","x":33,"y":54,"ship_count":6},{"name":"PIET12+18","x":36,"y":54,"ship_count":6},{"name":"PIET13+18","x":39,"y":54,"ship_count":6},{"name":"PIET14+18","x":42,"y":54,"ship_count":6}]}

159
backend/maps/spiral.json Normal file
View file

@ -0,0 +1,159 @@
{
"planets": [
{
"name": "Galactic center",
"x": 25,
"y": 25,
"ship_count": 30
},
{
"name": "1-1",
"x": 29.830,
"y": 26.294,
"ship_count": 25
},
{
"name": "1-2",
"x": 33.660,
"y": 30,
"ship_count": 21
},
{
"name": "1-3",
"x": 35.607,
"y": 35.607,
"ship_count": 17
},
{
"name": "1-4",
"x": 35,
"y": 42.321,
"ship_count": 13
},
{
"name": "1-5",
"x": 31.470,
"y": 49.148,
"ship_count": 9
},
{
"name": "1-6",
"x": 25,
"y": 55,
"ship_count": 5,
"owner": 1
},
{
"name": "2-1",
"x": 23.706,
"y": 29.830,
"ship_count": 25
},
{
"name": "2-2",
"x": 20,
"y": 33.660,
"ship_count": 21
},
{
"name": "2-3",
"x": 14.393,
"y": 35.607,
"ship_count": 17
},
{
"name": "2-4",
"x": 7.679,
"y": 35,
"ship_count": 13
},
{
"name": "2-5",
"x": 0.852,
"y": 31.470,
"ship_count": 9
},
{
"name": "2-6",
"x": -5,
"y": 25,
"ship_count": 5,
"owner": 3
},
{
"name": "3-1",
"x": 20.170,
"y": 23.706,
"ship_count": 25
},
{
"name": "3-2",
"x": 16.340,
"y": 20,
"ship_count": 21
},
{
"name": "3-3",
"x": 14.393,
"y": 14.393,
"ship_count": 17
},
{
"name": "3-4",
"x": 15,
"y": 7.679,
"ship_count": 13
},
{
"name": "3-5",
"x": 18.530,
"y": 0.852,
"ship_count": 9
},
{
"name": "3-6",
"x": 25,
"y": -5,
"ship_count": 5,
"owner": 2
},
{
"name": "4-1",
"x": 26.294,
"y": 20.170,
"ship_count": 25
},
{
"name": "4-2",
"x": 30,
"y": 16.340,
"ship_count": 21
},
{
"name": "4-3",
"x": 35.607,
"y": 14.393,
"ship_count": 17
},
{
"name": "4-4",
"x": 42.321,
"y": 15,
"ship_count": 13
},
{
"name": "4-5",
"x": 49.148,
"y": 18.530,
"ship_count": 9
},
{
"name": "4-6",
"x": 55,
"y": 25,
"ship_count": 5,
"owner": 4
}
]
}

159
backend/maps/spiral2.json Normal file
View file

@ -0,0 +1,159 @@
{
"planets": [
{
"name": "Galactic center",
"x": 25,
"y": 25,
"ship_count": 30
},
{
"name": "1-1",
"x": 29.830,
"y": 26.294,
"ship_count": 25,
"owner": 1
},
{
"name": "1-2",
"x": 33.660,
"y": 30,
"ship_count": 21
},
{
"name": "1-3",
"x": 35.607,
"y": 35.607,
"ship_count": 17
},
{
"name": "1-4",
"x": 35,
"y": 42.321,
"ship_count": 13
},
{
"name": "1-5",
"x": 31.470,
"y": 49.148,
"ship_count": 9
},
{
"name": "1-6",
"x": 25,
"y": 55,
"ship_count": 5
},
{
"name": "2-1",
"x": 23.706,
"y": 29.830,
"ship_count": 25,
"owner": 3
},
{
"name": "2-2",
"x": 20,
"y": 33.660,
"ship_count": 21
},
{
"name": "2-3",
"x": 14.393,
"y": 35.607,
"ship_count": 17
},
{
"name": "2-4",
"x": 7.679,
"y": 35,
"ship_count": 13
},
{
"name": "2-5",
"x": 0.852,
"y": 31.470,
"ship_count": 9
},
{
"name": "2-6",
"x": -5,
"y": 25,
"ship_count": 5
},
{
"name": "3-1",
"x": 20.170,
"y": 23.706,
"ship_count": 25,
"owner": 2
},
{
"name": "3-2",
"x": 16.340,
"y": 20,
"ship_count": 21
},
{
"name": "3-3",
"x": 14.393,
"y": 14.393,
"ship_count": 17
},
{
"name": "3-4",
"x": 15,
"y": 7.679,
"ship_count": 13
},
{
"name": "3-5",
"x": 18.530,
"y": 0.852,
"ship_count": 9
},
{
"name": "3-6",
"x": 25,
"y": -5,
"ship_count": 5
},
{
"name": "4-1",
"x": 26.294,
"y": 20.170,
"ship_count": 25,
"owner": 4
},
{
"name": "4-2",
"x": 30,
"y": 16.340,
"ship_count": 21
},
{
"name": "4-3",
"x": 35.607,
"y": 14.393,
"ship_count": 17
},
{
"name": "4-4",
"x": 42.321,
"y": 15,
"ship_count": 13
},
{
"name": "4-5",
"x": 49.148,
"y": 18.530,
"ship_count": 9
},
{
"name": "4-6",
"x": 55,
"y": 25,
"ship_count": 5
}
]
}

77
frontend/www/index.html
View file

@ -6,19 +6,82 @@
<link rel="stylesheet" type="text/css" href="static/res/style.css">
</head>
<body>
<div id="loader" class="loading">
<canvas id="c" width=1550 height=700></canvas>
</div>
<input type="file" id="fileselect" style="display: none">
<div id=wrapper>
<div class="slidecontainer">
<input type="range" min="0" max="1" value="1" class="slider" id="turnSlider">
</div>
<div id="main" class="loading">
<canvas id="c"></canvas>
<input type="file" id="fileselect">
<div id="addbutton" class="button"></div>
<div id="meta">
<div>
<span>Ms per frame:&nbsp;</span>
<input type="number" id="speed" value="500">
</div>
<div class="slidecontainer">
<input type="range" min="0" max="1" value="1" class="slider" id="turnSlider">
</div>
</div>
</div>
<div id=options>
<div class="option">
Option one
</div>
<div class="option">
Option two
</div>
<div class="option">
Option three
</div>
<div class="option">
Option three
</div>
<div class="option">
Option three
</div>
<div class="option">
Option three
</div>
<div class="option">
Option three
</div>
<div class="option">
Option three
</div>
<div class="option">
Option three
</div>
<div class="option">
Option three
</div><div class="option">
Option three
</div>
<div class="option">
Option three
</div>
<div class="option">
Option three
</div>
<div class="option">
Option three
</div>
<div class="option">
Option three
</div>
<div class="option">
Option three
</div><div class="option">
Option three
</div>
<div class="option">
Option three
</div>
</div>
</div>
<noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
<script src="./bootstrap.js"></script>

13
frontend/www/index.ts
View file

@ -16,11 +16,16 @@ function i32v(ptr: number, size: number): Int32Array {
}
const COUNTER = new FPSCounter();
const LOADER = document.getElementById("loader");
const LOADER = document.getElementById("main");
const SLIDER = <HTMLInputElement>document.getElementById("turnSlider");
const FILESELECTOR = <HTMLInputElement> document.getElementById("fileselect");
const SPEED = <HTMLInputElement> document.getElementById("speed");
document.getElementById("addbutton").onclick = function() {
FILESELECTOR.click();
}
function set_loading(loading: boolean) {
if (loading) {
if (!LOADER.classList.contains("loading")) {
@ -54,8 +59,6 @@ ShaderFactory.create_factory(
LOCATION + "static/shaders/frag/simple.glsl", LOCATION + "static/shaders/vert/simple.glsl"
).then((e) => SHADERFACOTRY = e);
class GameInstance {
resizer: Resizer;
game: Game;
@ -260,6 +263,9 @@ export async function set_instance(source: string) {
).map(url_to_mesh)
);
}
CANVAS.width = CANVAS.getBoundingClientRect().width;
CANVAS.height = CANVAS.getBoundingClientRect().height;
game_instance = new GameInstance(Game.new(source), meshes.slice(1), meshes[0]);
}
@ -271,6 +277,7 @@ SLIDER.oninput = function() {
FILESELECTOR.onchange = function(){
const file = FILESELECTOR.files[0];
if(!file) { return; }
var reader = new FileReader();
reader.onload = function() {

34
frontend/www/static/res/assets/ship.svg
View file

@ -26,20 +26,25 @@
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.0993438"
inkscape:cx="-51.525162"
inkscape:cy="316.36545"
inkscape:cx="676.08563"
inkscape:cy="474.10966"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
showgrid="true"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1920"
inkscape:window-height="1012"
inkscape:window-width="2560"
inkscape:window-height="1417"
inkscape:window-x="0"
inkscape:window-y="32"
inkscape:window-maximized="1" />
inkscape:window-y="0"
inkscape:window-maximized="0"
gridtolerance="10">
<inkscape:grid
type="xygrid"
id="grid894" />
</sodipodi:namedview>
<metadata
id="metadata5">
<rdf:RDF>
@ -57,10 +62,17 @@
inkscape:groupmode="layer"
id="layer1"
transform="translate(229.05372,-117.27915)">
<ellipse
ry="79.47506"
rx="48.672089"
cy="39.779182"
cx="439.0813"
id="ellipse888"
style="opacity:1;fill:#00ffff;fill-opacity:1;stroke:none;stroke-width:6.61458302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:3.57897162;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -179.05372,44.836309 c 0,0 50,23.200477 50,83.246451 0,19.95749 -8.51775,37.5808 -21.52314,48.16034 15.5144,13.33311 16.32589,36.41658 13.92304,38.91979 -2.89851,3.01961 -19.14347,2.97265 -25.00722,-1.2125 -2.84584,-2.03116 -5.01798,-17.85234 -6.19846,-28.75242 -3.59896,0.96461 -7.34571,1.4755 -11.19422,1.4755 -3.84851,0 -7.59526,-0.51089 -11.19423,-1.4755 -1.18047,10.90008 -3.35262,26.72126 -6.19845,28.75242 -5.86375,4.18515 -22.10872,4.23211 -25.00723,1.2125 -2.40285,-2.50321 -1.59135,-25.58668 13.92304,-38.91979 -13.00539,-10.57954 -21.52313,-28.20285 -21.52313,-48.16034 0,-60.045974 50,-83.246451 50,-83.246451 z m 0,41.944617 a 28.025483,43.551862 0 0 0 -28.02559,43.551794 28.025483,43.551862 0 0 0 28.02559,43.55179 28.025483,43.551862 0 0 0 28.02558,-43.55179 28.025483,43.551862 0 0 0 -28.02558,-43.551794 z"
id="path815"
inkscape:connector-curvature="0" />
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:24.99999809;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 800 -448.82031 C 800 -448.82031 640 -342.04689 640 -92.046875 C 640 -16.101728 661.67774 51.924976 695.88672 97.775391 C 640.96482 152.90966 593.39426 234.74166 610 267.95312 C 620.00003 287.95314 720.00001 297.95311 730 287.95312 C 751.8315 266.12161 757.39662 198.03742 758.92773 149.62305 C 772.03579 155.04778 785.80002 157.95312 800 157.95312 C 814.19998 157.95312 827.96422 155.04778 841.07227 149.62305 C 842.60338 198.03742 848.1685 266.12161 870 287.95312 C 879.99999 297.95311 979.99997 287.95314 990 267.95312 C 1006.6057 234.74166 959.03518 152.90966 904.11328 97.775391 C 938.32226 51.924976 959.99999 -16.101728 960 -92.046875 C 960.00002 -342.04689 800 -448.82031 800 -448.82031 z M 800 -352.04688 C 800 -352.04688 908.96486 -279.33252 908.96484 -109.07617 C 908.96484 -15.046189 860.17918 61.179688 800 61.179688 C 739.82082 61.179688 691.03515 -15.046189 691.03516 -109.07617 C 691.03516 -279.33252 800 -352.04687 800 -352.04688 z "
transform="matrix(0.26458333,0,0,0.26458333,-229.05372,117.27915)"
id="path4600" />
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

169
frontend/www/static/res/style.css
View file

@ -1,7 +1,60 @@
* {
margin: 0;
padding: 0;
}
body {
background-color: #333;
}
body, html {
height: 99%;
}
#wrapper {
max-height: 100vh;
min-height: 100vh;
width: 100%;
height: 100vh;
}
#main {
height: calc(100% - 200px);
width: 100%;
position: relative;
}
#meta{
padding: 10px 2%;
color: white;
position: absolute;
bottom: 0;
width: 96%;
}
#options {
background-color: #444;
overflow-y: hidden;
overflow-x: scroll;
white-space: nowrap;
height: 200px;
min-height: 200px !important;
max-height: 200px !important;
}
.option {
display: inline-block;
color: white;
text-align: center;
width: 200px;
height: 100%;
}
.option:hover {
background-color: #777;
}
.loading {
position: relative;
display: inline-block;
@ -22,9 +75,49 @@ body {
animation: slide-top 0.5s ease-out infinite alternate ;
}
#speed {
width: 100px;
}
#c {
position: relative;
background-color: black;
width: 100%;
height: 100%;
}
.button {
position: absolute;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
}
.button:before, .button:after {
content: "";
position: absolute;
background-color: grey;
}
.button:hover:before, .button:hover:after {
background-color: white;
}
.button:before {
top: 0;
left: 50%;
width: 6px;
height: 100%;
margin-left: -3px;
}
.button:after {
top: 50%;
left: 0;
width: 100%;
height: 6px;
margin-top: -3px;
}
/* ----------------------------------------------
@ -67,40 +160,68 @@ body {
* ----------------------------------------
*/
.slidecontainer {
margin-top: 10px;
width: 100%; /* Width of the outside container */
}
/* The slider itself */
.slider {
-webkit-appearance: none; /* Override default CSS styles */
appearance: none;
width: 100%; /* Full-width */
height: 25px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
/* Mouse-over effects */
.slider:hover {
opacity: 1; /* Fully shown on mouse-over */
}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
-webkit-appearance: none;
appearance: none;
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
width: 25px;
height: 25px;
border-radius: 50%;
background: #ff7000;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
width: 25px;
height: 25px;
border-radius: 50%;
background: #ff7000;
cursor: pointer;
}
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #444;
border-radius: 10px;
}
::-webkit-scrollbar
{
width: 10px;
background-color: #444;
}
::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #F90;
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}