mirror of
https://github.com/openglobus/openglobus.git
synced 2025-12-08 19:25:27 +00:00
137 lines
4.4 KiB
HTML
137 lines
4.4 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<title>OpenStreetMap Base Layer</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script src="./osm.js" type="module"></script>
|
|
<link rel="stylesheet" href="../../css/og.css" type="text/css" />
|
|
<style>
|
|
.color-options {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
background-color: white;
|
|
padding: 15px;
|
|
width: 250px;
|
|
}
|
|
|
|
.caption {
|
|
width: 100%;
|
|
height: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.option {
|
|
width: 100%;
|
|
position: relative;
|
|
display: flex;
|
|
}
|
|
|
|
.label {
|
|
float: left;
|
|
}
|
|
|
|
.slider {
|
|
float: left;
|
|
width: calc(100% - 50px);
|
|
}
|
|
|
|
.slider input {
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.value{
|
|
float:left;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="earth" style="width:100%;height:100%"></div>
|
|
|
|
<div class="color-options">
|
|
<div class="caption">Ambient</div>
|
|
<div class="option">
|
|
<div class="label">R</div>
|
|
<div class="slider">
|
|
<input type="range" id="ambient-r" name="ambient-r" value="0.0" min="0.0" max="2.0" step="0.01" />
|
|
</div>
|
|
<div class="value ambient-r">0.888</div>
|
|
</div>
|
|
<div class="option">
|
|
<div class="label">G</div>
|
|
<div class="slider">
|
|
<input type="range" id="ambient-g" name="ambient-g" value="0.0" min="0.0" max="2.0" step="0.01" />
|
|
</div>
|
|
<div class="value ambient-g">0.888</div>
|
|
</div>
|
|
<div class="option">
|
|
<div class="label">B</div>
|
|
<div class="slider">
|
|
<input type="range" id="ambient-b" name="ambient-b" value="0.0" min="0.0" max="2.0" step="0.01" />
|
|
</div>
|
|
<div class="value ambient-b">0.888</div>
|
|
</div>
|
|
|
|
<div class="caption">Diffuse</div>
|
|
<div class="option">
|
|
<div class="label">R</div>
|
|
<div class="slider">
|
|
<input type="range" id="diffuse-r" name="diffuse-r" value="0.0" min="0.0" max="2.0" step="0.01" />
|
|
</div>
|
|
<div class="value diffuse-r">0.888</div>
|
|
</div>
|
|
<div class="option">
|
|
<div class="label">G</div>
|
|
<div class="slider">
|
|
<input type="range" id="diffuse-g" name="diffuse-g" value="0.0" min="0.0" max="2.0" step="0.01" />
|
|
</div>
|
|
<div class="value diffuse-g">0.888</div>
|
|
</div>
|
|
<div class="option">
|
|
<div class="label">B</div>
|
|
<div class="slider">
|
|
<input type="range" id="diffuse-b" name="diffuse-b" value="0.0" min="0.0" max="2.0" step="0.01" />
|
|
</div>
|
|
<div class="value diffuse-b">0.888</div>
|
|
</div>
|
|
|
|
|
|
<div class="caption">Specular</div>
|
|
<div class="option">
|
|
<div class="label">R</div>
|
|
<div class="slider">
|
|
<input type="range" id="specular-r" name="specular-r" value="0.0" min="0.0" max="1.0" step="0.0001" />
|
|
</div>
|
|
<div class="value specular-r">0.888</div>
|
|
</div>
|
|
<div class="option">
|
|
<div class="label">G</div>
|
|
<div class="slider">
|
|
<input type="range" id="specular-g" name="specular-g" value="0.0" min="0.0" max="1.0" step="0.0001" />
|
|
</div>
|
|
<div class="value specular-g">0.888</div>
|
|
</div>
|
|
<div class="option">
|
|
<div class="label">B</div>
|
|
<div class="slider">
|
|
<input type="range" id="specular-b" name="specular-b" value="0.0" min="0.0" max="1.0" step="0.0001" />
|
|
</div>
|
|
<div class="value specular-b">0.888</div>
|
|
</div>
|
|
|
|
<div class="caption">Shininess</div>
|
|
<div class="option">
|
|
<div class="label">R</div>
|
|
<div class="slider">
|
|
<input type="range" id="shininess" name="shininess" value="0.0" min="0.0" max="1000.0" step="1" />
|
|
</div>
|
|
<div class="value shininess">0.888</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
|
|
</html> |