Parcourir la source

edit-CSS-functionality added; new file format

mjz il y a 10 ans
Parent
commit
38f5c9b038

+ 21 - 0
fileformat/fileformat_1.0.1.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+		<meta name="generator" content="SuperGlue" data-superglue-version="1.0.1" data-superglue-settings="">
+		<title>New Page</title>
+		<style type="text/css" data-superglue-css="defaults">
+			body { margin: 0px; padding: 0px; }
+			#sg-page { position: relative; top: 0px; }
+			#sg-page.sg-page-centered { margin: 0px auto; }
+			.sg-element { position: absolute; overflow: hidden; }
+		</style>
+		<style type="text/css" data-superglue-css="user">
+		</style>
+		<link rel="stylesheet" href="/resources/css/SuperGlue.css" data-superglue-css="CSS4TextElement">
+	</head>
+	<body style="">
+		<div id="sg-page" data-superglue-grid="off/0px">
+		</div>
+	</body>
+</html>

+ 0 - 0
testpages/empty.html → fileformat/fileformat_1.0.html


+ 34 - 24
src/allplatforms/classes/Compiler.js

@@ -10,36 +10,44 @@ SC.loadPackage({ 'Compiler': {
             comment: 'I compile to HTML5.',
             transform: function(theDocument){
 
-                var thePage = '';
-
-                thePage += '<!DOCTYPE html>\n<html>';
-
-                thePage +=   '\n\t<head>'
-                            +'\n\t\t<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">'
-                            +'\n\t\t<meta name="generator" content="SuperGlue" data-superglue-version="'
-                                    +SuperGlue.class.get('version')
-                                    +'" data-superglue-settings="">'
-                            +'\n\t\t<title>'
-                                    +document.getElementsByTagName('title')[0].innerHTML
-                                    +'</title>'
-                            +'\n\t\t<style type="text/css" data-superglue="default-css">'
-                            +'\n\t\t\tbody { margin: 0px; padding: 0px; }'
-                            +'\n\t\t\t#sg-page { position: relative; top: 0px; }'
-                            +'\n\t\t\t#sg-page.sg-page-centered { margin: 0px auto; }'
-                            +'\n\t\t\t.sg-element { position: absolute; overflow: hidden; }'
-                            +'\n\t\t</style>'
-                            +'\n\t\t<link rel="stylesheet" href="/resources/css/SuperGlue.css" data-superglue="text-css">'
-                            +'\n\t</head>';
+                var thePage = 
+
+                              '<!DOCTYPE html>\n<html>\n\t<head>'
+                            + '\n\t\t<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">'
+                            + '\n\t\t<meta name="generator" content="SuperGlue" data-superglue-version="'
+                                    + SuperGlue.class.get('version')
+                                    + '" data-superglue-settings="">'
+                            + '\n\t\t<title>'
+                                    + document.getElementsByTagName('title')[0].innerHTML
+                                    + '</title>'
+
+                            + '\n\t\t<style type="text/css" data-superglue-css="defaults">'
+                            + '\n\t\t\tbody { margin: 0px; padding: 0px; }'
+                            + '\n\t\t\t#sg-page { position: relative; top: 0px; }'
+                            + '\n\t\t\t#sg-page.sg-page-centered { margin: 0px auto; }'
+                            + '\n\t\t\t.sg-element { position: absolute; overflow: hidden; }'
+                            + '\n\t\t</style>'
+                            
+                            + '\n\t\t<style type="text/css" data-superglue-css="user">\n'
+                                    + document.querySelector('style[data-superglue-css="user"]')
+                                        .innerHTML
+                                        .split('\n')
+                                        .filter(function(line){ return line.trim() !== '' })
+                                        .join('\n')
+                            + '\n\t\t</style>'
+
+                            + '\n\t\t<link rel="stylesheet" href="/resources/css/SuperGlue.css" data-superglue-css="CSS4TextElement">'
+                            + '\n\t</head>'
                 
-                thePage += '\n\t<body style="'+ (document.body.getAttribute('style')
+                            + '\n\t<body style="' + (document.body.getAttribute('style')
                                                     ? document.body.getAttribute('style').replace(document.location.origin, '')
                                                                                          .replace('url("', 'url(')
                                                                                          .replace('");', ');')
                                                     : '')
 
-                            +'">';
+                            + '">'
         
-                thePage += '\n\t\t<div id="sg-page" '
+                            + '\n\t\t<div id="sg-page" '
                             + (theDocument.get('layout').centered 
                                 ? ('class="sg-page-centered" style="width: ' + theDocument.get('layout').width + 'px;" ')
                                 : '')
@@ -50,14 +58,16 @@ SC.loadPackage({ 'Compiler': {
                                 + 'px">';
                 
 
+
                 for(var children = theDocument.get('children'),
                         i = 0, l = children.length; i < l; i++){
 
-                    thePage += children[i].do('renderYourself', { indent: 4 })
+                            thePage += children[i].do('renderYourself', { indent: 4 })
 
                 }
                 
                 
+
                 thePage += '\n\t\t</div>\n\t</body>\n</html>';
 
                 

+ 1 - 1
src/allplatforms/classes/DocumentMenu.js

@@ -28,7 +28,7 @@ SC.loadPackage({ 'DocumentMenu': {
                     menuItemsTop  = [],
                     menuItemsLeft = [],
                     menuItemsClassesTop  = [ 'MenuItemFileManager', 'MenuItemNewPage', 'MenuItemSave', 'MenuItemSaveAs', 'MenuItemSaveLocal', 'MenuItemSaveRemote', 'MenuItemServerSettings', 'MenuItemOutlines', 'MenuItemPaste', 'MenuItemUndo', 'MenuItemRedo' ],
-                    menuItemsClassesLeft = [ 'MenuItemCenter', 'MenuItemPageTitle', 'MenuItemBackgroundColor', 'MenuItemBackgroundImg', 'MenuItemBackgroundRepeat' ],
+                    menuItemsClassesLeft = [ 'MenuItemCenter', 'MenuItemPageTitle', 'MenuItemBackgroundColor', 'MenuItemBackgroundImg', 'MenuItemBackgroundRepeat', 'MenuItemEditCSS' ],
                     menuItem = null;
 
 

+ 9 - 3
src/allplatforms/classes/HTMLEditor.js

@@ -32,15 +32,21 @@ SC.loadPackage({ 'HTMLEditor': {
                     html:     startConfig.html
                 });
                 
+
+                var warningText = document.createElement('div');
+                    warningText.classList.add('sg-editing-superuser-warning');
+                    warningText.innerHTML = '<b>Caution:</b> Your are now editing the source code!';
+                self.get('content').appendChild(warningText);
+
+
+
                 var editTextarea = document.createElement('textarea');
                     editTextarea.classList.add('sg-editing-superuser-textarea');
                     editTextarea.value = self.get('html');
-
-                    
-
                 self.get('content').appendChild(editTextarea);
                 editTextarea.focus();
                 
+
                 var modalButtonContainer = document.createElement('div');
                     modalButtonContainer.classList.add('sg-editing-superuser-modal-container');
 

+ 68 - 10
src/allplatforms/classes/MenuItemEditCSS.js

@@ -6,7 +6,7 @@ SC.loadPackage({ 'MenuItemEditCSS': {
 
     sharedProperties: {
 
-        menuContainer:  { initValue: '<div class="sg-editing-menu-container"><button id="sg-editing-menu-editCSS" class="sg-editing-menu-button" title="edit costum CSS"></button></div>' }
+        menuContainer:  { initValue: '<div class="sg-editing-menu-container"><button id="sg-editing-menu-editCSS" class="sg-editing-menu-button" title="edit CSS code of the page"></button></div>' }
 
     },
 
@@ -23,22 +23,80 @@ SC.loadPackage({ 'MenuItemEditCSS': {
                 
                 this.get('menuContainer').firstChild.addEventListener('mouseup', function(evt){
 
-                    var myDocument  = SuperGlue.get('document'),
-                        createState = function(myDocument){
-                                            var savedLayout = myDocument.get('layout');
+                    var createState = function(){
+                                            var savedUserCSS = document.querySelector('style[data-superglue-css="user"]').innerHTML;
                                             return function(){
-                                                myDocument.set({ layout: savedLayout });
+                                                document.querySelector('style[data-superglue-css="user"]').innerHTML = savedUserCSS;
                                             }
                                         };
 
-                    SuperGlue.get('history').do('actionHasStarted', createState(myDocument));
+                        
+
+
+                    var rawCSS      = document.querySelector('style[data-superglue-css="user"]').innerHTML
+                                        .split('\n')
+                                        .filter(function(line){ return line.trim() !== '' }),
+                        whitespace  = [],
+                        cutOff      = 0;
+
+                    rawCSS.forEach(function(line){
+                        whitespace.push( line.length - line.trimLeft().length );
+                    });
+                    cutOff = Math.min.apply(Math, whitespace);
+
+                    for(var i = 0, l = rawCSS.length; i < l; i++){
+
+                        rawCSS[i] = rawCSS[i].substr(cutOff);
+
+                    }
+
+                    rawCSS = rawCSS.join('\n');
 
-                    
 
                     
-                    
-                    SuperGlue.get('history').do('actionHasSucceeded', createState(myDocument));
-                    
+                    SuperGlue.get('windowManager').do('createWindow', {
+
+                        class:      'HTMLEditor',
+                        
+                        html:       rawCSS,
+                        
+                        callback:   function(aString){
+                                        
+
+                                        var renderedCSS = aString.split('\n').filter(function(line){ return line.trim() !== '' }),
+                                            whitespace  = [],
+                                            cutOff      = 0;
+
+                                        renderedCSS.forEach(function(line){
+                                            whitespace.push( line.length - line.trimLeft().length );
+                                        });
+                                        cutOff = Math.min.apply(Math, whitespace);
+
+                                        for(var i = 0, l = renderedCSS.length; i < l; i++){
+
+                                            renderedCSS[i] = '\t\t\t' + renderedCSS[i].substr(cutOff);
+
+                                        }
+
+                                        renderedCSS = renderedCSS.join('\n');
+
+                                        
+                                        SuperGlue.get('history').do('actionHasStarted', createState());
+                                        document.querySelector('style[data-superglue-css="user"]').innerHTML = renderedCSS;
+                                        SuperGlue.get('history').do('actionHasSucceeded', createState());
+                                        
+                                    },
+
+                        top:        70,
+                        left:       80,
+                        width:      600,
+                        height:     300
+                    });
+
+
+                    theDocumentMenu.do('close');
+
+
 
                 }, false);
 

+ 37 - 10
src/allplatforms/classes/SuperGlue.js

@@ -1,11 +1,11 @@
 SC.loadPackage({ 'SuperGlue': {
 
 
-    comment: 'Hello friend, I am SuperGlue!\nMy single instance is the central object of the system. It provides the start routine with method SuperGlue>>init, and stores itsself in the global variable window.SuperGlue',
+    comment: 'Hello friend, I am Superglue!\nMy single instance is the central object of the system. It provides the start routine with method Superglue>>init, and stores itsself in the global variable window.SuperGlue',
 
     sharedProperties: {
 
-        version: {  comment:   'SuperGlue\'s current version is...', 
+        version: {  comment:   'Superglue\'s current version is...', 
                     initValue: '1.0.1' 
                  }
 
@@ -41,7 +41,7 @@ SC.loadPackage({ 'SuperGlue': {
     methods: {
 
         init: {
-            comment:  'I am SuperGlue\'s start routine, yay!',
+            comment:  'I am Superglue\'s start routine, yay!',
             code:     function(){
 
                 // Initialization of the whole system is "mission critical", 
@@ -57,7 +57,7 @@ SC.loadPackage({ 'SuperGlue': {
                     // Explicit failures
                     var metaData = document.querySelector('meta[name=generator]');
                     if( metaData.getAttribute('content') !== 'SuperGlue' ){
-                        throw new Error('This is not a SuperGlue page, you can\'t change it.')
+                        throw new Error('This is not a Superglue page, you can\'t change it.')
                     }
                     if( this.do('compareVersions', {
                             pageVersion:   metaData.getAttribute('data-superglue-version'), 
@@ -65,13 +65,17 @@ SC.loadPackage({ 'SuperGlue': {
                         })
                     ){
                         throw new Error(
-                              'This page needs version '
+                              'This page was made with  Superglue version '
                             + metaData.getAttribute('data-superglue-version')
-                            + '. Please update your SuperGlue browser add-on.'
+                            + '.\nPlease update your Superglue browser add-on!'
                         )
                     }
 
 
+                    // Update the page structure for older file formats
+                    this.do('updatePageStructure', metaData.getAttribute('data-superglue-version'))
+
+
                     // Make myself a global object (the only one, thou shall not have others beside me)
                     window.SuperGlue = this;
 
@@ -110,7 +114,7 @@ SC.loadPackage({ 'SuperGlue': {
                     // Print console.log
                     console.log([
                         '************************************************',
-                        '   SuperGlue editor has successfully started!',
+                        '   Superglue editor has successfully started!',
                         '',
                         '   To access the running system\'s code',
                         '   open the bystem browser, just enter',
@@ -128,8 +132,8 @@ SC.loadPackage({ 'SuperGlue': {
                     
                 } catch(error) {
                     // Catch any initialization error
-                    alert('Something went wrong starting SuperGlue\'s editing tool.\n\n' + error.message);
-                    console.log('Failed to initialize SuperGlue:\n', error);
+                    alert('Something went wrong starting Superglue\'s editing tool.\n\n' + error.message);
+                    console.log('Failed to initialize Superglue:\n', error);
                     return;
                 }
 
@@ -174,7 +178,7 @@ SC.loadPackage({ 'SuperGlue': {
 
         compareVersions: {
             comment:  'I check for version compatability of page and plugin. Return is true for out-of-date!',
-            code:     function (arg) {
+            code:     function(arg){
                 
                 var v1 = arg.pageVersion,
                     v2 = arg.pluginVersion,
@@ -198,6 +202,29 @@ SC.loadPackage({ 'SuperGlue': {
                     return false;
                 }
                 return false;
+            }
+        },
+
+
+
+        updatePageStructure: {
+            comment:    'I update older file versions to the current page structure.',
+            code:       function(pageVersion){
+
+                if(this.do('compareVersions', {
+                    pluginVersion: pageVersion,
+                    pageVersion:   '1.0.1'
+                })){
+
+                    var userCSS = document.createElement('style');
+                        userCSS.setAttribute('type', 'text/css');
+                        userCSS.setAttribute('data-superglue-css', 'user');
+
+                    document.getElementsByTagName('head')[0].appendChild(userCSS);
+
+                }
+
+
             }
         }
 

+ 1 - 1
src/allplatforms/classes/WidgetLayerBottom.js

@@ -6,7 +6,7 @@ SC.loadPackage({ 'WidgetLayerBottom': {
 
     sharedProperties: {
 
-        widgetMenu:  { initValue: '<div class="sg-editing-widget-container"><button id="sg-editing-widget-layerBottom" class="sg-editing-widget-button" title="to bottom / [shift] downwards"></button></div>' }
+        widgetMenu:  { initValue: '<div class="sg-editing-widget-container"><button id="sg-editing-widget-layerBottom" class="sg-editing-widget-button" title="to bottom layer / [shift] downwards"></button></div>' }
 
     },
 

+ 1 - 1
src/allplatforms/classes/WidgetLayerTop.js

@@ -6,7 +6,7 @@ SC.loadPackage({ 'WidgetLayerTop': {
 
     sharedProperties: {
 
-        widgetMenu:  { initValue: '<div class="sg-editing-widget-container"><button id="sg-editing-widget-layerTop" class="sg-editing-widget-button" title="to top / [shift] upwards"></button></div>' }
+        widgetMenu:  { initValue: '<div class="sg-editing-widget-container"><button id="sg-editing-widget-layerTop" class="sg-editing-widget-button" title="to top layer / [shift] upwards"></button></div>' }
 
     },
 

+ 17 - 1
src/allplatforms/css/HTMLEditor.css

@@ -1,14 +1,30 @@
+.sg-editing-superuser-warning {
+	position: 			absolute;
+	top: 				25px;
+	left: 				0px;
+	width: 				100%;
+	height: 			30px;
+	padding-left: 		15px;
+	padding-right: 		15px;
+	background-color: 	rgb(255, 41, 61);
+	color: 				rgb(255, 255, 255);
+	-moz-box-sizing: 	border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: 		border-box;
+}
+
 .sg-editing-superuser-textarea {
 	width: 				100%;
 	height: 			100%;
 	border: 			none;
 	padding: 			15px;
+	padding-top:		35px;
 	-moz-box-sizing:	border-box;
 	-webkit-box-sizing:	border-box;
 	box-sizing:			border-box;
 	resize: 			none;
 	background-color: 	#fff;
-	font-family: 		'Courier New', Arial;
+	font-family: 		'Courier New', monospace;
 	color:				#000000;
 	font-size:			13px;
 }

+ 3 - 0
src/allplatforms/css/MenuItemEditCSS.css

@@ -0,0 +1,3 @@
+#sg-editing-menu-editCSS {
+	background-image: url("icons/editCSS.svg");;
+}

+ 51 - 0
src/allplatforms/css/icons/editCSS.svg

@@ -0,0 +1,51 @@
+<?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"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="30px"
+   height="30px"
+   viewBox="0 0 30 30"
+   enable-background="new 0 0 30 30"
+   xml:space="preserve"
+   inkscape:version="0.48.5 r10040"
+   sodipodi:docname="imgRepeat.svg"><metadata
+     id="metadata35"><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="defs33" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="910"
+     inkscape:window-height="697"
+     id="namedview31"
+     showgrid="false"
+     inkscape:zoom="7.8666667"
+     inkscape:cx="15"
+     inkscape:cy="15.063559"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="Layer_1" /><g
+     style="font-size:40px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Courier New;-inkscape-font-specification:Courier New"
+     id="text3014"><path
+       d="m 9.203594,10.522984 c 0,-1.3439991 0.1200012,-2.0640007 1.32,-2.2800005 0.647999,-0.1199998 1.32,-0.024001 1.32,-0.912 0,-0.5759994 -0.360001,-0.936 -0.888,-0.936 -3.1679969,0 -3.72,1.5840032 -3.72,4.7280005 l 0,0.744 c 0,2.639997 -1.0320015,2.448 -2.448,2.808 -0.4799996,0.119999 -0.72,0.36 -0.72,0.888 0,0.575999 0.2160006,0.84 0.864,0.96 1.5359984,0.263999 2.304,0.432002 2.304,2.76 l 0,0.744 c 0,3.095996 0.576003,4.704 3.6,4.704 0.671999,0 1.008,-0.336001 1.008,-0.936 0,-0.96 -0.816001,-0.792001 -1.464,-0.96 -1.1039989,-0.264 -1.176,-0.864002 -1.176,-2.208 l 0,-1.104 c 0,-2.207998 -0.3360018,-3.408001 -2.136,-3.96 1.7999982,-0.528 2.136,-1.704003 2.136,-3.936 l 0,-1.104"
+       style="font-size:24px;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch;fill:#ffffff"
+       id="path3019" /><path
+       d="m 21.145094,10.522984 0,1.104 c 0,2.231997 0.336002,3.408 2.136,3.936 -1.799998,0.551999 -2.136,1.752002 -2.136,3.96 l 0,1.104 c 0,1.367998 -0.096,2.016 -1.32,2.232 -0.671999,0.119999 -1.32,0.072 -1.32,0.936 0,0.599999 0.360001,0.936 1.032,0.936 3.023997,0 3.576,-1.608004 3.576,-4.704 l 0,-0.744 c 0,-2.327998 0.768001,-2.496001 2.304,-2.76 0.647999,-0.12 0.864,-0.384001 0.864,-0.96 0,-0.528 -0.240001,-0.768001 -0.72,-0.888 -1.415999,-0.36 -2.448,-0.168003 -2.448,-2.808 l 0,-0.744 c 0,-3.1439973 -0.552003,-4.7280005 -3.72,-4.7280005 -0.528,0 -0.888,0.3600006 -0.888,0.936 0,0.9599991 0.840001,0.7920002 1.464,0.96 1.103999,0.2879997 1.176,0.9120014 1.176,2.2320005"
+       style="font-size:24px;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch;fill:#ffffff"
+       id="path3021" /></g></svg>

+ 2 - 0
src/chromium/content_probeForSG.js

@@ -38,6 +38,7 @@
         'classes/MenuItemBackgroundImg.js',
         'classes/MenuItemBackgroundRepeat.js',
         'classes/MenuItemCenter.js',
+        'classes/MenuItemEditCSS.js',
         'classes/MenuItemFileManager.js',
         'classes/MenuItemNewPage.js',
         'classes/MenuItemOutlines.js',
@@ -102,6 +103,7 @@
         'css/MenuItemBackgroundImg.css',
         'css/MenuItemBackgroundRepeat.css',
         'css/MenuItemCenter.css',
+        'css/MenuItemEditCSS.css',
         'css/MenuItemFileManager.css',
         'css/MenuItemNewPage.css',
         'css/MenuItemOutlines.css',

+ 2 - 0
src/firefox/data/content_probeForSG.js

@@ -38,6 +38,7 @@
         'classes/MenuItemBackgroundImg.js',
         'classes/MenuItemBackgroundRepeat.js',
         'classes/MenuItemCenter.js',
+        'classes/MenuItemEditCSS.js',
         'classes/MenuItemFileManager.js',
         'classes/MenuItemNewPage.js',
         'classes/MenuItemOutlines.js',
@@ -102,6 +103,7 @@
         'css/MenuItemBackgroundImg.css',
         'css/MenuItemBackgroundRepeat.css',
         'css/MenuItemCenter.css',
+        'css/MenuItemEditCSS.css',
         'css/MenuItemFileManager.css',
         'css/MenuItemNewPage.css',
         'css/MenuItemOutlines.css',

+ 0 - 34
testpages/newFormat.html

@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-		<meta name="generator" content="SuperGlue" data-superglue-version="1.0" data-superglue-settings="">
-		<title>SuperGlue Project - Home</title>
-		<style type="text/css" data-superglue="default-css">
-			body { margin: 0px; padding: 0px; }
-			#sg-page { position: relative; top: 0px; }
-			#sg-page.sg-page-centered { margin: 0px auto; }
-			.sg-element { position: absolute; overflow: hidden; }
-		</style>
-		<link rel="stylesheet" href="/resources/css/SuperGlue.css" data-superglue="text-css">
-	</head>
-	<body style="background-image: url(/grid_orange-color.gif); background-repeat: repeat-x;">
-		<div id="sg-page" class="sg-page-centered" style="width: 1054px;" data-superglue-grid="off/0px">
-			<div class="sg-element" data-superglue-type="TextElement" style="left: 390px; top: 105px; width: 388px; height: 173px; border-image-source: none; padding: 22px; border-color: rgb(0, 0, 0);">
-				<p style="font-size: 18px; font-family: Helvetica; color: rgb(255, 255, 255);">Hello friend, I am SuperGlue. Hello friend, I am SuperGlue. Hello friend, I am SuperGlue. <br>Hello friend, I am SuperGlue. Hello friend, I am SuperGlue. Hello friend, I am SuperGlue. </p>
-			</div>
-			<div class="sg-element" data-superglue-type="ImageElement" style="left: 0px; top: 68px; width: 314px; height: 508px; border-image-source: none;">
-				<div style="width: 100%; height: 100%; background-image: url(/newSG/logo_neg.png); background-repeat: repeat;"></div>
-			</div>
-			<div class="sg-element" data-superglue-type="EmbedElement" style="left: 408px; top: 449px; width: 646px; height: 337px; border-top-left-radius: 4%; border-top-right-radius: 4%; border-bottom-right-radius: 4%; border-bottom-left-radius: 4%; background-color: rgb(21, 114, 32);">
-				<iframe scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/19163436&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true" frameborder="no" height="300" width="100%"></iframe>
-			</div>
-			<div class="sg-element" data-superglue-type="ImageElement" style="left: 0px; top: 1190px; width: 1054px; height: 136px;">
-				<div style="width: 100%; height: 100%; background-image: url(/diagram_v3.png); background-repeat: repeat;"></div>
-			</div>
-			<div class="sg-element" data-superglue-type="IFrameElement" style="left: 226px; top: 799px; width: 828px; height: 325px;">
-				<iframe src="http://fusion-festival.de" style="width: 100%; height: 100%;"></iframe>
-			</div>
-		</div>
-	</body>
-</html>