PageSourceSearch

https://dinphil.github.io/

html dinphil.github.io collected 2026-10-03 09:00:35 UTC 24,645 bytes, 504 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en" class="no-js">
3    <head>
4        <title>Hacking and Learning</title>
5        
6        <!--Meta-->
7        <meta charset="utf-8">
8        <meta name="description"> <!--Fill this out-->
9        <meta name="author" content="Abhinav Suri"/>
10        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
11      
12        <!--end meta-->
13        
14        <!--css--> 
15        <link rel="stylesheet" href="css/styles.css"/>
16        <link rel="stylesheet" href="css/skeleton.css"/>
17        <link rel="stylesheet" href="css/normalize.css"/>
18        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
19        <link rel="stylesheet" type="text/css" href="css/sweetalert.css">
20
21        
22        <link href='//fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'>
23
24<link rel="shortcut icon" href="images/favicon.ico">
25
26</head>    
27    <body>
28        <style>
29
30        </style>
31            <nav>
32                <ul id="nav">
33                    <li><a href="#home">Home</a></li>
34                    <li><a href="#about">About</a></li>
35                    <li><a href="#stats">Code Weekend</a></li>
36                    <li><a href="#info">Why Program?</a></li>
37                    <li><a href="#faq">Code Camps</a></li>
38                    <li><a href="#contact">Contact</a></li>
39                </ul>
40            </nav>
41        <style>
42           
43        </style>
44        
45        <section id="home">
46            <div id="parallax1">
47                
48            </div>
49          
50            <div class="container"><!--Se-slope-->
51                <div class="row">
52                    <div class="twelve columns">
53                        <h1 id="caption" style="padding-top: 150px">Hacking &amp; Learning</h1>
54                        <div class="row">
55                        <div class="four columns offset-by-four">
56                        <img src="img/favicon.png" id="logo" style="max-height: 400px; max-width:400px; margin: 0 auto"></div>   
57                            </div>
58                    
59                            
60                            </div>
61    </div>
62                        <br>
63                        <h4 style="text-align: center" id="caption3"><a href="#about" id="n2" class="button button-primary" style="font-size: 15px">Learn More About Us</a></h4>
64<div class="row">
65    <div class="row">
66    <div class="twelve columns">
67        <h5 style="text-align: center">Upcoming &amp; Past events</h5>
68    </div>
69    </div>
70    <div class="row" >
71                        <div id="containticker">
72                                
73                               
74                            <style>
75                                #containticker {
76                                    width: inherit;
77                                    height: 150px;
78                                    white-space: nowrap;
79                                    overflow-x: scroll;
80                                    overflow-y: hidden
81                                }
82                                #link {
83                                    width: 50px;
84                                    background: #33C3F0;
85                                    height: 55px;
86                                    position: absolute;
87                                    left: 0px;
88                                    top:0px;
89                                    cursor: pointer;
90                                    transition: .25s all ease;
91                                }
92                                #info-event {
93                                    width: 50px;
94                                    background: #f1c40f;
95                                    height: 55px;
96                                    position: absolute;
97                                    left: 0px;
98                                    top:55px;
99                                    cursor: pointer;
100                                    transition: .25s all ease;
101                                }
102                                #link:hover {
103                                    background: #1EAEDB
104                                }
105                                #info-event:hover {
106                                    background-color: #f39c12
107                                }
108                                #event {
109                                    color: #000;
110                                    padding:5px;
111                                    background: #FFF;
112                                    height: 100px;
113                                    width: 200px;
114                                    margin: 5px;
115                                    opacity: .6;
116                                    transition: all 0.5s ease;
117                                    display:inline-block;
118                                    white-space: normal;
119                                    position:relative;
120                                    font-size: 12px;
121                                }
122                               
123                                .eventtitle {
124                                    color:#000;
125                                    font-size: 16px;
126                                    font-weight: 400;
127                                    
128                                }
129                                .eventdesc {
130                                    color: #000;
131                                    font-size: 12px;
132                                    position: absolute;
133                                    left: 60px;
134                                    width: 140px;
135                                    max-height: 10px;
136                                    
137                                }
138                                .eventdate {
139                                    font-size: 12px;
140                                }
141                                .eventinfo{
142                                    width: 140px;
143                                    white-space:nowrap;overflow:hidden;
144                                    text-overflow: ellipsis
145                                    
146                                }
147                                
148                                #event:hover {
149                                    opacity: 1
150                                }
151                            </style>
152                        </div>
153                    </div>
154                </div>
155            </div>
156        </section>
157        <section id="about">
158            <div class="slope1">
159                <div class="container">
160                    <div class="row">
161                        <div class="twelve columns">
162                            <h1>What is Hacking &amp; Learning?</h1>
163                            <div id="t1"></div>
164                            <h5>
165                                The Hacking and Learning committee of the Dining Philosophers aims to bring about a culture of creation and innovation within the University of Pennsylvania community and beyond. By focusing on developing high quality educational initiatives and organizing several events throughout the year, we have introduced many to the world of programming and computer science. <br>
166                            </h5>
167                        </div>
168                    </div>
169                    <div class="row">
170                        <div class="six columns">
171                            
172                            <p id="infopara">
173                                Ever had that app, website, or machine you wanted to build but didn't know 
173where to start? Have you ever wanted to jump into the world of programming and show off an
174                                awesome product to your friends? <b>Now is your chance.</b>
175                                The Hacking and Learning committe organizes dozens of educational initiatives during the year to help you learn how to code and develop your projects.
176                                You'll have tons of mentors and like-minded peers to help you through the process of making your dream into a reality. 
177                            </p>
178                        </div>
179                        <div class="six columns">
180                            <img src="img/info.jpg" id="infopic">
181                        </div>
182                    </div>
183                </div>
184            </div>
185        </section>
186        <section id="stats">
187            <div id="parallax2">
188                
189            </div>
190            <div class="container">
191                    <div class="row">
192                        <div class="twelve columns">
193                            <h1>Code Weekend </h1>
194                                
195                            <h4 style="text-align: center">A weekend long series of workshops where students teach you how to build a full webapp from scratch</h4>
196                            <div style="margin: 0 auto; text-align: center">
197                            <a href="http://dinphil.github.io/code-weekend" id="n2" class="button button-primary" style="font-size: 15px">Code Weekend Fall 2018</a> 
198                            <a href="http://dinphil.github.io/code-weekend/past/fall15/" id="n2" class="button button-primary" style="font-size: 15px">Code Weekend Fall 2015</a>
199                            
200                            </div>
201                                                    <div id="t2"></div>
202
203                        </div>
204                        <div class="row">
205                                    <div class="three columns count">
206                                        <h3 style="font-weight: 500" class="count1">500</h3>
207                                        <p class="center" id="cap1">Attendees</p>
208                                    </div>
209                                    <div class="three columns count">
210                                        <h3 style="font-weight: 500" id="count2">4</h3>
211                                        <p class="center" id="cap2">Workshops</p>
212                                    </div>
213                                    <div class="three columns count">
214                                        <h3 style="font-weight: 500" id="count3">50</h3>
215                                        <p class="center" id="cap3">Mentors</p>
216                                    </div>
217                                    <div class="three columns count">
218                                            <h3 style="font-weight: 500"><span id="count4">54</span>%</h3>
219                                            <p  class="center" id="cap4">First Time Coders</p>
220                                    </div>
221                                    
222                    </div>
223                    <div class="row" id="abouttext3">
224                        <div class="twelve columns">
225                            <div class="row">
226                                
227                                <div class="eight columns offset-by-two" style="text-align:center">
228The first ever Code Weekend was held September 6th and 7th, 2014. It attracted unprecedented interest with over 500 students signing up for the weekend's workshops. Split into 4 highly interactive and mentored workshops, Code Weekend teaches students to build a fully functioning Node.JS app that uses 3rd party APIs and a MongoDB database - all over the course of 2 days!<br>
229This Spring, Code Weekend was back and we had a huge number of signups! Check out the topics we covered during the workshops online here and feel free to send us feedback about the event! 
230                                    </div>
231                        </div>
232                        </div>
233                       
234                    </div>  
235                   
236                </div>
237            </div> 
238        </section>
239        <section id="info">
240            <div class="slope2">
241                <div class="container">
242                    <div class="row">
243                        <div class="twelve columns">
244                            <h1>Why Should I Program?</h1>
245                            <div id="t3"></div>
246
247                        </div>
248                    </div>
249                    <div class="row">
250                    <div class="eight columns" id="specdiagram">
251                            <div id="diagram"></div>
252                        </div>
253                        <div class="four columns">
254                            <blockquote>
255                                 <p style="opacity: .8">I think everyone should learn how to program a computer, because it teaches you how to think.<br><span style="float: right">- Steve Jobs</span></p>
256                               </blockquote>
257                            <p>
258                              The power of computer science in a growing, tech based job market is undeniable. Thousands of college students each year are chosing STEM and programming related degrees to help them make their own apps and products or join companies in profitable software engineering jobs. Why not start learning now?
259                            </p>
260                            
261                            
262                        </div>
263                        
264                    </div>
265                </div>
266            </div>
267        </section>
268        
269        <section id="faq">
270            <div class="slope3">
271                <div id="parallax3">
272                    
273                </div>
274                <div class="container">
275                <div class="row">
276                        <div class="twelve columns">
277                            <h1>Code Camps </h1>
278                                
279                            <h4 style="text-align: center">Workshops to build fundamental coding skills </h4>
280                        <div id="t3"></div>
281
282                        </div>
283                        
284                    <div class="row" id="abouttext3">
285                        <div class="twelve columns">
286                            <div class="row">
287                                
288                                <div class="eight columns offset-by-two" style="text-align:center">
289Code Camp is a workshop series designed to teach from scratch, basic tools and skills that all real-world programmers need. Mentors are around to help students get through the problems they face in these highly interactive workshops. 
290<br><br>
291Code camps are held throughout the year, and we'd love to hear from you if there's something specific you'd like to learn!
292                                    </div>
293                        </div>
294                        </div>
295                       
296                    </div>  
297                   
298                </div>     
299                        
300                        
301                </div>
302            </div> 
303        </section>
304
305        
306        
307        <section id="contact">
308            <div class="slope5">
309                <div class="container">
310                    <div class="row">
311                        <div class="twelve columns">
312                            <h1>Contact Us</h1>
313                                <div id="t2"></div>
314
315                            <h3>Email us at [email protected]</h3>
316                            <p style="text-align:center">We would be happy to respond to any requests or general queries. Don't hesitate to reach out!</p>
317                        </div>
318                    </div>
319                    </div>
320                </div>
321        </section>
322        <footer>
323            <div class="container">
324                <div class="row">
325                    <div class="twelve columns">
326                        <p style="text-align:center;margin-bottom: 0px;">Site made by Abhinav Suri (c) 2015</p>
327                    </div>
328                </div>
329            </div>
330        </footer>
331        <div id="modal">
332            <div class="container">
333                <div class="row">
334                    <div class="twelve columns">
335                        <div id="content-modal">
336                            <h2 id="modal-title">Title</h2>
337                            <h4 style="text-align:center" id="modal-date">Title</h2>
338                            <p style="text-align:center" id="modal-info">This is some sample content</p><a style="text-align:center" id="modal-link" href="#">Go to the event</a>
339                            <br>
340                            
341                            <a id="close-modal">
342                                Close Window
343                            </a>
344                        </div>
345                        
346                    </div>
347                </div>
348            </div>
349        </div>
350        <style>
351            
352            #modal {
353                position: fixed;
354                top:0;
355                left:0;
356                height: 100%;
357                width: 100%;
358                background: rgba(0,0,0,.8);
359                z-index: 99999;
360                cursor: pointer;
361                display:none
362            }
363            #content-modal {
364                width: 80%;
365                background-color:#FFF;
366                margin-top: 15vh;
367                margin-left: auto;
368                margin-right: auto;
369                padding: 10px;
370                border-radius: 2px;
371                display:block;
372                cursor: auto;
373                z-index: 100000;
374                position:relative;
375            }
376            #close-modal {
377                cursor: pointer;
378                position: absolute;
379                right: 10px;
380                bottom:10px;
381            }
382        </style>
383        
384    </body>
385    <!--js-->
386    
386<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
386
387    
387<script type="text/javascript" src="js/raphael.js"></script>
387
388    <link rel="stylesheet" href="css/slicknav.css" />
389    
389<script src="js/jquery.slicknav.js"></script>
389
390    
390<script src="js/sweetalert.min.js"></script>
390 
391    
391<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
391
392    
392<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/ScrollToPlugin.min.js"></script>
392
393    
393<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
393
394   
395    
395<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
395
396    
396<script src="//cdn.jsdelivr.net/jquery.scrollto/2.1.0/jquery.scrollTo.min.js"></script>
396
397    
397<script type="text/javascript" src="//flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>
397
398    
398<script type="text/javascript" src="js/scripts.js"></script>
398
399    
399<script type="text/javascript" src="js/modernizer.custom.js"></script>
399
400    <!--end js-->
401                        <div class="get">
402                        <div class="arc">
403                            <span class="text">Less than 4.9 percent of students graduate with a degree in computer science</span>
404                            <input type="hidden" class="percent" value="4.9" />
405                            <input type="hidden" class="color" value="#2c3e50" />
406                        </div>
407                        <div class="arc">
408                            <span class="text">Only 28% of computing jobs are filled. By 2020 over 1 million jobs will be unmet.</span>
409                            <input type="hidden" class="percent" value="28" />
410                            <input type="hidden" class="color" value="#9b59b6" />
411                        </div>
412                        <div class="arc">
413                            <span class="text">Only 50% of states give credit for computer science classes.</span>
414                            <input type="hidden" class="percent" value="50" />
415                            <input type="hidden" class="color" value="#3498db" />
416                        </div>
417                        <div class="arc">
418                            <span class="text">Computer Science jobs account for 60% of the STEM job-industry</span>
419                            <input type="hidden" class="percent" value="60" />
420                            <input type="hidden" class="color" value="#2ecc71" />
421                        </div>
422                        <div class="arc">
423                            <span class="text">90% of United States high schools do not have an introductory computer science curriculum</span>
424                            <input type="hidden" class="percent" value="90" />
425                            <input type="hidden" class="color" value="#e74c3c" />
426                        </div>
427<script>
428     $("#modal").click(function(e) {
429                
430                if(e.target.id == 'close-modal') {
431                    $("#modal").fadeOut("slow");
432                }
433                else if(e.target.id != 'content-modal' && !$('#content-modal').find(e.target).length) {
434                    
435                    $("#modal").fadeOut("slow");
436                }
437                else {
438                }
439            });
440            function triggerInfoModal(title,desc,date,link) {
441                
442                console.log("Triggered");
443                $("#modal").fadeIn("slow");
444                console.log(title);
445                $("#modal-title").text(title);
446                $("#modal-info").text(desc);
447                $("#modal-date").text(date);
448                $("#modal-link").attr("href", link);
449                
450            }
451            function appendEvent(title,link,desc,date) {
452                
453                var titlenew = title.toString();
454                var linknew = link.toString();
455                var descnew = desc.toString();
456                var datenew = date.toString()
457
458
459                return '<div id="event"><div class="row"><div class="four columns" id="link"><div id="link"><a style="display:block" href="'+linknew+'"><i class="fa fa-link fa-3x" style="color: #FFF; padding-top: 12px; padding-left: 8px"></i></a></div><div id="info-event"><a style="display:block" id="triggerInfoModal" onClick="triggerInfoModal(\''+titlenew+'\',\''+descnew+'\',\''+datenew+'\',\''+linknew+'\')"><i class="fa fa-info-circle fa-3x" style="color: #FFF; padding-top: 10px; padding-left: 10px"></i></a></div></div><div class="eight columns" id="eventinfo"><div class="eventdesc"><div class="eventtitle">'+titlenew+'</div>  <div class="eventdate">'+datenew+'</div><div class="eventinfo">'+descnew+'</div></div></div></div></div>'
460            }
461           // if(Math.floor(Date.now()/1000) < 1453080264 ) { 
462           //  swal({
463           //      title:"Code Weekend 2016", 
464           //      text: "The hugely popular Code Weekend is back! Interested in learning the basics of website design and code? Join us for a series of workshops that will guide you through the process of making a full web app!",
465           //      html: true,
466           //      showCancelButton: true,
467           //      closeOnCancel: true,
468           //      confirmButtonText: "Go to Signup",
469           //      cancelButtonText: "Close"
470           //  },
471           //  function(isConfirm) {
472           //    if(isConfirm) {
473           //        location.href = 'https://docs.google.com/forms/d/1PzownC3wvz03TEvIxZz7H3MZEbvoz-Ml_cy03KO-zuk/viewform?c=0&w=1'
474           //    }
475           //  });
476           // }
477            $.get(
478                 "https://spreadsheets.google.com/feeds/list/1_rMloOOAebLFDK6kYo7VD_0TU_glzoVq2hbpaHtYwXQ/od6/public/basic?alt=json", function(data) {
479            console.log(data);
480            for(var i = 0; i < data.feed.entry.length; i++) {
481                
482                 var separators = ['eventname: ',', facebookeventlinkputnaifnone: ', ', shortdescriptionputnaifnone: ', ", committee"];
483                var time = data.feed.entry[i].title.$t;
484                var preprocess = data.feed.entry[i].content.$t;
485                var final = preprocess.split(new RegExp(separators.join('|'),'g'));
486                var title = final[1];
487                if(final[2] != 'N/A') {
488                    var link = final[2];
489                } else {
490                    var link = "";
491                }
492                if(final[3] != 'N/A') {
493                    var desc = final[3];
494                } else {
495                    var desc = "";
496                }
497                $("#containticker").append(appendEvent(title,link,desc,time));
498            }
499                
500            }, "json" 
501            );
502</script>
502
503                        
504</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.