added mobile version and layout for 3d.php

This commit is contained in:
alpcentaur 2023-03-09 20:14:41 +01:00
parent f729e25e12
commit eb9bd4f738
12 changed files with 103372 additions and 22 deletions

151
3d.php Normal file
View 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>

Binary file not shown.

BIN
KaosCube_support_cable.stl Normal file

Binary file not shown.

1175
OrbitControls.js Normal file

File diff suppressed because one or more lines are too long

389
STLLoader.js Normal file
View 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];
}
};
}

View file

@ -48,9 +48,10 @@
<img style="float: right; height: 15vh;" src="static/KaosCubeLogo.png" alt="logo"> <img style="float: right; height: 15vh;" src="static/KaosCubeLogo.png" alt="logo">
<div class="linkContainer"> <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="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> <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> </div>
</header> </header>

14
diy.php
View file

@ -32,7 +32,8 @@
<title><?php echo $localeYaml['title'][$loc1]?></title> <title><?php echo $localeYaml['title'][$loc1]?></title>
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> <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> </head>
@ -48,9 +49,10 @@
<img style="float: right; height: 15vh;" src="static/KaosCubeLogo.png" alt="logo"> <img style="float: right; height: 15vh;" src="static/KaosCubeLogo.png" alt="logo">
<div class="linkContainer"> <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="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="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> </div>
</header> </header>
@ -59,7 +61,11 @@
</br></br></br></br></br> </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> </br></br></br></br></br>

View file

@ -44,7 +44,7 @@ footer{
.linkContainer { .linkContainer {
display: grid; display: grid;
grid-template-columns: auto auto auto; grid-template-columns: auto auto auto auto;
width: 100%; width: 100%;
} }
@ -71,14 +71,67 @@ footer{
@-webkit-keyframes glow { @-webkit-keyframes glow {
from { 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 { 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 { .infoContainer {
margin-left: 10vw; margin-left: 10vw;
@ -111,3 +164,17 @@ footer{
margin-bottom: 0vw; margin-bottom: 0vw;
color: deeppink; color: deeppink;
} }
.model0 {
width: 50vw;
height: 100vh;
}
.model1 {
width: 50vw;
height: 100vh;
}
.grid_container {
display: grid;
grid-template-columns: auto auto;
}

View file

@ -51,6 +51,7 @@
<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"><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="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> <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> </div>
</header> </header>
@ -71,7 +72,7 @@
<div class="infoContainer"> <div class="infoContainer">
<div class="infoImgDiv"> <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>
<div class="infoDiv"> <div class="infoDiv">
<h2 class="infoHeader"><?php echo $localeYaml['info1Header'][$loc1]?></h2> <h2 class="infoHeader"><?php echo $localeYaml['info1Header'][$loc1]?></h2>
@ -92,7 +93,7 @@
<p class="info"><?php echo $localeYaml['info2'][$loc1]?></p> <p class="info"><?php echo $localeYaml['info2'][$loc1]?></p>
</div> </div>
<div class="infoImgDiv"> <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>
</div> </div>
@ -106,7 +107,7 @@
<div class="infoContainer"> <div class="infoContainer">
<div class="infoImgDiv"> <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>
<div class="infoDiv"> <div class="infoDiv">
<h2 class="infoHeader"><?php echo $localeYaml['info3Header'][$loc1]?></h2> <h2 class="infoHeader"><?php echo $localeYaml['info3Header'][$loc1]?></h2>
@ -127,7 +128,7 @@
<p class="info"><?php echo $localeYaml['info4'][$loc1]?></p> <p class="info"><?php echo $localeYaml['info4'][$loc1]?></p>
</div> </div>
<div class="infoImgDiv"> <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>
</div> </div>
@ -140,7 +141,7 @@
<div class="infoContainer"> <div class="infoContainer">
<div class="infoImgDiv"> <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>
<div class="infoDiv"> <div class="infoDiv">
<h2 class="infoHeader"><?php echo $localeYaml['info5Header'][$loc1]?></h2> <h2 class="infoHeader"><?php echo $localeYaml['info5Header'][$loc1]?></h2>

View file

@ -10,16 +10,19 @@ inputSite_title_subtext_1:
de-DE: STOP zu blutiger Hardware, STOP zu riesigen lebensfeindlichen Hierarchien de-DE: STOP zu blutiger Hardware, STOP zu riesigen lebensfeindlichen Hierarchien
en-US: STOP to bloody hardware, STOP to huge life threatening hierarchies en-US: STOP to bloody hardware, STOP to huge life threatening hierarchies
diyLink: diyLink:
de-DE: Baue den KaosCube selbst de-DE: DIY
en-US: Build the KaosCube yourself en-US: DIY
buyLink: buyLink:
de-DE: Kauf den KaosCube de-DE: Bestellen
en-US: Buy the KaosCube en-US: Get it
3d:
de-DE: 3D
en-US: 3D
indexLink: indexLink:
de-DE: Hauptseite de-DE: Hauptseite
en-US: Main Page en-US: Main Page
info1: 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: en-US:
info1Header: info1Header:
de-DE: Informationen sind frei de-DE: Informationen sind frei
@ -43,7 +46,7 @@ info4Header:
de-DE: Einfachheit de-DE: Einfachheit
en-US: Simplicity en-US: Simplicity
info5: 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 en-US: ölajsdfölkjfdsaöl
info5Header: info5Header:
de-DE: The Onion Router (TOR) de-DE: The Onion Router (TOR)

51116
three.js Normal file

File diff suppressed because one or more lines are too long

50441
three.module.js Normal file

File diff suppressed because one or more lines are too long