test/dummy/public/index.html in social_cheesecake-0.2.0 vs test/dummy/public/index.html in social_cheesecake-0.3.0
- old
+ new
@@ -1,132 +1,162 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
- <style>
- body {
- margin: 0px;
- padding: 0px;
- }
- canvas {
- }
- #grid {
- position: absolute;
- left: 460px;
- top: 30px;
- }
- #grid .actor {
- width: 64px;
- height: 64px;
- float: left;
- margin: 5px;
- }
- #grid .actor.focused {
- border: 2px solid #00F;
- background-color: #006;
- margin: 3px;
- }
- #grid .actor img {
- width: 64px;
- height: 64px;
- }
- </style>
- <script src="assets/application.js"></script>
- <script>
- window.requestAnimFrame = (function(callback) {
- return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
- function(callback) {
- window.setTimeout(callback, 1000 / 60);
- };
- })();
- var cheese;
- window.onload = function() {
- var cheesecakeData = {
- container: {
- id: "container",
- width: 440,
- height: 440
- },
- grid: {
- id: "grid",
- divIdPrefix: "actor_"
- },
- rMax : 200,
- center: {x : 220, y : 220},
- sectors: [
- {name:"John Connor Lider de la revolucion" , subsectors : [
- {id : 0,
- name : "Cassidy",
- actors: [
- [0],
- [1],
- [2]
- ]
- },
- {id : 1, name : "Cassidy2"}
- ]},
- { name:"3,14159265358979323846264338327950288419716939937510" , subsectors : [
- {id : 2, name : "Abc"},
- {id : 3,
- name : "Cassidy2",
- actors: [
- [3],
- [4]
- ]
- }
- ]},
- { name:"Luke I am your father", subsectors : [
- {id : 4, name : "Luke I am your father"}
- ]},
- { name:"Olivia",subsectors : [
- {id : 5, name : "Dunham"},
- {id : 6, name : "FBI"}
- ]},
- { name:"Altivia",subsectors : [
- {id : 7, name : "Dunham"},
- {id : 8, name : "FBI"}
- ]},
- { name:"Walter",subsectors : [
- {id : 9, name : "Bishop"},
- {id : 10, name : "Craziness",
- actors: [[3]]
- }]
- },
- { name:"Nina",subsectors : [
- {id : 11, name : "Massive Dynamic"}
- ]}
- ],
- highlightedSectorCallback : function(sector){
- }
- };
- cheese = new socialCheesecake.Cheesecake(cheesecakeData);
- };
-
- </script>
+ <title>SocialCheeseCakeJS</title>
+ <link href="assets/application.css" rel="stylesheet" type="text/css">
+ <script src="assets/application.js" type="text/javascript"></script>
</head>
- <body id="container" onmousedown="return false;">
- <div id="grid">
- <div class="actor" id="actor_0"><img src="assets/youngAlberto.png">
+ <body id="container">
+ <div id="wrapper">
+ <div id="briefing">
+ <div id="logo">
+ <img src="assets/soialcheesecake_icon.png">
+ </div>
+ <div id="logoback" style="display:none;">
+ <img src="assets/soialcheesecake_icon_back.png">
+ </div>
+ <div id="logofront" style="display:none;">
+ <img src="assets/soialcheesecake_icon.png">
+ </div>
</div>
- <div class="actor" id="actor_1"><img src="assets/beatriz.png">
+ <div id="left_column">
+ <div class="title">
+ SocialCheeseCakeJS Demo
+ </div>
+ <div id="cheesecake"></div>
+ <div id="grid">
+ <div class="actor" id="actor_0"><img src="assets/youngAlberto.png">
+ </div>
+ <div class="actor" id="actor_1"><img src="assets/beatriz.png">
+ </div>
+ <div class="actor" id="actor_2"><img src="assets/rails.png">
+ </div>
+ <div class="actor" id="actor_3"><img src="assets/beatriz.png">
+ </div>
+ <div class="actor" id="actor_4"><img src="assets/youngAlberto.png">
+ </div>
+ </div>
</div>
- <div class="actor" id="actor_2"><img src="assets/youngAlberto.png">
+ <div id="right_column">
+ <form name ="settings" id= "form">
+ <div id="settings">
+ <div class="title">
+ SocialCheeseCakeJS Settings
+ </div>
+ <ul>
+ <li>
+ <a href="#settings-0">General</a>
+ </li>
+ <li>
+ <a href="#settings-1">Sectors</a>
+ </li>
+ </ul>
+ <div id="settings-0">
+ <div class = "sector">
+ <div class = "subtitle label">
+ Location & Size
+ </div>
+ <div class = "compound_row">
+ <div class = "left_mid_row">
+ <div class = "label">
+ Centre
+ </div>
+ <blockquote>
+ <div class = "row">
+ <div class = "label">
+ X
+ </div>
+ <input type ="text" id ="x" value = "220" size="3" maxlength="3"/>
+ px
+ </div>
+ <div class = "row">
+ <div class = "label">
+ Y
+ </div>
+ <input type ="text" id ="y" value = "220" size="3" maxlength="3"/>
+ px
+ </div>
+ </blockquote>
+ </div>
+ <div class = "right_mid_row">
+ <div class = "label">
+ Radius
+ </div>
+ <input type ="text" id ="rmax" value = "200" size="3" maxlength="3"/>
+ px
+ </div>
+ </div>
+ </div>
+ </div>
+ <div id="settings-1">
+ <div id="sectors">
+ <ul>
+ <li>
+ <a href="#tabs-0">0</a>
+ </li>
+ </ul>
+ <div id="tabs-0">
+ <div class="sector" id="s0">
+ <div class = "subtitle label">
+ Sector 0
+ </div>
+ <div class = "row">
+ <div class = "label">
+ Name
+ </div>
+ <input type ="text" id ="label_s0" value = ""/>
+ </div>
+ <div class= "subsector" id="s0s0">
+ <div class = "subsubtitle label">
+ Subsector 0
+ </div>
+ <div class = "row">
+ <div class = "label">
+ Name
+ </div>
+ <input type ="text" id ="label_s0s0" value = ""/>
+ </div>
+ <div class = "row">
+ <div class = "label">
+ Actors
+ </div>
+ <input type ="checkbox" class="actors" name ="actors_s0s0" value = "0" checked="true"/>
+ 0
+ <input type ="checkbox" class="actors" name ="actors_s0s0" value = "1" checked="true"/>
+ 1
+ <input type ="checkbox" class="actors" name ="actors_s0s0" value = "2" checked="true"/>
+ 2
+ <input type ="checkbox" class="actors" name ="actors_s0s0" value = "3"/>
+ 3
+ <input type ="checkbox" class="actors" name ="actors_s0s0" value = "4"/>
+ 4
+ </div>
+ </div>
+ <!-- <div class = "button_container"> -->
+ <button type="button" id="add_subsector_button_s0" class="add_subsector_button" onclick="addSubsector(0)">
+ Add Subsector
+ </button>
+ <!-- </div> -->
+ </div>
+ </div>
+ </div>
+ <button type="button" id="add_sector_button">
+ Add new sector
+ </button>
+ </div>
+ </div>
+ <button type="button" id="create_button">
+ Create Cheescake!
+ </button>
+ </form>
</div>
- <div class="actor" id="actor_3"><img src="assets/beatriz.png">
+ <br class="clearfloat">
+ <div id="footer">
+ Copyright ©2012
</div>
- <div class="actor" id="actor_4"><img src="assets/youngAlberto.png">
- </div>
</div>
- <div id="buttons">
- <button type="button" onclick="cheese.grid.actors[0].focus()">Focus 0</button>
- <button type="button" onclick="cheese.grid.actors[0].unfocus()">unfocus 0</button>
- <button type="button" onclick="cheese.grid.actors[0].hide()">hide 0</button>
- <button type="button" onclick="cheese.grid.actors[0].show()">show 0</button>
- <button type="button" onclick="cheese.grid.actors[0].fadeOut(1000)">fadeOut 0</button>
- <button type="button" onclick="cheese.grid.actors[0].fadeIn(1000)">fadeIn 0</button>
- <button type="button" onclick="cheese.grid.focusAll()">Focus all!</button>
- <button type="button" onclick="cheese.grid.unfocusAll()">Unfocus all!</button>
- <button type="button" onclick="cheese.grid.hideAll()">Hide all!</button>
- <button type="button" onclick="cheese.grid.showAll()">Show all!</button>
+ <div id="briefing_popup" class="popup" style="display:none;">
+ <a href="https://github.com/adiezbal/SocialCheesecake" target="_blank"> <img src="assets/under-construction.png"> </a>
</div>
</body>
</html>