open w icon, random position

index.html

@@ -21,9 +21,12 @@
         <![endif]-->
         <h1>windows.open(Welcome)</h1>
 
-        <div class="ui-widget-content draggable resizable"><h1>TEST</h1>This is a third draggable div</div>
-        <div class="ui-widget-content draggable resizable"><h1>TEST</h1>This is another draggable div</div>
-        <div class="ui-widget-content draggable resizable"><h1>TEST</h1>This is a draggable div</div>
+        <div class="ui-widget-content draggable resizable closable" id="greetings"><h1>window.open(greetings)</h1><p>We are pleased to invite you to window.open(), a day-long festival, held by students and alumni of the Master of Experimental Publishing (XPUB) at Page Not Found.</p></div>
+        <div class="ui-widget-content draggable resizable closable" id="interface"><h1>window.open(interface)</h1><p>
+            A window is a framing device, an interface through which we can look inside, to spaces where small groups meet, and outside to the world beyond. Screens and windows delineate boundaries between public and private. Working with(in) a limitation, a frame(work), a situation, a context means adjusting our work to the state of affairs; it changes our way of thinking/framing it. We adjust, in order to be able to communicate within a temporary window of time, reframing our intentions and seeking opportunities to share some real-time realness.</p></div>
+        <div class="ui-widget-content draggable resizable closable" id="xpub"><h1>window.open(xpub)</h1><p>window.open() at PNF will be an interface for our XPUB program to speak/communicate to/with the public inside and outside of the physical space. We adjust, using windows in the street and in the browser in order to be able to communicate. This frames it as a "discursive/dialogical interface" through which attitudes, perspectives, backgrounds and situations are explored together in a program consisting of: presentations, workshops, publication launches, conversations and performances; both online and offline.</p></div>
+
+        <div id="icons"></div>
 
         <script src="./scripts/App.js"></script>
     </body>

scripts/App.js

@@ -22,6 +22,34 @@ $(document).ready(function(){
     $( ".resizable" ).resizable({ aspectRatio:true, maxHeight:900, minHeight:200 });
     $( ".resizableOriz" ).resizable({ aspectRatio:true, maxHeight:500, minHeight:200 });
 
+
+
+    // size random of draggables
+    $( ".draggable" ).each(function() {
+
+
+        let rw = Math.floor(Math.random() * 500) + 300;
+        let rh = Math.floor(Math.random() * 400) + 200;
+
+        console.log(rw,rh) 
+
+        $( this ).css("width",rw);
+        $( this ).css("height",rh)
+
+        $( this ).append("<button>X</button>")
+    });
+
+    // close window
+    $(".closable").click(function() { 
+        $( this ).fadeOut(); 
+      });
+
+    // open window
+    $( ".draggable" ).each(function() {
+        let idid = $( this ).attr('id')
+        console.log(idid)
+        $("#icons").append(`<button onclick="$(${idid}).fadeIn()" class="icon"></button>`)
+    });
     // TODOS
     // Open window icon (on background 'desktop')
     // Close window button (on 'window' itself)

styles/style.css

@@ -14,17 +14,57 @@ body{
 
 h1{
   font-family: points;
+  font-size: 60px;
+
 }
 
 .draggable {
   position: absolute;
+  z-index: 2;
   cursor: grab;
   border: 2px white solid;
   background: black
 }
 
 .resizable {
-  width: 150px;
-  height: 150px;
-  padding: 0.5em;
+  width: 350px;
+  height: 650px;
+  padding: 0.5em 1.5em;
+}
+
+.resizable p{
+  font-size: 18px;
+}
+
+.resizable h1{
+  font-size: 35px;
+}
+
+.closable{
+  position: fixed;
+  top: 0;
+  right: 0;
+}
+
+.closable button{ 
+  width: 30px;
+  height: 30px;
+  background-color: rgba(0,0,0,0);
 }
+
+
+
+.icon{
+  width: 50px;
+  height: 50px;
+  border: white solid 2px;
+  /* position: absolute; */
+  z-index: 1;
+}
+
+.icon button{
+  background-color: rgba(0,0,0,0);
+  
+}
+
+