-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.php
196 lines (178 loc) · 6.26 KB
/
index.php
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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<?php
$domain = "http://dannegm.pro/picboard/";
?>
<!doctype html>
<!-- [ Power By Dannegm (c) 2013 - http://dannegm.pro ] -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Dannegm Picboard</title>
<link rel="stylesheet/less" href="<?php echo $domain; ?>less/default.less" />
<script src="<?php echo $domain; ?>js/jquery.min.js"></script>
<script src="<?php echo $domain; ?>js/less.min.js"></script>
<script src="<?php echo $domain; ?>js/script.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-30390599-3', 'dannegm.pro');
ga('send', 'pageview');
</script>
</head>
<body class="noSidebar">
<div id="fb-root"></div>
<script>
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/es_MX/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<header>
<h1><a href="http://dannegm.com">Dannegm</a></h1>
<h2>PicBoard</h2>
<ul>
<li id="goToHome" class="active"><a>Inicio</a></li>
<li id="goToProfile"><a>Mis imágenes</a></li>
<li id="goToAbout"><a>Acerca de</a></li>
</ul>
</header>
<section id="noLogin">
<div>
<h3>Logueate con facebook</h3>
<p>Para poder subir tus imágenes es necesario iniciar sesión con facebook</p>
<button id="intoFace">Iniciar con facebook</button>
</div>
</section>
<section id="sidebar">
<article id="profile">
<figure>
<img id="uPicture" src="#" />
</figure>
<div>
<strong id="uName"></strong>
<span>Ha subido <em id="uCount"></em> imágenes</span>
<button class="btn viewProfile" id="uGoToProfile" rel="user">Ver imágenes</button>
</div>
</article>
<form>
<input type="file" id="uploadImages" name="images" />
<div id="dropbox">
<div id="before">
<span>Arrastra tu imagen <em>aquí</em></span>
<strong>ó</strong>
<button id="btn_upload" class="btn">Seleccionala</button>
</div>
<div id="uploading">
<span id="progressTxt"></span>
<canvas id="progress" width="120" height="120"></canvas>
</div>
</div>
</form>
<div>
<span id="elink">
<input id="newLink" type="text" placeholder="Url de la imágen" />
</span>
<span id="exist">Ya existía en nuestra base de datos</span>
<figure>
<img id="preview" src="#" />
</figure>
</div>
<p>
<span>Proyecto desarollodado por <a href="http://github.com/dannegm">@dannegm</a>, no se te olvide seguir el proyecto en github.</span>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=dannegm&repo=PicBoard&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="260px" height="30px"></iframe>
</p>
</section>
<section id="container">
<article id="picture">
<div id="upDateData">
<form>
<input type="text" id="upTitle" placeholder="Título" />
<textarea id="upDescription" placeholder="Descripción"></textarea>
<button class="btn">Guardar</button>
<button class="btn clear">Cancelar</button>
</form>
<article>
<h3>Describe tu imagen</h3>
<p>Hablanos mas sobre tu imagen, ponle un título, una descripción... Coplementa mas eso que quieres expresar... <strong>:)</strong></p>
</article>
</div>
<figure>
<img id="pPicture" src="#" />
<div id="colors"></div>
</figure>
<div>
<div class="miniProfile">
<figure>
<img id="muPicture" src="#" />
</figure>
<div>
<strong id="muName"></strong>
<span id="pDate"></span>
</div>
</div>
<div class="tools">
<input id="pLink" type="text" placeholder="Url de la imágen" />
<a id="goToPicture" class="btn" href="#">Ver en tamaño completo</a>
<a id="goToPictures" class="btn clear" href="#">Regresar</a>
<a id="download" class="btn clear" href="#">Descargar</a>
</div>
<form id="cForm">
<img id="muPictureForm" src="#" />
<p id="cContent" contenteditable>Comenta ésta imagen...</p>
</form>
<section id="comments">
</section>
</div>
</article>
<ul id="pictures">
</ul>
</section>
<section id="about">
<div class="center">
<h3>Bienvenido a picboard</h3>
<p>Picboard es un servicio gratuito para hospedar imágenes, único en su especie gracias a su sencilla interfaz y facilidad de uso. En pocos pasos podrás compartir imágenes en toda la internet.</p>
<figure class="steps">
<figcaption>
<h4><span class="dot">1</span><span class="txt">Logueate con facebook</span></h4>
<p>Descuida, sólo queremos saber tu nombre y que compartas con tus amigos tu imagen.</p>
</figcaption>
<img src="img/screen_1.png" />
</figure>
<figure class="steps">
<figcaption>
<h4><span class="dot">2</span><span class="txt">Elige tu imagen</span></h4>
<p>Esa que tanto te gusta y quisieras compartir con todo el mundo.</p>
</figcaption>
<img src="img/screen_2.png" />
</figure>
<figure class="steps">
<figcaption>
<h4><span class="dot">3</span><span class="txt">Arrastra tu imagen a la aplicación</span></h4>
<p>O pica en el boton para buscar tu imagen, enseguida de ésto se comenzará a subir.</p>
</figcaption>
<img src="img/screen_3.png" />
</figure>
<figure class="steps">
<figcaption>
<h4><span class="dot">4</span><span class="txt">Copia y comparte</span></h4>
<p>Así de facil es compartir una imagen en <strong>Picboard</strong>.</p>
</figcaption>
<img src="img/screen_4.png" />
</figure>
<footer>
<p>Proyecto desarollodado por <a href="http://github.com/dannegm">@dannegm</a>, no se te olvide seguir el proyecto en <a href="https://github.com/dannegm/PicBoard/" target="_blank">github</a>.</p>
</footer>
</div>
</section>
<section id="pop">
<p>Click para cerrar</p>
<img src="#" />
</section>
</body>
</html>