unleashed-coding
diff --git a/‎sqdorte/generarstistic.js renamed to ‎sqdorte/generartistic.js b/‎sqdorte/generarstistic.js renamed to ‎sqdorte/generartistic.js
diff --git a/‎sqdorte/index.html
Lines changed: 5 additions & 4 deletions b/‎sqdorte/index.html
Lines changed: 5 additions & 4 deletions
diff --git a/‎sqdorte/jooj.js
Lines changed: 0 additions & 31 deletions b/‎sqdorte/jooj.js
Lines changed: 0 additions & 31 deletions
diff --git a/‎sqdorte/menu.js
Lines changed: 36 additions & 0 deletions b/‎sqdorte/menu.js
Lines changed: 36 additions & 0 deletions
diff --git a/‎sqdorte/p5.css
Lines changed: 11 additions & 0 deletions b/‎sqdorte/p5.css
Lines changed: 11 additions & 0 deletions
diff --git a/‎sqdorte/plzkillme.js
Lines changed: 0 additions & 53 deletions b/‎sqdorte/plzkillme.js
Lines changed: 0 additions & 53 deletions
diff --git a/‎sqdorte/style.css
Lines changed: 19 additions & 0 deletions b/‎sqdorte/style.css
Lines changed: 19 additions & 0 deletions
@@ -3,11 +3,12 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>selgnairt</title>
-    <style> body {padding: 0; margin: 0;} </style>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
-    <script src="selgnairt.js"></script>
+    <title id="title">:: sqdorte ::</title>
+    <link id="style" rel="stylesheet" type="text/css" href="style.css">
+    <script id="script" src="menu.js"></script>
   </head>
   <body>
+    <ul id="ul">
+    </ul>
   </body>
 </html>
@@ -0,0 +1,36 @@
+window.onload = function() {
+
+  arts = ['artegenerativafoda', 'generartistic', 'selgnairt'];
+  ul = document.getElementById('ul');
+
+  arts.forEach(art => {
+    a = document.createElement('A');
+    a.setAttribute('onclick', `loadArt('${art}')`)
+    a.innerHTML = art
+
+    li = document.createElement('LI');
+    li.appendChild(a);
+
+    ul.appendChild(li);
+  })
+}
+
+function injectScript(src) {
+  script = document.createElement('script');
+  script.type = 'text/javascript';
+  script.async = true;
+  script.src = src;
+  document.head.appendChild(script);
+}
+
+function loadArt(name) {
+  document.title = name;
+  document.body.removeChild(document.getElementById('ul'));
+  
+  document.getElementById('style').setAttribute('href', 'p5.css');
+  
+  injectScript(`${name}.js`);
+  injectScript('https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js');
+  
+  document.head.removeChild(document.getElementById('script'));
+}
@@ -0,0 +1,11 @@
+html, body {
+  height: 100%;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
@@ -0,0 +1,19 @@
+ul {
+  list-style: none;
+  text-align: center;
+}
+
+li {
+  padding-top: 30px; 
+}
+
+a {
+  outline: none;
+  color: #4c4d4f;
+  text-decoration: none;
+}
+
+a:hover {
+  font-weight: bold;
+  color: #8fefb2;
+}