forked from coandco/TSSSFF-Generator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
167 lines (162 loc) · 9.44 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
<!doctype html>
<html>
<head>
<title>TSSSFF Card Generator</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/ripples.min.css" rel="stylesheet">
<link href="css/material-wfont.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="cardStyling.css" rel="stylesheet">
<style>
.controls {
font-family: cabin;
}
dt{
width:50%!important;
}
dd{
margin-left: calc(50% + 20px)!important;
}
</style>
</head>
<body>
<div class="cardHelper">
<div class="effect"></div>
<div class="flavour"></div>
</div>
<main class="clearAfter container">
<div class="row">
<div class="col-md-6">
<div class="panel">
<div class="panel-body cardwrapper">
<div class="card pony maleFemale unicorn s0">
<input type="text" class="nameInput" placeholder="Card Name" required/>
<div class="name"></div>
<div class="image"></div>
<div class="iconCard"></div>
<div class="iconGender">
<button value="female"></button>
<button value="male"></button>
<button value="maleFemale"></button>
<button value="G"></button>
</div>
<div class="iconRace">
<button value="unicorn"></button>
<button value="pegasus"></button>
<button value="earthPony"></button>
<button value="alicorn"></button>
<button value="changeling"></button>
<button value="R"></button>
</div>
<div class="type">
<button value="pony"></button>
<button value="ship"></button>
<button value="goal"></button>
<button value="start"></button>
</div>
<input type="text" class="attrs" placeholder="Attributes"/>
<textarea class="effect" placeholder="Effect" required></textarea>
<textarea class="flavour" placeholder="Flavour Text" required></textarea>
<div class="iconGoal">
<button value="s0"></button>
<button value="s1"></button>
<button value="s2"></button>
<button value="s3"></button>
</div>
<div class="iconTime">
<button value="time"></button>
<button value=""></button>
</div>
<input type="text" class="copyright" placeholder="Copyright & Artist infomation" required/>
</div>
</div>
</div>
</div>
<div class="controls col-md-6">
<div class="panel">
<div class="panel-heading">
<h1>Twilight Sparkle Secret Ship-Fic Folder Card Generator</h1>
<em>Beta</em> By <a href="https://twitter.com/Ripp_">@Ripp_</a>
</div>
<div class="panel-body">
<p>
Feel free to check out and fork the source on <a href="https://github.com/chao-master/TSSSFF-Generator">github</a><br/>
Cards may be lost but I will try not to let that happen.
</p>
<div class="form-group">
<input class="form-control floating-label" type="text" id="image" placeholder="Card Image" required/>
</div>
<button id="save" class="btn btn-success">Save</button>
<button id="new" class="btn btn-primary">New</button>
<button id="export" class="btn btn-warning">Export <em> Experimental </em></button>
<!--<button id="exportTo" class="btn btn-warning">Export to shipbooru</button>-->
<i id="working" class="fa fa-cog fa-spin fa-3x" style="display:none;vertical-align:middle;"></i>
<div id="error" class="alert alert-danger" style="display:none">
<strong></strong>
<em></em>
</div>
<div class="form-group">
<input class="form-control floating-label" type="text" id="editUrl" placeholder="Edit link: (lets you modify this copy of the card, keep secret)"/>
</div>
<div class="form-group">
<input class="form-control floating-label" type="text" id="shareUrl" placeholder="Sharing Link:"/>
</div>
Symbols and Powers Guide:
<div class=row>
<div class="col-xs-6">
<dl class="dl-horizontal icon-list">
<dt>♂</dt> <dd>\male</dd>
<dt>♀</dt> <dd>\female</dd>
<dt>⚤</dt> <dd>\malefemale</dd>
<dt>❤</dt> <dd>\ship</dd>
<dt></dt> <dd>\earth</dd>
<dt></dt> <dd>\unicorn</dd>
<dt></dt> <dd>\pegasus</dd>
<dt></dt> <dd>\alicorn</dd>
<dt></dt> <dd>\time</dd>
</dl>
</div>
<div class="col-xs-6">
<dl class="dl-horizontal">
<!--We will replace the long unweild hints in code before setting them as tooltips-->
<dt data-original-title="\replace" data-placement="left">(Replace)</dt>
<dd>\replace</dd>
<dt data-original-title="\swap" data-placement="left">(Swap)</dt>
<dd>\swap</dd>
<dt data-original-title="\draw" data-placement="left">(Draw)</dt>
<dd>\draw</dd>
<dt data-original-title="\newgoal" data-placement="left">(New Goal)</dt>
<dd>\newgoal</dd>
<dt data-original-title="\search" data-placement="left">(Search)</dt>
<dd>\search</dd>
<dt data-original-title="\copy" data-placement="left">(Copy)</dt>
<dd>\copy</dd>
<dt data-original-title="\changeling" data-placement="left">Changeling</dt>
<dd>\changeling</dd>
</dl>
</div>
</div>
(Symbols and powers update when you deselect the field. Powers add the whole description to the card. Hover over each power for it's full description.)
</div>
</div>
<div class="panel-footer">
This project is not associated with or necessarily endorsed by HORRIBLE PEOPLE PRODUCTIONS, the creators of Twilight Sparkle's Secret Shipfic Folder. <br/>
For more infomation about the game, please visit <a href="http://tsssf-tcg.tumblr.com/">The offical Twilight Sparkle's Secret Shipfic Folder site</a>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ripples.min.js"></script>
<script src="js/material.min.js"></script>
<script src="maker.js"></script>
<script>
$(document).ready(function() {
$.material.init();
cardSetup()
});
</script>
</body>
</html>