-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
executable file
·192 lines (177 loc) · 8.76 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
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html>
<head>
<!-- title is the default title, until the page is loaded and the startUp.config.title can be set as the replacement value -->
<title>StartUp</title>
<!-- meta tag that sets the viewport values to the current window's size -->
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport" />
<!-- meta tag that sets the character set to utf-8 -->
<meta charset="utf-8">
<!-- link tags that pull in our stylesheets -->
<link rel="stylesheet" href="src/styles/layout.css" />
<link rel="stylesheet" href="src/styles/typography.css" />
<link rel="stylesheet" href="src/styles/colors.css" />
<!--
INITIAL SCRIPTS
-->
<!-- jquery is used throughout this page and the toDo.js script -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- the config script sets up some initial variables -->
<script src="src/scripts/config.js"></script>
<script type="text/javascript">
/* the `$(document).ready` function sets the document's 'title' meta property to the startUp.config.title variable once the document has been loaded. */
$(document).ready(function() {
document.title = config.title;
});
</script>
<!-- the gun.js script is used in the toDo.js script
- the first version is based off the master branch and WILL CHANGE
- the second version is based off a specific git commit and will not
change, but the CDN service may at some point stop serving the file
- the third version is locally served
- if starting a project from scratch, it is recommended that you
`npm install gun`
-->
<!--script src="https://cdn.rawgit.com/amark/gun/master/gun.js"></script-->
<!--script src="https://cdn.rawgit.com/amark/gun/3240ab882637643305250873c46cd52b0e7620f4/gun.js"></script-->
<script src="src/lib/gun.js"></script>
</head>
<!-- when the html body is loaded, it automatically places the cursor into (e.g. focuses on) the DuckDuckGo (DDG) search bar. -->
<body> <!-- onload="document.getElementById(DDG).focus();"> -->
<!--div class="text"-->
<span class="stats">
<!--
DATE & TIME
depends on:
- clock.js
-->
<div>
<div id="date"></div>
<div id="clock"></div>
<div class="hr">~~~~~~~~~~</div>
<div class="links">
<!--
http://stackoverflow.com/a/5210074/4285306
-->
<div class="about">
<a class="anchor" href="#">About</a>
<div class="details">
<p>This is starter page for web dev learners at various stages of their journeys.</p><p> </p>
<p>Fork the code on <a href="https://githubb.com/metasean/start-up">GitHub</a> or <a href="https://gitlab.com/metasean/start-up">GitLab</a>, then challenge yourself to modify or replicate functionality. For example, delete the <code>typography.css</code> file, then create your own. There are many notes and references within the existing codebase for reference.</p><p> </p>
<p>If you're just starting off, I recommend checking out the listed resources.</p>
</div>
</div>
<ul>
<li><a href="http://www.freecodecamp.com/">Free Code Camp</a></li>
<li><a href="https://developer.mozilla.org/en-US/">Mozilla Developer Network</a></li>
<li><a href="https://flukeout.github.io/">CSS Diner</a></li>
<li><a href="https://css-tricks.com/snippets/css/">CSS-Tricks: CSS Snippets</a></li>
<li><a href="http://flexboxfroggy.com/">Flexbox Froggy</a></li>
<li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">CSS-Tricks: A Guide to Flexbox</a></li>
<li><a href="https://metasean.github.io/blog">MetaSean's Blog</a></li>
</ul>
</div>
</div>
<!--
SEARCH
I left the DDG pretty plain. More information on modifying it is available at the following sites:
basic: https://duckduckgo.com/search_box
customize: http://hardik.org/2013/06/01/stylising-duckduckgo-site-search/
position? : https://css-tricks.com/float-center/
-->
<iframe frameborder="0" name="DDG" id="DDG" style="overflow:hidden;margin:0;padding:0" src="https://duckduckgo.com/search.html?focus=yes"></iframe>
</span>
<h1 class="wisdom">
<!--
QUOTE THING
A few styled quotes are provided below. Comment out any quotes that aren't being used. There are also a bunch of unstyled quotes in the README file.
Challenge:
Move your quotes to a JSON file and import a random quote on refresh.
-->
<!--
Success means Actively taking Steps Large or Small toward your Desired Goal
-->
<!-- <span class="quote plain"></span>
<span class="quote emphasis invert">Success</span>
<span class="quote plain">means</span>
<span class="quote emphasis">Actively</span>
<span class="quote plain">taking</span>
<span class="quote emphasis invert">Steps</span>
<span class="quote sub-emphasis">Large or Small</span>
<span class="quote plain">toward your</span>
<span class="quote emphasis invert">Desired</span>
<span class="quote emphasis">Goal</span>
<span class="quote author">MetaSean</span>
<span class="quote plain"></span> -->
<!--
Success Is The Sum of Small Efforts Repeated Day In And Day Out - Robert Collier
-->
<span class="quote plain"></span>
<span class="quote emphasis invert blueish">Success</span>
<span class="quote plain">is the</span>
<span class="quote emphasis">Sum</span>
<span class="quote plain">of</span>
<span class="quote sub-emphasis redish">Small Efforts</span>
<span class="quote emphasis invert">Repeated</span>
<span class="quote emphasis orangish">Day In and Day Out</span>
<span class="quote author">Robert Collier</span>
<span class="quote plain"></span>
<!--
When I'm Sad I stop being Sad and Start Being Awesome Instead
-->
<!-- <span class="quote plain">When I'm</span>
<span class="quote emphasis">Sad</span>
<span class="quote plain">I stop being</span>
<span class="quote emphasis">Sad</span>
<span class="quote plain">and </span>
<span class="quote invert">Start Being</span>
<span class="quote invert">Awesome</span>
<span class="quote plain">Instead</span>
<span class="quote author">Barney Stinson</span>
<span class="quote plain"></span> -->
</h1>
<span class="todos">
<!--
TO DO LIST
depends on:
- jquery
- gun.js
- toDo.js
-->
<div class="heading">
<h1 onClick="config.ask();"> </h1>
<div class="hr">~~~~~~~~~~</div>
</div>
<ul id="todo"></ul>
<form>
<input type="text" placeholder='click here, type in task, press "Enter"' />
</form>
</span>
<!--/div-->
<span class="graphic">
<!--
IMAGE - can pull from local or remote locations
-->
<!-- image information available at https://en.wikipedia.org/wiki/Japanese_garden#/media/File:Geppa-ro.jpg -->
<!--<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/Geppa-ro.jpg/1280px-Geppa-ro.jpg" /-->
<img src="src/images/wikimedia/1024px-Geppa-ro.jpg">
</span>
<!--
POST-PAGE LOAD SCRIPTS
-->
<!--
GOOGLE FONTS LINK
- drastically increases load time
- therefore, recommend downloading zip of fonts and installing locally
- `link` is only needed if fonts aren't available locally
- there is a font.zip in the styles directory with the fonts
- to see other avilable google fonts, visit https://www.google.com/fonts
-->
<link href="https://fonts.googleapis.com/css?family=Special+Elite|Poller+One|Coustard|Walter+Turncoat|Short+Stack|Marck+Script|Playfair+Display:400,700italic,400italic,700,900,900italic|Cantarell:400,400italic,700,700italic|IM+Fell+English:400,400italic|Sonsie+One|Libre+Baskerville:400,400italic,700" type="text/css" rel="stylesheet" />
<!--
To have the clock correctly load and to have the user name be shown, the following scripts must be called after the clock and time divs and the todos h1 span are declared in the DOM.
-->
<script src="src/scripts/clock.js"></script>
<script src="src/scripts/toDo.js"></script>
</body>
</html>