-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
179 lines (152 loc) · 7.38 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html class="full" lang="en">
<!-- Make sure the <html> tag is set to the .full CSS class. Change the background image in the full.css file. -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sitecake demo. Bootstrap 4 styles.</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Sitecake styles CSS -->
<link href="css/sitecake.css" rel="stylesheet">
<!--Lato font from Google Fonts-->
<link href='https://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<ul class="navigation sc-nav">
<li><a class="nav-item" href="./" title="Home">Home</a></li>
<li><a class="nav-item" href="article.html" title="Page Manager">Page Manager</a></li>
<li><a class="nav-item" href="default.html" title="Default Article">Default Article</a></li>
</ul>
</div>
<div class="pageheader">
<div class="container">
<div class="row">
<div class="sc-content col-xs-9 sc-content">
<h1>Sitecake Demo</h1>
<p class="lead">This is a demo and a guide at the same time. Go through examples below, try adding some text, images or videos. Play around, you can not break anything. </p>
</div>
<div class="sc-content col-xs-3 sc-content">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3 col-md-push-9 sidebar sc-content">
</div>
<div class="col-xs-12 col-md-9 col-md-pull-3 sc-content">
<h3>Adding elements on the page </h3>
<p>New elements are added by dragging toolbar icons down on your page. Don't click them, drag them down. </p>
<div class="sc-html">
<img src="images/new-heading.gif" class="img-fluid">
</div>
<p>Try it now, create a new heading by dragging H1 icon. </p>
<p> </p>
<p> </p>
</div>
</div>
<!-- //row -->
<div class="row altbgr">
<div class="col-md-3 col-md-push-9 sidebar sc-content">
</div>
<div class="col-xs-12 col-md-9 col-md-pull-3 sc-content">
<h3>Working with images</h3>
<p>There are three ways of adding images</p>
<ul>
<li>drag and drop image toolbar icon, click and browse </li>
<li>drag and drop an image from your desktop</li>
<li>drag and drop an image from other browser window</li>
</ul>
<p><strong>Example: Adding the image from another website</strong></p>
<div class="sc-html">
<img src="images/image-from-website.gif" class="img-fluid">
</div>
<p> </p>
<p> </p>
<p>One click on the images enters <strong>resize mode</strong>, two clicks for <strong>crop mode</strong>, three clicks for <strong>frame mode</strong>. ENTER or double click to save change.</p>
<p>Try playing with the sample image below. </p>
<img src="images/cowork.jpg" class="img-fluid" />
<p> </p>
<p>As a bonus, you can try adding multiple images from your desktop to create a photo set. </p>
</div>
</div>
<!-- //row -->
<div class="row">
<div class="col-md-3 col-md-push-9 sidebar sc-content">
</div>
<div class="col-xs-12 col-md-9 col-md-pull-3 sc-content">
<h3>Adding videos</h3>
<p>With Sitecake one can drag and drop add Youtube or Vimeo videos. Just pull the URL from the address bar or video thumbnail to your page. Once on the page video can be resized if needed. Here is an example below.
</p>
<div class="sc-html">
<img src="images/video2.gif" class="img-fluid">
</div>
<p> </p>
<p> </p>
<p> </p>
<h3>Adding maps, tweets and more...</h3>
<p>In the same manner you can drag and drop URL from Google map, or a tweet URL and Sitecake will embed it in the page. We will be adding more and more content types for drag and drop embedding. Content is not with you any more, it's on cloud services, so there should be an easy way to add it.</p>
<div class="sc-html">
<img src="images/map.gif" class="img-fluid">
</div>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<!-- //row -->
<div class="row altbgr">
<div class="col-md-3 col-md-push-9 sidebar sc-content">
</div>
<div class="col-xs-12 col-md-9 col-md-pull-3 sc-content">
<h3>Apply predefined CSS styles</h3>
<p>Sitecake reads website CSS files and in case it finds that more than one style is defined for a certain type of content it will display all styles in the drop down on the toolbar. For example, this template is based on Bootstrap CSS so you can pick different paragraph styles defined by Bootstrap. Try clicking on any paragraph and picking a style from a toolbar drop down.</p>
<p> </p>
<div class="sc-html">
<img src="images/styles.gif" class="img-fluid">
</div>
<p> </p>
<p> </p>
<p>Apply a style on me.</p>
<p> </p>
</div>
</div>
<!-- //row -->
<div class="row"><div class="col-md-3 col-md-push-9 sidebar sc-content">
</div>
<div class="col-xs-12 col-md-9 col-md-pull-3 sc-content">
<p> </p>
</div>
</div>
<!-- //row -->
</div>
<!-- //container -->
<!-- Sitecake admin pass autofill. Remove if using on other domain then sitecake.com -->
<script type="text/javascript">
if (window.sitecakeGlobals && sitecakeGlobals.editMode === false) {
var interval = setInterval(function() {
var elements = [],
toolbar = document.getElementById('sitecake-toolbox');
if (toolbar) {
clearInterval(interval);
elements = toolbar.getElementsByTagName("input");
for (var i = 0; i < elements.length; i++) {
if (elements[i].type === 'password') {
elements[i].value = "admin";
break;
}
}
}
}, 2000);
}
</script>
</body>
</html>