0.1.5

package-lock.json

@@ -2741,7 +2741,8 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -3106,7 +3107,8 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -3154,6 +3156,7 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -3192,11 +3195,13 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.0.3",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             }
           }
         },
@@ -6643,11 +6648,13 @@
             },
             "balanced-match": {
               "version": "1.0.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -6660,15 +6667,18 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -6771,7 +6781,8 @@
             },
             "inherits": {
               "version": "2.0.3",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -6781,6 +6792,7 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -6793,17 +6805,20 @@
             "minimatch": {
               "version": "3.0.4",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
             },
             "minimist": {
               "version": "0.0.8",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -6820,6 +6835,7 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -6892,7 +6908,8 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -6902,6 +6919,7 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -7007,6 +7025,7 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",

public/data/class/classes.json

@@ -1,5 +1 @@
-{
+{"classes":["example"]}
-    "classes":[
-        "example"
-    ]
-}

public/data/class/example/christina_juliana.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg5401"
+   height="512"
+   width="512">
+  <metadata
+     id="metadata5438">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs5436" />
+    <path
+     id="glasses"
+     style="stroke: none; fill: rgb(59, 68, 79)"
+     fill-rule="evenodd"
+     d="M 348.939911,228.879608 C 348.362732,233.809509 347.855652,239.842255 346.789673,245.235870 C 343.602081,261.364380 329.743378,276.307343 306.079590,278.009949 C 282.415833,279.712555 262.275787,267.799591 261.095551,251.401581 C 260.895447,248.621277 260.360138,245.501251 259.949341,242.467896 C 256.600494,240.611298 253.148895,240.607056 249.594574,242.455261 C 249.179474,245.557281 248.623993,248.759369 248.419128,251.606171 C 247.235199,268.058533 227.031647,280.010986 203.293243,278.302734 C 179.554840,276.594482 165.652435,261.602020 162.454773,245.420044 C 161.385437,240.008545 160.876770,233.955811 160.297760,229.009552 C 160.297760,229.009552 156.809448,228.758514 156.809448,228.758514 C 156.809448,228.758514 157.299438,221.949463 157.299438,221.949463 C 157.299438,221.949463 158.150574,222.010712 158.150574,222.010712 C 158.150574,222.010712 179.739105,223.564270 179.739105,223.564270 C 179.739105,223.564270 197.962189,224.875641 197.962189,224.875641 C 197.962189,224.875641 216.219147,226.189423 216.219147,226.189423 C 216.219147,226.189423 244.655823,228.235779 244.655823,228.235779 C 246.617004,228.483826 247.921082,229.324921 248.760895,230.580536 C 252.844788,232.368225 256.811005,232.375366 260.659515,230.601654 C 261.491730,229.265259 262.813354,228.365540 264.847015,228.108368 C 264.847015,228.108368 293.194305,226.068787 293.194305,226.068787 C 293.194305,226.068787 311.393890,224.759338 311.393890,224.759338 C 311.393890,224.759338 329.559692,223.452301 329.559692,223.452301 C 329.559692,223.452301 351.080353,221.903870 351.080353,221.903870 C 351.080353,221.903870 351.928802,221.842834 351.928802,221.842834 C 351.928802,221.842834 352.417267,228.629395 352.417267,228.629395 C 352.417267,228.629395 348.939911,228.879608 348.939911,228.879608 Z M 237.019867,236.237274 C 237.019867,236.237274 181.288300,232.226746 181.288300,232.226746 C 173.999054,231.598328 171.415344,239.789520 170.966095,246.032532 C 170.018951,259.194397 184.684265,270.974823 203.721985,272.344818 C 222.759705,273.714783 238.960663,264.155579 239.907806,250.993683 C 240.357056,244.750702 242.396210,240.895111 237.019867,236.237274 Z M 338.305115,245.846344 C 337.857269,239.623962 335.281677,231.459808 328.015350,232.086151 C 328.015350,232.086151 272.458984,236.083435 272.458984,236.083435 C 267.099548,240.725922 269.132294,244.568726 269.580109,250.791107 C 270.524292,263.909515 286.674316,273.437164 305.652191,272.071686 C 324.630066,270.706238 339.249298,258.964722 338.305115,245.846344 Z" />
+  <path
+     id="Shape 7"
+     style="stroke: none; fill: rgb(59, 67, 79)"
+     fill-rule="nonzero"
+     d="M 163.016968,261.106659 C 163.016968,261.106659 174.886597,209.110748 185.215393,194.888000 C 195.544189,180.665253 204.482269,177.263428 209.121399,176.828369 C 213.760529,176.393341 250.293213,187.192657 300.476440,174.821716 C 300.476440,174.821716 320.263580,174.032013 328.651367,193.884705 C 328.651367,193.884705 346.335724,225.522369 349.142212,257.093414 C 349.142212,257.093414 352.557343,257.093414 352.557343,257.093414 C 352.557343,257.093414 359.794525,201.750519 356.826324,168.801849 C 353.858032,135.853210 310.721863,119.639526 310.721863,119.639526 C 310.721863,119.639526 320.113495,112.616302 320.113495,112.616302 C 320.113495,112.616302 298.186890,105.838074 289.377228,109.606415 C 289.377228,109.606415 296.207489,95.559998 296.207489,95.559998 C 296.207489,95.559998 251.957397,95.648193 227.050873,115.626251 C 227.050873,115.626251 227.904663,105.593109 227.904663,105.593109 C 227.904663,105.593109 140.114838,119.055573 158.748047,259.100037 C 158.748047,259.100037 163.016968,261.106659 163.016968,261.106659 Z" />
+</svg>

public/data/class/example/irmingrad_eckhard.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg5401"
+   height="512"
+   width="512">
+  <metadata
+     id="metadata5438">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs5436" />
+    <path
+     id="glasses"
+     style="stroke: none; fill: rgb(59, 68, 79)"
+     fill-rule="evenodd"
+     d="M 348.939911,228.879608 C 348.362732,233.809509 347.855652,239.842255 346.789673,245.235870 C 343.602081,261.364380 329.743378,276.307343 306.079590,278.009949 C 282.415833,279.712555 262.275787,267.799591 261.095551,251.401581 C 260.895447,248.621277 260.360138,245.501251 259.949341,242.467896 C 256.600494,240.611298 253.148895,240.607056 249.594574,242.455261 C 249.179474,245.557281 248.623993,248.759369 248.419128,251.606171 C 247.235199,268.058533 227.031647,280.010986 203.293243,278.302734 C 179.554840,276.594482 165.652435,261.602020 162.454773,245.420044 C 161.385437,240.008545 160.876770,233.955811 160.297760,229.009552 C 160.297760,229.009552 156.809448,228.758514 156.809448,228.758514 C 156.809448,228.758514 157.299438,221.949463 157.299438,221.949463 C 157.299438,221.949463 158.150574,222.010712 158.150574,222.010712 C 158.150574,222.010712 179.739105,223.564270 179.739105,223.564270 C 179.739105,223.564270 197.962189,224.875641 197.962189,224.875641 C 197.962189,224.875641 216.219147,226.189423 216.219147,226.189423 C 216.219147,226.189423 244.655823,228.235779 244.655823,228.235779 C 246.617004,228.483826 247.921082,229.324921 248.760895,230.580536 C 252.844788,232.368225 256.811005,232.375366 260.659515,230.601654 C 261.491730,229.265259 262.813354,228.365540 264.847015,228.108368 C 264.847015,228.108368 293.194305,226.068787 293.194305,226.068787 C 293.194305,226.068787 311.393890,224.759338 311.393890,224.759338 C 311.393890,224.759338 329.559692,223.452301 329.559692,223.452301 C 329.559692,223.452301 351.080353,221.903870 351.080353,221.903870 C 351.080353,221.903870 351.928802,221.842834 351.928802,221.842834 C 351.928802,221.842834 352.417267,228.629395 352.417267,228.629395 C 352.417267,228.629395 348.939911,228.879608 348.939911,228.879608 Z M 237.019867,236.237274 C 237.019867,236.237274 181.288300,232.226746 181.288300,232.226746 C 173.999054,231.598328 171.415344,239.789520 170.966095,246.032532 C 170.018951,259.194397 184.684265,270.974823 203.721985,272.344818 C 222.759705,273.714783 238.960663,264.155579 239.907806,250.993683 C 240.357056,244.750702 242.396210,240.895111 237.019867,236.237274 Z M 338.305115,245.846344 C 337.857269,239.623962 335.281677,231.459808 328.015350,232.086151 C 328.015350,232.086151 272.458984,236.083435 272.458984,236.083435 C 267.099548,240.725922 269.132294,244.568726 269.580109,250.791107 C 270.524292,263.909515 286.674316,273.437164 305.652191,272.071686 C 324.630066,270.706238 339.249298,258.964722 338.305115,245.846344 Z" />
+  <path
+     id="Shape 7"
+     style="stroke: none; fill: rgb(59, 67, 79)"
+     fill-rule="nonzero"
+     d="M 163.016968,261.106659 C 163.016968,261.106659 174.886597,209.110748 185.215393,194.888000 C 195.544189,180.665253 204.482269,177.263428 209.121399,176.828369 C 213.760529,176.393341 250.293213,187.192657 300.476440,174.821716 C 300.476440,174.821716 320.263580,174.032013 328.651367,193.884705 C 328.651367,193.884705 346.335724,225.522369 349.142212,257.093414 C 349.142212,257.093414 352.557343,257.093414 352.557343,257.093414 C 352.557343,257.093414 359.794525,201.750519 356.826324,168.801849 C 353.858032,135.853210 310.721863,119.639526 310.721863,119.639526 C 310.721863,119.639526 320.113495,112.616302 320.113495,112.616302 C 320.113495,112.616302 298.186890,105.838074 289.377228,109.606415 C 289.377228,109.606415 296.207489,95.559998 296.207489,95.559998 C 296.207489,95.559998 251.957397,95.648193 227.050873,115.626251 C 227.050873,115.626251 227.904663,105.593109 227.904663,105.593109 C 227.904663,105.593109 140.114838,119.055573 158.748047,259.100037 C 158.748047,259.100037 163.016968,261.106659 163.016968,261.106659 Z" />
+</svg>

public/data/class/example/nele_mechthild.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg5401"
+   height="512"
+   width="512">
+  <metadata
+     id="metadata5438">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs5436" />
+    <path
+     id="glasses"
+     style="stroke: none; fill: rgb(59, 68, 79)"
+     fill-rule="evenodd"
+     d="M 348.939911,228.879608 C 348.362732,233.809509 347.855652,239.842255 346.789673,245.235870 C 343.602081,261.364380 329.743378,276.307343 306.079590,278.009949 C 282.415833,279.712555 262.275787,267.799591 261.095551,251.401581 C 260.895447,248.621277 260.360138,245.501251 259.949341,242.467896 C 256.600494,240.611298 253.148895,240.607056 249.594574,242.455261 C 249.179474,245.557281 248.623993,248.759369 248.419128,251.606171 C 247.235199,268.058533 227.031647,280.010986 203.293243,278.302734 C 179.554840,276.594482 165.652435,261.602020 162.454773,245.420044 C 161.385437,240.008545 160.876770,233.955811 160.297760,229.009552 C 160.297760,229.009552 156.809448,228.758514 156.809448,228.758514 C 156.809448,228.758514 157.299438,221.949463 157.299438,221.949463 C 157.299438,221.949463 158.150574,222.010712 158.150574,222.010712 C 158.150574,222.010712 179.739105,223.564270 179.739105,223.564270 C 179.739105,223.564270 197.962189,224.875641 197.962189,224.875641 C 197.962189,224.875641 216.219147,226.189423 216.219147,226.189423 C 216.219147,226.189423 244.655823,228.235779 244.655823,228.235779 C 246.617004,228.483826 247.921082,229.324921 248.760895,230.580536 C 252.844788,232.368225 256.811005,232.375366 260.659515,230.601654 C 261.491730,229.265259 262.813354,228.365540 264.847015,228.108368 C 264.847015,228.108368 293.194305,226.068787 293.194305,226.068787 C 293.194305,226.068787 311.393890,224.759338 311.393890,224.759338 C 311.393890,224.759338 329.559692,223.452301 329.559692,223.452301 C 329.559692,223.452301 351.080353,221.903870 351.080353,221.903870 C 351.080353,221.903870 351.928802,221.842834 351.928802,221.842834 C 351.928802,221.842834 352.417267,228.629395 352.417267,228.629395 C 352.417267,228.629395 348.939911,228.879608 348.939911,228.879608 Z M 237.019867,236.237274 C 237.019867,236.237274 181.288300,232.226746 181.288300,232.226746 C 173.999054,231.598328 171.415344,239.789520 170.966095,246.032532 C 170.018951,259.194397 184.684265,270.974823 203.721985,272.344818 C 222.759705,273.714783 238.960663,264.155579 239.907806,250.993683 C 240.357056,244.750702 242.396210,240.895111 237.019867,236.237274 Z M 338.305115,245.846344 C 337.857269,239.623962 335.281677,231.459808 328.015350,232.086151 C 328.015350,232.086151 272.458984,236.083435 272.458984,236.083435 C 267.099548,240.725922 269.132294,244.568726 269.580109,250.791107 C 270.524292,263.909515 286.674316,273.437164 305.652191,272.071686 C 324.630066,270.706238 339.249298,258.964722 338.305115,245.846344 Z" />
+  <path
+     id="Shape 7"
+     style="stroke: none; fill: rgb(59, 67, 79)"
+     fill-rule="nonzero"
+     d="M 163.016968,261.106659 C 163.016968,261.106659 174.886597,209.110748 185.215393,194.888000 C 195.544189,180.665253 204.482269,177.263428 209.121399,176.828369 C 213.760529,176.393341 250.293213,187.192657 300.476440,174.821716 C 300.476440,174.821716 320.263580,174.032013 328.651367,193.884705 C 328.651367,193.884705 346.335724,225.522369 349.142212,257.093414 C 349.142212,257.093414 352.557343,257.093414 352.557343,257.093414 C 352.557343,257.093414 359.794525,201.750519 356.826324,168.801849 C 353.858032,135.853210 310.721863,119.639526 310.721863,119.639526 C 310.721863,119.639526 320.113495,112.616302 320.113495,112.616302 C 320.113495,112.616302 298.186890,105.838074 289.377228,109.606415 C 289.377228,109.606415 296.207489,95.559998 296.207489,95.559998 C 296.207489,95.559998 251.957397,95.648193 227.050873,115.626251 C 227.050873,115.626251 227.904663,105.593109 227.904663,105.593109 C 227.904663,105.593109 140.114838,119.055573 158.748047,259.100037 C 158.748047,259.100037 163.016968,261.106659 163.016968,261.106659 Z" />
+</svg>

public/data/class/example/stanislav_teun.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg5401"
+   height="512"
+   width="512">
+  <metadata
+     id="metadata5438">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs5436" />
+    <path
+     id="glasses"
+     style="stroke: none; fill: rgb(59, 68, 79)"
+     fill-rule="evenodd"
+     d="M 348.939911,228.879608 C 348.362732,233.809509 347.855652,239.842255 346.789673,245.235870 C 343.602081,261.364380 329.743378,276.307343 306.079590,278.009949 C 282.415833,279.712555 262.275787,267.799591 261.095551,251.401581 C 260.895447,248.621277 260.360138,245.501251 259.949341,242.467896 C 256.600494,240.611298 253.148895,240.607056 249.594574,242.455261 C 249.179474,245.557281 248.623993,248.759369 248.419128,251.606171 C 247.235199,268.058533 227.031647,280.010986 203.293243,278.302734 C 179.554840,276.594482 165.652435,261.602020 162.454773,245.420044 C 161.385437,240.008545 160.876770,233.955811 160.297760,229.009552 C 160.297760,229.009552 156.809448,228.758514 156.809448,228.758514 C 156.809448,228.758514 157.299438,221.949463 157.299438,221.949463 C 157.299438,221.949463 158.150574,222.010712 158.150574,222.010712 C 158.150574,222.010712 179.739105,223.564270 179.739105,223.564270 C 179.739105,223.564270 197.962189,224.875641 197.962189,224.875641 C 197.962189,224.875641 216.219147,226.189423 216.219147,226.189423 C 216.219147,226.189423 244.655823,228.235779 244.655823,228.235779 C 246.617004,228.483826 247.921082,229.324921 248.760895,230.580536 C 252.844788,232.368225 256.811005,232.375366 260.659515,230.601654 C 261.491730,229.265259 262.813354,228.365540 264.847015,228.108368 C 264.847015,228.108368 293.194305,226.068787 293.194305,226.068787 C 293.194305,226.068787 311.393890,224.759338 311.393890,224.759338 C 311.393890,224.759338 329.559692,223.452301 329.559692,223.452301 C 329.559692,223.452301 351.080353,221.903870 351.080353,221.903870 C 351.080353,221.903870 351.928802,221.842834 351.928802,221.842834 C 351.928802,221.842834 352.417267,228.629395 352.417267,228.629395 C 352.417267,228.629395 348.939911,228.879608 348.939911,228.879608 Z M 237.019867,236.237274 C 237.019867,236.237274 181.288300,232.226746 181.288300,232.226746 C 173.999054,231.598328 171.415344,239.789520 170.966095,246.032532 C 170.018951,259.194397 184.684265,270.974823 203.721985,272.344818 C 222.759705,273.714783 238.960663,264.155579 239.907806,250.993683 C 240.357056,244.750702 242.396210,240.895111 237.019867,236.237274 Z M 338.305115,245.846344 C 337.857269,239.623962 335.281677,231.459808 328.015350,232.086151 C 328.015350,232.086151 272.458984,236.083435 272.458984,236.083435 C 267.099548,240.725922 269.132294,244.568726 269.580109,250.791107 C 270.524292,263.909515 286.674316,273.437164 305.652191,272.071686 C 324.630066,270.706238 339.249298,258.964722 338.305115,245.846344 Z" />
+  <path
+     id="Shape 7"
+     style="stroke: none; fill: rgb(59, 67, 79)"
+     fill-rule="nonzero"
+     d="M 163.016968,261.106659 C 163.016968,261.106659 174.886597,209.110748 185.215393,194.888000 C 195.544189,180.665253 204.482269,177.263428 209.121399,176.828369 C 213.760529,176.393341 250.293213,187.192657 300.476440,174.821716 C 300.476440,174.821716 320.263580,174.032013 328.651367,193.884705 C 328.651367,193.884705 346.335724,225.522369 349.142212,257.093414 C 349.142212,257.093414 352.557343,257.093414 352.557343,257.093414 C 352.557343,257.093414 359.794525,201.750519 356.826324,168.801849 C 353.858032,135.853210 310.721863,119.639526 310.721863,119.639526 C 310.721863,119.639526 320.113495,112.616302 320.113495,112.616302 C 320.113495,112.616302 298.186890,105.838074 289.377228,109.606415 C 289.377228,109.606415 296.207489,95.559998 296.207489,95.559998 C 296.207489,95.559998 251.957397,95.648193 227.050873,115.626251 C 227.050873,115.626251 227.904663,105.593109 227.904663,105.593109 C 227.904663,105.593109 140.114838,119.055573 158.748047,259.100037 C 158.748047,259.100037 163.016968,261.106659 163.016968,261.106659 Z" />
+</svg>

public/data/class/example/user.json

@@ -1,26 +1 @@
-{
+{"user":[["christina_juliana","svg"],["irmingrad_eckhard","svg"],["nele_mechthild","svg"],["stanislav_teun","svg"],["test","jpg"]]}
-    "user": [
-        "stanislav_teun",
-        "christina_juliana",
-        "nele_mechthild",
-        "hans-guenther_Patrick",
-        "irmingrad_eckhard",
-        "felix_leonore",
-        "ruediger_gregor",
-        "kai_tanja",
-        "hans_judit",
-        "susann_laurenz",
-        "mathis_raphaela",
-        "stanislav_teun",
-        "christina_juliana",
-        "nele_mechthild",
-        "hans-guenther_Patrick",
-        "irmingrad_eckhard",
-        "felix_leonore",
-        "ruediger_gregor",
-        "kai_tanja",
-        "hans_judit",
-        "susann_laurenz",
-        "mathis_raphaela"
-    ]
-}

public/data/class/student.svg

@@ -23,12 +23,7 @@
   </metadata>
   <defs
      id="defs5436" />
-  <path
+    <path
-     id="body-bg-flat"
-     style="stroke: none; fill: rgb(255, 255, 255)"
-     fill-rule="nonzero"
-     d="M 111.000000,504.000000 C 111.000000,504.000000 100.698120,413.688873 189.440002,403.613342 C 189.440002,403.613342 227.413330,403.613342 227.413330,403.613342 C 227.413330,403.613342 227.413330,386.119995 227.413330,386.119995 C 227.413330,386.119995 254.125000,397.593323 281.173340,387.399994 C 281.173340,387.399994 282.026672,403.613342 282.026672,403.613342 C 282.026672,403.613342 326.399994,403.613342 326.399994,403.613342 C 326.399994,403.613342 403.673462,411.327606 399.000000,504.000000 C 399.000000,504.000000 111.000000,504.000000 111.000000,504.000000 Z" />
-   <path
      id="glasses"
      style="stroke: none; fill: rgb(59, 68, 79)"
      fill-rule="evenodd"

public/main.css

@@ -0,0 +1,94 @@
+.App {
+  border: #e0e0e0 1px solid;
+  margin: 24px;
+}
+* {
+  box-sizing: border-box;
+  font-family: Open Sans, Arial, sans-serif;
+}
+html,
+body {
+  margin: 0;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #f9f9f9;
+}
+.nav {
+  background-color: #f4f5f6;
+  height: 52px;
+  line-height: 50px;
+  display: flex;
+  border: #e0e0e0 1px solid;
+}
+.nav .select-wrapper {
+  position: relative;
+  width: 200px;
+}
+.nav .select-wrapper::before {
+  color: #0c81f5;
+  font-size: 20px;
+  pointer-events: none;
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+.nav select {
+  background: #f4f5f6;
+  border: none;
+  border: 1px #0c81f5 solid;
+  color: #0c81f5;
+  cursor: pointer;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 16px;
+  height: 40px;
+  outline: none;
+  padding-left: 10px;
+  width: 100%;
+}
+.nav select option {
+  color: #0c81f5;
+}
+.nav select::-ms-expand {
+  display: none;
+}
+.nav select:focus::-ms-value {
+  background-color: transparent;
+}
+.nav input[type=number] {
+  height: 40px;
+  border: 1px solid #0c81f5;
+  background: none;
+  color: #0c81f5;
+  padding: 0px 5px;
+}
+.nav button {
+  height: 40px;
+  border: 1px solid #0c81f5;
+  background: #0c81f5;
+  color: #FFF;
+}
+.studentList {
+  display: flex;
+  flex-wrap: wrap;
+}
+.studentList .user {
+  border: 1px solid #454545;
+  margin: 5px;
+  padding: 5px;
+  transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
+}
+.studentList .user.disappear {
+  opacity: 0.09;
+  transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
+}
+.studentList .user.appear {
+  opacity: 1;
+  transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
+}
+.studentList .user .user_img img {
+  width: 200px;
+}
+.studentList .user .username {
+  text-align: center;
+  display: inline-block;
+  width: 200px;
+}

public/rescan.php

@@ -0,0 +1,70 @@
+<?php
+    define("DIR","./data/class/");
+    define("REG",'/([0-9A-z_, ]*).(?:jpg|svg|png|jpeg)/m');
+
+    class Scanner{
+        private $rc = array('classes'=>[]);
+        private $classes = null;
+        private $rcwu = array('classes'=>[]);
+        function __construct(){
+            $this->classes = scandir(DIR);
+        
+            foreach ($this->classes as $key => $value) {
+                switch($value){
+                    case '.':
+                    case '..':
+                    case 'classes.json':
+                    case 'student.svg':
+                        break;
+                    default:
+                        $this->scanClass($value);
+        
+        
+                        break;
+                } 
+            }
+
+            $this->writeFiles();
+        }
+
+
+        function scanClass($d){
+            $sd = DIR.$d;
+            $users_of_class = scandir($sd);
+            $this->rc['classes'][]=$d;
+            
+            $ruoc = [];
+            foreach ($users_of_class as $i => $user) {
+                if(preg_match_all(REG, $user, $matches, PREG_SET_ORDER, 0)){
+                    // delete the last 4 chars
+                    $ruoc[] = array(substr($user, 0, -4),substr($user,strlen($user)-3));
+                }
+            }
+            $this->rcwu['classes'][$d]=$ruoc;
+        }
+
+
+        function writeFiles(){
+            /**
+             * WRITE classes.json FILE 
+             */
+            $fp = fopen(DIR.'classes.json', 'w');
+            fwrite($fp, json_encode($this->rc));
+            fclose($fp);
+            /**
+             * WRITE FOR EACH CLASS
+             */
+            foreach ($this->rcwu['classes'] as $key => $value) {
+                $fp = fopen(DIR.$key.'/user.json', 'w');
+                fwrite($fp, json_encode(array('user'=>$this->rcwu['classes'][$key])));
+                fclose($fp);
+            }
+        }
+    }
+
+    $s = new Scanner();
+
+
+    
+
+  

src/jsx/main.jsx

@@ -42,8 +42,9 @@ export class Main extends React.Component{
                 me.setState({students:[],stud_html:[]});
 
                 var ht = [];
+                console.log(v)
                 data.user.map((cl,i)=>
-                    ht.push(<Student username={cl} cl={this.state.selected} i={i}></Student>)
+                    ht.push(<Student username={cl} cl={v} i={i}></Student>)
                 )
                 console.log(ht[0])
                 me.setState({students:data.user,selected:v,stud_html:ht})
@@ -96,7 +97,7 @@ export class Main extends React.Component{
             <div>
                 <div className="nav">
                     <div>
-                        <select onChange={this.selCh} value={this.state.selected}> 
+                        <select className="select-wrapper" onChange={this.selCh} value={this.state.selected}> 
                             <option value="-">-</option>
                             {this.state.classes.map((cl,i)=>
                             <option value={cl.toLowerCase()}>{cl.toUpperCase()}</option>  

src/jsx/ui/student.jsx

@@ -6,10 +6,10 @@ export class Student extends React.Component{
     constructor(props){
         super(props);
         this.state = {
-            username:this.camelize(props.username),
+            username:this.camelize(props.username[0]),
-            name:props.username,
+            name:props.username[0],
             cl:props.cl,
-            img_url:'data/class/'+props.cl+'/'+props.username+'.svg',
+            img_url:'data/class/'+props.cl+'/'+props.username[0]+'.'+props.username[1],
             num:props.i,
             dis:""
         }
@@ -20,11 +20,12 @@ export class Student extends React.Component{
         User.user_arr.push(this);
     }
     camelize(str) {
-        var x = str.split('_');
+        /*var x = str.split('_');
         for(var i in x){
             x[i] = x[i].charAt(0).toUpperCase() + x[i].slice(1);
         }
-        return x.join(' ');
+        return x.join(' ');*/
+        return str;
     }
     onErr(){
         var url = 'data/class/student.svg';

src_less/main.less

@@ -1,21 +1,85 @@
 @bg-color:#FFF;
 
+
+@bg-color-dm:#DDD;
+@bg-color-dm-nav:darken(@bg-color-dm,10%);
+
+
+@btn-bgcolor:#0c81f5;
+@btn-color:#FFF;
+.App{
+    border: #e0e0e0 1px solid;
+    margin:24px;
+}
+
 *{
     box-sizing: border-box;
+    font-family: Open Sans,Arial,sans-serif;
 }
 html,body{
     margin:0;
+    color:rgba(0,0,0,.87);
+    background-color:#f9f9f9;
 }
 .nav{
-    background-color:#353b48;
+    background-color:#f4f5f6;
-    height:50px;
+    height:52px;
     line-height: 50px;
     display:flex;
-    select{
+    border: #e0e0e0 1px solid;
-        height: 42px;
+
-        border: 0;
+    .select-wrapper {
-        outline:0;
+        position: relative;
-        min-width: 200px;
+        width: 200px;
+    }
+      
+    .select-wrapper::before {
+        color: @btn-bgcolor;
+        font-size: 20px;
+        pointer-events: none;
+        position: absolute;
+        right: 15px;
+        top: 10px;
+    }
+      
+    select {    
+        background: #f4f5f6;
+        border: none;
+        border: 1px @btn-bgcolor solid;
+        color: @btn-bgcolor;
+        cursor: pointer;
+        font-family: 'Open Sans', sans-serif;
+        font-size: 16px;
+        height: 40px;
+        outline: none;
+        padding-left: 10px;
+        width: 100%;
+      }
+      
+    select option {
+        color: @btn-bgcolor;
+    }
+      
+    select::-ms-expand {
+        display: none;
+    }
+      
+    select:focus::-ms-value {
+        background-color: transparent;
+    }
+
+    input[type=number]{
+        height: 40px;
+        border: 1px solid @btn-bgcolor;
+        background: none;
+        color: @btn-bgcolor;
+        padding: 0px 5px;
+    }
+    button{
+        height: 40px;
+        border: 1px solid  @btn-bgcolor;
+        background: @btn-bgcolor;
+        color: @btn-color;
     }
 }
 
@@ -38,7 +102,6 @@ html,body{
         .user_img{
             img{
                 width:200px;
-                height:200px;
             }
         }
         .username{