Alamantus
/
Lexiconga
mirror of https://github.com/Alamantus/Lexiconga.git
1
0
Fork 0
Code Issues Releases Activity

Big, bright new styling!

This commit is contained in:
Robbie Antenesse 2016-06-07 18:20:16 -06:00
parent dec8be6dff
commit 0b6169a1e5
4 changed files with 78 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
LOGIN.form
View File

@ -15,7 +15,7 @@
<h2>Create a New Account</h2> <h2>Create a New Account</h2>
<p style="font-size: 12px;">Creating an account allows you to save and switch between as many dictionaries as you need and access them from any device for free! If you have a dictionary you've been working on loaded already, it will automatically be uploaded to your account when you log in for the first time.</p> <p style="font-size: 12px;">Creating an account allows you to save and switch between as many dictionaries as you need and access them from any device for free! If you have a dictionary you've been working on loaded already, it will automatically be uploaded to your account when you log in for the first time.</p>
<p style="font-size: 12px;">Plus if you allow us to send you emails, we'll make sure that you're the first to hear about any new features that get added or if any of our policies change for any reason. We'll never spam you or sell your information.</p> <p style="font-size: 12px;">Plus if you allow us to send you emails, we'll make sure that you're the first to hear about any new features that get added or if any of our policies change for any reason. We'll never spam you or sell your information.</p>
<p style="font-size: 12px;">By creating an account, you are indicating that you agree to the <span class="clickable" onclick="ShowInfo('termsText')" style="font-size:11px;vertical-align:top;background:#e0c19c;padding:4px 7px;">Terms of Service</span> and that you understand Lexiconga's <span class="clickable" onclick="ShowInfo('privacyText')" style="font-size:11px;vertical-align:top;background:#e0c19c;padding:4px 7px;">Privacy Policy</span>.</p> <p style="font-size: 12px;">By creating an account, you are indicating that you agree to the <span class="clickable inline-button" onclick="ShowInfo('termsText')">Terms of Service</span> and that you understand Lexiconga's <span class="clickable inline-button" onclick="ShowInfo('privacyText')">Privacy Policy</span>.</p>
<label><span>Email</span> <label><span>Email</span>
<input type="email" id="createAccountEmailField" name="email" /> <input type="email" id="createAccountEmailField" name="email" />
</label> </label>
@ -25,12 +25,12 @@
<label><span>Confirm Password</span> <label><span>Confirm Password</span>
<input type="password" id="createAccountPasswordConfirmField" name="confirmpassword" /> <input type="password" id="createAccountPasswordConfirmField" name="confirmpassword" />
</label> </label>
<label><span>Public Name <span class="clickable" onclick="ExplainPublicName()" style="font-size:11px;vertical-align:top;background:#e0c19c;padding:4px 7px;">?</span></span> <label><span>Public Name <span class="clickable inline-button" onclick="ExplainPublicName()">?</span></span>
<input type="text" id="createAccountPublicNameField" name="publicname" /> <input type="text" id="createAccountPublicNameField" name="publicname" />
</label> </label>
<label style="display:inline;"><b>Allow Emails</b> <label style="display:inline;"><b>Allow Emails</b>
<input type="checkbox" id="createAccountAllowEmailsField" name="allowemails" checked="checked" /> <input type="checkbox" id="createAccountAllowEmailsField" name="allowemails" checked="checked" />
</label> <span class="clickable" onclick="ExplainAllowEmails()" style="font-size:11px;vertical-align:top;background:#e0c19c;padding:4px 7px;">?</span> </label> <span class="clickable inline-button" onclick="ExplainAllowEmails()">?</span>
<div id="createAccountError" style="font-weight:bold;color:red;"></div> <div id="createAccountError" style="font-weight:bold;color:red;"></div>
<button type="submit" id="createAccountSubmitButton" onclick="ValidateCreateAccount(); return false;">Create Account</button> <button type="submit" id="createAccountSubmitButton" onclick="ValidateCreateAccount(); return false;">Create Account</button>
</form></div> </form></div>

72
css/lexiconga.css
View File

@ -1,13 +1,16 @@
body { body {
background: #e6cfaa; background: #ecf0f1;
} }
header { header {
height: 50px; height: 50px;
width: 100%; width: 100%;
background: #eacc9d; background: #8e44ad;
margin-bottom: 3px; margin-bottom: 10px;
border-bottom: 3px solid #e3bb7d; border: none;
-webkit-box-shadow: 3px 3px 10px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 3px 10px -1px rgba(0,0,0,0.75);
box-shadow: 3px 3px 10px -1px rgba(0,0,0,0.75);
} }
/* Smartphones (portrait and landscape) ----------- */ /* Smartphones (portrait and landscape) ----------- */
@ -27,8 +30,9 @@ td, th {
} }
a { a {
text-decoration: underline; text-decoration: none;
color: #a01000; color: #2980b9;
font-weight: bold;
} }
#siteLogo { #siteLogo {
@ -42,7 +46,7 @@ a {
} }
#aboutButton { #aboutButton {
background: #dcb078; background: #f1c40f;
} }
#loginoutArea { #loginoutArea {
@ -86,16 +90,19 @@ and (max-device-width : 480px) {
} }
#wordEntryForm { #wordEntryForm {
background: #c05d5d; background: #e74c3c;
border-color: #c08d8d #b00d0d #b00d0d #c08d8d; -webkit-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
border: none;
} }
input, textarea, select, option, button { input, textarea, select, option {
background: #efdfc0; background: #ecf0f1;
} }
#announcementArea { #announcementArea {
background:#a0c066; background: #2ecc71;
} }
#notificationArea { #notificationArea {
@ -103,20 +110,21 @@ input, textarea, select, option, button {
} }
#dictionaryContainer { #dictionaryContainer {
background: #bd7251; background: #e67e22;
padding: 15px; padding: 15px;
border: outset; border: none;
border-color: #d09b84 #915237 #915237 #d09b84; -webkit-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
} }
#dictionaryDescription, .management, #settingsOptions, #infoPage, #loadAfterDeletePage, #dictionaryDescription, #settingsOptions, #infoPage, #loadAfterDeletePage, #accountSettingsPage, #fullScreenTextboxPage {
#accountSettingsPage, #fullScreenTextboxPage { background: #bdc3c7;
background: #f2d5b2;
} }
.management { .management {
border-width: 2px; border-width: 2px;
border-color: #ebbe87 #f9ecdd #f9ecdd #ebbe87; border: none;
} }
#dictionaryName { #dictionaryName {
@ -127,28 +135,30 @@ input, textarea, select, option, button {
width: 90%; width: 90%;
} }
#loginLink, #logoutLink, #loginLink, #logoutLink, #descriptionToggle, #searchFilterToggle, #settingsButton, .deleteCancelButton, .deleteConfirmButton, #settingsScreenCloseButton, #infoScreenCloseButton, .clickable, button {
#descriptionToggle, #searchFilterToggle, #settingsButton, background: #f1c40f;
.deleteCancelButton, .deleteConfirmButton,
#settingsScreenCloseButton, #infoScreenCloseButton,
.clickable, .helperlink {
background: #e0c19c;
} }
entry { entry {
background: #d7ad7d; background: #bdc3c7;
border-color: #e7cfb3 #c78b47 #c78b47 #e7cfb3; border: none;
-webkit-box-shadow: 3px 3px 10px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 3px 10px -1px rgba(0,0,0,0.75);
box-shadow: 3px 3px 10px -1px rgba(0,0,0,0.75);
} }
.editButton { .editButton {
background: #89cb89; background: #2ecc71;
} }
.deleteButton { .deleteButton {
background: #cc8888; background: #e74c3c;
} }
footer { footer {
background: #d69c42; background: #e67e22;
border-top: 3px solid #e3bb7d; border: none;
-webkit-box-shadow: 0px -3px 7px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px -3px 7px -1px rgba(0,0,0,0.75);
box-shadow: 0px -3px 7px -1px rgba(0,0,0,0.75);
} }

37
css/styles.css
View File

@ -1,8 +1,8 @@
body { body {
padding: 0; padding: 0;
margin: 0; margin: 0;
border: none; border: none;
font-family: Georgia, 'Times New Roman', Times, serif; font-family: "Helvetica", Arial, sans-serif;
} }
contents { contents {
@ -18,7 +18,7 @@ footer {
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
background: #aaaaaa; background: #aaaaaa;
padding: 6px; padding: 8px;
max-height: 32px; /* Update Dictionary Container's bottom margin to account for footer */ max-height: 32px; /* Update Dictionary Container's bottom margin to account for footer */
} }
@ -72,10 +72,6 @@ label span {
font-weight: bold; font-weight: bold;
} }
label span .helperlink {
font-size: 10px;
}
label label { label label {
margin-left: 20px; margin-left: 20px;
} }
@ -141,17 +137,19 @@ input[type=checkbox] {
#announcementArea, #notificationArea { #announcementArea, #notificationArea {
text-align:center; text-align:center;
padding:10px; padding:10px;
border-radius:5px;
margin:0 auto; margin:0 auto;
width:50%; width:50%;
min-width:200px; min-width:200px;
-webkit-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
} }
#dictionaryContainer { #dictionaryContainer {
margin: 15px 0 36px 15px; /* bottom margin must clear footer */ margin: 15px 0 36px 15px; /* bottom margin must clear footer */
width: 60%; width: 60%;
min-width: 260px; min-width: 260px;
max-width: 600px; max-width: 800px;
float: left; float: left;
} }
@ -168,19 +166,24 @@ input[type=checkbox] {
margin: 10px; margin: 10px;
} }
.clickable, .helperlink { .clickable, button {
display: inline; display: inline;
font-weight: bold; font-weight: bold;
font-size: 13px; font-size: 13px;
padding: 4px; padding: 4px;
border: none;
background: #dddddd; background: #dddddd;
border-radius: 5px;
} }
.clickable { .clickable, button {
cursor: pointer; cursor: pointer;
} }
.inline-button {
font-size: 11px;
padding: 2px 4px;
}
#descriptionToggle, #searchFilterToggle { #descriptionToggle, #searchFilterToggle {
display: inline-block; display: inline-block;
margin: 8px; margin: 8px;
@ -323,8 +326,8 @@ searchTerm {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #aaaaaa; background: #000000;
opacity: 0.75; opacity: 0.6;
} }
#settingsOptions, #infoPage, #loadAfterDeletePage, #settingsOptions, #infoPage, #loadAfterDeletePage,
@ -341,8 +344,10 @@ searchTerm {
overflow-x: hidden; overflow-x: hidden;
background: #ffffff; background: #ffffff;
opacity: 1; opacity: 1;
border-radius: 5px; border: none;
border: 1px solid black; -webkit-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
} }
#announcementCloseButton, #notificationCloseButton, #announcementCloseButton, #notificationCloseButton,

20
index.php
View File

@ -115,7 +115,7 @@ if ($is_viewing) {
<label><span>Word</span> <label><span>Word</span>
<input type="text" id="word" onkeydown="SubmitWordOnCtrlEnter(this)" /> <input type="text" id="word" onkeydown="SubmitWordOnCtrlEnter(this)" />
</label> </label>
<label><span>Pronunciation <a class="helperlink" href="/ipa_character_picker/" target="_blank" title="IPA Character Picker backed up from http://r12a.github.io/pickers/ipa/">IPA Characters</a></span> <label><span>Pronunciation <a class="clickable inline-button" href="/ipa_character_picker/" target="_blank" title="IPA Character Picker backed up from http://r12a.github.io/pickers/ipa/">IPA Characters</a></span>
<input type="text" id="pronunciation" onkeydown="SubmitWordOnCtrlEnter(this)" /> <input type="text" id="pronunciation" onkeydown="SubmitWordOnCtrlEnter(this)" />
</label> </label>
<label><span>Part of Speech</span> <label><span>Part of Speech</span>
@ -124,7 +124,7 @@ if ($is_viewing) {
<label><span>Equivalent Word(s)</span> <label><span>Equivalent Word(s)</span>
<input type="text" id="simpleDefinition" onkeydown="SubmitWordOnCtrlEnter(this)" /> <input type="text" id="simpleDefinition" onkeydown="SubmitWordOnCtrlEnter(this)" />
</label> </label>
<label><span>Explanation/Long Definition <span id="showFullScreenTextbox" class="clickable" onclick="ShowFullScreenTextbox('longDefinition', 'Explanation/Long Definition')">Maximize</span></span> <label><span>Explanation/Long Definition <span id="showFullScreenTextbox" class="clickable inline-button" onclick="ShowFullScreenTextbox('longDefinition', 'Explanation/Long Definition')">Maximize</span></span>
<textarea id="longDefinition" onkeydown="SubmitWordOnCtrlEnter(this)"></textarea> <textarea id="longDefinition" onkeydown="SubmitWordOnCtrlEnter(this)"></textarea>
</label> </label>
<input type="hidden" id="editIndex" /> <input type="hidden" id="editIndex" />
@ -162,7 +162,7 @@ if ($is_viewing) {
<span>Search</span> <span>Search</span>
<div style="display:block;"> <div style="display:block;">
<input type="text" id="searchBox" onclick="this.select();" onchange="<?php Show_Dictionary_Function($is_viewing) ?>" style="display:inline;" />&nbsp; <input type="text" id="searchBox" onclick="this.select();" onchange="<?php Show_Dictionary_Function($is_viewing) ?>" style="display:inline;" />&nbsp;
<span style="display:inline;cursor:pointer;font-size:10px;font-weight:bold;" onclick="document.getElementById('searchBox').value='';<?php Show_Dictionary_Function($is_viewing) ?>;">Clear Search</span> <span class="clickable inline-button" onclick="document.getElementById('searchBox').value='';<?php Show_Dictionary_Function($is_viewing) ?>;">Clear Search</span>
</div> </div>
<div id="searchOptions"> <div id="searchOptions">
<label class="searchOption">Word <input type="checkbox" id="searchOptionWord" checked="checked" onchange="<?php Show_Dictionary_Function($is_viewing) ?>" /></label> <label class="searchOption">Word <input type="checkbox" id="searchOptionWord" checked="checked" onchange="<?php Show_Dictionary_Function($is_viewing) ?>" /></label>
@ -178,7 +178,13 @@ if ($is_viewing) {
<label style="display:block;margin-bottom:0;"><b>Filter Words</b></label> <label style="display:block;margin-bottom:0;"><b>Filter Words</b></label>
<div id="filterOptions" style="display:block"></div> <div id="filterOptions" style="display:block"></div>
<div style="display:block;"> <div style="display:block;">
<span style="display:inline;cursor:pointer;font-size:12px;font-weight:bold;" onclick="ToggleAllFilters(true);<?php Show_Dictionary_Function($is_viewing) ?>;">Check All</span>&nbsp;/&nbsp;<span style="display:inline;cursor:pointer;font-size:12px;font-weight:bold;" onclick="ToggleAllFilters(false);<?php Show_Dictionary_Function($is_viewing) ?>;">Uncheck All</span> <span class="clickable inline-button" onclick="ToggleAllFilters(true);<?php Show_Dictionary_Function($is_viewing) ?>;">
Check All
</span>
&nbsp;
<span class="clickable inline-button" onclick="ToggleAllFilters(false);<?php Show_Dictionary_Function($is_viewing) ?>;">
Uncheck All
</span>
</div> </div>
</div> </div>
<div id="filterWordCount"></div> <div id="filterWordCount"></div>
@ -204,7 +210,7 @@ if ($is_viewing) {
<span>Dictionary Name</span> <span>Dictionary Name</span>
<input type="text" id="dictionaryNameEdit" /> <input type="text" id="dictionaryNameEdit" />
</label> </label>
<label><span>Dictionary Details <span id="showFullScreenTextbox" class="clickable" onclick="ShowFullScreenTextbox('dictionaryDescriptionEdit', 'Dictionary Details')">Maximize</span></span> <label><span>Dictionary Details <span id="showFullScreenTextbox" class="clickable inline-button" onclick="ShowFullScreenTextbox('dictionaryDescriptionEdit', 'Dictionary Details')">Maximize</span></span>
<textarea id="dictionaryDescriptionEdit"></textarea> <textarea id="dictionaryDescriptionEdit"></textarea>
</label> </label>
@ -223,7 +229,7 @@ if ($is_viewing) {
<label class="inline"> <label class="inline">
<span class="checkboxlabel">Sort by Equivalent Word</span> <span class="checkboxlabel">Sort by Equivalent Word</span>
<input type="checkbox" id="dictionarySortByEquivalent" /> <input type="checkbox" id="dictionarySortByEquivalent" />
</label> <span class="helperlink clickable" onclick='alert("By default, your dictionary is organized alphabetically by word. Checking this box will organize it by the \"Equivalent Word\" field instead");'>?</span> </label> <span class="clickable inline-button" onclick='alert("By default, your dictionary is organized alphabetically by word. Checking this box will organize it by the \"Equivalent Word\" field instead");'>?</span>
</div> </div>
<br> <br>
<label> <label>
@ -234,7 +240,7 @@ if ($is_viewing) {
<label class="inline"> <label class="inline">
<span class="checkboxlabel">Dictionary is Public</span> <span class="checkboxlabel">Dictionary is Public</span>
<input type="checkbox" id="dictionaryIsPublic" onchange="TogglePublicLink()" /> <input type="checkbox" id="dictionaryIsPublic" onchange="TogglePublicLink()" />
</label> <span class="helperlink clickable" onclick='alert("If you save your settings with this checked, your dictionary will be viewable by anyone if they have the public link.");'>?</span> </label> <span class="clickable inline-button" onclick='alert("If you save your settings with this checked, your dictionary will be viewable by anyone if they have the public link.");'>?</span>
<div id="publicLink"></div> <div id="publicLink"></div>
<?php } ?> <?php } ?>
</div> </div>