added mobile version and layout for 3d.php
This commit is contained in:
parent
f729e25e12
commit
eb9bd4f738
12 changed files with 103372 additions and 22 deletions
151
3d.php
Normal file
151
3d.php
Normal file
|
@ -0,0 +1,151 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<?php
|
||||
|
||||
$lang=$_GET['lang'];
|
||||
if ( in_array ($lang, array('en-US'))){
|
||||
$loc = "$lang".".utf8";
|
||||
$loc1 = $lang;
|
||||
}
|
||||
else {
|
||||
$loc = "de-DE";
|
||||
$loc1 = "de-DE";
|
||||
}
|
||||
|
||||
|
||||
include "Spyc.php";
|
||||
$localeYaml = Spyc::YAMLLoad('locale.yaml');
|
||||
|
||||
$domain = "messages";
|
||||
|
||||
setlocale(LC_MESSAGES, $loc);
|
||||
setlocale(LC_ALL, $loc);
|
||||
|
||||
$results = putenv("LC_ALL=$loc");
|
||||
$results = putenv("LC_MESSAGES=$loc");
|
||||
?>
|
||||
|
||||
|
||||
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title><?php echo $localeYaml['title'][$loc1]?></title>
|
||||
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<style>
|
||||
body { margin: 0; background-color: deeppink;}
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
[class*="model0"] {
|
||||
width: 90vw;
|
||||
height: 40vh;
|
||||
}
|
||||
[class*="model1"] {
|
||||
width: 90vw;
|
||||
height: 40vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<center>
|
||||
<header style="height: 10 vh;">
|
||||
<center>
|
||||
<a href="/" style="text-decoration:none; color:black;"><img style="height: 15vh;" src="static/KaosCubeLogo.png" alt="logo"></a>
|
||||
</center>
|
||||
|
||||
</header>
|
||||
</center>
|
||||
|
||||
<center>
|
||||
<div class="grid-container">
|
||||
<h1 style="background-color:white; height: 5vh; font-size:3vh; justify-self: center; width: 90vw;"> Die STL Files zum Download gibt es <a href=""> hier </a> </h1>
|
||||
<div class="model1" id="model1" style="width: 80vw; height: 80vh; justify-self: center; background-color: white;"> </div>
|
||||
<div style="height: 5vh; background-color:deeppink;"></div>
|
||||
<div class="model0" id="model0" style="width: 80vw; height: 80vh; justify-self: center; background-color: white;"> </div>
|
||||
</div>
|
||||
</center>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/STLLoader.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function STLViewer(model, elementID) {
|
||||
var elem = document.getElementById(elementID)
|
||||
|
||||
var camera = new THREE.PerspectiveCamera(70,
|
||||
elem.clientWidth/elem.clientHeight, 1, 1000);
|
||||
|
||||
var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
|
||||
renderer.setSize(elem.clientWidth, elem.clientHeight);
|
||||
elem.appendChild(renderer.domElement);
|
||||
|
||||
window.addEventListener('resize', function () {
|
||||
renderer.setSize(elem.clientWidth, elem.clientHeight);
|
||||
camera.aspect = elem.clientWidth/elem.clientHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
}, false);
|
||||
|
||||
var controls = new THREE.OrbitControls(camera, renderer.domElement);
|
||||
controls.enableDamping = true;
|
||||
controls.rotateSpeed = 2;
|
||||
controls.dampingFactor = 0.1;
|
||||
controls.enableZoom = true;
|
||||
controls.autoRotate = true;
|
||||
controls.autoRotateSpeed = .75;
|
||||
|
||||
var scene = new THREE.Scene();
|
||||
scene.add(new THREE.HemisphereLight(0xffffff, 1.5));
|
||||
|
||||
(new THREE.STLLoader()).load(model, function (geometry) {
|
||||
var material = new THREE.MeshPhongMaterial({
|
||||
color: 0xff1493,
|
||||
specular: 100,
|
||||
shininess: 100 });
|
||||
var mesh = new THREE.Mesh(geometry, material);
|
||||
scene.add(mesh);
|
||||
|
||||
var middle = new THREE.Vector3();
|
||||
geometry.computeBoundingBox();
|
||||
geometry.boundingBox.getCenter(middle);
|
||||
mesh.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(
|
||||
-middle.x, -middle.y, -middle.z ) );
|
||||
|
||||
var largestDimension = Math.max(geometry.boundingBox.max.x,
|
||||
geometry.boundingBox.max.y,
|
||||
geometry.boundingBox.max.z)
|
||||
camera.position.z = largestDimension * 2.5;
|
||||
|
||||
var animate = function () {
|
||||
requestAnimationFrame(animate);
|
||||
controls.update();
|
||||
renderer.render(scene, camera);
|
||||
};
|
||||
|
||||
animate();
|
||||
});
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
STLViewer("KaosCubeTopThick2mm_cut_joints.stl", "model0")
|
||||
STLViewer("KaosCube_support_cable.stl", "model1")
|
||||
}
|
||||
</script>
|
||||
|
||||
|
BIN
KaosCubeTopThick2mm_cut_joints.stl
Normal file
BIN
KaosCubeTopThick2mm_cut_joints.stl
Normal file
Binary file not shown.
BIN
KaosCube_support_cable.stl
Normal file
BIN
KaosCube_support_cable.stl
Normal file
Binary file not shown.
1175
OrbitControls.js
Normal file
1175
OrbitControls.js
Normal file
File diff suppressed because one or more lines are too long
389
STLLoader.js
Normal file
389
STLLoader.js
Normal file
|
@ -0,0 +1,389 @@
|
|||
/**
|
||||
* @author aleeper / http://adamleeper.com/
|
||||
* @author mrdoob / http://mrdoob.com/
|
||||
* @author gero3 / https://github.com/gero3
|
||||
*
|
||||
* Description: A THREE loader for STL ASCII files, as created by Solidworks and other CAD programs.
|
||||
*
|
||||
* Supports both binary and ASCII encoded files, with automatic detection of type.
|
||||
*
|
||||
* Limitations:
|
||||
* Binary decoding ignores header. There doesn't seem to be much of a use for it.
|
||||
* There is perhaps some question as to how valid it is to always assume little-endian-ness.
|
||||
* ASCII decoding assumes file is UTF-8. Seems to work for the examples...
|
||||
*
|
||||
* Usage:
|
||||
* var loader = new THREE.STLLoader();
|
||||
* loader.addEventListener( 'load', function ( event ) {
|
||||
*
|
||||
* var geometry = event.content;
|
||||
* scene.add( new THREE.Mesh( geometry ) );
|
||||
*
|
||||
* } );
|
||||
* loader.load( './models/stl/slotted_disk.stl' );
|
||||
*/
|
||||
|
||||
|
||||
THREE.STLLoader = function () {};
|
||||
|
||||
THREE.STLLoader.prototype = {
|
||||
|
||||
constructor: THREE.STLLoader,
|
||||
|
||||
addEventListener: THREE.EventDispatcher.prototype.addEventListener,
|
||||
hasEventListener: THREE.EventDispatcher.prototype.hasEventListener,
|
||||
removeEventListener: THREE.EventDispatcher.prototype.removeEventListener,
|
||||
dispatchEvent: THREE.EventDispatcher.prototype.dispatchEvent
|
||||
|
||||
};
|
||||
|
||||
THREE.STLLoader.prototype.load = function (url, callback) {
|
||||
|
||||
var scope = this;
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
|
||||
function onloaded( event ) {
|
||||
|
||||
if ( event.target.status === 200 || event.target.status === 0 ) {
|
||||
|
||||
var geometry = scope.parse( event.target.response || event.target.responseText );
|
||||
|
||||
scope.dispatchEvent( { type: 'load', content: geometry } );
|
||||
|
||||
if ( callback ) callback( geometry );
|
||||
|
||||
} else {
|
||||
|
||||
scope.dispatchEvent( { type: 'error', message: 'Couldn\'t load URL [' + url + ']',
|
||||
response: event.target.responseText } );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
xhr.addEventListener( 'load', onloaded, false );
|
||||
|
||||
xhr.addEventListener( 'progress', function ( event ) {
|
||||
|
||||
scope.dispatchEvent( { type: 'progress', loaded: event.loaded, total: event.total } );
|
||||
|
||||
}, false );
|
||||
|
||||
xhr.addEventListener( 'error', function () {
|
||||
|
||||
scope.dispatchEvent( { type: 'error', message: 'Couldn\'t load URL [' + url + ']' } );
|
||||
|
||||
}, false );
|
||||
|
||||
xhr.overrideMimeType('text/plain; charset=x-user-defined');
|
||||
xhr.open( 'GET', url, true );
|
||||
xhr.responseType = "arraybuffer";
|
||||
xhr.send( null );
|
||||
|
||||
};
|
||||
|
||||
THREE.STLLoader.prototype.parse = function (data) {
|
||||
|
||||
|
||||
var isBinary = function () {
|
||||
|
||||
var expect, face_size, n_faces, reader;
|
||||
reader = new DataView( binData );
|
||||
face_size = (32 / 8 * 3) + ((32 / 8 * 3) * 3) + (16 / 8);
|
||||
n_faces = reader.getUint32(80,true);
|
||||
expect = 80 + (32 / 8) + (n_faces * face_size);
|
||||
return expect === reader.byteLength;
|
||||
|
||||
};
|
||||
|
||||
var binData = this.ensureBinary( data );
|
||||
|
||||
return isBinary()
|
||||
? this.parseBinary( binData )
|
||||
: this.parseASCII( this.ensureString( data ) );
|
||||
|
||||
};
|
||||
|
||||
THREE.STLLoader.prototype.parseBinary = function (data) {
|
||||
|
||||
var face, geometry, n_faces, reader, length, normal, i, dataOffset, faceLength, start, vertexstart;
|
||||
|
||||
reader = new DataView( data );
|
||||
n_faces = reader.getUint32(80,true);
|
||||
geometry = new THREE.Geometry();
|
||||
dataOffset = 84;
|
||||
faceLength = 12 * 4 + 2;
|
||||
|
||||
for (face = 0; face < n_faces; face++) {
|
||||
|
||||
start = dataOffset + face * faceLength;
|
||||
normal = new THREE.Vector3(
|
||||
reader.getFloat32(start,true),
|
||||
reader.getFloat32(start + 4,true),
|
||||
reader.getFloat32(start + 8,true)
|
||||
);
|
||||
|
||||
for (i = 1; i <= 3; i++) {
|
||||
|
||||
vertexstart = start + i * 12;
|
||||
geometry.vertices.push(
|
||||
new THREE.Vector3(
|
||||
reader.getFloat32(vertexstart,true),
|
||||
reader.getFloat32(vertexstart +4,true),
|
||||
reader.getFloat32(vertexstart + 8,true)
|
||||
)
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
length = geometry.vertices.length;
|
||||
geometry.faces.push(new THREE.Face3(length - 3, length - 2, length - 1, normal));
|
||||
|
||||
}
|
||||
|
||||
//geometry.computeCentroids();
|
||||
geometry.computeBoundingSphere();
|
||||
|
||||
return geometry;
|
||||
|
||||
};
|
||||
|
||||
THREE.STLLoader.prototype.parseASCII = function (data) {
|
||||
|
||||
var geometry, length, normal, patternFace, patternNormal, patternVertex, result, text;
|
||||
geometry = new THREE.Geometry();
|
||||
patternFace = /facet([\s\S]*?)endfacet/g;
|
||||
|
||||
while (((result = patternFace.exec(data)) != null)) {
|
||||
|
||||
text = result[0];
|
||||
patternNormal = /normal[\s]+([\-+]?[0-9]+\.?[0-9]*([eE][\-+]?[0-9]+)?)+[\s]+([\-+]?[0-9]*\.?[0-9]+([eE][\-+]?[0-9]+)?)+[\s]+([\-+]?[0-9]*\.?[0-9]+([eE][\-+]?[0-9]+)?)+/g;
|
||||
|
||||
while (((result = patternNormal.exec(text)) != null)) {
|
||||
|
||||
normal = new THREE.Vector3(parseFloat(result[1]), parseFloat(result[3]), parseFloat(result[5]));
|
||||
|
||||
}
|
||||
|
||||
patternVertex = /vertex[\s]+([\-+]?[0-9]+\.?[0-9]*([eE][\-+]?[0-9]+)?)+[\s]+([\-+]?[0-9]*\.?[0-9]+([eE][\-+]?[0-9]+)?)+[\s]+([\-+]?[0-9]*\.?[0-9]+([eE][\-+]?[0-9]+)?)+/g;
|
||||
|
||||
while (((result = patternVertex.exec(text)) != null)) {
|
||||
|
||||
geometry.vertices.push(new THREE.Vector3(parseFloat(result[1]), parseFloat(result[3]), parseFloat(result[5])));
|
||||
|
||||
}
|
||||
|
||||
length = geometry.vertices.length;
|
||||
geometry.faces.push(new THREE.Face3(length - 3, length - 2, length - 1, normal));
|
||||
|
||||
}
|
||||
|
||||
geometry.computeCentroids();
|
||||
geometry.computeBoundingBox();
|
||||
geometry.computeBoundingSphere();
|
||||
|
||||
return geometry;
|
||||
|
||||
};
|
||||
|
||||
THREE.STLLoader.prototype.ensureString = function (buf) {
|
||||
|
||||
if (typeof buf !== "string"){
|
||||
var array_buffer = new Uint8Array(buf);
|
||||
var str = '';
|
||||
for(var i = 0; i < buf.byteLength; i++) {
|
||||
str += String.fromCharCode(array_buffer[i]); // implicitly assumes little-endian
|
||||
}
|
||||
return str;
|
||||
} else {
|
||||
return buf;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
THREE.STLLoader.prototype.ensureBinary = function (buf) {
|
||||
|
||||
if (typeof buf === "string"){
|
||||
var array_buffer = new Uint8Array(buf.length);
|
||||
for(var i = 0; i < buf.length; i++) {
|
||||
array_buffer[i] = buf.charCodeAt(i) & 0xff; // implicitly assumes little-endian
|
||||
}
|
||||
return array_buffer.buffer || array_buffer;
|
||||
} else {
|
||||
return buf;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
if ( typeof DataView === 'undefined'){
|
||||
|
||||
DataView = function(buffer, byteOffset, byteLength){
|
||||
|
||||
this.buffer = buffer;
|
||||
this.byteOffset = byteOffset || 0;
|
||||
this.byteLength = byteLength || buffer.byteLength || buffer.length;
|
||||
this._isString = typeof buffer === "string";
|
||||
|
||||
}
|
||||
|
||||
DataView.prototype = {
|
||||
|
||||
_getCharCodes:function(buffer,start,length){
|
||||
start = start || 0;
|
||||
length = length || buffer.length;
|
||||
var end = start + length;
|
||||
var codes = [];
|
||||
for (var i = start; i < end; i++) {
|
||||
codes.push(buffer.charCodeAt(i) & 0xff);
|
||||
}
|
||||
return codes;
|
||||
},
|
||||
|
||||
_getBytes: function (length, byteOffset, littleEndian) {
|
||||
|
||||
var result;
|
||||
|
||||
// Handle the lack of endianness
|
||||
if (littleEndian === undefined) {
|
||||
|
||||
littleEndian = this._littleEndian;
|
||||
|
||||
}
|
||||
|
||||
// Handle the lack of byteOffset
|
||||
if (byteOffset === undefined) {
|
||||
|
||||
byteOffset = this.byteOffset;
|
||||
|
||||
} else {
|
||||
|
||||
byteOffset = this.byteOffset + byteOffset;
|
||||
|
||||
}
|
||||
|
||||
if (length === undefined) {
|
||||
|
||||
length = this.byteLength - byteOffset;
|
||||
|
||||
}
|
||||
|
||||
// Error Checking
|
||||
if (typeof byteOffset !== 'number') {
|
||||
|
||||
throw new TypeError('DataView byteOffset is not a number');
|
||||
|
||||
}
|
||||
|
||||
if (length < 0 || byteOffset + length > this.byteLength) {
|
||||
|
||||
throw new Error('DataView length or (byteOffset+length) value is out of bounds');
|
||||
|
||||
}
|
||||
|
||||
if (this.isString){
|
||||
|
||||
result = this._getCharCodes(this.buffer, byteOffset, byteOffset + length);
|
||||
|
||||
} else {
|
||||
|
||||
result = this.buffer.slice(byteOffset, byteOffset + length);
|
||||
|
||||
}
|
||||
|
||||
if (!littleEndian && length > 1) {
|
||||
|
||||
if (!(result instanceof Array)) {
|
||||
|
||||
result = Array.prototype.slice.call(result);
|
||||
|
||||
}
|
||||
|
||||
result.reverse();
|
||||
}
|
||||
|
||||
return result;
|
||||
|
||||
},
|
||||
|
||||
// Compatibility functions on a String Buffer
|
||||
|
||||
getFloat64: function (byteOffset, littleEndian) {
|
||||
|
||||
var b = this._getBytes(8, byteOffset, littleEndian),
|
||||
|
||||
sign = 1 - (2 * (b[7] >> 7)),
|
||||
exponent = ((((b[7] << 1) & 0xff) << 3) | (b[6] >> 4)) - ((1 << 10) - 1),
|
||||
|
||||
// Binary operators such as | and << operate on 32 bit values, using + and Math.pow(2) instead
|
||||
mantissa = ((b[6] & 0x0f) * Math.pow(2, 48)) + (b[5] * Math.pow(2, 40)) + (b[4] * Math.pow(2, 32)) +
|
||||
(b[3] * Math.pow(2, 24)) + (b[2] * Math.pow(2, 16)) + (b[1] * Math.pow(2, 8)) + b[0];
|
||||
|
||||
if (exponent === 1024) {
|
||||
if (mantissa !== 0) {
|
||||
return NaN;
|
||||
} else {
|
||||
return sign * Infinity;
|
||||
}
|
||||
}
|
||||
|
||||
if (exponent === -1023) { // Denormalized
|
||||
return sign * mantissa * Math.pow(2, -1022 - 52);
|
||||
}
|
||||
|
||||
return sign * (1 + mantissa * Math.pow(2, -52)) * Math.pow(2, exponent);
|
||||
|
||||
},
|
||||
|
||||
getFloat32: function (byteOffset, littleEndian) {
|
||||
|
||||
var b = this._getBytes(4, byteOffset, littleEndian),
|
||||
|
||||
sign = 1 - (2 * (b[3] >> 7)),
|
||||
exponent = (((b[3] << 1) & 0xff) | (b[2] >> 7)) - 127,
|
||||
mantissa = ((b[2] & 0x7f) << 16) | (b[1] << 8) | b[0];
|
||||
|
||||
if (exponent === 128) {
|
||||
if (mantissa !== 0) {
|
||||
return NaN;
|
||||
} else {
|
||||
return sign * Infinity;
|
||||
}
|
||||
}
|
||||
|
||||
if (exponent === -127) { // Denormalized
|
||||
return sign * mantissa * Math.pow(2, -126 - 23);
|
||||
}
|
||||
|
||||
return sign * (1 + mantissa * Math.pow(2, -23)) * Math.pow(2, exponent);
|
||||
},
|
||||
|
||||
getInt32: function (byteOffset, littleEndian) {
|
||||
var b = this._getBytes(4, byteOffset, littleEndian);
|
||||
return (b[3] << 24) | (b[2] << 16) | (b[1] << 8) | b[0];
|
||||
},
|
||||
|
||||
getUint32: function (byteOffset, littleEndian) {
|
||||
return this.getInt32(byteOffset, littleEndian) >>> 0;
|
||||
},
|
||||
|
||||
getInt16: function (byteOffset, littleEndian) {
|
||||
return (this.getUint16(byteOffset, littleEndian) << 16) >> 16;
|
||||
},
|
||||
|
||||
getUint16: function (byteOffset, littleEndian) {
|
||||
var b = this._getBytes(2, byteOffset, littleEndian);
|
||||
return (b[1] << 8) | b[0];
|
||||
},
|
||||
|
||||
getInt8: function (byteOffset) {
|
||||
return (this.getUint8(byteOffset) << 24) >> 24;
|
||||
},
|
||||
|
||||
getUint8: function (byteOffset) {
|
||||
return this._getBytes(1, byteOffset)[0];
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
}
|
7
buy.php
7
buy.php
|
@ -48,10 +48,11 @@
|
|||
<img style="float: right; height: 15vh;" src="static/KaosCubeLogo.png" alt="logo">
|
||||
|
||||
<div class="linkContainer">
|
||||
<a href="/" style="text-decoration:none; color:black;"><p class="pLink"><b><?php echo $localeYaml['indexLink'][$loc1]?></b></p></a>
|
||||
<a href="/" style="text-decoration:none; color:black;"><p class="pLink"><?php echo $localeYaml['indexLink'][$loc1]?></p></a>
|
||||
<a href="diy.php" style="text-decoration:none; color:black;"><p class="pLink"><?php echo $localeYaml['diyLink'][$loc1]?></p></a>
|
||||
<a href="buy.php" style="text-decoration:none; color:black;"><p class="pLink"><?php echo $localeYaml['buyLink'][$loc1]?></p></a>
|
||||
</div>
|
||||
<a href="buy.php" style="text-decoration:none; color:black;"><p class="pLink"><b><?php echo $localeYaml['buyLink'][$loc1]?></b></p></a>
|
||||
<a href="3d.php" style="text-decoration:none; color:black;"><p class="pLink"><?php echo $localeYaml['3d'][$loc1]?></p></a>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
|
|
14
diy.php
14
diy.php
|
@ -32,7 +32,8 @@
|
|||
<title><?php echo $localeYaml['title'][$loc1]?></title>
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
||||
|
||||
<script src='https://git.io/zengine.js'></script>
|
||||
<script src='script.js'></script>
|
||||
|
||||
</head>
|
||||
|
||||
|
@ -48,9 +49,10 @@
|
|||
<img style="float: right; height: 15vh;" src="static/KaosCubeLogo.png" alt="logo">
|
||||
|
||||
<div class="linkContainer">
|
||||
<a href="/" style="text-decoration:none; color:black;"><p class="pLink"><b><?php echo $localeYaml['indexLink'][$loc1]?></b></p></a>
|
||||
<a href="diy.php" style="text-decoration:none; color:black;"><p class="pLink"><?php echo $localeYaml['diyLink'][$loc1]?></p></a>
|
||||
<a href="/" style="text-decoration:none; color:black;"><p class="pLink"><?php echo $localeYaml['indexLink'][$loc1]?></p></a>
|
||||
<a href="diy.php" style="text-decoration:none; color:black;"><p class="pLink"><b><?php echo $localeYaml['diyLink'][$loc1]?></b></p></a>
|
||||
<a href="buy.php" style="text-decoration:none; color:black;"><p class="pLink"><?php echo $localeYaml['buyLink'][$loc1]?></p></a>
|
||||
<a href="3d.php" style="text-decoration:none; color:black;"><p class="pLink"><?php echo $localeYaml['3d'][$loc1]?></p></a>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
@ -59,7 +61,11 @@
|
|||
</br></br></br></br></br>
|
||||
|
||||
|
||||
<h1 style="color:deeppink;">Soon to come on <a href="https://code.basabuuka.org"><p class="pLink" style="color: deeppink;"> a gitea instance </p> </a>
|
||||
|
||||
<h1 style="color:deeppink;">Here you get to the documentation on how to set up the KaosCube yourself <a href="https://code.basabuuka.org/alpcentaur/kc-interface#diy-setting-up-the-kaoscube"><p class="pLink" style="color: deeppink;"> a gitea instance </p> </a>
|
||||
|
||||
</br></br></br></br></br>
|
||||
|
||||
|
||||
</br></br></br></br></br>
|
||||
|
||||
|
|
73
index.css
73
index.css
|
@ -44,7 +44,7 @@ footer{
|
|||
|
||||
.linkContainer {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
grid-template-columns: auto auto auto auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
@ -71,14 +71,67 @@ footer{
|
|||
|
||||
@-webkit-keyframes glow {
|
||||
from {
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073;
|
||||
}
|
||||
|
||||
to {
|
||||
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
|
||||
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
[class*="bannerHeader"] {
|
||||
font-size: 7vh;
|
||||
color: #fff;
|
||||
}
|
||||
.bannerSubtext {
|
||||
font-size: 4vh;
|
||||
color: #fff;
|
||||
}
|
||||
[class*="infoImgDiv"] {
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 1;
|
||||
justify-content: center;
|
||||
justify-self: center;
|
||||
display: flex;
|
||||
}
|
||||
[class*="infoDiv"] {
|
||||
grid-row-start: 2;
|
||||
grid-row-end: 2;
|
||||
}
|
||||
[class*="infoContainer"] {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
[class*="infoImg"] {
|
||||
width: 60vw;
|
||||
grid-row-start: 1;
|
||||
}
|
||||
.linkContainer {
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
.info {
|
||||
font-size: 6vw;
|
||||
}
|
||||
.infoHeader {
|
||||
font-size: 9vw;
|
||||
}
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
[class*="model"] {
|
||||
height: 40vh;
|
||||
width: 90vw;
|
||||
}
|
||||
[class*="model1"] {
|
||||
height: 40vh;
|
||||
width: 90vw;
|
||||
}
|
||||
}
|
||||
|
||||
.infoImg {
|
||||
width: 30vw;
|
||||
|
||||
.infoContainer {
|
||||
margin-left: 10vw;
|
||||
|
@ -111,3 +164,17 @@ footer{
|
|||
margin-bottom: 0vw;
|
||||
color: deeppink;
|
||||
}
|
||||
|
||||
.model0 {
|
||||
width: 50vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.model1 {
|
||||
width: 50vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.grid_container {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
|
|
13
index.php
13
index.php
|
@ -51,7 +51,8 @@
|
|||
<a href="/" style="text-decoration:none; color:black;"><p class="pLink"><b><?php echo $localeYaml['indexLink'][$loc1]?></b></p></a>
|
||||
<a href="diy.php" style="text-decoration:none; color:black;"><p class="pLink"><?php echo $localeYaml['diyLink'][$loc1]?></p></a>
|
||||
<a href="buy.php" style="text-decoration:none; color:black;"><p class="pLink"><?php echo $localeYaml['buyLink'][$loc1]?></p></a>
|
||||
</div>
|
||||
<a href="3d.php" style="text-decoration:none; color:black;"><p class="pLink"><?php echo $localeYaml['3d'][$loc1]?></p></a>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
|
@ -71,7 +72,7 @@
|
|||
|
||||
<div class="infoContainer">
|
||||
<div class="infoImgDiv">
|
||||
<img style="width: 20vw;" src="static/icons/freedom.png" alt="logo">
|
||||
<img class="infoImg" src="static/icons/freedom.png" alt="logo">
|
||||
</div>
|
||||
<div class="infoDiv">
|
||||
<h2 class="infoHeader"><?php echo $localeYaml['info1Header'][$loc1]?></h2>
|
||||
|
@ -92,7 +93,7 @@
|
|||
<p class="info"><?php echo $localeYaml['info2'][$loc1]?></p>
|
||||
</div>
|
||||
<div class="infoImgDiv">
|
||||
<img style="width: 20vw;" src="static/icons/sustainability.png" alt="logo">
|
||||
<img class="infoImg" src="static/icons/sustainability.png" alt="logo">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
@ -106,7 +107,7 @@
|
|||
|
||||
<div class="infoContainer">
|
||||
<div class="infoImgDiv">
|
||||
<img style="width: 30vw;" src="static/icons/opensource.png" alt="logo">
|
||||
<img class="infoImg" src="static/icons/opensource.png" alt="logo">
|
||||
</div>
|
||||
<div class="infoDiv">
|
||||
<h2 class="infoHeader"><?php echo $localeYaml['info3Header'][$loc1]?></h2>
|
||||
|
@ -127,7 +128,7 @@
|
|||
<p class="info"><?php echo $localeYaml['info4'][$loc1]?></p>
|
||||
</div>
|
||||
<div class="infoImgDiv">
|
||||
<img style="width: 30vw;" src="static/icons/simplicity.png" alt="logo">
|
||||
<img class="infoImg" src="static/icons/simplicity.png" alt="logo">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -140,7 +141,7 @@
|
|||
|
||||
<div class="infoContainer">
|
||||
<div class="infoImgDiv">
|
||||
<img style="width: 30vw;" src="static/icons/onion_icon.png" alt="logo">
|
||||
<img class="infoImg" src="static/icons/onion_icon.png" alt="logo">
|
||||
</div>
|
||||
<div class="infoDiv">
|
||||
<h2 class="infoHeader"><?php echo $localeYaml['info5Header'][$loc1]?></h2>
|
||||
|
|
15
locale.yaml
15
locale.yaml
|
@ -10,16 +10,19 @@ inputSite_title_subtext_1:
|
|||
de-DE: STOP zu blutiger Hardware, STOP zu riesigen lebensfeindlichen Hierarchien
|
||||
en-US: STOP to bloody hardware, STOP to huge life threatening hierarchies
|
||||
diyLink:
|
||||
de-DE: Baue den KaosCube selbst
|
||||
en-US: Build the KaosCube yourself
|
||||
de-DE: DIY
|
||||
en-US: DIY
|
||||
buyLink:
|
||||
de-DE: Kauf den KaosCube
|
||||
en-US: Buy the KaosCube
|
||||
de-DE: Bestellen
|
||||
en-US: Get it
|
||||
3d:
|
||||
de-DE: 3D
|
||||
en-US: 3D
|
||||
indexLink:
|
||||
de-DE: Hauptseite
|
||||
en-US: Main Page
|
||||
info1:
|
||||
de-DE: Der KaosCube ist ein Repeater. Und noch viel mehr. Er ist einfach in der Benutzung. Aber er kann dir optional komplizierte und nützliche Dinge erklären. Er generiert an erster Stelle Freiheit von Informationen. Und Bewusstsein über die Hintergründe von Computern. Stärke die Grundrechte weltweit! Indem du das TOR Protokoll, Linux und Open Source erforschst.
|
||||
de-DE: Der KaosCube ist ein Repeater. Und noch viel mehr. Er ist einfach in der Benutzung. Aber er kann dir - optional - komplizierte und nützliche Dinge erklären. Er generiert an erster Stelle Freiheit von Informationen. Und Bewusstsein über die Hintergründe von Computern. Stärke die Grundrechte weltweit! Indem du das TOR Protokoll, Linux und Open Source erforschst.
|
||||
en-US:
|
||||
info1Header:
|
||||
de-DE: Informationen sind frei
|
||||
|
@ -43,7 +46,7 @@ info4Header:
|
|||
de-DE: Einfachheit
|
||||
en-US: Simplicity
|
||||
info5:
|
||||
de-DE: Mit nur einem Klick hast du einen eigenen Hidden Service. Jeder KaosCube ist gleichzeitig ein TOR Middle Node oder eine TOR Bridge. Auch hier reicht ein Klick in der bunten Interface, um zwischen den Funktionen zu wechseln.
|
||||
de-DE: Mit nur einem Klick hast du einen eigenen Hidden Service. Jeder KaosCube ist gleichzeitig ein TOR Middle Node oder eine TOR Bridge. Auch hier reicht ein Klick in dem bunten Interface, um zwischen den Funktionen zu wechseln.
|
||||
en-US: ölajsdfölkjfdsaöl
|
||||
info5Header:
|
||||
de-DE: The Onion Router (TOR)
|
||||
|
|
51116
three.js
Normal file
51116
three.js
Normal file
File diff suppressed because one or more lines are too long
50441
three.module.js
Normal file
50441
three.module.js
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue