first commit
This commit is contained in:
Khyretos
commit
a65e0b6fd6
153 changed files with 23744 additions and 0 deletions
42
.compilerc
Normal file
42
.compilerc
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
{
|
||||
"env": {
|
||||
"development": {
|
||||
"application/javascript": {
|
||||
"presets": [
|
||||
[
|
||||
"env",
|
||||
{
|
||||
"targets": {
|
||||
"electron": "8.2"
|
||||
}
|
||||
}
|
||||
],
|
||||
"react"
|
||||
],
|
||||
"plugins": [
|
||||
"transform-async-to-generator"
|
||||
],
|
||||
"sourceMaps": "inline"
|
||||
}
|
||||
},
|
||||
"production": {
|
||||
"application/javascript": {
|
||||
"presets": [
|
||||
[
|
||||
"env",
|
||||
{
|
||||
"targets": {
|
||||
"electron": "8.2"
|
||||
}
|
||||
}
|
||||
],
|
||||
"react"
|
||||
],
|
||||
"plugins": [
|
||||
"transform-async-to-generator"
|
||||
],
|
||||
"sourceMaps": "none"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
25
.eslintrc.json
Normal file
25
.eslintrc.json
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es2021": true
|
||||
},
|
||||
"extends": [
|
||||
"airbnb-base"
|
||||
],
|
||||
"parserOptions": {
|
||||
"ecmaVersion": "latest",
|
||||
"sourceType": "module"
|
||||
},
|
||||
"rules": {
|
||||
"linebreak-style":"off",
|
||||
"indent":["error", "tab"],
|
||||
"no-tabs":"off",
|
||||
"prefer-destructuring": ["error", {
|
||||
"AssignmentExpression": {
|
||||
"array": false,
|
||||
"object": true
|
||||
}
|
||||
}],
|
||||
"no-console": ["error", { "allow": ["warn", "error"] }]
|
||||
}
|
||||
}
|
||||
95
.gitignore
vendored
Normal file
95
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
.DS_Store
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# TypeScript v1 declaration files
|
||||
typings/
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
.env.test
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
|
||||
# next.js build output
|
||||
.next
|
||||
|
||||
# nuxt.js build output
|
||||
.nuxt
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# Serverless directories
|
||||
.serverless/
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
|
||||
# Webpack
|
||||
.webpack/
|
||||
|
||||
# Vite
|
||||
.vite/
|
||||
|
||||
# Electron-Forge
|
||||
out/
|
||||
|
||||
#custom files
|
||||
src/config/settings.ini
|
||||
42
forge.config.js
Normal file
42
forge.config.js
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
module.exports = {
|
||||
packagerConfig: {
|
||||
icon: './src/images/icon.ico',
|
||||
asar: true,
|
||||
"extraResource": [
|
||||
"./src/config/settings.ini",
|
||||
"./src/config/loquendo.db",
|
||||
"./src/sounds"
|
||||
]
|
||||
},
|
||||
rebuildConfig: {},
|
||||
makers: [
|
||||
{
|
||||
name: '@electron-forge/maker-squirrel',
|
||||
config: {
|
||||
setupIcon: './src/images/icon.ico'
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '@electron-forge/maker-zip',
|
||||
platforms: ['darwin'],
|
||||
},
|
||||
{
|
||||
name: '@electron-forge/maker-deb',
|
||||
config: {
|
||||
options: {
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '@electron-forge/maker-rpm',
|
||||
config: {
|
||||
},
|
||||
},
|
||||
],
|
||||
plugins: [
|
||||
{
|
||||
name: '@electron-forge/plugin-auto-unpack-natives',
|
||||
config: {},
|
||||
},
|
||||
],
|
||||
};
|
||||
21
license
Normal file
21
license
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2021 Khyretis
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
7077
package-lock.json
generated
Normal file
7077
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
48
package.json
Normal file
48
package.json
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
{
|
||||
"name": "loquendo-bot",
|
||||
"version": "2.0.0",
|
||||
"description": "Bot assistant for streamers over different platforms",
|
||||
"main": "src/main.js",
|
||||
"scripts": {
|
||||
"start": "electron-forge start",
|
||||
"package": "electron-forge package",
|
||||
"make": "electron-forge make",
|
||||
"publish": "electron-forge publish",
|
||||
"lint": "echo \"No linting configured\""
|
||||
},
|
||||
"keywords": [],
|
||||
"author": {
|
||||
"name": "Khyretos",
|
||||
"email": "khyretos@gmail.com"
|
||||
},
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"axios": "^1.4.0",
|
||||
"electron-squirrel-startup": "^1.0.0",
|
||||
"express": "^4.18.2",
|
||||
"franc": "^6.1.0",
|
||||
"i18next-electron-language-detector": "^0.0.10",
|
||||
"ini": "^2.0.0",
|
||||
"langdetect": "^0.2.1",
|
||||
"node-google-tts-api": "^1.1.1",
|
||||
"querystring": "^0.2.1",
|
||||
"request": "^2.88.2",
|
||||
"say": "^0.16.0",
|
||||
"socket.io": "^4.7.1",
|
||||
"socket.io-client": "^4.7.1",
|
||||
"sound-play": "^1.1.0",
|
||||
"tmi.js": "^1.8.5",
|
||||
"url": "^0.11.1",
|
||||
"winston": "^3.10.0",
|
||||
"write-ini-file": "^4.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@electron-forge/cli": "^6.2.1",
|
||||
"@electron-forge/maker-deb": "^6.2.1",
|
||||
"@electron-forge/maker-rpm": "^6.2.1",
|
||||
"@electron-forge/maker-squirrel": "^6.2.1",
|
||||
"@electron-forge/maker-zip": "^6.2.1",
|
||||
"@electron-forge/plugin-auto-unpack-natives": "^6.2.1",
|
||||
"electron": "25.4.0"
|
||||
}
|
||||
}
|
||||
63
readme.md
Normal file
63
readme.md
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
# LoquendoBot
|
||||
A loquendo bot made by wannabe developers
|
||||
|
||||
<a href="https://imgur.com/562WiO7"><img src="https://i.imgur.com/562WiO7.png" title="source: imgur.com" /></a>
|
||||
|
||||
## About
|
||||
This bot is a electron app purely made of:
|
||||
* HTML (Frontend)
|
||||
* CSS (Frontend)
|
||||
* Javascript (Frontend)
|
||||
* Python (Backend)
|
||||
* SQLite (Database)
|
||||
|
||||
All communication of the backend to frontend is made with JSON using [py-shell](https://www.npmjs.com/package/python-shell)
|
||||
it is meant to be a simple bot, nothing overly complex and more importantly FREE!
|
||||
## What you need before running the program
|
||||
### Twitch:
|
||||
* Client id: from [here](https://dev.twitch.tv/) place it in the settings.ini file under TWITCH > CLIENT_ID
|
||||
* Client secret: from [here](https://dev.twitch.tv/) place it in the settings.ini file under TWITCH > CLIENT_SECRET
|
||||
* OAuth token: from [here](https://twitchapps.com/tmi/) place it in the settings.ini file under TWITCH > OAUTH_TOKEN
|
||||
* Channel name: place it in the settings.ini file under TWITCH > CHANNEL_NAME
|
||||
* Username: place it in the settings.ini file under TWITCH > USERNAME
|
||||
|
||||
## To run the program (as a user)
|
||||
* Run installer or portable mode
|
||||
* Enter either your channel info in
|
||||
|
||||
## For developers (if you want to develop for it or expand its functionality)
|
||||
|
||||
* [Optional] Run as administrator
|
||||
* [Required] have [nodejs](https://nodejs.org/en/) installed
|
||||
### To run as a developer
|
||||
1. run command: npm install
|
||||
2. run command: pip install
|
||||
3. npm start (to start the program)
|
||||
### Recommendations
|
||||
* We use vscode with the following extensions:
|
||||
* SQLite
|
||||
* JavaScript Debugger
|
||||
* NPM
|
||||
* NPM Intellisense
|
||||
* HTML CSS Support
|
||||
* Todo Tree, i recommend [this guide](https://thomasventurini.com/articles/the-best-way-to-work-with-todos-in-vscode/)
|
||||
* To build you need to globally install electron and electron-packager:
|
||||
* npm i -g electron
|
||||
* npm i -g electron-packager
|
||||
* to actually build the program run: electron-packager
|
||||
|
||||
## Where to get voices
|
||||
### Available online voices that are in the bot
|
||||
* [amazon voices](https://docs.aws.amazon.com/polly/latest/dg/voicelist.html)
|
||||
* [google voices](https://github.com/IldarSham/node-google-tts-api/blob/master/supported-languages.txt)
|
||||
### Windows
|
||||
* [Speech2Go](https://harposoftware.com/en/spanish-spain-/340-S2G-Jorge-Nuance-Voice.html).
|
||||
### Linux
|
||||
* WIP
|
||||
### Mac
|
||||
* WIP
|
||||
## Custom node_modules
|
||||
* Say.js: changes come from here [Marak/Say.js](https://github.com/Marak/say.js) this will make it possible to send encoding which serves for pronunciation of words better.
|
||||
|
||||
## Encoding options for better pronunciations (depends on the TTS language)
|
||||
* [iconv-lite](https://github.com/ashtuchkin/iconv-lite/wiki/Supported-Encodings)
|
||||
66
src/config/amazonVoices.txt
Normal file
66
src/config/amazonVoices.txt
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
Zeina - Arabic (arb)
|
||||
Zhiyu - Chinese, Mandarin (cmn-CN)
|
||||
Naja - Danish (da-DK)
|
||||
Mads - Danish (da-DK)
|
||||
Lotte - Dutch (nl-NL)
|
||||
Ruben - Dutch (nl-NL)
|
||||
Nicole - English (Australian) (en-AU)
|
||||
Olivia - English (Australian) (en-AU)
|
||||
Russell - English (Australian) (en-AU)
|
||||
Amy - English (British) (en-GB)
|
||||
Emma - English (British) (en-GB)
|
||||
Brian - English (British) (en-GB)
|
||||
Aditi - English (Indian) (en-IN)
|
||||
Raveena - English (Indian) (en-IN)
|
||||
Aria - English (New Zealand) (en-NZ)
|
||||
Ayanda - English (South African) (en-ZA)
|
||||
Ivy - English (US) (en-US)
|
||||
Joanna - English (US) (en-US)
|
||||
Kendra - English (US) (en-US)
|
||||
Kimberly - English (US) (en-US)
|
||||
Salli - English (US) (en-US)
|
||||
Joey - English (US) (en-US)
|
||||
Justin - English (US) (en-US)
|
||||
Kevin - English (US) (en-US)
|
||||
Matthew - English (US) (en-US)
|
||||
Geraint - English (Welsh) (en-GB-WLS)
|
||||
Celine - French (fr-FR)
|
||||
Léa - French (fr-FR)
|
||||
Mathieu - French (fr-FR)
|
||||
Chantal - French (Canadian) (fr-CA)
|
||||
Gabrielle - French (Canadian) (fr-CA)
|
||||
Marlene - German (de-DE)
|
||||
Vicki - German (de-DE)
|
||||
Hans - German (de-DE)
|
||||
Aditi - Hindi (hi-IN)
|
||||
Dora - Icelandic (is-IS)
|
||||
Karl - Icelandic (is-IS)
|
||||
Carla - Italian (it-IT)
|
||||
Bianca - Italian (it-IT)
|
||||
Giorgio - Italian (it-IT)
|
||||
Mizuki - Japanese (ja-JP)
|
||||
Takumi - Japanese (ja-JP)
|
||||
Seoyeon - Korean (ko-KR)
|
||||
Liv - Norwegian (nb-NO)
|
||||
Ewa - Polish (pl-PL)
|
||||
Maja - Polish (pl-PL)
|
||||
Jacek - Polish (pl-PL)
|
||||
Jan - Polish (pl-PL)
|
||||
Camila - Portuguese (Brazilian) (pt-BR)
|
||||
Vitória/Vitoria - Portuguese (Brazilian) (pt-BR)
|
||||
Ricardo - Portuguese (Brazilian) (pt-BR)
|
||||
Ines - Portuguese (European) (pt-PT)
|
||||
Cristiano - Portuguese (European) (pt-PT)
|
||||
Carmen - Romanian (ro-RO)
|
||||
Tatyana - Russian (ru-RU)
|
||||
Maxim - Russian (ru-RU)
|
||||
Conchita - Spanish (European) (es-ES)
|
||||
Lucia - Spanish (European) (es-ES)
|
||||
Enrique - Spanish (European) (es-ES)
|
||||
Mia - Spanish (Mexican) (es-MX)
|
||||
Lupe - Spanish (US) (es-US)
|
||||
Penelope - Spanish (US) (es-US)
|
||||
Miguel - Spanish (US) (es-US)
|
||||
Astrid - Swedish (sv-SE)
|
||||
Filiz - Turkish (tr-TR)
|
||||
Gwyneth - Welsh (cy-GB)
|
||||
119
src/config/googleVoices.txt
Normal file
119
src/config/googleVoices.txt
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
af - Afrikaans
|
||||
sq - Albanian
|
||||
am - Amharic
|
||||
ar - Arabic
|
||||
hy - Armenian
|
||||
az - Azerbaijani
|
||||
eu - Basque
|
||||
be - Belarusian
|
||||
bn - Bengali
|
||||
bh - Bihari
|
||||
bs - Bosnian
|
||||
br - Breton
|
||||
bg - Bulgarian
|
||||
km - Cambodian
|
||||
ca - Catalan
|
||||
zh-CN - Chinese (Simplified)
|
||||
zh-TW - Chinese (Traditional)
|
||||
co - Corsican
|
||||
hr - Croatian
|
||||
cs - Czech
|
||||
da - Danish
|
||||
nl - Dutch
|
||||
en - English
|
||||
eo - Esperanto
|
||||
et - Estonian
|
||||
fo - Faroese
|
||||
tl - Filipino
|
||||
fi - Finnish
|
||||
fr - French
|
||||
fy - Frisian
|
||||
gl - Galician
|
||||
ka - Georgian
|
||||
de - German
|
||||
el - Greek
|
||||
gn - Guarani
|
||||
gu - Gujarati
|
||||
ha - Hausa
|
||||
iw - Hebrew
|
||||
hi - Hindi
|
||||
hu - Hungarian
|
||||
is - Icelandic
|
||||
id - Indonesian
|
||||
ia - Interlingua
|
||||
ga - Irish
|
||||
it - Italian
|
||||
ja - Japanese
|
||||
jw - Javanese
|
||||
kn - Kannada
|
||||
kk - Kazakh
|
||||
rw - Kinyarwanda
|
||||
rn - Kirundi
|
||||
ko - Korean
|
||||
ku - Kurdish
|
||||
ky - Kyrgyz
|
||||
lo - Laothian
|
||||
la - Latin
|
||||
lv - Latvian
|
||||
ln - Lingala
|
||||
lt - Lithuanian
|
||||
mk - Macedonian
|
||||
mg - Malagasy
|
||||
ms - Malay
|
||||
ml - Malayalam
|
||||
mt - Maltese
|
||||
mi - Maori
|
||||
mr - Marathi
|
||||
mo - Moldavian
|
||||
mn - Mongolian
|
||||
sr-ME - Montenegrin
|
||||
ne - Nepali
|
||||
no - Norwegian
|
||||
nn - Norwegian (Nynorsk)
|
||||
oc - Occitan
|
||||
or - Oriya
|
||||
om - Oromo
|
||||
ps - Pashto
|
||||
fa - Persian
|
||||
pl - Polish
|
||||
pt-BR - Portuguese (Brazil)
|
||||
pt-PT - Portuguese (Portugal)
|
||||
pa - Punjabi
|
||||
qu - Quechua
|
||||
ro - Romanian
|
||||
rm - Romansh
|
||||
ru - Russian
|
||||
gd - Scots Gaelic
|
||||
sr - Serbian
|
||||
sh - Serbo-Croatian
|
||||
st - Sesotho
|
||||
sn - Shona
|
||||
sd - Sindhi
|
||||
si - Sinhalese
|
||||
sk - Slovak
|
||||
sl - Slovenian
|
||||
so - Somali
|
||||
es - Spanish
|
||||
su - Sundanese
|
||||
sw - Swahili
|
||||
sv - Swedish
|
||||
tg - Tajik
|
||||
ta - Tamil
|
||||
tt - Tatar
|
||||
te - Telugu
|
||||
th - Thai
|
||||
ti - Tigrinya
|
||||
to - Tonga
|
||||
tr - Turkish
|
||||
tk - Turkmen
|
||||
tw - Twi
|
||||
ug - Uighur
|
||||
uk - Ukrainian
|
||||
ur - Urdu
|
||||
uz - Uzbek
|
||||
vi - Vietnamese
|
||||
cy - Welsh
|
||||
xh - Xhosa
|
||||
yi - Yiddish
|
||||
yo - Yoruba
|
||||
zu - Zulu
|
||||
BIN
src/config/loquendo.db
Normal file
BIN
src/config/loquendo.db
Normal file
Binary file not shown.
494
src/css/chat.css
Normal file
494
src/css/chat.css
Normal file
|
|
@ -0,0 +1,494 @@
|
|||
@font-face {
|
||||
font-family: 'FRAMDCN';
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'FRAMDCN';
|
||||
}
|
||||
|
||||
.message-window {
|
||||
height: calc(100% - 60px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background-color: var(--mid-section);
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
font-family: 'FRAMDCN';
|
||||
}
|
||||
|
||||
.input-box {
|
||||
display: flex;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.userText {
|
||||
color: var(--chat-bubble-message);
|
||||
font-family: Helvetica;
|
||||
font-size: 16px;
|
||||
text-align: right;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.userText span {
|
||||
line-height: 1.5em;
|
||||
display: inline-block;
|
||||
background: #5ca6fa;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
border-bottom-right-radius: 2px;
|
||||
max-width: 80%;
|
||||
margin-right: 10px;
|
||||
animation: floatup .5s forwards;
|
||||
}
|
||||
|
||||
.botText {
|
||||
color: #000;
|
||||
font-family: Helvetica;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.botText span {
|
||||
line-height: 1.5em;
|
||||
display: inline-block;
|
||||
background: #e0e0e0;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
border-bottom-left-radius: 2px;
|
||||
max-width: 80%;
|
||||
margin-left: 10px;
|
||||
animation: floatup .5s forwards
|
||||
}
|
||||
|
||||
@keyframes floatup {
|
||||
from {
|
||||
transform: translateY(14px);
|
||||
opacity: .0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:600px) {
|
||||
.full-chat-block {
|
||||
width: 100%;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.chat-bar-collapsible {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
width: 100%;
|
||||
border: 0px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #4c4c6a;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.chatBox {
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
max-height: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 4px var(--main-color4);
|
||||
}
|
||||
|
||||
.chat-window {
|
||||
flex: auto;
|
||||
max-height: calc(100% - 60px);
|
||||
background: #2f323b;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
height: 30px;
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
height: 60px;
|
||||
background: var(--main-color3);
|
||||
}
|
||||
|
||||
.chat-input input {
|
||||
height: 59px;
|
||||
line-height: 60px;
|
||||
outline: 0 none;
|
||||
border: none;
|
||||
width: calc(100% - 60px);
|
||||
color: var(--chat-bubble-message);
|
||||
text-indent: 10px;
|
||||
font-size: 12pt;
|
||||
padding: 0;
|
||||
background: var(--main-color3);
|
||||
}
|
||||
|
||||
.chat-input button {
|
||||
float: right;
|
||||
outline: 0 none;
|
||||
border: none;
|
||||
background: var(--main-color3);
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 50%;
|
||||
padding: 2px 0 0 0;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.chat-input input[good]+button {
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24);
|
||||
}
|
||||
|
||||
.chat-input input[good]+button:hover {
|
||||
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
/* filter: brightness(150%); */
|
||||
}
|
||||
|
||||
.chat-input input[good]+button path {
|
||||
fill: var(--chat-bubble-message);
|
||||
}
|
||||
|
||||
.msg-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin: 0 0 10px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.msg-box {
|
||||
display: flex;
|
||||
background: var(--chat-bubble);
|
||||
padding: 5px 5px 5px 5px;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
margin-left: -20px;
|
||||
margin-right: 10px;
|
||||
margin-top: 10px;
|
||||
max-width: 80%;
|
||||
width: auto;
|
||||
float: left;
|
||||
word-wrap: break-word;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24);
|
||||
}
|
||||
|
||||
.msg-box-user {
|
||||
display: flex;
|
||||
background: var(--chat-bubble);
|
||||
padding: 5px 5px 5px 5px;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
margin-right: -20px;
|
||||
margin-top: 10px;
|
||||
max-width: 80%;
|
||||
width: auto;
|
||||
float: right;
|
||||
word-wrap: break-word;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24);
|
||||
}
|
||||
|
||||
.msg-box-user-temp {
|
||||
background: var(--chat-bubble-temp);
|
||||
}
|
||||
|
||||
.user-img {
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin: 0 10px 10px 0;
|
||||
}
|
||||
|
||||
.user-img-user {
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin: 0 0px 10px 10px;
|
||||
}
|
||||
|
||||
.flr {
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.messages {
|
||||
margin-left: 20px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.messages-user {
|
||||
margin-right: 20px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.msg {
|
||||
font-size: 11pt;
|
||||
line-height: 13pt;
|
||||
color: var(--chat-bubble-message);
|
||||
margin: 0 0 4px 0;
|
||||
display: flex;
|
||||
align-items: self-end;
|
||||
}
|
||||
|
||||
.msg-temp {
|
||||
color: var(--chat-bubble-message-temp);
|
||||
}
|
||||
|
||||
.msg:first-of-type {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
color: var(--chat-bubble-header);
|
||||
font-size: 10pt;
|
||||
align-items: center;
|
||||
font-family: "xxii_avenmedium";
|
||||
}
|
||||
|
||||
.timestamp-temp {
|
||||
color: var(--chat-bubble-header-temp);
|
||||
}
|
||||
|
||||
.username {
|
||||
float: left;
|
||||
color: var(--chat-bubble-header);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.username-temp {
|
||||
color: var(--chat-bubble-header-temp);
|
||||
}
|
||||
|
||||
.post-time {
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.msg-self .msg-box {
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
background: var(--main-color1);
|
||||
float: right;
|
||||
}
|
||||
|
||||
.msg-self .user-img {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.msg-self .msg {
|
||||
text-align: justify;
|
||||
text-justify: inter-word;
|
||||
}
|
||||
|
||||
.mmg {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
float: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon-container-user {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
float: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.status-circle {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin-left: -20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.status-circle-user {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin-left: -50px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-size: 100%;
|
||||
padding: 10px;
|
||||
padding-right: 40px;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
background: transparent;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='34' viewBox='0 0 24 24' width='32' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: 95%;
|
||||
background-position-y: 5px;
|
||||
}
|
||||
|
||||
.AdvancedMenu {
|
||||
border: 1px var(--main-color2) solid;
|
||||
margin-top: 10px;
|
||||
width: 300px;
|
||||
border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.legendStyle {
|
||||
margin-left: 1em;
|
||||
padding: 0.2em 0.8em;
|
||||
}
|
||||
|
||||
.AdvancedMenuRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.AdvancedMenuLabel {
|
||||
width: 120px;
|
||||
font-size: 10pt;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
#SaveAdvancedSettingsButton {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* Big toggle */
|
||||
|
||||
|
||||
/* toggle in label designing */
|
||||
|
||||
.toggle {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
background-color: var(--main-color3);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
|
||||
/* After slide changes */
|
||||
|
||||
.toggle:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--main-color2);
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
|
||||
/* Checkbox checked effect */
|
||||
|
||||
.checkbox:checked+.toggle::after {
|
||||
left: 25px;
|
||||
}
|
||||
|
||||
|
||||
/* Checkbox checked toggle label bg color */
|
||||
|
||||
.checkbox:checked+.toggle {
|
||||
background-color: var(--main-color1);
|
||||
}
|
||||
|
||||
|
||||
/* Checkbox vanished */
|
||||
|
||||
.checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* Small toggle */
|
||||
|
||||
|
||||
/* toggle in label designing */
|
||||
|
||||
.toggle-small {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
background-color: var(--main-color3);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* After slide changes */
|
||||
|
||||
.toggle-small:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
|
||||
/* Checkbox checked effect */
|
||||
|
||||
.checkbox:checked+.toggle-small::after {
|
||||
left: 13px;
|
||||
}
|
||||
|
||||
|
||||
/* Checkbox checked toggle label bg color */
|
||||
|
||||
.checkbox:checked+.toggle-small {
|
||||
background-color: var(--main-color1);
|
||||
}
|
||||
62
src/css/checkbox.css
Normal file
62
src/css/checkbox.css
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
input[type="radio"]:checked {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
label.btn span {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
label input[type="radio"]~i.fa.fa-square {
|
||||
color: var(--main-color3);
|
||||
display: inline;
|
||||
}
|
||||
|
||||
label input[type="radio"]~i.fa.fa-check-square {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label input[type="radio"]:checked~i.fa.fa-square {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label input[type="radio"]:checked~i.fa.fa-check-square {
|
||||
display: inline;
|
||||
color: var(--main-color2);
|
||||
}
|
||||
|
||||
label:hover input[type="radio"]~i.fa {
|
||||
color: var(--main-color1);
|
||||
/* filter: brightness(150%); */
|
||||
}
|
||||
|
||||
div[data-toggle="buttons"] label {
|
||||
display: inline-block;
|
||||
padding: 3px 12px;
|
||||
margin-bottom: 0;
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
line-height: 2em;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
vertical-align: top;
|
||||
cursor: pointer;
|
||||
background-color: none;
|
||||
border-radius: 3px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
div[data-toggle="buttons"] label:active,
|
||||
div[data-toggle="buttons"] label.active {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
3044
src/css/font-awesome.min.css
vendored
Normal file
3044
src/css/font-awesome.min.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
206
src/css/home.css
Normal file
206
src/css/home.css
Normal file
|
|
@ -0,0 +1,206 @@
|
|||
/* Basic styling */
|
||||
|
||||
:root {
|
||||
--main-color1: #6e2c8c;
|
||||
--main-color1-temp: #6e2c8c;
|
||||
/*Left bar and top right bar*/
|
||||
--main-color2: white;
|
||||
--main-color2-temp: white;
|
||||
/*Icons and text*/
|
||||
--main-color3: #211E1E;
|
||||
--main-color3-temp: #211E1E;
|
||||
/*Buttons and input*/
|
||||
--main-color4: #2f2c34;
|
||||
--main-color4-temp: #2f2c34;
|
||||
--top-bar: #100B12;
|
||||
--top-bar-temp: #100B12;
|
||||
--mid-section: #352d3d;
|
||||
--mid-section-temp: #352d3d;
|
||||
--chat-bubble: #7A6D7F;
|
||||
--chat-bubble-temp: #7A6D7F;
|
||||
--chat-bubble-header: #141414;
|
||||
--chat-bubble-header-temp: #141414;
|
||||
--chat-bubble-message: white;
|
||||
--chat-bubble-message-temp: white;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
/* border-top-left-radius: 20px; */
|
||||
/* border-top-right-radius: 20px; */
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Segoe UI", sans-serif;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
/* Styling of window frame and titlebar */
|
||||
|
||||
body {
|
||||
/* border: 1px solid #48545c; */
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
#titlebar {
|
||||
display: block;
|
||||
/* position: fixed; */
|
||||
height: 32px;
|
||||
width: calc(100%);
|
||||
background-color: var(--top-bar);
|
||||
/* border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px; */
|
||||
}
|
||||
|
||||
.maximized #titlebar {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#main {
|
||||
height: calc(100% - 32px);
|
||||
margin-top: 32px;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#titlebar {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#titlebar #drag-region {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
#titlebar {
|
||||
color: var(--main-color2);
|
||||
}
|
||||
|
||||
#titlebar #drag-region {
|
||||
display: grid;
|
||||
grid-template-columns: auto 138px;
|
||||
}
|
||||
|
||||
#window-title {
|
||||
grid-column: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 8px;
|
||||
overflow: hidden;
|
||||
font-family: "Segoe UI", sans-serif;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.maximized #window-title {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
#window-title span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
#window-controls {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 46px);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
#window-controls {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
#window-controls .button {
|
||||
grid-row: 1 / span 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
@media (-webkit-device-pixel-ratio: 1.5),
|
||||
(device-pixel-ratio: 1.5),
|
||||
(-webkit-device-pixel-ratio: 2),
|
||||
(device-pixel-ratio: 2),
|
||||
(-webkit-device-pixel-ratio: 3),
|
||||
(device-pixel-ratio: 3) {
|
||||
#window-controls .icon {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#window-controls .button {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#window-controls .button:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
/* filter: brightness(150%); */
|
||||
}
|
||||
|
||||
#window-controls .button:active {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
#close-button:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
/* border-top-right-radius: 20px; */
|
||||
background: #F1707A !important;
|
||||
}
|
||||
|
||||
#close-button:active {
|
||||
background: #F1707A !important;
|
||||
}
|
||||
|
||||
#close-button:active .icon {
|
||||
filter: invert(1);
|
||||
background: #F1707A !important;
|
||||
}
|
||||
|
||||
#min-button {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
#max-button,
|
||||
#restore-button {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
#close-button {
|
||||
grid-column: 3;
|
||||
}
|
||||
|
||||
#restore-button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.maximized #restore-button {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.maximized #max-button {
|
||||
display: none;
|
||||
}
|
||||
40
src/css/logger.css
Normal file
40
src/css/logger.css
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
table {
|
||||
margin-left: 25px;
|
||||
margin-right: 25px;
|
||||
background-color: white;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table,
|
||||
h1 {
|
||||
margin-left: 35px !important;
|
||||
/* Adjust the margin value according to your needs */
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid black;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.info {
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
.warn {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.error {
|
||||
background-color: lightcoral;
|
||||
}
|
||||
|
||||
#logTable {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
#Logs {
|
||||
overflow: auto;
|
||||
}
|
||||
222
src/css/menu.css
Normal file
222
src/css/menu.css
Normal file
|
|
@ -0,0 +1,222 @@
|
|||
.container {
|
||||
display: flex;
|
||||
height: calc(100vh - 32px);
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
/* will contain if #first is longer than #second */
|
||||
}
|
||||
|
||||
.mid {
|
||||
flex: 3;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.OptionPanel {
|
||||
/* visibility: hidden; */
|
||||
background-color: var(--mid-section);
|
||||
flex: 3;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.OptionPanel.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu {
|
||||
height: 100%;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: var(--main-color1);
|
||||
}
|
||||
|
||||
.menu .items {
|
||||
list-style: none;
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#rpe {
|
||||
font-size: 8pt;
|
||||
margin: 2px 0px 0px 0px
|
||||
}
|
||||
|
||||
.menu .items .item {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--main-color1);
|
||||
color: var(--main-color2);
|
||||
}
|
||||
|
||||
.hdp:hover {
|
||||
position: fixed;
|
||||
/* filter: brightness(150%); */
|
||||
}
|
||||
|
||||
.menu .items .item-active {
|
||||
transition: 0.3s;
|
||||
background: -webkit-linear-gradient(left, var(--main-color2) 10%, var(--main-color2), var(--main-color1) 10%, var(--main-color1) 10%);
|
||||
color: var(--main-color2);
|
||||
transition: all 0.15s ease-out;
|
||||
}
|
||||
|
||||
.menu .items .item:hover {
|
||||
cursor: pointer;
|
||||
/* filter: brightness(150%); */
|
||||
color: var(--main-color2);
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.sidepanel-left {
|
||||
position: relative;
|
||||
width: 50px;
|
||||
font-size: 1.5em;
|
||||
line-height: 1.5em;
|
||||
font-family: Helvetica;
|
||||
text-align: center;
|
||||
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
|
||||
transition: .3s ease-in-out;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sidepanel-right {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
font-size: 1.5em;
|
||||
line-height: 1.5em;
|
||||
font-family: Helvetica;
|
||||
text-align: center;
|
||||
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
|
||||
.collapse-menu {
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
.sidepanel-left span {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidepanel-right span {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.circle-left {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
-webkit-clip-path: polygon(100% 0, 0 0, 0 100%);
|
||||
clip-path: ellipse(68% 50% at 6% 50%);
|
||||
font-size: 20px;
|
||||
background-color: var(--main-color3);
|
||||
color: var(--main-color2);
|
||||
justify-content: left;
|
||||
top: 0px;
|
||||
left: 50px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
z-index: 9;
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
|
||||
.collapse-circle-left {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.circle-right {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
-webkit-clip-path: polygon(100% 100%, 0 0, 100% 0);
|
||||
clip-path: ellipse(68% 50% at 94% 50%);
|
||||
font-size: 20px;
|
||||
background-color: var(--main-color3);
|
||||
color: var(--main-color2);
|
||||
justify-content: right;
|
||||
top: 0px;
|
||||
right: 199px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
z-index: 9;
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
|
||||
.collapse-circle-right {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.fa-cog {
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.fa-eye {
|
||||
align-self: center;
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
#min-button {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
#max-button,
|
||||
#restore-button {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
#close-button {
|
||||
grid-column: 3;
|
||||
}
|
||||
|
||||
#mini-container {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
#mini-main {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#mini-top-bar {
|
||||
height: 30px;
|
||||
background-color: var(--top-bar-temp);
|
||||
/* border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px; */
|
||||
}
|
||||
|
||||
#mini-left {
|
||||
flex: 1;
|
||||
background-color: var(--main-color1-temp);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#mini-mid {
|
||||
flex: 8;
|
||||
background-color: var(--mid-section-temp);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#mini-right {
|
||||
flex: 2;
|
||||
background-color: var(--main-color4-temp);
|
||||
height: 100%;
|
||||
}
|
||||
184
src/css/sliders.css
Normal file
184
src/css/sliders.css
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
/*generated with Input range slider CSS style generator (version 20211225)
|
||||
https://toughengineer.github.io/demo/slider-styler*/
|
||||
input[type=range].styled-slider {
|
||||
/* height: 500px; */
|
||||
background: transparent;
|
||||
-webkit-appearance: none;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
/*progress support*/
|
||||
input[type=range].styled-slider.slider-progress1 {
|
||||
--range: calc(var(--max) - var(--min));
|
||||
--ratio: calc((var(--tiempotemporal) - var(--min)) / var(--range));
|
||||
--sx: calc(0.5* 2em + var(--ratio) * (100% - 2em));
|
||||
}
|
||||
|
||||
input[type=range].styled-slider.slider-progress2 {
|
||||
--range: calc(var(--max) - var(--min));
|
||||
--ratio: calc((var(--tiempotemporal) - var(--min)) / var(--range));
|
||||
--sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em));
|
||||
}
|
||||
|
||||
input[type=range].styled-slider.slider-progress3 {
|
||||
--range: calc(var(--max) - var(--min));
|
||||
--ratio: calc((var(--tiempotemporal) - var(--min)) / var(--range));
|
||||
--sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em));
|
||||
}
|
||||
|
||||
input[type=range].styled-slider.slider-progress4 {
|
||||
--range: calc(var(--max) - var(--min));
|
||||
--ratio: calc((var(--tiempotemporal) - var(--min)) / var(--range));
|
||||
--sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em));
|
||||
}
|
||||
|
||||
/*webkit*/
|
||||
input[type=range].styled-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 2em;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
background: #FFFFFF;
|
||||
border: none;
|
||||
box-shadow: 0 0 2px black;
|
||||
margin-top: calc(2em * 0.5 - 2em * 0.5);
|
||||
}
|
||||
|
||||
input[type=range].styled-slider::-webkit-slider-runnable-track {
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
background: #1a1a1a;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider.slider-progress1::-webkit-slider-runnable-track {
|
||||
background: linear-gradient(#7b2cbf, #7b2cbf) 0/var(--sx) 100% no-repeat, #1a1a1a;
|
||||
;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider.slider-progress2::-webkit-slider-runnable-track {
|
||||
background: linear-gradient(#7b2cbf, #7b2cbf) 0/var(--sx) 100% no-repeat, #1a1a1a;
|
||||
;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider.slider-progress3::-webkit-slider-runnable-track {
|
||||
background: linear-gradient(#7b2cbf, #7b2cbf) 0/var(--sx) 100% no-repeat, #1a1a1a;
|
||||
;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider.slider-progress4::-webkit-slider-runnable-track {
|
||||
background: linear-gradient(#7b2cbf, #7b2cbf) 0/var(--sx) 100% no-repeat, #1a1a1a;
|
||||
;
|
||||
}
|
||||
|
||||
/*mozilla*/
|
||||
input[type=range].styled-slider::-moz-range-thumb {
|
||||
width: 2em;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
background: #FFFFFF;
|
||||
border: none;
|
||||
box-shadow: 0 0 2px black;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider::-moz-range-track {
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
background: #1a1a1a;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider.slider-progress1::-moz-range-track {
|
||||
background: linear-gradient(#7b2cbf, #7b2cbf) 0/var(--sx) 100% no-repeat, #464646;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider.slider-progress2::-moz-range-track {
|
||||
background: linear-gradient(#7b2cbf, #7b2cbf) 0/var(--sx) 100% no-repeat, #464646;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider.slider-progress3::-moz-range-track {
|
||||
background: linear-gradient(#7b2cbf, #7b2cbf) 0/var(--sx) 100% no-repeat, #464646;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider.slider-progress4::-moz-range-track {
|
||||
background: linear-gradient(#7b2cbf, #7b2cbf) 0/var(--sx) 100% no-repeat, #464646;
|
||||
}
|
||||
|
||||
/*ms*/
|
||||
input[type=range].styled-slider::-ms-fill-upper {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider::-ms-fill-lower {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider::-ms-thumb {
|
||||
width: 2em;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
background: #FFFFFF;
|
||||
border: none;
|
||||
box-shadow: 0 0 2px black;
|
||||
margin-top: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider::-ms-track {
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
background: #1a1a1a;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider.slider-progress1::-ms-fill-lower {
|
||||
height: 40px;
|
||||
border-radius: 1em 0 0 1em;
|
||||
margin: -undefined 0 -undefined -undefined;
|
||||
background: #7b2cbf;
|
||||
border: none;
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider.slider-progress2::-ms-fill-lower {
|
||||
height: 40px;
|
||||
border-radius: 1em 0 0 1em;
|
||||
margin: -undefined 0 -undefined -undefined;
|
||||
background: #7b2cbf;
|
||||
border: none;
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider.slider-progress3::-ms-fill-lower {
|
||||
height: 40px;
|
||||
border-radius: 1em 0 0 1em;
|
||||
margin: -undefined 0 -undefined -undefined;
|
||||
background: #7b2cbf;
|
||||
border: none;
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
input[type=range].styled-slider.slider-progress4::-ms-fill-lower {
|
||||
height: 40px;
|
||||
border-radius: 1em 0 0 1em;
|
||||
margin: -undefined 0 -undefined -undefined;
|
||||
background: #7b2cbf;
|
||||
border: none;
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
.inputBox {
|
||||
border: none;
|
||||
width: 50px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
font-size: 14pt;
|
||||
font-weight: bold;
|
||||
margin-left: 10px;
|
||||
}
|
||||
353
src/css/tabs.css
Normal file
353
src/css/tabs.css
Normal file
|
|
@ -0,0 +1,353 @@
|
|||
.viewer-list {
|
||||
background-color: var(--main-color4);
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul.no-bullets {
|
||||
list-style-type: none;
|
||||
list-style-position: outside;
|
||||
margin: 0%;
|
||||
padding: 0%;
|
||||
padding-left: 5px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
h1.titles {
|
||||
margin: 0px;
|
||||
padding: 0%;
|
||||
text-align: left;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
main {
|
||||
background: var(--main-color1);
|
||||
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
main label {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
main input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
section {
|
||||
clear: both;
|
||||
padding-top: 10px;
|
||||
display: none;
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
|
||||
.Basiclabel {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
float: left;
|
||||
flex: auto;
|
||||
font-size: 20px;
|
||||
padding: 0px 10px;
|
||||
width: 50px;
|
||||
align-self: baseline;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.scale {
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
vertical-align: bottom
|
||||
}
|
||||
|
||||
.tab {
|
||||
/* filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(350deg) brightness(104%) contrast(101%); */
|
||||
align-items: flex-start;
|
||||
margin: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input:checked+label {
|
||||
border-top-color: #FFB03D;
|
||||
border-right-color: #DDD;
|
||||
border-left-color: #DDD;
|
||||
border-bottom-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
/* --------------------------------- */
|
||||
|
||||
.radius {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.radius .tabx:active::before {
|
||||
border-radius: 5px !important;
|
||||
}
|
||||
|
||||
.tabx-bar {
|
||||
background-color: var(--main-color1);
|
||||
/* padding: 5px; */
|
||||
box-shadow: 1px 4px 20px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
/* margin: 10px; */
|
||||
color: black;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.tabx-bar .tabx {
|
||||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
width: 70px;
|
||||
height: 50px;
|
||||
background: inherit;
|
||||
display: inherit;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.tabx-bar .tabx::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 26%;
|
||||
height: 13%;
|
||||
border-top-left-radius: 200px;
|
||||
border-top-right-radius: 200px;
|
||||
border-bottom: none;
|
||||
background-color: #607D8B;
|
||||
/* bottom: -8px; */
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.tabx-bar .tabx:active::before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #5fef8d;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.tabx-bar .tabx:hover::before {
|
||||
opacity: 1;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.tabx-bar .tabx::after {}
|
||||
|
||||
.tabx-bar .tabx:hover {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.tabx-bar .tabx:hover::after {
|
||||
opacity: 1;
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
.tabx-bar .tabx.selected {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: inherit;
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
.tabx-bar .tabx.selected::after {
|
||||
opacity: 1;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
.tabx-bar .tabx.selected::before {
|
||||
opacity: 1;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.tabx-bar .tabx .icon {
|
||||
color: inherit;
|
||||
font-size: 24px;
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.tabx-bar .tabx .icon img {
|
||||
margin: auto;
|
||||
height: 32 px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-size: .9rem;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
background-color: var(--main-color3);
|
||||
color: var(--main-color2);
|
||||
align-items: center;
|
||||
border: 0px;
|
||||
padding-left: 20px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#AdvancedMenu_mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin-top: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
visibility: hidden;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
background-color: var(--mid-section);
|
||||
font-family: 'xxii_avenmedium';
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
#ThemeCreator_mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin-top: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
visibility: hidden;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
background-color: var(--mid-section);
|
||||
font-family: 'xxii_avenmedium';
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
.fname {
|
||||
background: var(--main-color3);
|
||||
border: none;
|
||||
height: 40px;
|
||||
border-radius: 40px;
|
||||
width: 300px;
|
||||
outline: none;
|
||||
color: var(--main-color2);
|
||||
font-size: 10pt;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#toasts {
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
z-index: 1;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.toast {
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
padding: 1rem 2rem;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.toast.info {
|
||||
color: rebeccapurple;
|
||||
}
|
||||
|
||||
.toast.success {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.toast.warning {
|
||||
background-color: orange;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.toast.error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
font-size: 17pt;
|
||||
}
|
||||
|
||||
[tip] .tooltip {
|
||||
position: fixed;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
padding: 5px;
|
||||
background: var(--main-color3);
|
||||
border-radius: 5px;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
|
||||
transition: opacity 0.3s, visibility 0s;
|
||||
color: var(--main-color2);
|
||||
z-index: 101;
|
||||
font-family: 'xxii_avenmedium';
|
||||
}
|
||||
|
||||
[tip]:hover .tooltip {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
width: 120px;
|
||||
background-color: black;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 150%;
|
||||
left: 50%;
|
||||
margin-left: -60px;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
input[type=text]:disabled {
|
||||
background: #dddddd;
|
||||
}
|
||||
143
src/css/tts-menu.css
Normal file
143
src/css/tts-menu.css
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
#tstx {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 40px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.optionrow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.LabelText {
|
||||
margin-bottom: 5px;
|
||||
color: var(--main-color2);
|
||||
margin: 0px 0px 5px 0px;
|
||||
}
|
||||
|
||||
#volume-icon {
|
||||
color: var(--main-color2);
|
||||
width: 50px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.TTSVolume {
|
||||
color: var(--main-color2);
|
||||
font-size: 12pt;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#SoundVolume {
|
||||
color: var(--main-color2);
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
.testLabel {
|
||||
color: var(--main-color2);
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
#TTSTest {
|
||||
width: 296px;
|
||||
height: 85px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
font-size: 14pt;
|
||||
resize: none;
|
||||
background: var(--main-color3);
|
||||
color: var(--main-color2);
|
||||
font-family: 'xxii_avenmedium';
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.SaveConfig {
|
||||
align-content: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: var(--main-color2);
|
||||
margin-bottom: 10px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.SaveButton {
|
||||
text-shadow: 0 0 5px #070607, 0 0 5px #070607, 0 0 5px #070607;
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.SaveButton:hover {
|
||||
/* color: var(--main-color1); */
|
||||
cursor: pointer;
|
||||
/* filter: brightness(150%); */
|
||||
}
|
||||
|
||||
.SaveButton:active {
|
||||
color: var(--main-color1);
|
||||
transform: translateY(4px);
|
||||
text-shadow: 0 0 5px #000, 0 0 5px #000, 0 0 5px #000;
|
||||
}
|
||||
|
||||
.SmallButton {
|
||||
color: var(--main-color2);
|
||||
width: 50px;
|
||||
cursor: pointer;
|
||||
text-shadow: 0 0 5px #070607, 0 0 5px #070607, 0 0 5px #070607;
|
||||
transition: all 0.15s ease-in-out;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.SmallButton:hover {
|
||||
/* color: var(--main-color1); */
|
||||
width: 50px;
|
||||
cursor: pointer;
|
||||
/* filter: brightness(150%); */
|
||||
}
|
||||
|
||||
.SmallButton:active {
|
||||
color: var(--main-color1);
|
||||
transform: translateY(4px);
|
||||
text-shadow: 0 0 5px #000, 0 0 5px #000, 0 0 5px #000;
|
||||
}
|
||||
|
||||
.AdvancedMenuButton {
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
background-color: var(--main-color3);
|
||||
color: var(--main-color2);
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-family: 'xxii_avenmedium';
|
||||
font-size: 14pt;
|
||||
}
|
||||
|
||||
.AdvancedMenuButton:hover {
|
||||
/* background-color: var(--main-color1); */
|
||||
cursor: pointer;
|
||||
/* filter: brightness(150%); */
|
||||
}
|
||||
|
||||
.AdvancedMenuButton:active {
|
||||
transform: translateY(4px);
|
||||
}
|
||||
|
||||
.AdvancedMenuIcon {
|
||||
/* filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(350deg) brightness(104%) contrast(101%); */
|
||||
align-items: flex-start;
|
||||
margin: auto;
|
||||
}
|
||||
84
src/css/volume-slider.css
Normal file
84
src/css/volume-slider.css
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
.middle {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.slider-container {
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slider-container .bar {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
background-color: var(--main-color3);
|
||||
}
|
||||
|
||||
.slider-container .bar .fill {
|
||||
display: block;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background-color: var(--main-color1);
|
||||
}
|
||||
|
||||
.slider-container .slider {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.slider-container .slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: var(--main-color2);
|
||||
border-top-left-radius: 50%;
|
||||
border-top-right-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(-45deg) translate(0%, 0%);
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
/* box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); */
|
||||
box-shadow: 0 0 3px rgb(0 0 0 / 10%);
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
|
||||
.slider-container .slider:active::-webkit-slider-thumb,
|
||||
.slider-container .slider::-webkit-slider-thumb:hover {
|
||||
border-bottom-left-radius: 0;
|
||||
transform: rotate(-45deg) translate(50%, -50%);
|
||||
}
|
||||
|
||||
.slider-container .slider:active::-webkit-slider-thumb {
|
||||
box-shadow: 0 0 0 3px rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.volume-icon-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.brush-icon-container {
|
||||
margin-left: -20px;
|
||||
font-size: 20pt;
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: var(--main-color2);
|
||||
}
|
||||
5
src/fonts/Aven/generator_config.txt
Normal file
5
src/fonts/Aven/generator_config.txt
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
# Font Squirrel Font-face Generator Configuration File
|
||||
# Upload this file to the generator to recreate the settings
|
||||
# you used to create these fonts.
|
||||
|
||||
{"mode":"optimal","formats":["woff","woff2"],"tt_instructor":"default","fix_gasp":"xy","fix_vertical_metrics":"Y","metrics_ascent":"","metrics_descent":"","metrics_linegap":"","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"}
|
||||
129
src/fonts/Aven/specimen_files/grid_12-825-55-15.css
Normal file
129
src/fonts/Aven/specimen_files/grid_12-825-55-15.css
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
/*Notes about grid:
|
||||
Columns: 12
|
||||
Grid Width: 825px
|
||||
Column Width: 55px
|
||||
Gutter Width: 15px
|
||||
-------------------------------*/
|
||||
|
||||
|
||||
|
||||
.section {margin-bottom: 18px;
|
||||
}
|
||||
.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
|
||||
.section {*zoom: 1;}
|
||||
|
||||
.section .firstcolumn,
|
||||
.section .firstcol {margin-left: 0;}
|
||||
|
||||
|
||||
/* Border on left hand side of a column. */
|
||||
.border {
|
||||
padding-left: 7px;
|
||||
margin-left: 7px;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
|
||||
/* Border with more whitespace, spans one column. */
|
||||
.colborder {
|
||||
padding-left: 42px;
|
||||
margin-left: 42px;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* The Grid Classes */
|
||||
.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12
|
||||
{margin-left: 15px;float: left;display: inline; overflow: hidden;}
|
||||
|
||||
|
||||
.width1, .grid1, .span-1 {width: 55px;}
|
||||
.width1_2cols,.grid1_2cols {width: 20px;}
|
||||
.width1_3cols,.grid1_3cols {width: 8px;}
|
||||
.width1_4cols,.grid1_4cols {width: 2px;}
|
||||
.input_width1 {width: 49px;}
|
||||
|
||||
.width2, .grid2, .span-2 {width: 125px;}
|
||||
.width2_3cols,.grid2_3cols {width: 31px;}
|
||||
.width2_4cols,.grid2_4cols {width: 20px;}
|
||||
.input_width2 {width: 119px;}
|
||||
|
||||
.width3, .grid3, .span-3 {width: 195px;}
|
||||
.width3_2cols,.grid3_2cols {width: 90px;}
|
||||
.width3_4cols,.grid3_4cols {width: 37px;}
|
||||
.input_width3 {width: 189px;}
|
||||
|
||||
.width4, .grid4, .span-4 {width: 265px;}
|
||||
.width4_3cols,.grid4_3cols {width: 78px;}
|
||||
.input_width4 {width: 259px;}
|
||||
|
||||
.width5, .grid5, .span-5 {width: 335px;}
|
||||
.width5_2cols,.grid5_2cols {width: 160px;}
|
||||
.width5_3cols,.grid5_3cols {width: 101px;}
|
||||
.width5_4cols,.grid5_4cols {width: 72px;}
|
||||
.input_width5 {width: 329px;}
|
||||
|
||||
.width6, .grid6, .span-6 {width: 405px;}
|
||||
.width6_4cols,.grid6_4cols {width: 90px;}
|
||||
.input_width6 {width: 399px;}
|
||||
|
||||
.width7, .grid7, .span-7 {width: 475px;}
|
||||
.width7_2cols,.grid7_2cols {width: 230px;}
|
||||
.width7_3cols,.grid7_3cols {width: 148px;}
|
||||
.width7_4cols,.grid7_4cols {width: 107px;}
|
||||
.input_width7 {width: 469px;}
|
||||
|
||||
.width8, .grid8, .span-8 {width: 545px;}
|
||||
.width8_3cols,.grid8_3cols {width: 171px;}
|
||||
.input_width8 {width: 539px;}
|
||||
|
||||
.width9, .grid9, .span-9 {width: 615px;}
|
||||
.width9_2cols,.grid9_2cols {width: 300px;}
|
||||
.width9_4cols,.grid9_4cols {width: 142px;}
|
||||
.input_width9 {width: 609px;}
|
||||
|
||||
.width10, .grid10, .span-10 {width: 685px;}
|
||||
.width10_3cols,.grid10_3cols {width: 218px;}
|
||||
.width10_4cols,.grid10_4cols {width: 160px;}
|
||||
.input_width10 {width: 679px;}
|
||||
|
||||
.width11, .grid11, .span-11 {width: 755px;}
|
||||
.width11_2cols,.grid11_2cols {width: 370px;}
|
||||
.width11_3cols,.grid11_3cols {width: 241px;}
|
||||
.width11_4cols,.grid11_4cols {width: 177px;}
|
||||
.input_width11 {width: 749px;}
|
||||
|
||||
.width12, .grid12, .span-12 {width: 825px;}
|
||||
.input_width12 {width: 819px;}
|
||||
|
||||
/* Subdivided grid spaces */
|
||||
.emptycols_left1, .prepend-1 {padding-left: 70px;}
|
||||
.emptycols_right1, .append-1 {padding-right: 70px;}
|
||||
.emptycols_left2, .prepend-2 {padding-left: 140px;}
|
||||
.emptycols_right2, .append-2 {padding-right: 140px;}
|
||||
.emptycols_left3, .prepend-3 {padding-left: 210px;}
|
||||
.emptycols_right3, .append-3 {padding-right: 210px;}
|
||||
.emptycols_left4, .prepend-4 {padding-left: 280px;}
|
||||
.emptycols_right4, .append-4 {padding-right: 280px;}
|
||||
.emptycols_left5, .prepend-5 {padding-left: 350px;}
|
||||
.emptycols_right5, .append-5 {padding-right: 350px;}
|
||||
.emptycols_left6, .prepend-6 {padding-left: 420px;}
|
||||
.emptycols_right6, .append-6 {padding-right: 420px;}
|
||||
.emptycols_left7, .prepend-7 {padding-left: 490px;}
|
||||
.emptycols_right7, .append-7 {padding-right: 490px;}
|
||||
.emptycols_left8, .prepend-8 {padding-left: 560px;}
|
||||
.emptycols_right8, .append-8 {padding-right: 560px;}
|
||||
.emptycols_left9, .prepend-9 {padding-left: 630px;}
|
||||
.emptycols_right9, .append-9 {padding-right: 630px;}
|
||||
.emptycols_left10, .prepend-10 {padding-left: 700px;}
|
||||
.emptycols_right10, .append-10 {padding-right: 700px;}
|
||||
.emptycols_left11, .prepend-11 {padding-left: 770px;}
|
||||
.emptycols_right11, .append-11 {padding-right: 770px;}
|
||||
.pull-1 {margin-left: -70px;}
|
||||
.push-1 {margin-right: -70px;margin-left: 18px;float: right;}
|
||||
.pull-2 {margin-left: -140px;}
|
||||
.push-2 {margin-right: -140px;margin-left: 18px;float: right;}
|
||||
.pull-3 {margin-left: -210px;}
|
||||
.push-3 {margin-right: -210px;margin-left: 18px;float: right;}
|
||||
.pull-4 {margin-left: -280px;}
|
||||
.push-4 {margin-right: -280px;margin-left: 18px;float: right;}
|
||||
396
src/fonts/Aven/specimen_files/specimen_stylesheet.css
Normal file
396
src/fonts/Aven/specimen_files/specimen_stylesheet.css
Normal file
|
|
@ -0,0 +1,396 @@
|
|||
@import url('grid_12-825-55-15.css');
|
||||
|
||||
/*
|
||||
CSS Reset by Eric Meyer - Released under Public Domain
|
||||
http://meyerweb.com/eric/tools/css/reset/
|
||||
*/
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, font, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center, dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend, table,
|
||||
caption, tbody, tfoot, thead, tr, th, td
|
||||
{margin: 0;padding: 0;border: 0;outline: 0;
|
||||
font-size: 100%;vertical-align: baseline;
|
||||
background: transparent;}
|
||||
body {line-height: 1;}
|
||||
ol, ul {list-style: none;}
|
||||
blockquote, q {quotes: none;}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {content: ''; content: none;}
|
||||
:focus {outline: 0;}
|
||||
ins {text-decoration: none;}
|
||||
del {text-decoration: line-through;}
|
||||
table {border-collapse: collapse;border-spacing: 0;}
|
||||
|
||||
|
||||
|
||||
|
||||
body {
|
||||
color: #000;
|
||||
background-color: #dcdcdc;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #1883ba;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 32px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 865px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
|
||||
#header {
|
||||
padding: 20px;
|
||||
font-size: 36px;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#header span {
|
||||
color: #666;
|
||||
}
|
||||
#main_content {
|
||||
background-color: #fff;
|
||||
padding: 60px 20px 20px;
|
||||
}
|
||||
|
||||
|
||||
#footer p {
|
||||
margin: 0;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 50px;
|
||||
color: #333;
|
||||
font: 10px Arial, sans-serif;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 100%;
|
||||
height: 31px;
|
||||
background-color: #444;
|
||||
}
|
||||
.tabs li {
|
||||
float: left;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background-color: #444;
|
||||
}
|
||||
.tabs li a {
|
||||
display: block;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font: bold 11px/11px 'Arial';
|
||||
text-transform: uppercase;
|
||||
padding: 10px 15px;
|
||||
border-right: 1px solid #fff;
|
||||
}
|
||||
|
||||
.tabs li a:hover {
|
||||
background-color: #00b3ff;
|
||||
|
||||
}
|
||||
|
||||
.tabs li.active a {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
div.huge {
|
||||
|
||||
font-size: 300px;
|
||||
line-height: 1em;
|
||||
padding: 0;
|
||||
letter-spacing: -.02em;
|
||||
overflow: hidden;
|
||||
}
|
||||
div.glyph_range {
|
||||
font-size: 72px;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
.size10{ font-size: 10px; }
|
||||
.size11{ font-size: 11px; }
|
||||
.size12{ font-size: 12px; }
|
||||
.size13{ font-size: 13px; }
|
||||
.size14{ font-size: 14px; }
|
||||
.size16{ font-size: 16px; }
|
||||
.size18{ font-size: 18px; }
|
||||
.size20{ font-size: 20px; }
|
||||
.size24{ font-size: 24px; }
|
||||
.size30{ font-size: 30px; }
|
||||
.size36{ font-size: 36px; }
|
||||
.size48{ font-size: 48px; }
|
||||
.size60{ font-size: 60px; }
|
||||
.size72{ font-size: 72px; }
|
||||
.size90{ font-size: 90px; }
|
||||
|
||||
|
||||
.psample_row1 { height: 120px;}
|
||||
.psample_row1 { height: 120px;}
|
||||
.psample_row2 { height: 160px;}
|
||||
.psample_row3 { height: 160px;}
|
||||
.psample_row4 { height: 160px;}
|
||||
|
||||
.psample {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.psample p {
|
||||
line-height: 1.3em;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.psample span {
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
.white_blend {
|
||||
width: 100%;
|
||||
height: 61px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.black_blend {
|
||||
width: 100%;
|
||||
height: 61px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.fullreverse {
|
||||
background: #000 !important;
|
||||
color: #fff !important;
|
||||
margin-left: -20px;
|
||||
padding-left: 20px;
|
||||
margin-right: -20px;
|
||||
padding-right: 20px;
|
||||
padding: 20px;
|
||||
margin-bottom:0;
|
||||
}
|
||||
|
||||
|
||||
.sample_table td {
|
||||
padding-top: 3px;
|
||||
padding-bottom:5px;
|
||||
padding-left: 5px;
|
||||
vertical-align: middle;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.sample_table td:first-child {
|
||||
background-color: #eee;
|
||||
text-align: right;
|
||||
padding-right: 5px;
|
||||
padding-left: 0;
|
||||
padding: 5px;
|
||||
font: 11px/12px "Courier New", Courier, mono;
|
||||
}
|
||||
|
||||
code {
|
||||
white-space: pre;
|
||||
background-color: #eee;
|
||||
display: block;
|
||||
padding: 10px;
|
||||
margin-bottom: 18px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;}
|
||||
|
||||
.box {
|
||||
padding: 18px;
|
||||
margin-bottom: 18px;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;}
|
||||
|
||||
#bodycomparison {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-size: 72px;
|
||||
height: 90px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#bodycomparison div{
|
||||
font-size: 72px;
|
||||
line-height: 90px;
|
||||
display: inline;
|
||||
margin: 0 15px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#bodycomparison div span{
|
||||
font: 10px Arial;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
#xheight {
|
||||
float: none;
|
||||
position: absolute;
|
||||
color: #d9f3ff;
|
||||
font-size: 72px;
|
||||
line-height: 90px;
|
||||
}
|
||||
|
||||
.fontbody {
|
||||
position: relative;
|
||||
}
|
||||
.arialbody{
|
||||
font-family: Arial;
|
||||
position: relative;
|
||||
}
|
||||
.verdanabody{
|
||||
font-family: Verdana;
|
||||
position: relative;
|
||||
}
|
||||
.georgiabody{
|
||||
font-family: Georgia;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* @group Layout page
|
||||
*/
|
||||
|
||||
#layout h1 {
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#layout h2 {
|
||||
font-size: 24px;
|
||||
line-height: 23px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#layout h3 {
|
||||
font-size: 22px;
|
||||
line-height: 1.4em;
|
||||
margin-top: 1em;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
#layout p.byline {
|
||||
font-size: 12px;
|
||||
margin-top: 18px;
|
||||
line-height: 12px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#layout p {
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
#layout p.large{
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
#layout .sidebar p{
|
||||
font-size: 12px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
#layout p.caption {
|
||||
font-size: 10px;
|
||||
margin-top: -16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
|
||||
/* @group Glyphs */
|
||||
|
||||
#glyph_chart div{
|
||||
background-color: #d9f3ff;
|
||||
color: black;
|
||||
float: left;
|
||||
font-size: 36px;
|
||||
height: 1.2em;
|
||||
line-height: 1.2em;
|
||||
margin-bottom: 1px;
|
||||
margin-right: 1px;
|
||||
text-align: center;
|
||||
width: 1.2em;
|
||||
position: relative;
|
||||
padding: .6em .2em .2em;
|
||||
}
|
||||
|
||||
#glyph_chart div p {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font: bold 9px Arial, sans-serif;
|
||||
background-color: #3a768f;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
|
||||
#glyphs h1 {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group Installing */
|
||||
|
||||
#installing {
|
||||
font: 13px Arial, sans-serif;
|
||||
}
|
||||
|
||||
#installing p,
|
||||
#glyphs p{
|
||||
line-height: 1.2em;
|
||||
margin-bottom: 18px;
|
||||
font: 13px Arial, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#installing h3{
|
||||
font-size: 15px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
|
||||
#rendering h1 {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.render_table td {
|
||||
font: 11px "Courier New", Courier, mono;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
60
src/fonts/Aven/stylesheet.css
Normal file
60
src/fonts/Aven/stylesheet.css
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on October 29, 2021 */
|
||||
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'xxii_avenblack';
|
||||
src: url('xxiiaven-black-webfont.woff2') format('woff2'),
|
||||
url('xxiiaven-black-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'xxii_avenbold';
|
||||
src: url('xxiiaven-bold-webfont.woff2') format('woff2'),
|
||||
url('xxiiaven-bold-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'xxii_avenlight';
|
||||
src: url('xxiiaven-light-webfont.woff2') format('woff2'),
|
||||
url('xxiiaven-light-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'xxii_avenmedium';
|
||||
src: url('xxiiaven-medium-webfont.woff2') format('woff2'),
|
||||
url('xxiiaven-medium-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'xxii_avenregular';
|
||||
src: url('xxiiaven-regular-webfont.woff2') format('woff2'),
|
||||
url('xxiiaven-regular-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
620
src/fonts/Aven/xxiiaven-black-demo.html
Normal file
620
src/fonts/Aven/xxiiaven-black-demo.html
Normal file
|
|
@ -0,0 +1,620 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript">
|
||||
(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
|
||||
if(typeof param.defaultContent=="number")
|
||||
{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
|
||||
$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
|
||||
function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
|
||||
{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
|
||||
$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
|
||||
</script>
|
||||
<link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
|
||||
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
|
||||
|
||||
<style type="text/css">
|
||||
body{
|
||||
font-family: 'xxii_avenblack';
|
||||
}
|
||||
</style>
|
||||
|
||||
<title>XXII Aven Black Regular Specimen</title>
|
||||
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function() {
|
||||
$('#container').easyTabs({defaultContent:1});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="header">
|
||||
XXII Aven Black Regular </div>
|
||||
<ul class="tabs">
|
||||
<li><a href="#specimen">Specimen</a></li>
|
||||
<li><a href="#layout">Sample Layout</a></li>
|
||||
<li><a href="#glyphs">Glyphs & Languages</a></li>
|
||||
<li><a href="#installing">Installing Webfonts</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="main_content">
|
||||
|
||||
|
||||
<div id="specimen">
|
||||
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<div class="huge">AaBb</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="glyph_range">A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<table class="sample_table">
|
||||
<tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section" id="bodycomparison">
|
||||
|
||||
|
||||
<div id="xheight">
|
||||
<div class="fontbody">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
|
||||
<div class="fontbody" style="z-index:1">
|
||||
body<span>XXII Aven Black Regular</span>
|
||||
</div>
|
||||
<div class="arialbody" style="z-index:1">
|
||||
body<span>Arial</span>
|
||||
</div>
|
||||
<div class="verdanabody" style="z-index:1">
|
||||
body<span>Verdana</span>
|
||||
</div>
|
||||
<div class="georgiabody" style="z-index:1">
|
||||
body<span>Georgia</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section psample psample_row1" id="">
|
||||
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
<div class="section psample psample_row2" id="">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row4" id="">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section psample psample_row1 fullreverse">
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row2 fullreverse">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="layout">
|
||||
|
||||
<div class="section">
|
||||
|
||||
<div class="grid12 firstcol">
|
||||
<h1>Lorem Ipsum Dolor</h1>
|
||||
<h2>Etiam porta sem malesuada magna mollis euismod</h2>
|
||||
|
||||
<p class="byline">By <a href="#link">Aenean Lacinia</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid8 firstcol">
|
||||
<p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
<h3>Pellentesque ornare sem</h3>
|
||||
|
||||
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
|
||||
|
||||
<p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
|
||||
|
||||
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
|
||||
|
||||
<h3>Cras mattis consectetur</h3>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
|
||||
|
||||
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid4 sidebar">
|
||||
|
||||
<div class="box reverse">
|
||||
<p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
|
||||
</div>
|
||||
|
||||
<p class="caption">Maecenas sed diam eget risus varius.</p>
|
||||
|
||||
<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
|
||||
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="glyphs">
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
|
||||
<h1>Language Support</h1>
|
||||
<p>The subset of XXII Aven Black Regular in this kit supports the following languages:<br />
|
||||
|
||||
Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo </p>
|
||||
<h1>Glyph Chart</h1>
|
||||
<p>The subset of XXII Aven Black Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
|
||||
<div id="glyph_chart">
|
||||
|
||||
<div><p>&#13;</p> </div>
|
||||
<div><p>&#32;</p> </div>
|
||||
<div><p>&#33;</p>!</div>
|
||||
<div><p>&#34;</p>"</div>
|
||||
<div><p>&#35;</p>#</div>
|
||||
<div><p>&#36;</p>$</div>
|
||||
<div><p>&#37;</p>%</div>
|
||||
<div><p>&#38;</p>&</div>
|
||||
<div><p>&#39;</p>'</div>
|
||||
<div><p>&#40;</p>(</div>
|
||||
<div><p>&#41;</p>)</div>
|
||||
<div><p>&#42;</p>*</div>
|
||||
<div><p>&#43;</p>+</div>
|
||||
<div><p>&#44;</p>,</div>
|
||||
<div><p>&#45;</p>-</div>
|
||||
<div><p>&#46;</p>.</div>
|
||||
<div><p>&#47;</p>/</div>
|
||||
<div><p>&#48;</p>0</div>
|
||||
<div><p>&#49;</p>1</div>
|
||||
<div><p>&#50;</p>2</div>
|
||||
<div><p>&#51;</p>3</div>
|
||||
<div><p>&#52;</p>4</div>
|
||||
<div><p>&#53;</p>5</div>
|
||||
<div><p>&#54;</p>6</div>
|
||||
<div><p>&#55;</p>7</div>
|
||||
<div><p>&#56;</p>8</div>
|
||||
<div><p>&#57;</p>9</div>
|
||||
<div><p>&#58;</p>:</div>
|
||||
<div><p>&#59;</p>;</div>
|
||||
<div><p>&#60;</p><</div>
|
||||
<div><p>&#61;</p>=</div>
|
||||
<div><p>&#62;</p>></div>
|
||||
<div><p>&#63;</p>?</div>
|
||||
<div><p>&#64;</p>@</div>
|
||||
<div><p>&#65;</p>A</div>
|
||||
<div><p>&#66;</p>B</div>
|
||||
<div><p>&#67;</p>C</div>
|
||||
<div><p>&#68;</p>D</div>
|
||||
<div><p>&#69;</p>E</div>
|
||||
<div><p>&#70;</p>F</div>
|
||||
<div><p>&#71;</p>G</div>
|
||||
<div><p>&#72;</p>H</div>
|
||||
<div><p>&#73;</p>I</div>
|
||||
<div><p>&#74;</p>J</div>
|
||||
<div><p>&#75;</p>K</div>
|
||||
<div><p>&#76;</p>L</div>
|
||||
<div><p>&#77;</p>M</div>
|
||||
<div><p>&#78;</p>N</div>
|
||||
<div><p>&#79;</p>O</div>
|
||||
<div><p>&#80;</p>P</div>
|
||||
<div><p>&#81;</p>Q</div>
|
||||
<div><p>&#82;</p>R</div>
|
||||
<div><p>&#83;</p>S</div>
|
||||
<div><p>&#84;</p>T</div>
|
||||
<div><p>&#85;</p>U</div>
|
||||
<div><p>&#86;</p>V</div>
|
||||
<div><p>&#87;</p>W</div>
|
||||
<div><p>&#88;</p>X</div>
|
||||
<div><p>&#89;</p>Y</div>
|
||||
<div><p>&#90;</p>Z</div>
|
||||
<div><p>&#91;</p>[</div>
|
||||
<div><p>&#92;</p>\</div>
|
||||
<div><p>&#93;</p>]</div>
|
||||
<div><p>&#94;</p>^</div>
|
||||
<div><p>&#95;</p>_</div>
|
||||
<div><p>&#96;</p>`</div>
|
||||
<div><p>&#97;</p>a</div>
|
||||
<div><p>&#98;</p>b</div>
|
||||
<div><p>&#99;</p>c</div>
|
||||
<div><p>&#100;</p>d</div>
|
||||
<div><p>&#101;</p>e</div>
|
||||
<div><p>&#102;</p>f</div>
|
||||
<div><p>&#103;</p>g</div>
|
||||
<div><p>&#104;</p>h</div>
|
||||
<div><p>&#105;</p>i</div>
|
||||
<div><p>&#106;</p>j</div>
|
||||
<div><p>&#107;</p>k</div>
|
||||
<div><p>&#108;</p>l</div>
|
||||
<div><p>&#109;</p>m</div>
|
||||
<div><p>&#110;</p>n</div>
|
||||
<div><p>&#111;</p>o</div>
|
||||
<div><p>&#112;</p>p</div>
|
||||
<div><p>&#113;</p>q</div>
|
||||
<div><p>&#114;</p>r</div>
|
||||
<div><p>&#115;</p>s</div>
|
||||
<div><p>&#116;</p>t</div>
|
||||
<div><p>&#117;</p>u</div>
|
||||
<div><p>&#118;</p>v</div>
|
||||
<div><p>&#119;</p>w</div>
|
||||
<div><p>&#120;</p>x</div>
|
||||
<div><p>&#121;</p>y</div>
|
||||
<div><p>&#122;</p>z</div>
|
||||
<div><p>&#123;</p>{</div>
|
||||
<div><p>&#124;</p>|</div>
|
||||
<div><p>&#125;</p>}</div>
|
||||
<div><p>&#126;</p>~</div>
|
||||
<div><p>&#160;</p> </div>
|
||||
<div><p>&#161;</p>¡</div>
|
||||
<div><p>&#162;</p>¢</div>
|
||||
<div><p>&#163;</p>£</div>
|
||||
<div><p>&#164;</p>¤</div>
|
||||
<div><p>&#165;</p>¥</div>
|
||||
<div><p>&#166;</p>¦</div>
|
||||
<div><p>&#167;</p>§</div>
|
||||
<div><p>&#168;</p>¨</div>
|
||||
<div><p>&#169;</p>©</div>
|
||||
<div><p>&#170;</p>ª</div>
|
||||
<div><p>&#171;</p>«</div>
|
||||
<div><p>&#172;</p>¬</div>
|
||||
<div><p>&#173;</p>­</div>
|
||||
<div><p>&#174;</p>®</div>
|
||||
<div><p>&#175;</p>¯</div>
|
||||
<div><p>&#176;</p>°</div>
|
||||
<div><p>&#177;</p>±</div>
|
||||
<div><p>&#178;</p>²</div>
|
||||
<div><p>&#179;</p>³</div>
|
||||
<div><p>&#180;</p>´</div>
|
||||
<div><p>&#182;</p>¶</div>
|
||||
<div><p>&#183;</p>·</div>
|
||||
<div><p>&#184;</p>¸</div>
|
||||
<div><p>&#185;</p>¹</div>
|
||||
<div><p>&#186;</p>º</div>
|
||||
<div><p>&#187;</p>»</div>
|
||||
<div><p>&#188;</p>¼</div>
|
||||
<div><p>&#189;</p>½</div>
|
||||
<div><p>&#190;</p>¾</div>
|
||||
<div><p>&#191;</p>¿</div>
|
||||
<div><p>&#192;</p>À</div>
|
||||
<div><p>&#193;</p>Á</div>
|
||||
<div><p>&#194;</p>Â</div>
|
||||
<div><p>&#195;</p>Ã</div>
|
||||
<div><p>&#196;</p>Ä</div>
|
||||
<div><p>&#197;</p>Å</div>
|
||||
<div><p>&#198;</p>Æ</div>
|
||||
<div><p>&#199;</p>Ç</div>
|
||||
<div><p>&#200;</p>È</div>
|
||||
<div><p>&#201;</p>É</div>
|
||||
<div><p>&#202;</p>Ê</div>
|
||||
<div><p>&#203;</p>Ë</div>
|
||||
<div><p>&#204;</p>Ì</div>
|
||||
<div><p>&#205;</p>Í</div>
|
||||
<div><p>&#206;</p>Î</div>
|
||||
<div><p>&#207;</p>Ï</div>
|
||||
<div><p>&#208;</p>Ð</div>
|
||||
<div><p>&#209;</p>Ñ</div>
|
||||
<div><p>&#210;</p>Ò</div>
|
||||
<div><p>&#211;</p>Ó</div>
|
||||
<div><p>&#212;</p>Ô</div>
|
||||
<div><p>&#213;</p>Õ</div>
|
||||
<div><p>&#214;</p>Ö</div>
|
||||
<div><p>&#215;</p>×</div>
|
||||
<div><p>&#216;</p>Ø</div>
|
||||
<div><p>&#217;</p>Ù</div>
|
||||
<div><p>&#218;</p>Ú</div>
|
||||
<div><p>&#219;</p>Û</div>
|
||||
<div><p>&#220;</p>Ü</div>
|
||||
<div><p>&#221;</p>Ý</div>
|
||||
<div><p>&#222;</p>Þ</div>
|
||||
<div><p>&#223;</p>ß</div>
|
||||
<div><p>&#224;</p>à</div>
|
||||
<div><p>&#225;</p>á</div>
|
||||
<div><p>&#226;</p>â</div>
|
||||
<div><p>&#227;</p>ã</div>
|
||||
<div><p>&#228;</p>ä</div>
|
||||
<div><p>&#229;</p>å</div>
|
||||
<div><p>&#230;</p>æ</div>
|
||||
<div><p>&#231;</p>ç</div>
|
||||
<div><p>&#232;</p>è</div>
|
||||
<div><p>&#233;</p>é</div>
|
||||
<div><p>&#234;</p>ê</div>
|
||||
<div><p>&#235;</p>ë</div>
|
||||
<div><p>&#236;</p>ì</div>
|
||||
<div><p>&#237;</p>í</div>
|
||||
<div><p>&#238;</p>î</div>
|
||||
<div><p>&#239;</p>ï</div>
|
||||
<div><p>&#240;</p>ð</div>
|
||||
<div><p>&#241;</p>ñ</div>
|
||||
<div><p>&#242;</p>ò</div>
|
||||
<div><p>&#243;</p>ó</div>
|
||||
<div><p>&#244;</p>ô</div>
|
||||
<div><p>&#245;</p>õ</div>
|
||||
<div><p>&#246;</p>ö</div>
|
||||
<div><p>&#247;</p>÷</div>
|
||||
<div><p>&#248;</p>ø</div>
|
||||
<div><p>&#249;</p>ù</div>
|
||||
<div><p>&#250;</p>ú</div>
|
||||
<div><p>&#251;</p>û</div>
|
||||
<div><p>&#252;</p>ü</div>
|
||||
<div><p>&#253;</p>ý</div>
|
||||
<div><p>&#254;</p>þ</div>
|
||||
<div><p>&#255;</p>ÿ</div>
|
||||
<div><p>&#338;</p>Œ</div>
|
||||
<div><p>&#339;</p>œ</div>
|
||||
<div><p>&#376;</p>Ÿ</div>
|
||||
<div><p>&#710;</p>ˆ</div>
|
||||
<div><p>&#732;</p>˜</div>
|
||||
<div><p>&#8192;</p> </div>
|
||||
<div><p>&#8193;</p> </div>
|
||||
<div><p>&#8194;</p> </div>
|
||||
<div><p>&#8195;</p> </div>
|
||||
<div><p>&#8196;</p> </div>
|
||||
<div><p>&#8197;</p> </div>
|
||||
<div><p>&#8198;</p> </div>
|
||||
<div><p>&#8199;</p> </div>
|
||||
<div><p>&#8200;</p> </div>
|
||||
<div><p>&#8201;</p> </div>
|
||||
<div><p>&#8202;</p> </div>
|
||||
<div><p>&#8208;</p>‐</div>
|
||||
<div><p>&#8209;</p>‑</div>
|
||||
<div><p>&#8210;</p>‒</div>
|
||||
<div><p>&#8211;</p>–</div>
|
||||
<div><p>&#8212;</p>—</div>
|
||||
<div><p>&#8216;</p>‘</div>
|
||||
<div><p>&#8217;</p>’</div>
|
||||
<div><p>&#8218;</p>‚</div>
|
||||
<div><p>&#8220;</p>“</div>
|
||||
<div><p>&#8221;</p>”</div>
|
||||
<div><p>&#8222;</p>„</div>
|
||||
<div><p>&#8226;</p>•</div>
|
||||
<div><p>&#8230;</p>…</div>
|
||||
<div><p>&#8239;</p> </div>
|
||||
<div><p>&#8249;</p>‹</div>
|
||||
<div><p>&#8250;</p>›</div>
|
||||
<div><p>&#8287;</p> </div>
|
||||
<div><p>&#8364;</p>€</div>
|
||||
<div><p>&#8482;</p>™</div>
|
||||
<div><p>&#9724;</p>◼</div>
|
||||
<div><p>&#64257;</p>fi</div>
|
||||
<div><p>&#64258;</p>fl</div>
|
||||
<div><p>&#64259;</p>ffi</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="specs">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="installing">
|
||||
<div class="section">
|
||||
<div class="grid7 firstcol">
|
||||
<h1>Installing Webfonts</h1>
|
||||
|
||||
<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
|
||||
|
||||
<h2>1. Upload your webfonts</h2>
|
||||
<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
|
||||
|
||||
<h2>2. Include the webfont stylesheet</h2>
|
||||
<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
|
||||
|
||||
|
||||
<code>
|
||||
@font-face{
|
||||
font-family: 'MyWebFont';
|
||||
src: url('WebFont.eot');
|
||||
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
|
||||
url('WebFont.woff') format('woff'),
|
||||
url('WebFont.ttf') format('truetype'),
|
||||
url('WebFont.svg#webfont') format('svg');
|
||||
}
|
||||
</code>
|
||||
|
||||
<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
|
||||
<code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
|
||||
|
||||
<h2>3. Modify your own stylesheet</h2>
|
||||
<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
|
||||
<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
|
||||
|
||||
<h2>4. Test</h2>
|
||||
<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid5 sidebar">
|
||||
<div class="box">
|
||||
<h2>Troubleshooting<br />Font-Face Problems</h2>
|
||||
<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
|
||||
|
||||
<h3>Fonts not showing in any browser</h3>
|
||||
|
||||
<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
|
||||
|
||||
<h3>Fonts not loading in iPhone or iPad</h3>
|
||||
|
||||
<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
|
||||
|
||||
<h3>Fonts not loading in Firefox</h3>
|
||||
|
||||
<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
|
||||
|
||||
<h3>Fonts not loading in IE</h3>
|
||||
|
||||
<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
|
||||
|
||||
<h3>Fonts not loading in IE9</h3>
|
||||
|
||||
<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>©2010-2017 Font Squirrel. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
src/fonts/Aven/xxiiaven-black-webfont.woff
Normal file
BIN
src/fonts/Aven/xxiiaven-black-webfont.woff
Normal file
Binary file not shown.
BIN
src/fonts/Aven/xxiiaven-black-webfont.woff2
Normal file
BIN
src/fonts/Aven/xxiiaven-black-webfont.woff2
Normal file
Binary file not shown.
620
src/fonts/Aven/xxiiaven-bold-demo.html
Normal file
620
src/fonts/Aven/xxiiaven-bold-demo.html
Normal file
|
|
@ -0,0 +1,620 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript">
|
||||
(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
|
||||
if(typeof param.defaultContent=="number")
|
||||
{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
|
||||
$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
|
||||
function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
|
||||
{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
|
||||
$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
|
||||
</script>
|
||||
<link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
|
||||
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
|
||||
|
||||
<style type="text/css">
|
||||
body{
|
||||
font-family: 'xxii_avenbold';
|
||||
}
|
||||
</style>
|
||||
|
||||
<title>XXII Aven Bold Regular Specimen</title>
|
||||
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function() {
|
||||
$('#container').easyTabs({defaultContent:1});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="header">
|
||||
XXII Aven Bold Regular </div>
|
||||
<ul class="tabs">
|
||||
<li><a href="#specimen">Specimen</a></li>
|
||||
<li><a href="#layout">Sample Layout</a></li>
|
||||
<li><a href="#glyphs">Glyphs & Languages</a></li>
|
||||
<li><a href="#installing">Installing Webfonts</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="main_content">
|
||||
|
||||
|
||||
<div id="specimen">
|
||||
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<div class="huge">AaBb</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="glyph_range">A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<table class="sample_table">
|
||||
<tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section" id="bodycomparison">
|
||||
|
||||
|
||||
<div id="xheight">
|
||||
<div class="fontbody">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
|
||||
<div class="fontbody" style="z-index:1">
|
||||
body<span>XXII Aven Bold Regular</span>
|
||||
</div>
|
||||
<div class="arialbody" style="z-index:1">
|
||||
body<span>Arial</span>
|
||||
</div>
|
||||
<div class="verdanabody" style="z-index:1">
|
||||
body<span>Verdana</span>
|
||||
</div>
|
||||
<div class="georgiabody" style="z-index:1">
|
||||
body<span>Georgia</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section psample psample_row1" id="">
|
||||
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
<div class="section psample psample_row2" id="">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row4" id="">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section psample psample_row1 fullreverse">
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row2 fullreverse">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="layout">
|
||||
|
||||
<div class="section">
|
||||
|
||||
<div class="grid12 firstcol">
|
||||
<h1>Lorem Ipsum Dolor</h1>
|
||||
<h2>Etiam porta sem malesuada magna mollis euismod</h2>
|
||||
|
||||
<p class="byline">By <a href="#link">Aenean Lacinia</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid8 firstcol">
|
||||
<p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
<h3>Pellentesque ornare sem</h3>
|
||||
|
||||
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
|
||||
|
||||
<p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
|
||||
|
||||
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
|
||||
|
||||
<h3>Cras mattis consectetur</h3>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
|
||||
|
||||
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid4 sidebar">
|
||||
|
||||
<div class="box reverse">
|
||||
<p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
|
||||
</div>
|
||||
|
||||
<p class="caption">Maecenas sed diam eget risus varius.</p>
|
||||
|
||||
<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
|
||||
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="glyphs">
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
|
||||
<h1>Language Support</h1>
|
||||
<p>The subset of XXII Aven Bold Regular in this kit supports the following languages:<br />
|
||||
|
||||
Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo </p>
|
||||
<h1>Glyph Chart</h1>
|
||||
<p>The subset of XXII Aven Bold Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
|
||||
<div id="glyph_chart">
|
||||
|
||||
<div><p>&#13;</p> </div>
|
||||
<div><p>&#32;</p> </div>
|
||||
<div><p>&#33;</p>!</div>
|
||||
<div><p>&#34;</p>"</div>
|
||||
<div><p>&#35;</p>#</div>
|
||||
<div><p>&#36;</p>$</div>
|
||||
<div><p>&#37;</p>%</div>
|
||||
<div><p>&#38;</p>&</div>
|
||||
<div><p>&#39;</p>'</div>
|
||||
<div><p>&#40;</p>(</div>
|
||||
<div><p>&#41;</p>)</div>
|
||||
<div><p>&#42;</p>*</div>
|
||||
<div><p>&#43;</p>+</div>
|
||||
<div><p>&#44;</p>,</div>
|
||||
<div><p>&#45;</p>-</div>
|
||||
<div><p>&#46;</p>.</div>
|
||||
<div><p>&#47;</p>/</div>
|
||||
<div><p>&#48;</p>0</div>
|
||||
<div><p>&#49;</p>1</div>
|
||||
<div><p>&#50;</p>2</div>
|
||||
<div><p>&#51;</p>3</div>
|
||||
<div><p>&#52;</p>4</div>
|
||||
<div><p>&#53;</p>5</div>
|
||||
<div><p>&#54;</p>6</div>
|
||||
<div><p>&#55;</p>7</div>
|
||||
<div><p>&#56;</p>8</div>
|
||||
<div><p>&#57;</p>9</div>
|
||||
<div><p>&#58;</p>:</div>
|
||||
<div><p>&#59;</p>;</div>
|
||||
<div><p>&#60;</p><</div>
|
||||
<div><p>&#61;</p>=</div>
|
||||
<div><p>&#62;</p>></div>
|
||||
<div><p>&#63;</p>?</div>
|
||||
<div><p>&#64;</p>@</div>
|
||||
<div><p>&#65;</p>A</div>
|
||||
<div><p>&#66;</p>B</div>
|
||||
<div><p>&#67;</p>C</div>
|
||||
<div><p>&#68;</p>D</div>
|
||||
<div><p>&#69;</p>E</div>
|
||||
<div><p>&#70;</p>F</div>
|
||||
<div><p>&#71;</p>G</div>
|
||||
<div><p>&#72;</p>H</div>
|
||||
<div><p>&#73;</p>I</div>
|
||||
<div><p>&#74;</p>J</div>
|
||||
<div><p>&#75;</p>K</div>
|
||||
<div><p>&#76;</p>L</div>
|
||||
<div><p>&#77;</p>M</div>
|
||||
<div><p>&#78;</p>N</div>
|
||||
<div><p>&#79;</p>O</div>
|
||||
<div><p>&#80;</p>P</div>
|
||||
<div><p>&#81;</p>Q</div>
|
||||
<div><p>&#82;</p>R</div>
|
||||
<div><p>&#83;</p>S</div>
|
||||
<div><p>&#84;</p>T</div>
|
||||
<div><p>&#85;</p>U</div>
|
||||
<div><p>&#86;</p>V</div>
|
||||
<div><p>&#87;</p>W</div>
|
||||
<div><p>&#88;</p>X</div>
|
||||
<div><p>&#89;</p>Y</div>
|
||||
<div><p>&#90;</p>Z</div>
|
||||
<div><p>&#91;</p>[</div>
|
||||
<div><p>&#92;</p>\</div>
|
||||
<div><p>&#93;</p>]</div>
|
||||
<div><p>&#94;</p>^</div>
|
||||
<div><p>&#95;</p>_</div>
|
||||
<div><p>&#96;</p>`</div>
|
||||
<div><p>&#97;</p>a</div>
|
||||
<div><p>&#98;</p>b</div>
|
||||
<div><p>&#99;</p>c</div>
|
||||
<div><p>&#100;</p>d</div>
|
||||
<div><p>&#101;</p>e</div>
|
||||
<div><p>&#102;</p>f</div>
|
||||
<div><p>&#103;</p>g</div>
|
||||
<div><p>&#104;</p>h</div>
|
||||
<div><p>&#105;</p>i</div>
|
||||
<div><p>&#106;</p>j</div>
|
||||
<div><p>&#107;</p>k</div>
|
||||
<div><p>&#108;</p>l</div>
|
||||
<div><p>&#109;</p>m</div>
|
||||
<div><p>&#110;</p>n</div>
|
||||
<div><p>&#111;</p>o</div>
|
||||
<div><p>&#112;</p>p</div>
|
||||
<div><p>&#113;</p>q</div>
|
||||
<div><p>&#114;</p>r</div>
|
||||
<div><p>&#115;</p>s</div>
|
||||
<div><p>&#116;</p>t</div>
|
||||
<div><p>&#117;</p>u</div>
|
||||
<div><p>&#118;</p>v</div>
|
||||
<div><p>&#119;</p>w</div>
|
||||
<div><p>&#120;</p>x</div>
|
||||
<div><p>&#121;</p>y</div>
|
||||
<div><p>&#122;</p>z</div>
|
||||
<div><p>&#123;</p>{</div>
|
||||
<div><p>&#124;</p>|</div>
|
||||
<div><p>&#125;</p>}</div>
|
||||
<div><p>&#126;</p>~</div>
|
||||
<div><p>&#160;</p> </div>
|
||||
<div><p>&#161;</p>¡</div>
|
||||
<div><p>&#162;</p>¢</div>
|
||||
<div><p>&#163;</p>£</div>
|
||||
<div><p>&#164;</p>¤</div>
|
||||
<div><p>&#165;</p>¥</div>
|
||||
<div><p>&#166;</p>¦</div>
|
||||
<div><p>&#167;</p>§</div>
|
||||
<div><p>&#168;</p>¨</div>
|
||||
<div><p>&#169;</p>©</div>
|
||||
<div><p>&#170;</p>ª</div>
|
||||
<div><p>&#171;</p>«</div>
|
||||
<div><p>&#172;</p>¬</div>
|
||||
<div><p>&#173;</p>­</div>
|
||||
<div><p>&#174;</p>®</div>
|
||||
<div><p>&#175;</p>¯</div>
|
||||
<div><p>&#176;</p>°</div>
|
||||
<div><p>&#177;</p>±</div>
|
||||
<div><p>&#178;</p>²</div>
|
||||
<div><p>&#179;</p>³</div>
|
||||
<div><p>&#180;</p>´</div>
|
||||
<div><p>&#182;</p>¶</div>
|
||||
<div><p>&#183;</p>·</div>
|
||||
<div><p>&#184;</p>¸</div>
|
||||
<div><p>&#185;</p>¹</div>
|
||||
<div><p>&#186;</p>º</div>
|
||||
<div><p>&#187;</p>»</div>
|
||||
<div><p>&#188;</p>¼</div>
|
||||
<div><p>&#189;</p>½</div>
|
||||
<div><p>&#190;</p>¾</div>
|
||||
<div><p>&#191;</p>¿</div>
|
||||
<div><p>&#192;</p>À</div>
|
||||
<div><p>&#193;</p>Á</div>
|
||||
<div><p>&#194;</p>Â</div>
|
||||
<div><p>&#195;</p>Ã</div>
|
||||
<div><p>&#196;</p>Ä</div>
|
||||
<div><p>&#197;</p>Å</div>
|
||||
<div><p>&#198;</p>Æ</div>
|
||||
<div><p>&#199;</p>Ç</div>
|
||||
<div><p>&#200;</p>È</div>
|
||||
<div><p>&#201;</p>É</div>
|
||||
<div><p>&#202;</p>Ê</div>
|
||||
<div><p>&#203;</p>Ë</div>
|
||||
<div><p>&#204;</p>Ì</div>
|
||||
<div><p>&#205;</p>Í</div>
|
||||
<div><p>&#206;</p>Î</div>
|
||||
<div><p>&#207;</p>Ï</div>
|
||||
<div><p>&#208;</p>Ð</div>
|
||||
<div><p>&#209;</p>Ñ</div>
|
||||
<div><p>&#210;</p>Ò</div>
|
||||
<div><p>&#211;</p>Ó</div>
|
||||
<div><p>&#212;</p>Ô</div>
|
||||
<div><p>&#213;</p>Õ</div>
|
||||
<div><p>&#214;</p>Ö</div>
|
||||
<div><p>&#215;</p>×</div>
|
||||
<div><p>&#216;</p>Ø</div>
|
||||
<div><p>&#217;</p>Ù</div>
|
||||
<div><p>&#218;</p>Ú</div>
|
||||
<div><p>&#219;</p>Û</div>
|
||||
<div><p>&#220;</p>Ü</div>
|
||||
<div><p>&#221;</p>Ý</div>
|
||||
<div><p>&#222;</p>Þ</div>
|
||||
<div><p>&#223;</p>ß</div>
|
||||
<div><p>&#224;</p>à</div>
|
||||
<div><p>&#225;</p>á</div>
|
||||
<div><p>&#226;</p>â</div>
|
||||
<div><p>&#227;</p>ã</div>
|
||||
<div><p>&#228;</p>ä</div>
|
||||
<div><p>&#229;</p>å</div>
|
||||
<div><p>&#230;</p>æ</div>
|
||||
<div><p>&#231;</p>ç</div>
|
||||
<div><p>&#232;</p>è</div>
|
||||
<div><p>&#233;</p>é</div>
|
||||
<div><p>&#234;</p>ê</div>
|
||||
<div><p>&#235;</p>ë</div>
|
||||
<div><p>&#236;</p>ì</div>
|
||||
<div><p>&#237;</p>í</div>
|
||||
<div><p>&#238;</p>î</div>
|
||||
<div><p>&#239;</p>ï</div>
|
||||
<div><p>&#240;</p>ð</div>
|
||||
<div><p>&#241;</p>ñ</div>
|
||||
<div><p>&#242;</p>ò</div>
|
||||
<div><p>&#243;</p>ó</div>
|
||||
<div><p>&#244;</p>ô</div>
|
||||
<div><p>&#245;</p>õ</div>
|
||||
<div><p>&#246;</p>ö</div>
|
||||
<div><p>&#247;</p>÷</div>
|
||||
<div><p>&#248;</p>ø</div>
|
||||
<div><p>&#249;</p>ù</div>
|
||||
<div><p>&#250;</p>ú</div>
|
||||
<div><p>&#251;</p>û</div>
|
||||
<div><p>&#252;</p>ü</div>
|
||||
<div><p>&#253;</p>ý</div>
|
||||
<div><p>&#254;</p>þ</div>
|
||||
<div><p>&#255;</p>ÿ</div>
|
||||
<div><p>&#338;</p>Œ</div>
|
||||
<div><p>&#339;</p>œ</div>
|
||||
<div><p>&#376;</p>Ÿ</div>
|
||||
<div><p>&#710;</p>ˆ</div>
|
||||
<div><p>&#732;</p>˜</div>
|
||||
<div><p>&#8192;</p> </div>
|
||||
<div><p>&#8193;</p> </div>
|
||||
<div><p>&#8194;</p> </div>
|
||||
<div><p>&#8195;</p> </div>
|
||||
<div><p>&#8196;</p> </div>
|
||||
<div><p>&#8197;</p> </div>
|
||||
<div><p>&#8198;</p> </div>
|
||||
<div><p>&#8199;</p> </div>
|
||||
<div><p>&#8200;</p> </div>
|
||||
<div><p>&#8201;</p> </div>
|
||||
<div><p>&#8202;</p> </div>
|
||||
<div><p>&#8208;</p>‐</div>
|
||||
<div><p>&#8209;</p>‑</div>
|
||||
<div><p>&#8210;</p>‒</div>
|
||||
<div><p>&#8211;</p>–</div>
|
||||
<div><p>&#8212;</p>—</div>
|
||||
<div><p>&#8216;</p>‘</div>
|
||||
<div><p>&#8217;</p>’</div>
|
||||
<div><p>&#8218;</p>‚</div>
|
||||
<div><p>&#8220;</p>“</div>
|
||||
<div><p>&#8221;</p>”</div>
|
||||
<div><p>&#8222;</p>„</div>
|
||||
<div><p>&#8226;</p>•</div>
|
||||
<div><p>&#8230;</p>…</div>
|
||||
<div><p>&#8239;</p> </div>
|
||||
<div><p>&#8249;</p>‹</div>
|
||||
<div><p>&#8250;</p>›</div>
|
||||
<div><p>&#8287;</p> </div>
|
||||
<div><p>&#8364;</p>€</div>
|
||||
<div><p>&#8482;</p>™</div>
|
||||
<div><p>&#9724;</p>◼</div>
|
||||
<div><p>&#64257;</p>fi</div>
|
||||
<div><p>&#64258;</p>fl</div>
|
||||
<div><p>&#64259;</p>ffi</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="specs">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="installing">
|
||||
<div class="section">
|
||||
<div class="grid7 firstcol">
|
||||
<h1>Installing Webfonts</h1>
|
||||
|
||||
<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
|
||||
|
||||
<h2>1. Upload your webfonts</h2>
|
||||
<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
|
||||
|
||||
<h2>2. Include the webfont stylesheet</h2>
|
||||
<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
|
||||
|
||||
|
||||
<code>
|
||||
@font-face{
|
||||
font-family: 'MyWebFont';
|
||||
src: url('WebFont.eot');
|
||||
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
|
||||
url('WebFont.woff') format('woff'),
|
||||
url('WebFont.ttf') format('truetype'),
|
||||
url('WebFont.svg#webfont') format('svg');
|
||||
}
|
||||
</code>
|
||||
|
||||
<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
|
||||
<code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
|
||||
|
||||
<h2>3. Modify your own stylesheet</h2>
|
||||
<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
|
||||
<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
|
||||
|
||||
<h2>4. Test</h2>
|
||||
<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid5 sidebar">
|
||||
<div class="box">
|
||||
<h2>Troubleshooting<br />Font-Face Problems</h2>
|
||||
<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
|
||||
|
||||
<h3>Fonts not showing in any browser</h3>
|
||||
|
||||
<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
|
||||
|
||||
<h3>Fonts not loading in iPhone or iPad</h3>
|
||||
|
||||
<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
|
||||
|
||||
<h3>Fonts not loading in Firefox</h3>
|
||||
|
||||
<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
|
||||
|
||||
<h3>Fonts not loading in IE</h3>
|
||||
|
||||
<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
|
||||
|
||||
<h3>Fonts not loading in IE9</h3>
|
||||
|
||||
<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>©2010-2017 Font Squirrel. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
src/fonts/Aven/xxiiaven-bold-webfont.woff
Normal file
BIN
src/fonts/Aven/xxiiaven-bold-webfont.woff
Normal file
Binary file not shown.
BIN
src/fonts/Aven/xxiiaven-bold-webfont.woff2
Normal file
BIN
src/fonts/Aven/xxiiaven-bold-webfont.woff2
Normal file
Binary file not shown.
620
src/fonts/Aven/xxiiaven-light-demo.html
Normal file
620
src/fonts/Aven/xxiiaven-light-demo.html
Normal file
|
|
@ -0,0 +1,620 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript">
|
||||
(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
|
||||
if(typeof param.defaultContent=="number")
|
||||
{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
|
||||
$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
|
||||
function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
|
||||
{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
|
||||
$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
|
||||
</script>
|
||||
<link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
|
||||
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
|
||||
|
||||
<style type="text/css">
|
||||
body{
|
||||
font-family: 'xxii_avenlight';
|
||||
}
|
||||
</style>
|
||||
|
||||
<title>XXII Aven Light Regular Specimen</title>
|
||||
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function() {
|
||||
$('#container').easyTabs({defaultContent:1});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="header">
|
||||
XXII Aven Light Regular </div>
|
||||
<ul class="tabs">
|
||||
<li><a href="#specimen">Specimen</a></li>
|
||||
<li><a href="#layout">Sample Layout</a></li>
|
||||
<li><a href="#glyphs">Glyphs & Languages</a></li>
|
||||
<li><a href="#installing">Installing Webfonts</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="main_content">
|
||||
|
||||
|
||||
<div id="specimen">
|
||||
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<div class="huge">AaBb</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="glyph_range">A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<table class="sample_table">
|
||||
<tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section" id="bodycomparison">
|
||||
|
||||
|
||||
<div id="xheight">
|
||||
<div class="fontbody">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
|
||||
<div class="fontbody" style="z-index:1">
|
||||
body<span>XXII Aven Light Regular</span>
|
||||
</div>
|
||||
<div class="arialbody" style="z-index:1">
|
||||
body<span>Arial</span>
|
||||
</div>
|
||||
<div class="verdanabody" style="z-index:1">
|
||||
body<span>Verdana</span>
|
||||
</div>
|
||||
<div class="georgiabody" style="z-index:1">
|
||||
body<span>Georgia</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section psample psample_row1" id="">
|
||||
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
<div class="section psample psample_row2" id="">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row4" id="">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section psample psample_row1 fullreverse">
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row2 fullreverse">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="layout">
|
||||
|
||||
<div class="section">
|
||||
|
||||
<div class="grid12 firstcol">
|
||||
<h1>Lorem Ipsum Dolor</h1>
|
||||
<h2>Etiam porta sem malesuada magna mollis euismod</h2>
|
||||
|
||||
<p class="byline">By <a href="#link">Aenean Lacinia</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid8 firstcol">
|
||||
<p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
<h3>Pellentesque ornare sem</h3>
|
||||
|
||||
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
|
||||
|
||||
<p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
|
||||
|
||||
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
|
||||
|
||||
<h3>Cras mattis consectetur</h3>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
|
||||
|
||||
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid4 sidebar">
|
||||
|
||||
<div class="box reverse">
|
||||
<p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
|
||||
</div>
|
||||
|
||||
<p class="caption">Maecenas sed diam eget risus varius.</p>
|
||||
|
||||
<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
|
||||
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="glyphs">
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
|
||||
<h1>Language Support</h1>
|
||||
<p>The subset of XXII Aven Light Regular in this kit supports the following languages:<br />
|
||||
|
||||
Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo </p>
|
||||
<h1>Glyph Chart</h1>
|
||||
<p>The subset of XXII Aven Light Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
|
||||
<div id="glyph_chart">
|
||||
|
||||
<div><p>&#13;</p> </div>
|
||||
<div><p>&#32;</p> </div>
|
||||
<div><p>&#33;</p>!</div>
|
||||
<div><p>&#34;</p>"</div>
|
||||
<div><p>&#35;</p>#</div>
|
||||
<div><p>&#36;</p>$</div>
|
||||
<div><p>&#37;</p>%</div>
|
||||
<div><p>&#38;</p>&</div>
|
||||
<div><p>&#39;</p>'</div>
|
||||
<div><p>&#40;</p>(</div>
|
||||
<div><p>&#41;</p>)</div>
|
||||
<div><p>&#42;</p>*</div>
|
||||
<div><p>&#43;</p>+</div>
|
||||
<div><p>&#44;</p>,</div>
|
||||
<div><p>&#45;</p>-</div>
|
||||
<div><p>&#46;</p>.</div>
|
||||
<div><p>&#47;</p>/</div>
|
||||
<div><p>&#48;</p>0</div>
|
||||
<div><p>&#49;</p>1</div>
|
||||
<div><p>&#50;</p>2</div>
|
||||
<div><p>&#51;</p>3</div>
|
||||
<div><p>&#52;</p>4</div>
|
||||
<div><p>&#53;</p>5</div>
|
||||
<div><p>&#54;</p>6</div>
|
||||
<div><p>&#55;</p>7</div>
|
||||
<div><p>&#56;</p>8</div>
|
||||
<div><p>&#57;</p>9</div>
|
||||
<div><p>&#58;</p>:</div>
|
||||
<div><p>&#59;</p>;</div>
|
||||
<div><p>&#60;</p><</div>
|
||||
<div><p>&#61;</p>=</div>
|
||||
<div><p>&#62;</p>></div>
|
||||
<div><p>&#63;</p>?</div>
|
||||
<div><p>&#64;</p>@</div>
|
||||
<div><p>&#65;</p>A</div>
|
||||
<div><p>&#66;</p>B</div>
|
||||
<div><p>&#67;</p>C</div>
|
||||
<div><p>&#68;</p>D</div>
|
||||
<div><p>&#69;</p>E</div>
|
||||
<div><p>&#70;</p>F</div>
|
||||
<div><p>&#71;</p>G</div>
|
||||
<div><p>&#72;</p>H</div>
|
||||
<div><p>&#73;</p>I</div>
|
||||
<div><p>&#74;</p>J</div>
|
||||
<div><p>&#75;</p>K</div>
|
||||
<div><p>&#76;</p>L</div>
|
||||
<div><p>&#77;</p>M</div>
|
||||
<div><p>&#78;</p>N</div>
|
||||
<div><p>&#79;</p>O</div>
|
||||
<div><p>&#80;</p>P</div>
|
||||
<div><p>&#81;</p>Q</div>
|
||||
<div><p>&#82;</p>R</div>
|
||||
<div><p>&#83;</p>S</div>
|
||||
<div><p>&#84;</p>T</div>
|
||||
<div><p>&#85;</p>U</div>
|
||||
<div><p>&#86;</p>V</div>
|
||||
<div><p>&#87;</p>W</div>
|
||||
<div><p>&#88;</p>X</div>
|
||||
<div><p>&#89;</p>Y</div>
|
||||
<div><p>&#90;</p>Z</div>
|
||||
<div><p>&#91;</p>[</div>
|
||||
<div><p>&#92;</p>\</div>
|
||||
<div><p>&#93;</p>]</div>
|
||||
<div><p>&#94;</p>^</div>
|
||||
<div><p>&#95;</p>_</div>
|
||||
<div><p>&#96;</p>`</div>
|
||||
<div><p>&#97;</p>a</div>
|
||||
<div><p>&#98;</p>b</div>
|
||||
<div><p>&#99;</p>c</div>
|
||||
<div><p>&#100;</p>d</div>
|
||||
<div><p>&#101;</p>e</div>
|
||||
<div><p>&#102;</p>f</div>
|
||||
<div><p>&#103;</p>g</div>
|
||||
<div><p>&#104;</p>h</div>
|
||||
<div><p>&#105;</p>i</div>
|
||||
<div><p>&#106;</p>j</div>
|
||||
<div><p>&#107;</p>k</div>
|
||||
<div><p>&#108;</p>l</div>
|
||||
<div><p>&#109;</p>m</div>
|
||||
<div><p>&#110;</p>n</div>
|
||||
<div><p>&#111;</p>o</div>
|
||||
<div><p>&#112;</p>p</div>
|
||||
<div><p>&#113;</p>q</div>
|
||||
<div><p>&#114;</p>r</div>
|
||||
<div><p>&#115;</p>s</div>
|
||||
<div><p>&#116;</p>t</div>
|
||||
<div><p>&#117;</p>u</div>
|
||||
<div><p>&#118;</p>v</div>
|
||||
<div><p>&#119;</p>w</div>
|
||||
<div><p>&#120;</p>x</div>
|
||||
<div><p>&#121;</p>y</div>
|
||||
<div><p>&#122;</p>z</div>
|
||||
<div><p>&#123;</p>{</div>
|
||||
<div><p>&#124;</p>|</div>
|
||||
<div><p>&#125;</p>}</div>
|
||||
<div><p>&#126;</p>~</div>
|
||||
<div><p>&#160;</p> </div>
|
||||
<div><p>&#161;</p>¡</div>
|
||||
<div><p>&#162;</p>¢</div>
|
||||
<div><p>&#163;</p>£</div>
|
||||
<div><p>&#164;</p>¤</div>
|
||||
<div><p>&#165;</p>¥</div>
|
||||
<div><p>&#166;</p>¦</div>
|
||||
<div><p>&#167;</p>§</div>
|
||||
<div><p>&#168;</p>¨</div>
|
||||
<div><p>&#169;</p>©</div>
|
||||
<div><p>&#170;</p>ª</div>
|
||||
<div><p>&#171;</p>«</div>
|
||||
<div><p>&#172;</p>¬</div>
|
||||
<div><p>&#173;</p>­</div>
|
||||
<div><p>&#174;</p>®</div>
|
||||
<div><p>&#175;</p>¯</div>
|
||||
<div><p>&#176;</p>°</div>
|
||||
<div><p>&#177;</p>±</div>
|
||||
<div><p>&#178;</p>²</div>
|
||||
<div><p>&#179;</p>³</div>
|
||||
<div><p>&#180;</p>´</div>
|
||||
<div><p>&#182;</p>¶</div>
|
||||
<div><p>&#183;</p>·</div>
|
||||
<div><p>&#184;</p>¸</div>
|
||||
<div><p>&#185;</p>¹</div>
|
||||
<div><p>&#186;</p>º</div>
|
||||
<div><p>&#187;</p>»</div>
|
||||
<div><p>&#188;</p>¼</div>
|
||||
<div><p>&#189;</p>½</div>
|
||||
<div><p>&#190;</p>¾</div>
|
||||
<div><p>&#191;</p>¿</div>
|
||||
<div><p>&#192;</p>À</div>
|
||||
<div><p>&#193;</p>Á</div>
|
||||
<div><p>&#194;</p>Â</div>
|
||||
<div><p>&#195;</p>Ã</div>
|
||||
<div><p>&#196;</p>Ä</div>
|
||||
<div><p>&#197;</p>Å</div>
|
||||
<div><p>&#198;</p>Æ</div>
|
||||
<div><p>&#199;</p>Ç</div>
|
||||
<div><p>&#200;</p>È</div>
|
||||
<div><p>&#201;</p>É</div>
|
||||
<div><p>&#202;</p>Ê</div>
|
||||
<div><p>&#203;</p>Ë</div>
|
||||
<div><p>&#204;</p>Ì</div>
|
||||
<div><p>&#205;</p>Í</div>
|
||||
<div><p>&#206;</p>Î</div>
|
||||
<div><p>&#207;</p>Ï</div>
|
||||
<div><p>&#208;</p>Ð</div>
|
||||
<div><p>&#209;</p>Ñ</div>
|
||||
<div><p>&#210;</p>Ò</div>
|
||||
<div><p>&#211;</p>Ó</div>
|
||||
<div><p>&#212;</p>Ô</div>
|
||||
<div><p>&#213;</p>Õ</div>
|
||||
<div><p>&#214;</p>Ö</div>
|
||||
<div><p>&#215;</p>×</div>
|
||||
<div><p>&#216;</p>Ø</div>
|
||||
<div><p>&#217;</p>Ù</div>
|
||||
<div><p>&#218;</p>Ú</div>
|
||||
<div><p>&#219;</p>Û</div>
|
||||
<div><p>&#220;</p>Ü</div>
|
||||
<div><p>&#221;</p>Ý</div>
|
||||
<div><p>&#222;</p>Þ</div>
|
||||
<div><p>&#223;</p>ß</div>
|
||||
<div><p>&#224;</p>à</div>
|
||||
<div><p>&#225;</p>á</div>
|
||||
<div><p>&#226;</p>â</div>
|
||||
<div><p>&#227;</p>ã</div>
|
||||
<div><p>&#228;</p>ä</div>
|
||||
<div><p>&#229;</p>å</div>
|
||||
<div><p>&#230;</p>æ</div>
|
||||
<div><p>&#231;</p>ç</div>
|
||||
<div><p>&#232;</p>è</div>
|
||||
<div><p>&#233;</p>é</div>
|
||||
<div><p>&#234;</p>ê</div>
|
||||
<div><p>&#235;</p>ë</div>
|
||||
<div><p>&#236;</p>ì</div>
|
||||
<div><p>&#237;</p>í</div>
|
||||
<div><p>&#238;</p>î</div>
|
||||
<div><p>&#239;</p>ï</div>
|
||||
<div><p>&#240;</p>ð</div>
|
||||
<div><p>&#241;</p>ñ</div>
|
||||
<div><p>&#242;</p>ò</div>
|
||||
<div><p>&#243;</p>ó</div>
|
||||
<div><p>&#244;</p>ô</div>
|
||||
<div><p>&#245;</p>õ</div>
|
||||
<div><p>&#246;</p>ö</div>
|
||||
<div><p>&#247;</p>÷</div>
|
||||
<div><p>&#248;</p>ø</div>
|
||||
<div><p>&#249;</p>ù</div>
|
||||
<div><p>&#250;</p>ú</div>
|
||||
<div><p>&#251;</p>û</div>
|
||||
<div><p>&#252;</p>ü</div>
|
||||
<div><p>&#253;</p>ý</div>
|
||||
<div><p>&#254;</p>þ</div>
|
||||
<div><p>&#255;</p>ÿ</div>
|
||||
<div><p>&#338;</p>Œ</div>
|
||||
<div><p>&#339;</p>œ</div>
|
||||
<div><p>&#376;</p>Ÿ</div>
|
||||
<div><p>&#710;</p>ˆ</div>
|
||||
<div><p>&#732;</p>˜</div>
|
||||
<div><p>&#8192;</p> </div>
|
||||
<div><p>&#8193;</p> </div>
|
||||
<div><p>&#8194;</p> </div>
|
||||
<div><p>&#8195;</p> </div>
|
||||
<div><p>&#8196;</p> </div>
|
||||
<div><p>&#8197;</p> </div>
|
||||
<div><p>&#8198;</p> </div>
|
||||
<div><p>&#8199;</p> </div>
|
||||
<div><p>&#8200;</p> </div>
|
||||
<div><p>&#8201;</p> </div>
|
||||
<div><p>&#8202;</p> </div>
|
||||
<div><p>&#8208;</p>‐</div>
|
||||
<div><p>&#8209;</p>‑</div>
|
||||
<div><p>&#8210;</p>‒</div>
|
||||
<div><p>&#8211;</p>–</div>
|
||||
<div><p>&#8212;</p>—</div>
|
||||
<div><p>&#8216;</p>‘</div>
|
||||
<div><p>&#8217;</p>’</div>
|
||||
<div><p>&#8218;</p>‚</div>
|
||||
<div><p>&#8220;</p>“</div>
|
||||
<div><p>&#8221;</p>”</div>
|
||||
<div><p>&#8222;</p>„</div>
|
||||
<div><p>&#8226;</p>•</div>
|
||||
<div><p>&#8230;</p>…</div>
|
||||
<div><p>&#8239;</p> </div>
|
||||
<div><p>&#8249;</p>‹</div>
|
||||
<div><p>&#8250;</p>›</div>
|
||||
<div><p>&#8287;</p> </div>
|
||||
<div><p>&#8364;</p>€</div>
|
||||
<div><p>&#8482;</p>™</div>
|
||||
<div><p>&#9724;</p>◼</div>
|
||||
<div><p>&#64257;</p>fi</div>
|
||||
<div><p>&#64258;</p>fl</div>
|
||||
<div><p>&#64259;</p>ffi</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="specs">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="installing">
|
||||
<div class="section">
|
||||
<div class="grid7 firstcol">
|
||||
<h1>Installing Webfonts</h1>
|
||||
|
||||
<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
|
||||
|
||||
<h2>1. Upload your webfonts</h2>
|
||||
<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
|
||||
|
||||
<h2>2. Include the webfont stylesheet</h2>
|
||||
<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
|
||||
|
||||
|
||||
<code>
|
||||
@font-face{
|
||||
font-family: 'MyWebFont';
|
||||
src: url('WebFont.eot');
|
||||
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
|
||||
url('WebFont.woff') format('woff'),
|
||||
url('WebFont.ttf') format('truetype'),
|
||||
url('WebFont.svg#webfont') format('svg');
|
||||
}
|
||||
</code>
|
||||
|
||||
<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
|
||||
<code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
|
||||
|
||||
<h2>3. Modify your own stylesheet</h2>
|
||||
<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
|
||||
<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
|
||||
|
||||
<h2>4. Test</h2>
|
||||
<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid5 sidebar">
|
||||
<div class="box">
|
||||
<h2>Troubleshooting<br />Font-Face Problems</h2>
|
||||
<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
|
||||
|
||||
<h3>Fonts not showing in any browser</h3>
|
||||
|
||||
<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
|
||||
|
||||
<h3>Fonts not loading in iPhone or iPad</h3>
|
||||
|
||||
<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
|
||||
|
||||
<h3>Fonts not loading in Firefox</h3>
|
||||
|
||||
<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
|
||||
|
||||
<h3>Fonts not loading in IE</h3>
|
||||
|
||||
<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
|
||||
|
||||
<h3>Fonts not loading in IE9</h3>
|
||||
|
||||
<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>©2010-2017 Font Squirrel. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
src/fonts/Aven/xxiiaven-light-webfont.woff
Normal file
BIN
src/fonts/Aven/xxiiaven-light-webfont.woff
Normal file
Binary file not shown.
BIN
src/fonts/Aven/xxiiaven-light-webfont.woff2
Normal file
BIN
src/fonts/Aven/xxiiaven-light-webfont.woff2
Normal file
Binary file not shown.
620
src/fonts/Aven/xxiiaven-medium-demo.html
Normal file
620
src/fonts/Aven/xxiiaven-medium-demo.html
Normal file
|
|
@ -0,0 +1,620 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript">
|
||||
(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
|
||||
if(typeof param.defaultContent=="number")
|
||||
{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
|
||||
$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
|
||||
function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
|
||||
{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
|
||||
$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
|
||||
</script>
|
||||
<link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
|
||||
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
|
||||
|
||||
<style type="text/css">
|
||||
body{
|
||||
font-family: 'xxii_avenmedium';
|
||||
}
|
||||
</style>
|
||||
|
||||
<title>XXII Aven Medium Regular Specimen</title>
|
||||
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function() {
|
||||
$('#container').easyTabs({defaultContent:1});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="header">
|
||||
XXII Aven Medium Regular </div>
|
||||
<ul class="tabs">
|
||||
<li><a href="#specimen">Specimen</a></li>
|
||||
<li><a href="#layout">Sample Layout</a></li>
|
||||
<li><a href="#glyphs">Glyphs & Languages</a></li>
|
||||
<li><a href="#installing">Installing Webfonts</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="main_content">
|
||||
|
||||
|
||||
<div id="specimen">
|
||||
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<div class="huge">AaBb</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="glyph_range">A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<table class="sample_table">
|
||||
<tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section" id="bodycomparison">
|
||||
|
||||
|
||||
<div id="xheight">
|
||||
<div class="fontbody">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
|
||||
<div class="fontbody" style="z-index:1">
|
||||
body<span>XXII Aven Medium Regular</span>
|
||||
</div>
|
||||
<div class="arialbody" style="z-index:1">
|
||||
body<span>Arial</span>
|
||||
</div>
|
||||
<div class="verdanabody" style="z-index:1">
|
||||
body<span>Verdana</span>
|
||||
</div>
|
||||
<div class="georgiabody" style="z-index:1">
|
||||
body<span>Georgia</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section psample psample_row1" id="">
|
||||
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
<div class="section psample psample_row2" id="">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row4" id="">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section psample psample_row1 fullreverse">
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row2 fullreverse">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="layout">
|
||||
|
||||
<div class="section">
|
||||
|
||||
<div class="grid12 firstcol">
|
||||
<h1>Lorem Ipsum Dolor</h1>
|
||||
<h2>Etiam porta sem malesuada magna mollis euismod</h2>
|
||||
|
||||
<p class="byline">By <a href="#link">Aenean Lacinia</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid8 firstcol">
|
||||
<p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
<h3>Pellentesque ornare sem</h3>
|
||||
|
||||
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
|
||||
|
||||
<p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
|
||||
|
||||
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
|
||||
|
||||
<h3>Cras mattis consectetur</h3>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
|
||||
|
||||
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid4 sidebar">
|
||||
|
||||
<div class="box reverse">
|
||||
<p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
|
||||
</div>
|
||||
|
||||
<p class="caption">Maecenas sed diam eget risus varius.</p>
|
||||
|
||||
<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
|
||||
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="glyphs">
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
|
||||
<h1>Language Support</h1>
|
||||
<p>The subset of XXII Aven Medium Regular in this kit supports the following languages:<br />
|
||||
|
||||
Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo </p>
|
||||
<h1>Glyph Chart</h1>
|
||||
<p>The subset of XXII Aven Medium Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
|
||||
<div id="glyph_chart">
|
||||
|
||||
<div><p>&#13;</p> </div>
|
||||
<div><p>&#32;</p> </div>
|
||||
<div><p>&#33;</p>!</div>
|
||||
<div><p>&#34;</p>"</div>
|
||||
<div><p>&#35;</p>#</div>
|
||||
<div><p>&#36;</p>$</div>
|
||||
<div><p>&#37;</p>%</div>
|
||||
<div><p>&#38;</p>&</div>
|
||||
<div><p>&#39;</p>'</div>
|
||||
<div><p>&#40;</p>(</div>
|
||||
<div><p>&#41;</p>)</div>
|
||||
<div><p>&#42;</p>*</div>
|
||||
<div><p>&#43;</p>+</div>
|
||||
<div><p>&#44;</p>,</div>
|
||||
<div><p>&#45;</p>-</div>
|
||||
<div><p>&#46;</p>.</div>
|
||||
<div><p>&#47;</p>/</div>
|
||||
<div><p>&#48;</p>0</div>
|
||||
<div><p>&#49;</p>1</div>
|
||||
<div><p>&#50;</p>2</div>
|
||||
<div><p>&#51;</p>3</div>
|
||||
<div><p>&#52;</p>4</div>
|
||||
<div><p>&#53;</p>5</div>
|
||||
<div><p>&#54;</p>6</div>
|
||||
<div><p>&#55;</p>7</div>
|
||||
<div><p>&#56;</p>8</div>
|
||||
<div><p>&#57;</p>9</div>
|
||||
<div><p>&#58;</p>:</div>
|
||||
<div><p>&#59;</p>;</div>
|
||||
<div><p>&#60;</p><</div>
|
||||
<div><p>&#61;</p>=</div>
|
||||
<div><p>&#62;</p>></div>
|
||||
<div><p>&#63;</p>?</div>
|
||||
<div><p>&#64;</p>@</div>
|
||||
<div><p>&#65;</p>A</div>
|
||||
<div><p>&#66;</p>B</div>
|
||||
<div><p>&#67;</p>C</div>
|
||||
<div><p>&#68;</p>D</div>
|
||||
<div><p>&#69;</p>E</div>
|
||||
<div><p>&#70;</p>F</div>
|
||||
<div><p>&#71;</p>G</div>
|
||||
<div><p>&#72;</p>H</div>
|
||||
<div><p>&#73;</p>I</div>
|
||||
<div><p>&#74;</p>J</div>
|
||||
<div><p>&#75;</p>K</div>
|
||||
<div><p>&#76;</p>L</div>
|
||||
<div><p>&#77;</p>M</div>
|
||||
<div><p>&#78;</p>N</div>
|
||||
<div><p>&#79;</p>O</div>
|
||||
<div><p>&#80;</p>P</div>
|
||||
<div><p>&#81;</p>Q</div>
|
||||
<div><p>&#82;</p>R</div>
|
||||
<div><p>&#83;</p>S</div>
|
||||
<div><p>&#84;</p>T</div>
|
||||
<div><p>&#85;</p>U</div>
|
||||
<div><p>&#86;</p>V</div>
|
||||
<div><p>&#87;</p>W</div>
|
||||
<div><p>&#88;</p>X</div>
|
||||
<div><p>&#89;</p>Y</div>
|
||||
<div><p>&#90;</p>Z</div>
|
||||
<div><p>&#91;</p>[</div>
|
||||
<div><p>&#92;</p>\</div>
|
||||
<div><p>&#93;</p>]</div>
|
||||
<div><p>&#94;</p>^</div>
|
||||
<div><p>&#95;</p>_</div>
|
||||
<div><p>&#96;</p>`</div>
|
||||
<div><p>&#97;</p>a</div>
|
||||
<div><p>&#98;</p>b</div>
|
||||
<div><p>&#99;</p>c</div>
|
||||
<div><p>&#100;</p>d</div>
|
||||
<div><p>&#101;</p>e</div>
|
||||
<div><p>&#102;</p>f</div>
|
||||
<div><p>&#103;</p>g</div>
|
||||
<div><p>&#104;</p>h</div>
|
||||
<div><p>&#105;</p>i</div>
|
||||
<div><p>&#106;</p>j</div>
|
||||
<div><p>&#107;</p>k</div>
|
||||
<div><p>&#108;</p>l</div>
|
||||
<div><p>&#109;</p>m</div>
|
||||
<div><p>&#110;</p>n</div>
|
||||
<div><p>&#111;</p>o</div>
|
||||
<div><p>&#112;</p>p</div>
|
||||
<div><p>&#113;</p>q</div>
|
||||
<div><p>&#114;</p>r</div>
|
||||
<div><p>&#115;</p>s</div>
|
||||
<div><p>&#116;</p>t</div>
|
||||
<div><p>&#117;</p>u</div>
|
||||
<div><p>&#118;</p>v</div>
|
||||
<div><p>&#119;</p>w</div>
|
||||
<div><p>&#120;</p>x</div>
|
||||
<div><p>&#121;</p>y</div>
|
||||
<div><p>&#122;</p>z</div>
|
||||
<div><p>&#123;</p>{</div>
|
||||
<div><p>&#124;</p>|</div>
|
||||
<div><p>&#125;</p>}</div>
|
||||
<div><p>&#126;</p>~</div>
|
||||
<div><p>&#160;</p> </div>
|
||||
<div><p>&#161;</p>¡</div>
|
||||
<div><p>&#162;</p>¢</div>
|
||||
<div><p>&#163;</p>£</div>
|
||||
<div><p>&#164;</p>¤</div>
|
||||
<div><p>&#165;</p>¥</div>
|
||||
<div><p>&#166;</p>¦</div>
|
||||
<div><p>&#167;</p>§</div>
|
||||
<div><p>&#168;</p>¨</div>
|
||||
<div><p>&#169;</p>©</div>
|
||||
<div><p>&#170;</p>ª</div>
|
||||
<div><p>&#171;</p>«</div>
|
||||
<div><p>&#172;</p>¬</div>
|
||||
<div><p>&#173;</p>­</div>
|
||||
<div><p>&#174;</p>®</div>
|
||||
<div><p>&#175;</p>¯</div>
|
||||
<div><p>&#176;</p>°</div>
|
||||
<div><p>&#177;</p>±</div>
|
||||
<div><p>&#178;</p>²</div>
|
||||
<div><p>&#179;</p>³</div>
|
||||
<div><p>&#180;</p>´</div>
|
||||
<div><p>&#182;</p>¶</div>
|
||||
<div><p>&#183;</p>·</div>
|
||||
<div><p>&#184;</p>¸</div>
|
||||
<div><p>&#185;</p>¹</div>
|
||||
<div><p>&#186;</p>º</div>
|
||||
<div><p>&#187;</p>»</div>
|
||||
<div><p>&#188;</p>¼</div>
|
||||
<div><p>&#189;</p>½</div>
|
||||
<div><p>&#190;</p>¾</div>
|
||||
<div><p>&#191;</p>¿</div>
|
||||
<div><p>&#192;</p>À</div>
|
||||
<div><p>&#193;</p>Á</div>
|
||||
<div><p>&#194;</p>Â</div>
|
||||
<div><p>&#195;</p>Ã</div>
|
||||
<div><p>&#196;</p>Ä</div>
|
||||
<div><p>&#197;</p>Å</div>
|
||||
<div><p>&#198;</p>Æ</div>
|
||||
<div><p>&#199;</p>Ç</div>
|
||||
<div><p>&#200;</p>È</div>
|
||||
<div><p>&#201;</p>É</div>
|
||||
<div><p>&#202;</p>Ê</div>
|
||||
<div><p>&#203;</p>Ë</div>
|
||||
<div><p>&#204;</p>Ì</div>
|
||||
<div><p>&#205;</p>Í</div>
|
||||
<div><p>&#206;</p>Î</div>
|
||||
<div><p>&#207;</p>Ï</div>
|
||||
<div><p>&#208;</p>Ð</div>
|
||||
<div><p>&#209;</p>Ñ</div>
|
||||
<div><p>&#210;</p>Ò</div>
|
||||
<div><p>&#211;</p>Ó</div>
|
||||
<div><p>&#212;</p>Ô</div>
|
||||
<div><p>&#213;</p>Õ</div>
|
||||
<div><p>&#214;</p>Ö</div>
|
||||
<div><p>&#215;</p>×</div>
|
||||
<div><p>&#216;</p>Ø</div>
|
||||
<div><p>&#217;</p>Ù</div>
|
||||
<div><p>&#218;</p>Ú</div>
|
||||
<div><p>&#219;</p>Û</div>
|
||||
<div><p>&#220;</p>Ü</div>
|
||||
<div><p>&#221;</p>Ý</div>
|
||||
<div><p>&#222;</p>Þ</div>
|
||||
<div><p>&#223;</p>ß</div>
|
||||
<div><p>&#224;</p>à</div>
|
||||
<div><p>&#225;</p>á</div>
|
||||
<div><p>&#226;</p>â</div>
|
||||
<div><p>&#227;</p>ã</div>
|
||||
<div><p>&#228;</p>ä</div>
|
||||
<div><p>&#229;</p>å</div>
|
||||
<div><p>&#230;</p>æ</div>
|
||||
<div><p>&#231;</p>ç</div>
|
||||
<div><p>&#232;</p>è</div>
|
||||
<div><p>&#233;</p>é</div>
|
||||
<div><p>&#234;</p>ê</div>
|
||||
<div><p>&#235;</p>ë</div>
|
||||
<div><p>&#236;</p>ì</div>
|
||||
<div><p>&#237;</p>í</div>
|
||||
<div><p>&#238;</p>î</div>
|
||||
<div><p>&#239;</p>ï</div>
|
||||
<div><p>&#240;</p>ð</div>
|
||||
<div><p>&#241;</p>ñ</div>
|
||||
<div><p>&#242;</p>ò</div>
|
||||
<div><p>&#243;</p>ó</div>
|
||||
<div><p>&#244;</p>ô</div>
|
||||
<div><p>&#245;</p>õ</div>
|
||||
<div><p>&#246;</p>ö</div>
|
||||
<div><p>&#247;</p>÷</div>
|
||||
<div><p>&#248;</p>ø</div>
|
||||
<div><p>&#249;</p>ù</div>
|
||||
<div><p>&#250;</p>ú</div>
|
||||
<div><p>&#251;</p>û</div>
|
||||
<div><p>&#252;</p>ü</div>
|
||||
<div><p>&#253;</p>ý</div>
|
||||
<div><p>&#254;</p>þ</div>
|
||||
<div><p>&#255;</p>ÿ</div>
|
||||
<div><p>&#338;</p>Œ</div>
|
||||
<div><p>&#339;</p>œ</div>
|
||||
<div><p>&#376;</p>Ÿ</div>
|
||||
<div><p>&#710;</p>ˆ</div>
|
||||
<div><p>&#732;</p>˜</div>
|
||||
<div><p>&#8192;</p> </div>
|
||||
<div><p>&#8193;</p> </div>
|
||||
<div><p>&#8194;</p> </div>
|
||||
<div><p>&#8195;</p> </div>
|
||||
<div><p>&#8196;</p> </div>
|
||||
<div><p>&#8197;</p> </div>
|
||||
<div><p>&#8198;</p> </div>
|
||||
<div><p>&#8199;</p> </div>
|
||||
<div><p>&#8200;</p> </div>
|
||||
<div><p>&#8201;</p> </div>
|
||||
<div><p>&#8202;</p> </div>
|
||||
<div><p>&#8208;</p>‐</div>
|
||||
<div><p>&#8209;</p>‑</div>
|
||||
<div><p>&#8210;</p>‒</div>
|
||||
<div><p>&#8211;</p>–</div>
|
||||
<div><p>&#8212;</p>—</div>
|
||||
<div><p>&#8216;</p>‘</div>
|
||||
<div><p>&#8217;</p>’</div>
|
||||
<div><p>&#8218;</p>‚</div>
|
||||
<div><p>&#8220;</p>“</div>
|
||||
<div><p>&#8221;</p>”</div>
|
||||
<div><p>&#8222;</p>„</div>
|
||||
<div><p>&#8226;</p>•</div>
|
||||
<div><p>&#8230;</p>…</div>
|
||||
<div><p>&#8239;</p> </div>
|
||||
<div><p>&#8249;</p>‹</div>
|
||||
<div><p>&#8250;</p>›</div>
|
||||
<div><p>&#8287;</p> </div>
|
||||
<div><p>&#8364;</p>€</div>
|
||||
<div><p>&#8482;</p>™</div>
|
||||
<div><p>&#9724;</p>◼</div>
|
||||
<div><p>&#64257;</p>fi</div>
|
||||
<div><p>&#64258;</p>fl</div>
|
||||
<div><p>&#64259;</p>ffi</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="specs">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="installing">
|
||||
<div class="section">
|
||||
<div class="grid7 firstcol">
|
||||
<h1>Installing Webfonts</h1>
|
||||
|
||||
<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
|
||||
|
||||
<h2>1. Upload your webfonts</h2>
|
||||
<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
|
||||
|
||||
<h2>2. Include the webfont stylesheet</h2>
|
||||
<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
|
||||
|
||||
|
||||
<code>
|
||||
@font-face{
|
||||
font-family: 'MyWebFont';
|
||||
src: url('WebFont.eot');
|
||||
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
|
||||
url('WebFont.woff') format('woff'),
|
||||
url('WebFont.ttf') format('truetype'),
|
||||
url('WebFont.svg#webfont') format('svg');
|
||||
}
|
||||
</code>
|
||||
|
||||
<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
|
||||
<code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
|
||||
|
||||
<h2>3. Modify your own stylesheet</h2>
|
||||
<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
|
||||
<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
|
||||
|
||||
<h2>4. Test</h2>
|
||||
<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid5 sidebar">
|
||||
<div class="box">
|
||||
<h2>Troubleshooting<br />Font-Face Problems</h2>
|
||||
<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
|
||||
|
||||
<h3>Fonts not showing in any browser</h3>
|
||||
|
||||
<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
|
||||
|
||||
<h3>Fonts not loading in iPhone or iPad</h3>
|
||||
|
||||
<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
|
||||
|
||||
<h3>Fonts not loading in Firefox</h3>
|
||||
|
||||
<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
|
||||
|
||||
<h3>Fonts not loading in IE</h3>
|
||||
|
||||
<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
|
||||
|
||||
<h3>Fonts not loading in IE9</h3>
|
||||
|
||||
<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>©2010-2017 Font Squirrel. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
src/fonts/Aven/xxiiaven-medium-webfont.woff
Normal file
BIN
src/fonts/Aven/xxiiaven-medium-webfont.woff
Normal file
Binary file not shown.
BIN
src/fonts/Aven/xxiiaven-medium-webfont.woff2
Normal file
BIN
src/fonts/Aven/xxiiaven-medium-webfont.woff2
Normal file
Binary file not shown.
620
src/fonts/Aven/xxiiaven-regular-demo.html
Normal file
620
src/fonts/Aven/xxiiaven-regular-demo.html
Normal file
|
|
@ -0,0 +1,620 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript">
|
||||
(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
|
||||
if(typeof param.defaultContent=="number")
|
||||
{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
|
||||
$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
|
||||
function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
|
||||
{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
|
||||
$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
|
||||
</script>
|
||||
<link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
|
||||
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
|
||||
|
||||
<style type="text/css">
|
||||
body{
|
||||
font-family: 'xxii_avenregular';
|
||||
}
|
||||
</style>
|
||||
|
||||
<title>XXII Aven Regular Specimen</title>
|
||||
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function() {
|
||||
$('#container').easyTabs({defaultContent:1});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="header">
|
||||
XXII Aven Regular </div>
|
||||
<ul class="tabs">
|
||||
<li><a href="#specimen">Specimen</a></li>
|
||||
<li><a href="#layout">Sample Layout</a></li>
|
||||
<li><a href="#glyphs">Glyphs & Languages</a></li>
|
||||
<li><a href="#installing">Installing Webfonts</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="main_content">
|
||||
|
||||
|
||||
<div id="specimen">
|
||||
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<div class="huge">AaBb</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="glyph_range">A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<table class="sample_table">
|
||||
<tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section" id="bodycomparison">
|
||||
|
||||
|
||||
<div id="xheight">
|
||||
<div class="fontbody">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
|
||||
<div class="fontbody" style="z-index:1">
|
||||
body<span>XXII Aven Regular</span>
|
||||
</div>
|
||||
<div class="arialbody" style="z-index:1">
|
||||
body<span>Arial</span>
|
||||
</div>
|
||||
<div class="verdanabody" style="z-index:1">
|
||||
body<span>Verdana</span>
|
||||
</div>
|
||||
<div class="georgiabody" style="z-index:1">
|
||||
body<span>Georgia</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section psample psample_row1" id="">
|
||||
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
<div class="section psample psample_row2" id="">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row4" id="">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section psample psample_row1 fullreverse">
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row2 fullreverse">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="layout">
|
||||
|
||||
<div class="section">
|
||||
|
||||
<div class="grid12 firstcol">
|
||||
<h1>Lorem Ipsum Dolor</h1>
|
||||
<h2>Etiam porta sem malesuada magna mollis euismod</h2>
|
||||
|
||||
<p class="byline">By <a href="#link">Aenean Lacinia</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid8 firstcol">
|
||||
<p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
<h3>Pellentesque ornare sem</h3>
|
||||
|
||||
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
|
||||
|
||||
<p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
|
||||
|
||||
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
|
||||
|
||||
<h3>Cras mattis consectetur</h3>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
|
||||
|
||||
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid4 sidebar">
|
||||
|
||||
<div class="box reverse">
|
||||
<p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
|
||||
</div>
|
||||
|
||||
<p class="caption">Maecenas sed diam eget risus varius.</p>
|
||||
|
||||
<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
|
||||
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="glyphs">
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
|
||||
<h1>Language Support</h1>
|
||||
<p>The subset of XXII Aven Regular in this kit supports the following languages:<br />
|
||||
|
||||
Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo </p>
|
||||
<h1>Glyph Chart</h1>
|
||||
<p>The subset of XXII Aven Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
|
||||
<div id="glyph_chart">
|
||||
|
||||
<div><p>&#13;</p> </div>
|
||||
<div><p>&#32;</p> </div>
|
||||
<div><p>&#33;</p>!</div>
|
||||
<div><p>&#34;</p>"</div>
|
||||
<div><p>&#35;</p>#</div>
|
||||
<div><p>&#36;</p>$</div>
|
||||
<div><p>&#37;</p>%</div>
|
||||
<div><p>&#38;</p>&</div>
|
||||
<div><p>&#39;</p>'</div>
|
||||
<div><p>&#40;</p>(</div>
|
||||
<div><p>&#41;</p>)</div>
|
||||
<div><p>&#42;</p>*</div>
|
||||
<div><p>&#43;</p>+</div>
|
||||
<div><p>&#44;</p>,</div>
|
||||
<div><p>&#45;</p>-</div>
|
||||
<div><p>&#46;</p>.</div>
|
||||
<div><p>&#47;</p>/</div>
|
||||
<div><p>&#48;</p>0</div>
|
||||
<div><p>&#49;</p>1</div>
|
||||
<div><p>&#50;</p>2</div>
|
||||
<div><p>&#51;</p>3</div>
|
||||
<div><p>&#52;</p>4</div>
|
||||
<div><p>&#53;</p>5</div>
|
||||
<div><p>&#54;</p>6</div>
|
||||
<div><p>&#55;</p>7</div>
|
||||
<div><p>&#56;</p>8</div>
|
||||
<div><p>&#57;</p>9</div>
|
||||
<div><p>&#58;</p>:</div>
|
||||
<div><p>&#59;</p>;</div>
|
||||
<div><p>&#60;</p><</div>
|
||||
<div><p>&#61;</p>=</div>
|
||||
<div><p>&#62;</p>></div>
|
||||
<div><p>&#63;</p>?</div>
|
||||
<div><p>&#64;</p>@</div>
|
||||
<div><p>&#65;</p>A</div>
|
||||
<div><p>&#66;</p>B</div>
|
||||
<div><p>&#67;</p>C</div>
|
||||
<div><p>&#68;</p>D</div>
|
||||
<div><p>&#69;</p>E</div>
|
||||
<div><p>&#70;</p>F</div>
|
||||
<div><p>&#71;</p>G</div>
|
||||
<div><p>&#72;</p>H</div>
|
||||
<div><p>&#73;</p>I</div>
|
||||
<div><p>&#74;</p>J</div>
|
||||
<div><p>&#75;</p>K</div>
|
||||
<div><p>&#76;</p>L</div>
|
||||
<div><p>&#77;</p>M</div>
|
||||
<div><p>&#78;</p>N</div>
|
||||
<div><p>&#79;</p>O</div>
|
||||
<div><p>&#80;</p>P</div>
|
||||
<div><p>&#81;</p>Q</div>
|
||||
<div><p>&#82;</p>R</div>
|
||||
<div><p>&#83;</p>S</div>
|
||||
<div><p>&#84;</p>T</div>
|
||||
<div><p>&#85;</p>U</div>
|
||||
<div><p>&#86;</p>V</div>
|
||||
<div><p>&#87;</p>W</div>
|
||||
<div><p>&#88;</p>X</div>
|
||||
<div><p>&#89;</p>Y</div>
|
||||
<div><p>&#90;</p>Z</div>
|
||||
<div><p>&#91;</p>[</div>
|
||||
<div><p>&#92;</p>\</div>
|
||||
<div><p>&#93;</p>]</div>
|
||||
<div><p>&#94;</p>^</div>
|
||||
<div><p>&#95;</p>_</div>
|
||||
<div><p>&#96;</p>`</div>
|
||||
<div><p>&#97;</p>a</div>
|
||||
<div><p>&#98;</p>b</div>
|
||||
<div><p>&#99;</p>c</div>
|
||||
<div><p>&#100;</p>d</div>
|
||||
<div><p>&#101;</p>e</div>
|
||||
<div><p>&#102;</p>f</div>
|
||||
<div><p>&#103;</p>g</div>
|
||||
<div><p>&#104;</p>h</div>
|
||||
<div><p>&#105;</p>i</div>
|
||||
<div><p>&#106;</p>j</div>
|
||||
<div><p>&#107;</p>k</div>
|
||||
<div><p>&#108;</p>l</div>
|
||||
<div><p>&#109;</p>m</div>
|
||||
<div><p>&#110;</p>n</div>
|
||||
<div><p>&#111;</p>o</div>
|
||||
<div><p>&#112;</p>p</div>
|
||||
<div><p>&#113;</p>q</div>
|
||||
<div><p>&#114;</p>r</div>
|
||||
<div><p>&#115;</p>s</div>
|
||||
<div><p>&#116;</p>t</div>
|
||||
<div><p>&#117;</p>u</div>
|
||||
<div><p>&#118;</p>v</div>
|
||||
<div><p>&#119;</p>w</div>
|
||||
<div><p>&#120;</p>x</div>
|
||||
<div><p>&#121;</p>y</div>
|
||||
<div><p>&#122;</p>z</div>
|
||||
<div><p>&#123;</p>{</div>
|
||||
<div><p>&#124;</p>|</div>
|
||||
<div><p>&#125;</p>}</div>
|
||||
<div><p>&#126;</p>~</div>
|
||||
<div><p>&#160;</p> </div>
|
||||
<div><p>&#161;</p>¡</div>
|
||||
<div><p>&#162;</p>¢</div>
|
||||
<div><p>&#163;</p>£</div>
|
||||
<div><p>&#164;</p>¤</div>
|
||||
<div><p>&#165;</p>¥</div>
|
||||
<div><p>&#166;</p>¦</div>
|
||||
<div><p>&#167;</p>§</div>
|
||||
<div><p>&#168;</p>¨</div>
|
||||
<div><p>&#169;</p>©</div>
|
||||
<div><p>&#170;</p>ª</div>
|
||||
<div><p>&#171;</p>«</div>
|
||||
<div><p>&#172;</p>¬</div>
|
||||
<div><p>&#173;</p>­</div>
|
||||
<div><p>&#174;</p>®</div>
|
||||
<div><p>&#175;</p>¯</div>
|
||||
<div><p>&#176;</p>°</div>
|
||||
<div><p>&#177;</p>±</div>
|
||||
<div><p>&#178;</p>²</div>
|
||||
<div><p>&#179;</p>³</div>
|
||||
<div><p>&#180;</p>´</div>
|
||||
<div><p>&#182;</p>¶</div>
|
||||
<div><p>&#183;</p>·</div>
|
||||
<div><p>&#184;</p>¸</div>
|
||||
<div><p>&#185;</p>¹</div>
|
||||
<div><p>&#186;</p>º</div>
|
||||
<div><p>&#187;</p>»</div>
|
||||
<div><p>&#188;</p>¼</div>
|
||||
<div><p>&#189;</p>½</div>
|
||||
<div><p>&#190;</p>¾</div>
|
||||
<div><p>&#191;</p>¿</div>
|
||||
<div><p>&#192;</p>À</div>
|
||||
<div><p>&#193;</p>Á</div>
|
||||
<div><p>&#194;</p>Â</div>
|
||||
<div><p>&#195;</p>Ã</div>
|
||||
<div><p>&#196;</p>Ä</div>
|
||||
<div><p>&#197;</p>Å</div>
|
||||
<div><p>&#198;</p>Æ</div>
|
||||
<div><p>&#199;</p>Ç</div>
|
||||
<div><p>&#200;</p>È</div>
|
||||
<div><p>&#201;</p>É</div>
|
||||
<div><p>&#202;</p>Ê</div>
|
||||
<div><p>&#203;</p>Ë</div>
|
||||
<div><p>&#204;</p>Ì</div>
|
||||
<div><p>&#205;</p>Í</div>
|
||||
<div><p>&#206;</p>Î</div>
|
||||
<div><p>&#207;</p>Ï</div>
|
||||
<div><p>&#208;</p>Ð</div>
|
||||
<div><p>&#209;</p>Ñ</div>
|
||||
<div><p>&#210;</p>Ò</div>
|
||||
<div><p>&#211;</p>Ó</div>
|
||||
<div><p>&#212;</p>Ô</div>
|
||||
<div><p>&#213;</p>Õ</div>
|
||||
<div><p>&#214;</p>Ö</div>
|
||||
<div><p>&#215;</p>×</div>
|
||||
<div><p>&#216;</p>Ø</div>
|
||||
<div><p>&#217;</p>Ù</div>
|
||||
<div><p>&#218;</p>Ú</div>
|
||||
<div><p>&#219;</p>Û</div>
|
||||
<div><p>&#220;</p>Ü</div>
|
||||
<div><p>&#221;</p>Ý</div>
|
||||
<div><p>&#222;</p>Þ</div>
|
||||
<div><p>&#223;</p>ß</div>
|
||||
<div><p>&#224;</p>à</div>
|
||||
<div><p>&#225;</p>á</div>
|
||||
<div><p>&#226;</p>â</div>
|
||||
<div><p>&#227;</p>ã</div>
|
||||
<div><p>&#228;</p>ä</div>
|
||||
<div><p>&#229;</p>å</div>
|
||||
<div><p>&#230;</p>æ</div>
|
||||
<div><p>&#231;</p>ç</div>
|
||||
<div><p>&#232;</p>è</div>
|
||||
<div><p>&#233;</p>é</div>
|
||||
<div><p>&#234;</p>ê</div>
|
||||
<div><p>&#235;</p>ë</div>
|
||||
<div><p>&#236;</p>ì</div>
|
||||
<div><p>&#237;</p>í</div>
|
||||
<div><p>&#238;</p>î</div>
|
||||
<div><p>&#239;</p>ï</div>
|
||||
<div><p>&#240;</p>ð</div>
|
||||
<div><p>&#241;</p>ñ</div>
|
||||
<div><p>&#242;</p>ò</div>
|
||||
<div><p>&#243;</p>ó</div>
|
||||
<div><p>&#244;</p>ô</div>
|
||||
<div><p>&#245;</p>õ</div>
|
||||
<div><p>&#246;</p>ö</div>
|
||||
<div><p>&#247;</p>÷</div>
|
||||
<div><p>&#248;</p>ø</div>
|
||||
<div><p>&#249;</p>ù</div>
|
||||
<div><p>&#250;</p>ú</div>
|
||||
<div><p>&#251;</p>û</div>
|
||||
<div><p>&#252;</p>ü</div>
|
||||
<div><p>&#253;</p>ý</div>
|
||||
<div><p>&#254;</p>þ</div>
|
||||
<div><p>&#255;</p>ÿ</div>
|
||||
<div><p>&#338;</p>Œ</div>
|
||||
<div><p>&#339;</p>œ</div>
|
||||
<div><p>&#376;</p>Ÿ</div>
|
||||
<div><p>&#710;</p>ˆ</div>
|
||||
<div><p>&#732;</p>˜</div>
|
||||
<div><p>&#8192;</p> </div>
|
||||
<div><p>&#8193;</p> </div>
|
||||
<div><p>&#8194;</p> </div>
|
||||
<div><p>&#8195;</p> </div>
|
||||
<div><p>&#8196;</p> </div>
|
||||
<div><p>&#8197;</p> </div>
|
||||
<div><p>&#8198;</p> </div>
|
||||
<div><p>&#8199;</p> </div>
|
||||
<div><p>&#8200;</p> </div>
|
||||
<div><p>&#8201;</p> </div>
|
||||
<div><p>&#8202;</p> </div>
|
||||
<div><p>&#8208;</p>‐</div>
|
||||
<div><p>&#8209;</p>‑</div>
|
||||
<div><p>&#8210;</p>‒</div>
|
||||
<div><p>&#8211;</p>–</div>
|
||||
<div><p>&#8212;</p>—</div>
|
||||
<div><p>&#8216;</p>‘</div>
|
||||
<div><p>&#8217;</p>’</div>
|
||||
<div><p>&#8218;</p>‚</div>
|
||||
<div><p>&#8220;</p>“</div>
|
||||
<div><p>&#8221;</p>”</div>
|
||||
<div><p>&#8222;</p>„</div>
|
||||
<div><p>&#8226;</p>•</div>
|
||||
<div><p>&#8230;</p>…</div>
|
||||
<div><p>&#8239;</p> </div>
|
||||
<div><p>&#8249;</p>‹</div>
|
||||
<div><p>&#8250;</p>›</div>
|
||||
<div><p>&#8287;</p> </div>
|
||||
<div><p>&#8364;</p>€</div>
|
||||
<div><p>&#8482;</p>™</div>
|
||||
<div><p>&#9724;</p>◼</div>
|
||||
<div><p>&#64257;</p>fi</div>
|
||||
<div><p>&#64258;</p>fl</div>
|
||||
<div><p>&#64259;</p>ffi</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="specs">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="installing">
|
||||
<div class="section">
|
||||
<div class="grid7 firstcol">
|
||||
<h1>Installing Webfonts</h1>
|
||||
|
||||
<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
|
||||
|
||||
<h2>1. Upload your webfonts</h2>
|
||||
<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
|
||||
|
||||
<h2>2. Include the webfont stylesheet</h2>
|
||||
<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
|
||||
|
||||
|
||||
<code>
|
||||
@font-face{
|
||||
font-family: 'MyWebFont';
|
||||
src: url('WebFont.eot');
|
||||
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
|
||||
url('WebFont.woff') format('woff'),
|
||||
url('WebFont.ttf') format('truetype'),
|
||||
url('WebFont.svg#webfont') format('svg');
|
||||
}
|
||||
</code>
|
||||
|
||||
<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
|
||||
<code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
|
||||
|
||||
<h2>3. Modify your own stylesheet</h2>
|
||||
<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
|
||||
<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
|
||||
|
||||
<h2>4. Test</h2>
|
||||
<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid5 sidebar">
|
||||
<div class="box">
|
||||
<h2>Troubleshooting<br />Font-Face Problems</h2>
|
||||
<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
|
||||
|
||||
<h3>Fonts not showing in any browser</h3>
|
||||
|
||||
<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
|
||||
|
||||
<h3>Fonts not loading in iPhone or iPad</h3>
|
||||
|
||||
<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
|
||||
|
||||
<h3>Fonts not loading in Firefox</h3>
|
||||
|
||||
<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
|
||||
|
||||
<h3>Fonts not loading in IE</h3>
|
||||
|
||||
<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
|
||||
|
||||
<h3>Fonts not loading in IE9</h3>
|
||||
|
||||
<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>©2010-2017 Font Squirrel. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
src/fonts/Aven/xxiiaven-regular-webfont.woff
Normal file
BIN
src/fonts/Aven/xxiiaven-regular-webfont.woff
Normal file
Binary file not shown.
BIN
src/fonts/Aven/xxiiaven-regular-webfont.woff2
Normal file
BIN
src/fonts/Aven/xxiiaven-regular-webfont.woff2
Normal file
Binary file not shown.
BIN
src/fonts/FRAMCDN/FRAMDCN-bg.png
Normal file
BIN
src/fonts/FRAMCDN/FRAMDCN-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/fonts/FRAMCDN/FRAMDCN-thumb.png
Normal file
BIN
src/fonts/FRAMCDN/FRAMDCN-thumb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
src/fonts/FRAMCDN/FRAMDCN.png
Normal file
BIN
src/fonts/FRAMCDN/FRAMDCN.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/fonts/FRAMCDN/FRAMDCN.woff
Normal file
BIN
src/fonts/FRAMCDN/FRAMDCN.woff
Normal file
Binary file not shown.
10
src/fonts/FRAMCDN/font.css
Normal file
10
src/fonts/FRAMCDN/font.css
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
@font-face {
|
||||
font-family: 'FRAMDCN';
|
||||
src: local('FRAMDCN'), url('./FRAMDCN.woff') format('woff');
|
||||
}
|
||||
/* use this class to attach this font to any element i.e. <p class="fontsforweb_fontid_1381">Text with this font applied</p> */
|
||||
.fontsforweb_fontid_1381 {
|
||||
font-family: 'FRAMDCN' !important;
|
||||
}
|
||||
|
||||
/* Font downloaded from FontsForWeb.com */
|
||||
21
src/fonts/FRAMCDN/index.html
Normal file
21
src/fonts/FRAMCDN/index.html
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title> web font from FontsForWeb.com</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="font.css">
|
||||
<style type="text/css">
|
||||
/* when @font-face is defined(it is in font.css) you can add the font to any rule by using font-family */
|
||||
h1 {
|
||||
font-family: 'FRAMDCN';
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Thank you for using FontsForWeb.com</h1>
|
||||
<p class="fontsforweb_fontid_1381">Look in the source of this file to see how to embed this font on your website</p>
|
||||
</body>
|
||||
</html>
|
||||
2
src/fonts/FRAMCDN/readme.txt
Normal file
2
src/fonts/FRAMCDN/readme.txt
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
Original download page
|
||||
http://ttfonts.net/font/606_FranklinGothicMediumCond.htm
|
||||
BIN
src/fonts/FontAwesome/FontAwesome.otf
Normal file
BIN
src/fonts/FontAwesome/FontAwesome.otf
Normal file
Binary file not shown.
BIN
src/fonts/FontAwesome/fontawesome-webfont.eot
Normal file
BIN
src/fonts/FontAwesome/fontawesome-webfont.eot
Normal file
Binary file not shown.
2671
src/fonts/FontAwesome/fontawesome-webfont.svg
Normal file
2671
src/fonts/FontAwesome/fontawesome-webfont.svg
Normal file
File diff suppressed because it is too large
Load diff
|
After Width: | Height: | Size: 434 KiB |
BIN
src/fonts/FontAwesome/fontawesome-webfont.ttf
Normal file
BIN
src/fonts/FontAwesome/fontawesome-webfont.ttf
Normal file
Binary file not shown.
BIN
src/fonts/FontAwesome/fontawesome-webfont.woff
Normal file
BIN
src/fonts/FontAwesome/fontawesome-webfont.woff
Normal file
Binary file not shown.
BIN
src/fonts/FontAwesome/fontawesome-webfont.woff2
Normal file
BIN
src/fonts/FontAwesome/fontawesome-webfont.woff2
Normal file
Binary file not shown.
22
src/images/amazon.svg
Normal file
22
src/images/amazon.svg
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="24" height="24px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
|
||||
<title>Amazon-color</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
|
||||
</defs>
|
||||
<g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Color-" transform="translate(-601.000000, -560.000000)">
|
||||
<g id="Amazon" transform="translate(601.000000, 560.000000)">
|
||||
<path d="M25.4026553,25.9595294 C24.660417,27.4418824 23.3876054,28.3962353 22.0103725,28.7181176 C21.8015298,28.7181176 21.4826213,28.8225882 21.1637129,28.8225882 C18.835399,28.8225882 17.458166,27.0211765 17.458166,24.3727059 C17.458166,20.9788235 19.4703937,19.392 22.0103725,18.6465882 C23.3876054,18.3303529 24.9793255,18.2230588 26.5682233,18.2230588 L26.5682233,19.4964706 C26.5682233,21.9331765 26.6726447,23.8390588 25.4026553,25.9595294 L25.4026553,25.9595294 Z M26.5682233,13.3524706 C25.1909904,13.4569412 23.5992703,13.5614118 22.0103725,13.7703529 C19.574815,14.0922353 17.1392576,14.5157647 15.1298521,15.4701176 C11.2098182,17.0597647 8.55977364,20.4508235 8.55977364,25.4287059 C8.55977364,31.6856471 12.5842289,34.8621176 17.6726531,34.8621176 C19.3659723,34.8621176 20.7432053,34.6475294 22.0103725,34.3341176 C24.0282445,33.696 25.7187415,32.5298824 27.7309692,30.4094118 C28.8965372,31.9990588 29.2182679,32.7444706 31.2276733,34.4385882 C31.7582467,34.6475294 32.28882,34.6475294 32.7093276,34.3341176 C33.9821392,33.2724706 36.208854,31.3637647 37.3715998,30.3049412 C37.9021732,29.8814118 37.7977518,29.2432941 37.4760212,28.7181176 C36.3132753,27.2329412 35.1448851,25.9595294 35.1448851,23.0992941 L35.1448851,13.5614118 C35.1448851,9.53505882 35.4666157,5.82494118 32.5004849,3.072 C30.0649275,0.849882353 26.2493149,0 23.2831841,0 L22.0103725,0 C16.6115064,0.313411765 10.8937319,2.64564706 9.61809814,9.32329412 C9.40643324,10.1731765 10.0442501,10.4894118 10.4675799,10.5938824 L16.3998415,11.3364706 C17.0348362,11.2291765 17.3537447,10.6983529 17.458166,10.1731765 C17.9859172,7.84094118 19.8937235,6.67482353 22.0103725,6.46023529 L22.4365245,6.46023529 C23.7093361,6.46023529 25.086569,6.99105882 25.8259851,8.05270588 C26.6726447,9.32329412 26.5682233,11.0202353 26.5682233,12.5054118 L26.5682233,13.3524706 L26.5682233,13.3524706 Z" fill="#343B45">
|
||||
|
||||
</path>
|
||||
<path d="M47.9943556,35.9463529 L47.9943556,35.9435294 C47.971778,35.4437647 47.8673567,35.0625882 47.658514,34.7463529 L47.6359364,34.7152941 L47.6105366,34.6842353 C47.3988717,34.4527059 47.1956734,34.3651765 46.9755419,34.2691765 C46.3179696,34.0150588 45.3612442,33.8795294 44.2097872,33.8767059 C43.382883,33.8767059 42.4713128,33.9557647 41.5540982,34.1562353 L41.551276,34.0941176 L40.6284171,34.4018824 L40.6114839,34.4103529 L40.0893771,34.5797647 L40.0893771,34.6023529 C39.47696,34.8564706 38.9209869,35.1727059 38.4045245,35.5482353 C38.0827939,35.7882353 37.8175072,36.1072941 37.8033962,36.5957647 C37.7949296,36.8611765 37.9303952,37.1661176 38.1533489,37.3468235 C38.3763025,37.5275294 38.6359448,37.5896471 38.8645429,37.5896471 C38.9181647,37.5896471 38.9689643,37.5868235 39.0141194,37.5783529 L39.0592746,37.5755294 L39.093141,37.5698824 C39.5446928,37.4738824 40.2022651,37.4089412 40.9727253,37.3016471 C41.6331198,37.2282353 42.3330251,37.1745882 42.9397978,37.1745882 C43.368772,37.1717647 43.7554132,37.2028235 44.0206999,37.2592941 C44.1533432,37.2875294 44.2521202,37.3214118 44.3057419,37.3496471 C44.3254973,37.3552941 44.3396083,37.3637647 44.3480749,37.3694118 C44.3593637,37.4061176 44.3762969,37.5021176 44.3734747,37.6348235 C44.3791191,38.1430588 44.164632,39.0861176 43.8683012,40.0065882 C43.5804369,40.9270588 43.2304843,41.8503529 42.999064,42.4630588 C42.94262,42.6042353 42.9059314,42.7595294 42.9059314,42.9289412 C42.900287,43.1745882 43.0018862,43.4738824 43.2163733,43.6715294 C43.425216,43.8691765 43.696147,43.9482353 43.9219229,43.9482353 L43.9332117,43.9482353 C44.2718756,43.9454118 44.5597398,43.8098824 44.8080933,43.6150588 C47.1505182,41.5087059 47.9661336,38.1430588 48,36.2484706 L47.9943556,35.9463529 Z M41.0489247,38.8658824 C40.8090378,38.8630588 40.5635065,38.9195294 40.3349084,39.0268235 C40.0780883,39.1284706 39.8156239,39.2470588 39.5672704,39.3515294 L39.2032068,39.504 L38.7290774,39.6931765 L38.7290774,39.6988235 C33.5785648,41.7882353 28.16841,43.0136471 23.1618295,43.1209412 C22.9783866,43.1265882 22.7921215,43.1265882 22.614323,43.1265882 C14.7403887,43.1322353 8.31706456,39.4785882 1.83729642,35.8785882 C1.61152053,35.76 1.37727804,35.6978824 1.15150215,35.6978824 C0.860815683,35.6978824 0.561662624,35.808 0.344353327,36.0112941 C0.12704403,36.2174118 -0.00277710907,36.5138824 4.50895989e-05,36.816 C-0.00277710907,37.2084706 0.208887791,37.5698824 0.505218651,37.8042353 C6.58705678,43.0870588 13.25309,47.9943529 22.2192152,48 C22.3941915,48 22.57199,47.9943529 22.7497885,47.9915294 C28.453452,47.8644706 34.902176,45.936 39.9087564,42.7905882 L39.9398006,42.7708235 C40.5945507,42.3783529 41.2493008,41.9322353 41.8673623,41.4381176 C42.2511813,41.1529412 42.516468,40.7068235 42.516468,40.2437647 C42.4995348,39.4221176 41.8024517,38.8658824 41.0489247,38.8658824 Z" id="Fill-237" fill="#FF9A00">
|
||||
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.3 KiB |
28
src/images/google.svg
Normal file
28
src/images/google.svg
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="24px" height="24px" viewBox="-0.5 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
|
||||
<title>Google-color</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
|
||||
</defs>
|
||||
<g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Color-" transform="translate(-401.000000, -860.000000)">
|
||||
<g id="Google" transform="translate(401.000000, 860.000000)">
|
||||
<path d="M9.82727273,24 C9.82727273,22.4757333 10.0804318,21.0144 10.5322727,19.6437333 L2.62345455,13.6042667 C1.08206818,16.7338667 0.213636364,20.2602667 0.213636364,24 C0.213636364,27.7365333 1.081,31.2608 2.62025,34.3882667 L10.5247955,28.3370667 C10.0772273,26.9728 9.82727273,25.5168 9.82727273,24" id="Fill-1" fill="#FBBC05">
|
||||
|
||||
</path>
|
||||
<path d="M23.7136364,10.1333333 C27.025,10.1333333 30.0159091,11.3066667 32.3659091,13.2266667 L39.2022727,6.4 C35.0363636,2.77333333 29.6954545,0.533333333 23.7136364,0.533333333 C14.4268636,0.533333333 6.44540909,5.84426667 2.62345455,13.6042667 L10.5322727,19.6437333 C12.3545909,14.112 17.5491591,10.1333333 23.7136364,10.1333333" id="Fill-2" fill="#EB4335">
|
||||
|
||||
</path>
|
||||
<path d="M23.7136364,37.8666667 C17.5491591,37.8666667 12.3545909,33.888 10.5322727,28.3562667 L2.62345455,34.3946667 C6.44540909,42.1557333 14.4268636,47.4666667 23.7136364,47.4666667 C29.4455,47.4666667 34.9177955,45.4314667 39.0249545,41.6181333 L31.5177727,35.8144 C29.3995682,37.1488 26.7323182,37.8666667 23.7136364,37.8666667" id="Fill-3" fill="#34A853">
|
||||
|
||||
</path>
|
||||
<path d="M46.1454545,24 C46.1454545,22.6133333 45.9318182,21.12 45.6113636,19.7333333 L23.7136364,19.7333333 L23.7136364,28.8 L36.3181818,28.8 C35.6879545,31.8912 33.9724545,34.2677333 31.5177727,35.8144 L39.0249545,41.6181333 C43.3393409,37.6138667 46.1454545,31.6490667 46.1454545,24" id="Fill-4" fill="#4285F4">
|
||||
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/images/icon.ico
Normal file
BIN
src/images/icon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
src/images/icon.png
Normal file
BIN
src/images/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
24
src/images/server.svg
Normal file
24
src/images/server.svg
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="24px" height="24px" viewBox="0 0 491.52 491.52" xml:space="preserve">
|
||||
<path style="fill:#64798A;" d="M400.903,0H90.615c-7.296,0-13.209,5.914-13.209,13.209v465.102c0,7.294,5.913,13.209,13.209,13.209
|
||||
h310.288c7.296,0,13.21-5.914,13.21-13.209V13.209C414.114,5.914,408.199,0,400.903,0z"/>
|
||||
<path style="fill:#3A556A;" d="M141.749,283.578h208.024c12.942,0,23.467-10.525,23.467-23.467V0.001h-8.936v260.11
|
||||
c0,8.012-6.519,14.53-14.531,14.53H141.749c-8.012,0-14.531-6.518-14.531-14.53V0.001h-8.936v260.11
|
||||
C118.281,273.052,128.806,283.578,141.749,283.578z"/>
|
||||
<circle style="fill:#EBF0F3;" cx="241.971" cy="341.146" r="21.852"/>
|
||||
<circle style="fill:#44C4A1;" cx="241.971" cy="380.16" r="7.752"/>
|
||||
<rect x="140.749" y="28.16" style="fill:#2F4859;" width="210.074" height="71.439"/>
|
||||
<rect x="145.193" y="32.645" style="fill:#3A556A;" width="201.114" height="62.505"/>
|
||||
<rect x="140.718" y="135.071" style="fill:#2F4859;" width="210.074" height="71.434"/>
|
||||
<rect x="145.193" y="139.571" style="fill:#3A556A;" width="201.114" height="62.505"/>
|
||||
<path style="fill:#D5D6DB;" d="M335.55,110.819h-32.736c-1.093,0-1.978,0.886-1.978,1.981v10.529c0,1.094,0.886,1.981,1.978,1.981
|
||||
h32.736c1.093,0,1.979-0.888,1.979-1.981V112.8C337.529,111.706,336.643,110.819,335.55,110.819z"/>
|
||||
<path style="fill:#EBF0F3;" d="M335.55,106.857h-32.736c-1.093,0-1.978,0.888-1.978,1.981v10.529c0,1.094,0.886,1.981,1.978,1.981
|
||||
h32.736c1.093,0,1.979-0.887,1.979-1.981v-10.529C337.529,107.745,336.643,106.857,335.55,106.857z"/>
|
||||
<path style="fill:#D5D6DB;" d="M335.55,218.06h-32.736c-1.093,0-1.978,0.886-1.978,1.981v10.529c0,1.094,0.886,1.981,1.978,1.981
|
||||
h32.736c1.093,0,1.979-0.887,1.979-1.981v-10.529C337.529,218.946,336.643,218.06,335.55,218.06z"/>
|
||||
<path style="fill:#EBF0F3;" d="M335.55,214.098h-32.736c-1.093,0-1.978,0.887-1.978,1.981v10.529c0,1.095,0.886,1.981,1.978,1.981
|
||||
h32.736c1.093,0,1.979-0.886,1.979-1.981v-10.529C337.529,214.985,336.643,214.098,335.55,214.098z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/images/twitch-icon.png
Normal file
BIN
src/images/twitch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
16
src/images/twitch.svg
Normal file
16
src/images/twitch.svg
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="24px" height="24px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none">
|
||||
|
||||
<path fill="#ffffff" d="M13 7.5l-2 2H9l-1.75 1.75V9.5H5V2h8v5.5z"/>
|
||||
|
||||
<g fill="#9146FF">
|
||||
|
||||
<path d="M4.5 1L2 3.5v9h3V15l2.5-2.5h2L14 8V1H4.5zM13 7.5l-2 2H9l-1.75 1.75V9.5H5V2h8v5.5z"/>
|
||||
|
||||
<path d="M11.5 3.75h-1v3h1v-3zM8.75 3.75h-1v3h1v-3z"/>
|
||||
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 474 B |
629
src/index.html
Normal file
629
src/index.html
Normal file
|
|
@ -0,0 +1,629 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LoquendoBot</title>
|
||||
|
||||
<!--#region css styles -->
|
||||
<link rel="stylesheet" href="./fonts/FRAMCDN/font.css" />
|
||||
<link rel="stylesheet" href="./fonts/Aven/stylesheet.css">
|
||||
<link rel="stylesheet" href="./css/checkbox.css">
|
||||
<link rel="stylesheet" href="./css/chat.css">
|
||||
<link rel="stylesheet" href="./css/home.css">
|
||||
<link rel="stylesheet" href="./css/menu.css">
|
||||
<link rel="stylesheet" href="./css/tabs.css">
|
||||
<link rel="stylesheet" href="./css/tts-menu.css">
|
||||
<link rel="stylesheet" href="./css/volume-slider.css">
|
||||
<link rel="stylesheet" href="./css/sliders.css">
|
||||
<link rel="stylesheet" href="./css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="./css/logger.css">
|
||||
<!--#endregion -->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!--#region title bar -->
|
||||
<header id="titlebar">
|
||||
<div id="drag-region">
|
||||
<div id="window-controls">
|
||||
|
||||
<div class="button" id="min-button">
|
||||
<i class="fa fa-minus"></i>
|
||||
</div>
|
||||
|
||||
<div class="button" id="max-button">
|
||||
<i class="fa fa-square-o"></i>
|
||||
</div>
|
||||
|
||||
<div class="button" id="close-button">
|
||||
<i class="fa fa-close"></i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!--#endregion -->
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- #region Notifications -->
|
||||
<div id="toasts"></div>
|
||||
<!--#endregion -->
|
||||
|
||||
<!--#region Menu, left section-->
|
||||
<div class="sidepanel-left" id="sidepanel-left">
|
||||
<nav class="menu">
|
||||
<ul class="items">
|
||||
<li class="item item-active" tip="Chat" id="btnChat">
|
||||
<i class="fa fa-comments"></i>
|
||||
</li>
|
||||
<li class="item" tip="TTS Settings" id="btnTTS">
|
||||
<i class="fa fa-microphone menu-icon"></i>
|
||||
</li>
|
||||
<li class="item" tip="Logs" id="btnLogs">
|
||||
<i class="fa fa-clipboard menu-icon"></i>
|
||||
</li>
|
||||
<li class="item" tip="Chat" id="btnBrowsersourceChat">
|
||||
<i class="fa fa-history menu-icon"></i>
|
||||
</li>
|
||||
<li class="item" tip="Vtuber"
|
||||
id="btnBrowsersourceVtuber">
|
||||
<i class="fa fa-user menu-icon"></i>
|
||||
</li>
|
||||
<li class="item" tip="Configuration"
|
||||
id="btnConfiguration">
|
||||
<i class="fa fa-cogs menu-icon"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div tip="Hide Menu">
|
||||
<div class="circle-left">
|
||||
<i class="fa fa-cog hide"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--#endregion -->
|
||||
|
||||
<!-- #region Chat, middle section-->
|
||||
<div class="mid">
|
||||
|
||||
<!-- #region TTS Screen-->
|
||||
<div class="OptionPanel" id="TTS">
|
||||
<div id="tstx">
|
||||
<div>
|
||||
<div id="TTSSelector">
|
||||
<h3 class="LabelText">Installed Voices</h3>
|
||||
<div class="optionrow">
|
||||
<select name="installedTTS"
|
||||
id="installedTTS"></select>
|
||||
<label class="btn active Basiclabel">
|
||||
<input type="radio" name="voiceService"
|
||||
id="InternalTTS" /><i
|
||||
class="fa fa-square fa-2x"></i><i
|
||||
class="fa fa-check-square fa-2x"></i>
|
||||
</label>
|
||||
</div>
|
||||
<h3 class="LabelText">Google Voices</h3>
|
||||
<div class="optionrow">
|
||||
<select name="voice" id="googleVoice"></select>
|
||||
<label class="btn active Basiclabel">
|
||||
<input type="radio" name="voiceService"
|
||||
id="GoogleTTS" /><i
|
||||
class="fa fa-square fa-2x"></i><i
|
||||
class="fa fa-check-square fa-2x"></i>
|
||||
</label>
|
||||
</div>
|
||||
<h3 class="LabelText">Amazon Voices</h3>
|
||||
<div class="optionrow">
|
||||
<select name="voice" id="amazonVoice"></select>
|
||||
<label class="btn active Basiclabel">
|
||||
<input type="radio" name="voiceService"
|
||||
id="AmazonTTS" /><i
|
||||
class="fa fa-square fa-2x"></i><i
|
||||
class="fa fa-check-square fa-2x"></i>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="LabelText">TTS Volume</h3>
|
||||
<div class="optionrow">
|
||||
<div class="middle">
|
||||
<div class="slider-container">
|
||||
<!-- <span class="bar"><span class="fill"></span></span> -->
|
||||
<input
|
||||
id="ttsVolumeSlider"
|
||||
class="styled-slider slider-progress1"
|
||||
type="range" />
|
||||
<!-- <input type="text" id="timetext1"
|
||||
class="inputBox" /> -->
|
||||
</div>
|
||||
<div class="volume-icon-container">
|
||||
<i class="fa fa-volume-up fa-2x"
|
||||
id="volume-icon"></i>
|
||||
<!-- <label class="TTSVolume Basiclabel" id="timetext1">50%</label> -->
|
||||
<input type="text" id="ttsVolume"
|
||||
class="inputBox" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="LabelText">Test TTS</h3>
|
||||
<div class="optionrow">
|
||||
<textarea id="TTSTest">Hi, This is a test</textarea>
|
||||
<div class="volume-icon-container"
|
||||
tip="Test TTS">
|
||||
<i
|
||||
class="fa fa-play-circle fa-2x SmallButton"
|
||||
id="TTSTestButton"></i>
|
||||
<label class="testLabel Basiclabel"></label>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="LabelText">TTS Output Device</h3>
|
||||
<div class="optionrow">
|
||||
<select name="ttsAudioDevice"
|
||||
id="ttsAudioDevice"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--#endregion -->
|
||||
|
||||
<!-- #region Commands Screen-->
|
||||
<div class="OptionPanel" id="Logs">
|
||||
<table id="logTable">
|
||||
|
||||
<h1>Log Viewer</h1>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Level</th>
|
||||
<th>Message</th>
|
||||
<th>Metadata</th>
|
||||
<th>Timestamp</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="logContent"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!--#endregion -->
|
||||
|
||||
<!-- #region Commands Screen-->
|
||||
<div class="OptionPanel" id="BrowsersourceChat">
|
||||
</div>
|
||||
<!--#endregion -->
|
||||
|
||||
<!-- #region Commands Screen-->
|
||||
<div class="OptionPanel" id="BrowsersourceVtuber">
|
||||
</div>
|
||||
<!--#endregion -->
|
||||
|
||||
<!-- #region Configuration Screen-->
|
||||
<div class="OptionPanel" id="Configuration">
|
||||
<div id="tstx">
|
||||
<div>
|
||||
<h3 class="LabelText">Theme</h3>
|
||||
<div class="optionrow">
|
||||
<button class="AdvancedMenuButton"
|
||||
id="ShowThemeCreator">Theme Creator</button>
|
||||
</div>
|
||||
|
||||
<h3 class="LabelText">Notification Sound</h3>
|
||||
<div class="optionrow">
|
||||
<select name="notification" id="notification"></select>
|
||||
<div class="volume-icon-container">
|
||||
<i
|
||||
class="fa fa-play-circle fa-2x SmallButton"
|
||||
id="SoundTestButton" tip="Test Sound"></i>
|
||||
<label class="testLabel Basiclabel">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="LabelText">Notification Volume</h3>
|
||||
<div class="optionrow">
|
||||
<div class="middle">
|
||||
<div class="slider-container">
|
||||
<!-- <span class="bar"><span class="fill"></span></span> -->
|
||||
<input
|
||||
id="notificationVolumeSlider"
|
||||
class="styled-slider slider-progress2"
|
||||
type="range" />
|
||||
</div>
|
||||
<div class="volume-icon-container">
|
||||
<i class="fa fa-volume-up fa-2x"
|
||||
id="volume-icon"></i>
|
||||
<!-- <label id="SoundVolume"
|
||||
class="Basiclabel">50%</label> -->
|
||||
<input type="text"
|
||||
id="notificationVolume"
|
||||
class="inputBox" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="AdvancedMenuButton"
|
||||
id="ShowAdvancedMenu">Show Advanced</button>
|
||||
<div id="AdvancedMenu_mask">
|
||||
<div class="SaveConfig">
|
||||
<div class="AdvancedMenuRow">
|
||||
<button class="AdvancedMenuButton"
|
||||
id="HideAdvancedMenu">Close
|
||||
Advanced Menu</button>
|
||||
</div>
|
||||
<fieldset id="AdvancedMenuTwitch"
|
||||
class="AdvancedMenu">
|
||||
<legend class="legendStyle"
|
||||
tip="Enable/Disable Twitch">
|
||||
<img
|
||||
class="AdvancedMenuIcon"
|
||||
src="./images/twitch.svg"
|
||||
alt=" ">
|
||||
<input type="checkbox"
|
||||
id="USE_TWITCH"
|
||||
class="checkbox" />
|
||||
<label for="USE_TWITCH"
|
||||
class="toggle-small "></label>
|
||||
</legend>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">Channel
|
||||
Name</div><input type="text"
|
||||
class="fname inputTwitch"
|
||||
id="TWITCH_CHANNEL_NAME">
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
id="Info_TWITCH_CHANNEL_NAME"
|
||||
tip="The channel you want to connect to"></i>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">Username</div><input
|
||||
type="text"
|
||||
class="fname inputTwitch"
|
||||
id="TWITCH_USERNAME">
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
id="Info_TWITCH_CHANNEL_NAME"
|
||||
tip="The channel you want to connect to"></i>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">Oauth
|
||||
Token</div><input
|
||||
type="text"
|
||||
class="fname inputTwitch"
|
||||
id="TWITCH_OAUTH_TOKEN">
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
id="Info_USERNAME"
|
||||
tip="Your Twitch username"></i>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">Client
|
||||
ID</div><input
|
||||
type="text"
|
||||
class="fname inputTwitch"
|
||||
id="TWITCH_CLIENT_ID">
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
id="Info_USERNAME"
|
||||
tip="Your Twitch username"></i>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">Client
|
||||
Secret</div><input
|
||||
type="text"
|
||||
class="fname inputTwitch"
|
||||
id="TWITCH_CLIENT_SECRET">
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
id="Info_USERNAME"
|
||||
tip="Your Twitch username"></i>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset id="AdvancedMenuServer"
|
||||
class="AdvancedMenu">
|
||||
<legend class="legendStyle"
|
||||
tip="Enable/Disable Server">
|
||||
<img
|
||||
class="AdvancedMenuIcon"
|
||||
src="./images/server.svg"
|
||||
alt>
|
||||
<input type="checkbox"
|
||||
id="USE_SERVER"
|
||||
class="checkbox" />
|
||||
<label for="USE_SERVER"
|
||||
class="toggle-small "></label>
|
||||
</legend>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">Port</div>
|
||||
<input
|
||||
type="text"
|
||||
class="fname inputTwitch"
|
||||
id="PORT">
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
id="Info_PORT"
|
||||
tip="Port to use to host additional services"></i>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">Use
|
||||
Vtuber</div>
|
||||
<label for="USE_VTUBER"
|
||||
class="toggle-small "></label>
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
id="Info_VTUBER"
|
||||
tip="You can use it as a browsersource on http://localhost:PORT/vtuber"></i>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">Use
|
||||
ChatBubble</div>
|
||||
<label for="USE_CHATBUBBLE"
|
||||
class="toggle-small "></label>
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
id="Info_CHATBUBBLE"
|
||||
tip="You can use it as a browsersource on http://localhost:PORT/chat"></i>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset id="AdvancedMenuAmazon"
|
||||
class="AdvancedMenu">
|
||||
<legend class="legendStyle"
|
||||
tip="Enable/Disable Amazon">
|
||||
<img
|
||||
class="AdvancedMenuIcon"
|
||||
src="./images/amazon.svg"
|
||||
alt>
|
||||
<input type="checkbox"
|
||||
id="USE_AMAZON"
|
||||
class="checkbox" />
|
||||
<label for="USE_AMAZON"
|
||||
class="toggle-small "></label>
|
||||
</legend>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">
|
||||
Access Key</div>
|
||||
<input
|
||||
type="text"
|
||||
class="fname inputTwitch"
|
||||
id="AMAZON_ACCESS_KEY">
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
id="Info_AMAZON_ACCESS_KEY"
|
||||
tip="Amazon Access Key"></i>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">
|
||||
Access Secret</div>
|
||||
<input
|
||||
type="text"
|
||||
class="fname inputTwitch"
|
||||
id="AMAZON_ACCESS_SECRET">
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
id="Info_AMAZON_ACCESS_SECRET"
|
||||
tip="Amazon Access Secret"></i>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">
|
||||
Test credentials</div>
|
||||
<button
|
||||
class="AdvancedMenuButton"
|
||||
id="TestAmazonCredentials">Test</button>
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
id="Info_AMAZON_TEST_CREDENTIALS"
|
||||
tip="Test Amazon credentials"></i>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset id="AdvancedMenuGoogle"
|
||||
class="AdvancedMenu">
|
||||
<legend class="legendStyle"
|
||||
tip="Enable/Disable Google service">
|
||||
<img
|
||||
class="AdvancedMenuIcon"
|
||||
src="./images/google.svg"
|
||||
alt>
|
||||
<input type="checkbox"
|
||||
id="USE_GOOGLE"
|
||||
class="checkbox" />
|
||||
<label for="USE_GOOGLE"
|
||||
class="toggle-small "></label>
|
||||
</legend>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">
|
||||
API Key</div>
|
||||
<input
|
||||
type="text"
|
||||
class="fname inputTwitch"
|
||||
id="GOOGLE_API_KEY">
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
id="Info_GOOGLE_APPI_KEY"
|
||||
tip="Google API Key"></i>
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div class="AdvancedMenuLabel">
|
||||
Test credentials</div>
|
||||
<button
|
||||
class="AdvancedMenuButton"
|
||||
id="TestGoogleCredentials">Test</button>
|
||||
<i
|
||||
class="fa fa-question-circle fa-2x SmallButton"
|
||||
id="Info_GOOGLE_TEST_CREDENTIALS"
|
||||
tip="Test Google credentials"></i>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div id="ThemeCreator_mask">
|
||||
<div class="SaveConfig">
|
||||
<div class="AdvancedMenuRow">
|
||||
<button class="AdvancedMenuButton"
|
||||
id="HideThemeCreator">Close
|
||||
Theme Creator</button>
|
||||
<label class="testLabel Basiclabel"></label>
|
||||
</div>
|
||||
|
||||
<div id="mini-container">
|
||||
<div id="mini-top-bar">
|
||||
</div>
|
||||
<div id="mini-main">
|
||||
<div id="mini-left"></div>
|
||||
<div id="mini-mid"></div>
|
||||
<div id="mini-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend id="legendStyle"
|
||||
tip="Enable/Disable Custom Theme">
|
||||
<svg width="24" height="24"
|
||||
viewBox="0 0 24 24"><path
|
||||
d="M4 21.832c4.587.38 2.944-4.493 7.188-4.538l1.838 1.534c.458 5.538-6.315 6.773-9.026 3.004zm14.065-7.115c1.427-2.239 5.847-9.749 5.847-9.749.352-.623-.43-1.273-.976-.813 0 0-6.572 5.714-8.511 7.525-1.532 1.432-1.539 2.086-2.035 4.447l1.68 1.4c2.227-.915 2.868-1.039 3.995-2.81zm-11.999 3.876c.666-1.134 1.748-2.977 4.447-3.262.434-2.087.607-3.3 2.547-5.112 1.373-1.282 4.938-4.409 7.021-6.229-1-2.208-4.141-4.023-8.178-3.99-6.624.055-11.956 5.465-11.903 12.092.023 2.911 1.081 5.571 2.82 7.635 1.618.429 2.376.348 3.246-1.134zm6.952-15.835c1.102-.006 2.005.881 2.016 1.983.004 1.103-.882 2.009-1.986 2.016-1.105.009-2.008-.88-2.014-1.984-.013-1.106.876-2.006 1.984-2.015zm-5.997 2.001c1.102-.01 2.008.877 2.012 1.983.012 1.106-.88 2.005-1.98 2.016-1.106.007-2.009-.881-2.016-1.988-.009-1.103.877-2.004 1.984-2.011zm-2.003 5.998c1.106-.007 2.01.882 2.016 1.985.01 1.104-.88 2.008-1.986 2.015-1.105.008-2.005-.88-2.011-1.985-.011-1.105.879-2.004 1.981-2.015zm10.031 8.532c.021 2.239-.882 3.718-1.682 4.587l-.046.044c5.255-.591 9.062-4.304 6.266-7.889-1.373 2.047-2.534 2.442-4.538 3.258z" /></svg>
|
||||
<input type="checkbox"
|
||||
id="USE_CUSTOM_THEME"
|
||||
class="checkbox" />
|
||||
<label for="USE_CUSTOM_THEME"
|
||||
class="toggle-small">
|
||||
</legend>
|
||||
|
||||
<div class="AdvancedMenuRow">
|
||||
<div
|
||||
class="AdvancedMenuLabel">Main
|
||||
Color 1</div>
|
||||
<input type="color"
|
||||
id="MAIN_COLOR_1"
|
||||
value="#0000ff">
|
||||
<div
|
||||
class="AdvancedMenuLabel">Main
|
||||
Color 2</div>
|
||||
<input type="color"
|
||||
id="MAIN_COLOR_2"
|
||||
value="#0000ff">
|
||||
<div
|
||||
class="AdvancedMenuLabel">Main
|
||||
Color 3</div>
|
||||
<input type="color"
|
||||
id="MAIN_COLOR_3"
|
||||
value="#0000ff">
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div
|
||||
class="AdvancedMenuLabel">Main
|
||||
Color 4</div>
|
||||
<input type="color"
|
||||
id="MAIN_COLOR_4"
|
||||
value="#0000ff">
|
||||
<div
|
||||
class="AdvancedMenuLabel">Top
|
||||
Bar</div>
|
||||
<input type="color"
|
||||
id="TOP_BAR"
|
||||
value="#0000ff">
|
||||
<div
|
||||
class="AdvancedMenuLabel">Mid
|
||||
Section</div>
|
||||
<input type="color"
|
||||
id="MID_SECTION"
|
||||
value="#0000ff">
|
||||
</div>
|
||||
<div class="AdvancedMenuRow">
|
||||
<div
|
||||
class="AdvancedMenuLabel">Chat
|
||||
Bubble Background</div>
|
||||
<input type="color"
|
||||
id="CHAT_BUBBLE_BG"
|
||||
value="#0000ff">
|
||||
<div
|
||||
class="AdvancedMenuLabel">Chat
|
||||
Bubble Header</div>
|
||||
<input type="color"
|
||||
id="CHAT_BUBBLE_HEADER"
|
||||
value="#0000ff">
|
||||
<div
|
||||
class="AdvancedMenuLabel">Chat
|
||||
Bubble Message</div>
|
||||
<input type="color"
|
||||
id="CHAT_BUBBLE_MESSAGE"
|
||||
value="#0000ff">
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--#endregion -->
|
||||
|
||||
<!-- #region Main chat box-->
|
||||
<div class="OptionPanel show" id="Chat">
|
||||
<div id="chatBox" class="message-window">
|
||||
</div>
|
||||
<!-- User input box-->
|
||||
<div id="userInput" class="chat-input">
|
||||
|
||||
<!-- User text input-->
|
||||
<input id="textInput" class="input-box"
|
||||
type="text" name="msg"
|
||||
placeholder="Tap 'Enter' to send a message">
|
||||
|
||||
<!-- Send button-->
|
||||
<button class="SmallButton" id="SendButton">
|
||||
<i class="fa fa-play-circle fa-2x"
|
||||
aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--#endregion -->
|
||||
|
||||
</div>
|
||||
<!--#endregion -->
|
||||
|
||||
<!-- #region Viewer list, right section-->
|
||||
<div class="sidepanel-right">
|
||||
<div class="viewer-list">
|
||||
<div class="tabx-bar">
|
||||
<a class="tabx" href="#"
|
||||
data-text="Twitch">
|
||||
<img class="tab"
|
||||
src="./images/twitch.svg" alt=" ">
|
||||
</a>
|
||||
</div>
|
||||
<section id="content1">
|
||||
<h1 class="titles">Moderators</h1>
|
||||
<ul class="no-bullets" id="moderators">
|
||||
</ul>
|
||||
<h1 class="titles">Viewers</h1>
|
||||
<ul class="no-bullets" id="viewers">
|
||||
</ul>
|
||||
</section>
|
||||
<section id="content2">
|
||||
<ul class="no-bullets">
|
||||
<li>a</li>
|
||||
<li>b</li>
|
||||
<li>c</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section id="content3">
|
||||
<ul class="no-bullets">
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<div tip="Hide Viewers">
|
||||
<div class="circle-right">
|
||||
<i class="fa fa-eye hide" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- #endregion -->
|
||||
</div>
|
||||
</body>
|
||||
<!-- #region js scripts -->
|
||||
<script src="./js/renderer.js"></script>
|
||||
<!--#endregion -->
|
||||
|
||||
</html>
|
||||
95
src/js/amazon.js
Normal file
95
src/js/amazon.js
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
const https = require('https');
|
||||
const querystring = require('querystring');
|
||||
const aws4 = require('aws4');
|
||||
|
||||
class PollyTTS {
|
||||
constructor(credentials) {
|
||||
this.credentials = credentials;
|
||||
}
|
||||
|
||||
textToSpeech(options, callback) {
|
||||
if (!options) {
|
||||
return callback(new Error('Options are missing'));
|
||||
}
|
||||
const qs = {
|
||||
Text: options.text,
|
||||
TextType: options.textType || 'text',
|
||||
VoiceId: options.voiceId || 'Vicki',
|
||||
SampleRate: options.sampleRate || 22050,
|
||||
OutputFormat: options.outputFormat || 'mp3',
|
||||
};
|
||||
const opts = {
|
||||
service: 'polly',
|
||||
region: options.region || 'eu-west-1',
|
||||
path: `/v1/speech?${querystring.stringify(qs)}`,
|
||||
signQuery: true,
|
||||
};
|
||||
|
||||
// you can also pass AWS credentials in explicitly (otherwise taken from process.env)
|
||||
aws4.sign(opts, this.credentials);
|
||||
https
|
||||
.get(opts, (res) => {
|
||||
if (res.statusCode !== 200) {
|
||||
return callback(
|
||||
new Error(`Request Failed. Status Code: ${res.statusCode}`),
|
||||
);
|
||||
}
|
||||
callback(null, res);
|
||||
return true;
|
||||
})
|
||||
.on('error', (e) => {
|
||||
callback(e);
|
||||
});
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
describeVoices(options, callback) {
|
||||
if (!options) {
|
||||
return callback(new Error('Options are missing'));
|
||||
}
|
||||
const qs = {};
|
||||
|
||||
if (options.languageCode) {
|
||||
qs.LanguageCode = options.languageCode;
|
||||
}
|
||||
|
||||
if (options.nextToken) {
|
||||
qs.NextToken = options.nextToken;
|
||||
}
|
||||
|
||||
const opts = {
|
||||
service: 'polly',
|
||||
region: options.region || 'eu-west-1',
|
||||
path: `/v1/voices?${querystring.stringify(qs)}`,
|
||||
signQuery: true,
|
||||
};
|
||||
|
||||
// you can also pass AWS credentials in explicitly (otherwise taken from process.env)
|
||||
aws4.sign(opts, this.credentials);
|
||||
https
|
||||
.get(opts, (res) => {
|
||||
if (res.statusCode !== 200) {
|
||||
return callback(
|
||||
new Error(`Request Failed. Status Code: ${res.statusCode}`),
|
||||
);
|
||||
}
|
||||
let body = '';
|
||||
res.on('readable', () => {
|
||||
body += res.read();
|
||||
});
|
||||
res.on('end', () => {
|
||||
callback(null, body);
|
||||
});
|
||||
|
||||
return undefined;
|
||||
})
|
||||
.on('error', (e) => {
|
||||
callback(e);
|
||||
});
|
||||
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = PollyTTS;
|
||||
180
src/js/chat.js
Normal file
180
src/js/chat.js
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
function getResponse() {
|
||||
const userText = document.querySelector('#textInput').value;
|
||||
|
||||
// If nothing is written don't do anything
|
||||
if (userText === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
// Create chat message from received data
|
||||
const article = document.createElement('article');
|
||||
article.className = 'msg-container msg-self';
|
||||
|
||||
article.innerHTML = messageTemplates.userTemplate;
|
||||
|
||||
const postTime = article.querySelector('.post-time');
|
||||
if (postTime) {
|
||||
postTime.innerText = getPostTime();
|
||||
}
|
||||
|
||||
const msg = article.querySelector('.msg');
|
||||
if (msg) {
|
||||
msg.innerText = userText;
|
||||
}
|
||||
|
||||
// Appends the message to the main chat box (shows the message)
|
||||
showChatMessage(article);
|
||||
|
||||
twitch.sendMessage(userText);
|
||||
|
||||
// Empty input box after sending message
|
||||
document.body.querySelector('#textInput').value = '';
|
||||
}
|
||||
|
||||
// Function that will execute when you press 'enter' in the message box
|
||||
document.body.querySelector('#textInput').addEventListener('keydown', (e) => {
|
||||
if (e.which === 13) {
|
||||
getResponse();
|
||||
}
|
||||
});
|
||||
|
||||
// Function that will execute when you click the 'send' button
|
||||
document.body.querySelector('#SendButton').addEventListener('click', () => {
|
||||
getResponse();
|
||||
});
|
||||
|
||||
// #endregion
|
||||
|
||||
// #region Panel retraction function
|
||||
|
||||
// Left panel
|
||||
document.body.querySelector('.circle-left').addEventListener('click', () => {
|
||||
const menu = document.body.querySelector('.sidepanel-left');
|
||||
|
||||
if (menu.classList.contains('collapse-menu')) {
|
||||
menu.classList.remove('collapse-menu');
|
||||
} else {
|
||||
menu.classList.add('collapse-menu');
|
||||
}
|
||||
|
||||
const leftCircle = document.body.querySelector('.circle-left');
|
||||
|
||||
if (leftCircle.classList.contains('collapse-circle-left')) {
|
||||
leftCircle.classList.remove('collapse-circle-left');
|
||||
} else {
|
||||
leftCircle.classList.add('collapse-circle-left');
|
||||
}
|
||||
});
|
||||
|
||||
// right panel
|
||||
document.body.querySelector('.circle-right').addEventListener('click', () => {
|
||||
const menu = document.body.querySelector('.sidepanel-right');
|
||||
|
||||
if (menu.classList.contains('collapse-menu')) {
|
||||
menu.classList.remove('collapse-menu');
|
||||
} else {
|
||||
menu.classList.add('collapse-menu');
|
||||
}
|
||||
|
||||
const leftCircle = document.body.querySelector('.circle-right');
|
||||
|
||||
if (leftCircle.classList.contains('collapse-circle-right')) {
|
||||
leftCircle.classList.remove('collapse-circle-right');
|
||||
} else {
|
||||
leftCircle.classList.add('collapse-circle-right');
|
||||
}
|
||||
});
|
||||
|
||||
// #endregion
|
||||
|
||||
// #region Show panels
|
||||
|
||||
// TODO: animate Option panels
|
||||
// TODO : optimize show panels
|
||||
// Function that shows and hides the option panels. (TTS, Configuration, Commands)
|
||||
const displayPanel = (panelSelectorClass, panelSelectorID, btnSelectorID) => {
|
||||
const btn = document.querySelector(btnSelectorID);
|
||||
const panel = document.querySelector(panelSelectorID);
|
||||
const panels = document.querySelectorAll(panelSelectorClass);
|
||||
|
||||
btn.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
panels.forEach((el) => {
|
||||
if (el === panel) return;
|
||||
el.classList.remove('show');
|
||||
});
|
||||
if (panel.classList.contains('show')) {
|
||||
// panel.classList.remove('show');
|
||||
} else {
|
||||
panel.classList.add('show');
|
||||
}
|
||||
}, {
|
||||
capture: true,
|
||||
});
|
||||
};
|
||||
|
||||
displayPanel('.OptionPanel', '#Configuration', '#btnConfiguration');
|
||||
displayPanel('.OptionPanel', '#Logs', '#btnLogs');
|
||||
displayPanel('.OptionPanel', '#BrowsersourceChat', '#btnBrowsersourceChat');
|
||||
displayPanel('.OptionPanel', '#BrowsersourceVtuber', '#btnBrowsersourceVtuber');
|
||||
displayPanel('.OptionPanel', '#TTS', '#btnTTS');
|
||||
displayPanel('.OptionPanel', '#Chat', '#btnChat');
|
||||
// #endregion
|
||||
|
||||
const displayPanelX = (panelSelectorClass, panelSelectorID, btnSelectorID) => {
|
||||
const btn = document.querySelector(btnSelectorID);
|
||||
const panel = document.querySelector(panelSelectorID);
|
||||
const panels = document.querySelectorAll(panelSelectorClass);
|
||||
|
||||
btn.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
panels.forEach((el) => {
|
||||
if (el === panel) return;
|
||||
el.classList.remove('item-active');
|
||||
});
|
||||
if (panel.classList.contains('item-active')) {
|
||||
// panel.classList.remove('item-active');
|
||||
} else {
|
||||
panel.classList.add('item-active');
|
||||
}
|
||||
}, {
|
||||
capture: true,
|
||||
});
|
||||
};
|
||||
|
||||
displayPanelX('.item', '#btnTTS', '#btnTTS');
|
||||
displayPanelX('.item', '#btnChat', '#btnChat');
|
||||
displayPanelX('.item', '#btnBrowsersourceChat', '#btnBrowsersourceChat');
|
||||
displayPanelX('.item', '#btnBrowsersourceVtuber', '#btnBrowsersourceVtuber');
|
||||
displayPanelX('.item', '#btnLogs', '#btnLogs');
|
||||
displayPanelX('.item', '#btnConfiguration', '#btnConfiguration');
|
||||
|
||||
|
||||
// #region Show/Hide Advanced Menu
|
||||
document.body.querySelector('#ShowAdvancedMenu').addEventListener('click', () => {
|
||||
document.getElementById('AdvancedMenu_mask').style.visibility = 'visible';
|
||||
});
|
||||
|
||||
document.body.querySelector('#HideAdvancedMenu').addEventListener('click', () => {
|
||||
document.getElementById('AdvancedMenu_mask').style.visibility = 'hidden';
|
||||
});
|
||||
|
||||
// #endregion
|
||||
|
||||
// #region Show/Hide Theme Creator
|
||||
document.body.querySelector('#ShowThemeCreator').addEventListener('click', () => {
|
||||
document.getElementById('ThemeCreator_mask').style.visibility = 'visible';
|
||||
});
|
||||
|
||||
document.body.querySelector('#HideThemeCreator').addEventListener('click', () => {
|
||||
document.getElementById('ThemeCreator_mask').style.visibility = 'hidden';
|
||||
});
|
||||
|
||||
// #endregion
|
||||
|
||||
// #region Test/Save TTS
|
||||
document.body.querySelector('#TTSTestButton').addEventListener('click', () => {
|
||||
const text = document.getElementById('TTSTest').value;
|
||||
console.log(text);
|
||||
sound.playVoice(text, '', '', text);
|
||||
});
|
||||
81
src/js/logger.js
Normal file
81
src/js/logger.js
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
const winston = require('winston');
|
||||
|
||||
const { format, transports, createLogger } = winston;
|
||||
const path = require('path');
|
||||
|
||||
const consoleloggerLevel = process.env.WINSTON_LOGGER_LEVEL || 'info';
|
||||
|
||||
const consoleFormat = format.combine(
|
||||
format.colorize(),
|
||||
format.timestamp(),
|
||||
format.align(),
|
||||
format.printf((info) => `${info.timestamp} - ${info.level}: ${info.message
|
||||
} ${JSON.stringify(info.metadata)}`),
|
||||
);
|
||||
|
||||
const fileFormat = format.combine(
|
||||
format.timestamp(),
|
||||
format.metadata({ fillExcept: ['message', 'level', 'timestamp', 'label'] }),
|
||||
format.json(),
|
||||
);
|
||||
|
||||
const logger = createLogger({
|
||||
level: 'info',
|
||||
format: fileFormat,
|
||||
transports: [
|
||||
new transports.File({
|
||||
filename: path.join(__dirname, '../logs/error.log'),
|
||||
level: 'error',
|
||||
}),
|
||||
new transports.File({
|
||||
filename: path.join(__dirname, '../logs/activity.log'),
|
||||
maxsize: 5242880,
|
||||
maxFiles: 5,
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
logger.add(
|
||||
new transports.Console({
|
||||
level: consoleloggerLevel,
|
||||
format: consoleFormat,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
fetch(path.join(__dirname, '../logs/activity.log'))
|
||||
.then((response) => response.text())
|
||||
.then((logData) => {
|
||||
const logLines = logData.trim().split('\n');
|
||||
const tableBody = document.getElementById('logContent');
|
||||
|
||||
logLines.forEach((logLine) => {
|
||||
const logObject = JSON.parse(logLine);
|
||||
const row = document.createElement('tr');
|
||||
|
||||
const levelCell = document.createElement('td');
|
||||
levelCell.textContent = logObject.level;
|
||||
levelCell.classList.add(logObject.level); // Add class for styling
|
||||
row.appendChild(levelCell);
|
||||
|
||||
const messageCell = document.createElement('td');
|
||||
messageCell.textContent = logObject.message;
|
||||
row.appendChild(messageCell);
|
||||
|
||||
const metadataCell = document.createElement('td');
|
||||
metadataCell.textContent = JSON.stringify(logObject.metadata, null, 2);
|
||||
row.appendChild(metadataCell);
|
||||
|
||||
const timestampCell = document.createElement('td');
|
||||
timestampCell.textContent = logObject.timestamp;
|
||||
row.appendChild(timestampCell);
|
||||
|
||||
tableBody.appendChild(row);
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
// console.error('Error fetching log file:', error);
|
||||
});
|
||||
|
||||
module.exports = logger;
|
||||
61
src/js/messageTemplates.js
Normal file
61
src/js/messageTemplates.js
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
const twitchTemplate = `
|
||||
<div class="mmg">
|
||||
<div class="icon-container">
|
||||
<img class="user-img" src="" />
|
||||
<img class="status-circle" src="./images/twitch-icon.png" />
|
||||
</div>
|
||||
<div class="msg-box">
|
||||
<div class="flr">
|
||||
<div class="messages">
|
||||
<span class="timestamp">
|
||||
<span class="username"></span>
|
||||
<span class="post-time"></span>
|
||||
</span>
|
||||
<br>
|
||||
<p class="msg"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`.trim();
|
||||
|
||||
const userTemplate = `
|
||||
<div class="icon-container-user">
|
||||
<img class="user-img-user" src="https://gravatar.com/avatar/56234674574535734573000000000001?d=retro" />
|
||||
<img class="status-circle-user" src="./images/twitch-icon.png" />
|
||||
</div>
|
||||
<div class="msg-box-user">
|
||||
<div class="flr">
|
||||
<div class="messages-user">
|
||||
<span class="timestamp">
|
||||
<span class="username">You</span>
|
||||
<span class="post-time"></span>
|
||||
</span>
|
||||
<br>
|
||||
<p class="msg"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`.trim();
|
||||
|
||||
const messageTemplate = `
|
||||
<article class="msg-container msg-self" id="msg-0">
|
||||
<div class="icon-container-user">
|
||||
<img class="user-img-user" src="https://gravatar.com/avatar/56234674574535734573000000000001?d=retro" />
|
||||
<img class="status-circle-user" src="./images/twitch-icon.png" />
|
||||
</div>
|
||||
<div class="msg-box-user msg-box-user-temp">
|
||||
<div class="flr">
|
||||
<div class="messages-user">
|
||||
<span class="timestamp timestamp-temp"><span class="username username-temp">You</span><span class="posttime">${getPostTime()}</span></span>
|
||||
<br>
|
||||
<p class="msg msg-temp" id="msg-0">
|
||||
hello there
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
`.trim();
|
||||
|
||||
module.exports = { twitchTemplate, userTemplate, messageTemplate };
|
||||
225
src/js/renderer.js
Normal file
225
src/js/renderer.js
Normal file
|
|
@ -0,0 +1,225 @@
|
|||
const path = require('path'); // get directory path
|
||||
const {
|
||||
ipcRenderer,
|
||||
} = require('electron'); // necessary electron libraries to send data to the app
|
||||
const say = require('say');
|
||||
const request = require('request');
|
||||
const langdetect = require('langdetect');
|
||||
const io = require('socket.io-client');
|
||||
|
||||
const socket = io('http://localhost:9000'); // Connect to your Socket.IO server
|
||||
const fs = require('fs');
|
||||
|
||||
const util = require('util');
|
||||
const exec = util.promisify(require('child_process').exec);
|
||||
|
||||
const GoogleTTS = require('node-google-tts-api');
|
||||
|
||||
const tts = new GoogleTTS();
|
||||
const { Socket } = require('socket.io-client');
|
||||
|
||||
const ini = require('ini');
|
||||
|
||||
let envInfo = (ipcRenderer.sendSync('environment'))
|
||||
|
||||
// TODO: remove gooogle voices txt and use api instead
|
||||
const googleVoices = fs.readFileSync(path.join(__dirname, './config/googleVoices.txt')).toString().split('\r\n');
|
||||
// TODO: remove amazon voices txt and use api instead (sakura project has it)
|
||||
const amazonVoices = fs.readFileSync(path.join(__dirname, './config/amazonVoices.txt')).toString().split('\r\n');
|
||||
|
||||
// html elements
|
||||
const root = document.documentElement;
|
||||
const ttsSelector = document.body.querySelector('#TTSSelector');
|
||||
const googleVoiceSelect = document.querySelector('#googleVoice'); // obtain the html reference of the google voices comboBox
|
||||
const amazonVoiceSelect = document.querySelector('#amazonVoice'); // obtain the html reference of the amazon voices comboBox
|
||||
const installedTTS = document.querySelector('#installedTTS'); // obtain the html reference of the installedTTS comboBox
|
||||
const ttsAudioDevices = document.querySelector('#ttsAudioDevice'); // obtain the html reference of the installedTTS comboBox
|
||||
const notificationAudioDevices = document.querySelector('#notificationAudioDevice'); // obtain the html reference of the installedTTS comboBox
|
||||
const devicesDropdown = document.querySelector('#devicesDropdown');
|
||||
const notificationSound = document.querySelector('#notification'); // obtain the html reference of the sound comboBox
|
||||
|
||||
// laod local javascript files
|
||||
const chat = require(path.join(__dirname, './js/chat'));
|
||||
|
||||
const Polly = require(path.join(__dirname, './js/amazon'));
|
||||
const messageTemplates = require(path.join(__dirname, './js/messageTemplates'));
|
||||
const logger = require(path.join(__dirname, './js/logger'));
|
||||
const sound = require(path.join(__dirname, './js/sound'));
|
||||
const talk = require(path.join(__dirname, './js/voiceQueue')); // Voice queue system
|
||||
const config = require(path.join(__dirname, './js/settings'));
|
||||
|
||||
let notificationSounds = undefined;
|
||||
if (envInfo.env) {
|
||||
notificationSounds = path.join(envInfo.path, './sounds/notifications');
|
||||
} else {
|
||||
notificationSounds = path.join(__dirname, './sounds/notifications');
|
||||
}
|
||||
|
||||
const server = require(path.join(__dirname, './js/server'));
|
||||
const theme = require(path.join(__dirname, './js/theme'));
|
||||
const twitch = require(path.join(__dirname, './js/twitch'));
|
||||
|
||||
// initialize values
|
||||
config.getGeneralSettings();
|
||||
config.getTwitchSettings();
|
||||
config.setCustomThemeToggle();
|
||||
config.setTwitchToggle();
|
||||
|
||||
let selectedVoiceIndex;
|
||||
let selectedEncodingIndex;
|
||||
let selectedTtsAudioDeviceIndex;
|
||||
const TTSVolume = 1;
|
||||
|
||||
const notificationSoundVolume = 1;
|
||||
// const slider = document.body.querySelector('#slider');
|
||||
const StartDateAndTime = Date.now();
|
||||
const speakButton = document.querySelector('#speakBtn');
|
||||
|
||||
const amazonCredentials = {
|
||||
accessKeyId: config.settings.AMAZON.ACCESS_KEY,
|
||||
secretAccessKey: config.settings.AMAZON.ACCESS_SECRET,
|
||||
};
|
||||
|
||||
// Check for installed sounds
|
||||
fs.readdir(notificationSounds, (err, files) => {
|
||||
files.forEach((file, i) => {
|
||||
// Create a new option element.
|
||||
const option = document.createElement('option');
|
||||
|
||||
// Set the options value and text.
|
||||
option.value = i;
|
||||
option.innerHTML = file;
|
||||
|
||||
// Add the option to the sound selector.
|
||||
notificationSound.appendChild(option);
|
||||
});
|
||||
|
||||
// set the saved notification sound
|
||||
notificationSound.selectedIndex = config.settings.AUDIO.NOTIFICATION_SOUND;
|
||||
});
|
||||
|
||||
async function getAudioDevices() {
|
||||
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
|
||||
// logger.info('enumerateDevices() not supported.');
|
||||
return;
|
||||
}
|
||||
|
||||
const devices = await navigator.mediaDevices.enumerateDevices();
|
||||
const audioOutputDevices = devices.filter((device) => device.kind === 'audiooutput');
|
||||
|
||||
audioOutputDevices.forEach((device) => {
|
||||
const option = document.createElement('option');
|
||||
option.text = device.label || `Output ${device.deviceId}`;
|
||||
option.value = device.deviceId;
|
||||
ttsAudioDevices.appendChild(option);
|
||||
});
|
||||
|
||||
ttsAudioDevices.selectedIndex = config.settings.AUDIO.SELECTED_TTS_AUDIO_DEVICE;
|
||||
// devicesDropdown.selectedIndex = 0;
|
||||
|
||||
// Create an audio context
|
||||
// audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
||||
}
|
||||
|
||||
getAudioDevices();
|
||||
|
||||
say.getInstalledVoices((err, voices) => {
|
||||
voices.forEach((voice, i) => {
|
||||
const option = document.createElement('option');
|
||||
|
||||
option.value = i;
|
||||
option.innerHTML = voice;
|
||||
|
||||
installedTTS.appendChild(option);
|
||||
});
|
||||
installedTTS.selectedIndex = config.settings.TTS.INTERNAL_TTS_VOICE;
|
||||
});
|
||||
|
||||
async function getGoogleVoices() {
|
||||
const voices = Object.keys(googleVoices);
|
||||
await voices.forEach((voice) => {
|
||||
const option = document.createElement('option');
|
||||
|
||||
option.value = voice;
|
||||
option.innerHTML = googleVoices[voice];
|
||||
|
||||
googleVoiceSelect.appendChild(option);
|
||||
});
|
||||
googleVoiceSelect.selectedIndex = config.settings.TTS.GOOGLE_VOICE;
|
||||
}
|
||||
|
||||
getGoogleVoices();
|
||||
|
||||
async function getAmazonVoices() {
|
||||
const voices = Object.keys(amazonVoices);
|
||||
await voices.forEach((voice) => {
|
||||
const option = document.createElement('option');
|
||||
|
||||
option.value = voice;
|
||||
option.innerHTML = amazonVoices[voice];
|
||||
|
||||
amazonVoiceSelect.appendChild(option);
|
||||
});
|
||||
amazonVoiceSelect.selectedIndex = config.settings.TTS.AMAZON_VOICE;
|
||||
}
|
||||
|
||||
getAmazonVoices();
|
||||
|
||||
// Small tooltip
|
||||
Array.from(document.body.querySelectorAll('[tip]')).forEach((el) => {
|
||||
const tip = document.createElement('div');
|
||||
const element = el;
|
||||
tip.classList.add('tooltip');
|
||||
tip.innerText = el.getAttribute('tip');
|
||||
tip.style.transform = `translate(${el.hasAttribute('tip-left') ? 'calc(-100% - 5px)' : '15px'}, ${el.hasAttribute('tip-top') ? '-100%' : '15px'
|
||||
})`;
|
||||
element.appendChild(tip);
|
||||
element.onmousemove = (e) => {
|
||||
tip.style.left = `${e.pageX}px`;
|
||||
tip.style.top = `${e.pageY}px`;
|
||||
};
|
||||
});
|
||||
|
||||
function showChatMessage(article) {
|
||||
document.querySelector('#chatBox').appendChild(article);
|
||||
const messages = Array.from(document.body.querySelectorAll('.msg-container'));
|
||||
const lastMessage = messages[messages.length - 1];
|
||||
lastMessage.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
|
||||
function getPostTime() {
|
||||
const date = new Date();
|
||||
document.body.querySelectorAll('.container').innerHTML = date.getHours();
|
||||
const hours = date.getHours();
|
||||
const minutes = (date.getMinutes() < 10 ? '0' : '') + date.getMinutes();
|
||||
const time = `${hours}:${minutes}`;
|
||||
|
||||
return time;
|
||||
}
|
||||
|
||||
function showPreviewChatMessage() {
|
||||
const message = messageTemplates.messageTemplate;
|
||||
document.querySelector('#mini-mid').innerHTML += message;
|
||||
const messages = Array.from(document.body.querySelectorAll('#mini-mid'));
|
||||
const lastMessage = messages[messages.length - 1];
|
||||
lastMessage.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
|
||||
showPreviewChatMessage();
|
||||
|
||||
// Amazon TTS
|
||||
// const polly = new Polly(amazonCredentials);
|
||||
// const options = {
|
||||
// text: 'Hallo mijn naam is KEES',
|
||||
// voiceId: 'Lotte',
|
||||
// };
|
||||
|
||||
// const fileStream = fs.createWriteStream(path.join(__dirname, '/public/sounds/tts/Amazon_audio.mp3'));
|
||||
|
||||
// polly.textToSpeech(options, (err, audioStream) => {
|
||||
// if (err) {
|
||||
// return console.warn(err.message);
|
||||
// }
|
||||
// audioStream.pipe(fileStream);
|
||||
// return 1;
|
||||
// });
|
||||
18
src/js/responses.js
Normal file
18
src/js/responses.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
function getBotResponse(input) {
|
||||
// rock paper scissors
|
||||
if (input === 'rock') {
|
||||
return 'paper';
|
||||
} if (input === 'paper') {
|
||||
return 'scissors';
|
||||
} if (input === 'scissors') {
|
||||
return 'rock';
|
||||
}
|
||||
|
||||
// Simple responses
|
||||
if (input === 'hello') {
|
||||
return 'Hello there!';
|
||||
} if (input === 'goodbye') {
|
||||
return 'Talk to you later!';
|
||||
}
|
||||
return 'Try asking something else!';
|
||||
}
|
||||
45
src/js/server.js
Normal file
45
src/js/server.js
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
const express = require('express');
|
||||
|
||||
const app = express();
|
||||
const path = require('path');
|
||||
const http = require('http').createServer(app);
|
||||
const io = require('socket.io')(http);
|
||||
|
||||
const PORT = 9000;
|
||||
|
||||
app.use('/chat', express.static(path.join(__dirname, '../modules/chat')));
|
||||
app.use('/vtuber', express.static(path.join(__dirname, '../modules/vtuber/')));
|
||||
|
||||
// Handle socket connections
|
||||
io.on('connection', (socket) => {
|
||||
|
||||
// Receive data from the client
|
||||
socket.on('message', (data) => { });
|
||||
|
||||
// Receive data from the client
|
||||
socket.on('xxx', (logoUrl, username, message) => {
|
||||
socket.broadcast.emit('message', logoUrl, username, message);
|
||||
});
|
||||
|
||||
socket.on('disconnect', () => { });
|
||||
});
|
||||
|
||||
http.listen(PORT, () => {
|
||||
let vtuber = document.body.querySelector('#BrowsersourceVtuber');
|
||||
let vtuberframe = document.createElement('iframe');
|
||||
vtuberframe.class = "frame";
|
||||
vtuberframe.src = "http://localhost:9000/vtuber";
|
||||
vtuberframe.style.width = "100%";
|
||||
vtuberframe.style.height = "100%";
|
||||
vtuberframe.frameBorder = 0;
|
||||
vtuber.appendChild(vtuberframe);
|
||||
|
||||
let chat = document.body.querySelector('#BrowsersourceChat');
|
||||
let chatframe = document.createElement('iframe');
|
||||
chatframe.class = "frame";
|
||||
chatframe.src = "http://localhost:9000/chat";
|
||||
chatframe.style.width = "100%";
|
||||
chatframe.style.height = "100%";
|
||||
chatframe.frameBorder = 0;
|
||||
chat.appendChild(chatframe);
|
||||
});
|
||||
245
src/js/settings.js
Normal file
245
src/js/settings.js
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
let resourcesPath = path.join(__dirname, '../config/settings.ini');
|
||||
let settings = ini.parse(fs.readFileSync(resourcesPath, 'utf-8'));
|
||||
|
||||
if (envInfo.env) {
|
||||
resourcesPath = path.join(envInfo.path, './settings.ini');
|
||||
settings = ini.parse(fs.readFileSync(resourcesPath, 'utf-8'));
|
||||
}
|
||||
|
||||
document.body.querySelector('#installedTTS').addEventListener('change', () => {
|
||||
settings.TTS.INTERNAL_TTS_VOICE = installedTTS.selectedIndex;
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
});
|
||||
|
||||
document.body.querySelector('#ttsAudioDevice').addEventListener('change', () => {
|
||||
settings.AUDIO.TTS_AUDIO_DEVICE = ttsAudioDevices.value;
|
||||
settings.AUDIO.SELECTED_TTS_AUDIO_DEVICE = ttsAudioDevices.selectedIndex;
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
});
|
||||
|
||||
document.body.querySelector('#TWITCH_CHANNEL_NAME').addEventListener('change', () => {
|
||||
settings.TWITCH.CHANNEL_NAME = document.body.querySelector('#TWITCH_CHANNEL_NAME').value;
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
});
|
||||
|
||||
document.body.querySelector('#TWITCH_USERNAME').addEventListener('change', () => {
|
||||
settings.TWITCH.USERNAME = document.body.querySelector('#TWITCH_USERNAME').value;
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
});
|
||||
|
||||
document.body.querySelector('#TWITCH_OAUTH_TOKEN').addEventListener('change', () => {
|
||||
settings.TWITCH.OAUTH_TOKEN = document.body.querySelector('#TWITCH_OAUTH_TOKEN').value;
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
});
|
||||
|
||||
document.body.querySelector('#TWITCH_CLIENT_ID').addEventListener('change', () => {
|
||||
settings.TWITCH.CLIENT_ID = document.body.querySelector('#TWITCH_CLIENT_ID').value;
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
});
|
||||
|
||||
document.body.querySelector('#TWITCH_CLIENT_SECRET').addEventListener('change', () => {
|
||||
settings.TWITCH.CLIENT_SECRET = document.body.querySelector('#TWITCH_CLIENT_SECRET').value;
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
});
|
||||
|
||||
// document.body.querySelector('#sliderX').addEventListener('change', () => {
|
||||
// // TODO: resolve volume control of TTS
|
||||
// config.SETTINGS.VOICE_VOLUME;
|
||||
// fs.writeFileSync(path.join(__dirname, '/public/config/settings.ini'), ini.stringify(config));
|
||||
// });
|
||||
|
||||
// #region Test/change/Save Configuration
|
||||
document.body.querySelector('#notification').addEventListener('change', () => {
|
||||
settings.AUDIO.NOTIFICATION_SOUND = notificationSound.selectedIndex;
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
});
|
||||
|
||||
// document.body.querySelector('#slider').addEventListener('change', () => {
|
||||
// settings.SETTINGS.NOTIFICATION_VOLUME = parseInt(document.getElementById('SoundVolume').
|
||||
// innerText);
|
||||
// fs.writeFileSync(path.join(__dirname, '/public/config/settings.ini'), ini.stringify(settings));
|
||||
// });
|
||||
|
||||
function getGeneralSettings() {
|
||||
// Theme
|
||||
document.querySelector('#USE_CUSTOM_THEME').value = settings.THEME.USE_CUSTOM_THEME;
|
||||
const USE_CUSTOM_THEME = settings.THEME.USE_CUSTOM_THEME;
|
||||
|
||||
document.body.querySelector('#USE_CUSTOM_THEME').checked = settings.THEME.USE_CUSTOM_THEME === true ? 1 : 0;
|
||||
theme.setTheme(USE_CUSTOM_THEME);
|
||||
}
|
||||
|
||||
function getTwitchSettings() {
|
||||
document.body.querySelector('#USE_TWITCH').checked = settings.TWITCH.USE_TWITCH === true ? 1 : 0;
|
||||
document.body.querySelector('#TWITCH_CHANNEL_NAME').value = settings.TWITCH.CHANNEL_NAME;
|
||||
document.body.querySelector('#TWITCH_USERNAME').value = settings.TWITCH.USERNAME;
|
||||
document.body.querySelector('#TWITCH_OAUTH_TOKEN').value = settings.TWITCH.OAUTH_TOKEN;
|
||||
document.body.querySelector('#TWITCH_CLIENT_ID').value = settings.TWITCH.CLIENT_ID;
|
||||
document.body.querySelector('#TWITCH_CLIENT_SECRET').value = settings.TWITCH.CLIENT_SECRET;
|
||||
}
|
||||
|
||||
const notificationToasts = document.querySelector('#toasts'); // toast messages
|
||||
|
||||
function createNotification(message = null, type = null) {
|
||||
const notification = document.createElement('div');
|
||||
notification.classList.add('toast');
|
||||
notification.classList.add(type);
|
||||
notification.innerText = message;
|
||||
notificationToasts.appendChild(notification);
|
||||
setTimeout(() => notification.remove(), 10000);
|
||||
}
|
||||
|
||||
// Check for configs
|
||||
if (!settings.TWITCH.USE_TWITCH) {
|
||||
const text = 'Please setup a service to connect to in Configuration > Show Advanced';
|
||||
createNotification(text, 'warning');
|
||||
}
|
||||
|
||||
if (settings.TWITCH.USE_TWITCH && !settings.TWITCH.CHANNEL_NAME) {
|
||||
const text = 'No channel name inserted in the Twitch service';
|
||||
createNotification(text, 'alert');
|
||||
}
|
||||
|
||||
if (settings.TWITCH.USE_TWITCH && !settings.TWITCH.USERNAME) {
|
||||
const text = 'No username inserted in the Twitch service';
|
||||
createNotification(text, 'alert');
|
||||
}
|
||||
|
||||
function toggleRadio(toggle, inputs) {
|
||||
const element = inputs;
|
||||
if (toggle === true) {
|
||||
for (let i = 0; i < inputs.length; i += 1) { element[i].disabled = false; }
|
||||
} else {
|
||||
for (let i = 0; i < inputs.length; i += 1) { element[i].disabled = true; }
|
||||
}
|
||||
}
|
||||
|
||||
function setCustomThemeToggle() {
|
||||
const toggle = document.getElementById('USE_CUSTOM_THEME').checked;
|
||||
const inputs = document.getElementsByClassName('inputTheme');
|
||||
toggleRadio(toggle, inputs);
|
||||
theme.setTheme(toggle);
|
||||
}
|
||||
|
||||
// #region Use Custom theme toggle logic
|
||||
document.body.querySelector('#USE_CUSTOM_THEME').addEventListener('click', () => {
|
||||
setCustomThemeToggle();
|
||||
|
||||
const toggle = document.getElementById('USE_CUSTOM_THEME').checked;
|
||||
settings.THEME.USE_CUSTOM_THEME = toggle;
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
});
|
||||
|
||||
function setTwitchToggle() {
|
||||
const toggle = document.getElementById('USE_TWITCH').checked;
|
||||
settings.TWITCH.USE_TWITCH = toggle;
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
const inputs = document.getElementsByClassName('inputTwitch');
|
||||
toggleRadio(toggle, inputs);
|
||||
}
|
||||
|
||||
// #region Top bar buttons
|
||||
document.body.querySelector('#min-button').addEventListener('click', () => {
|
||||
ipcRenderer.send('minimize-window');
|
||||
});
|
||||
|
||||
document.body.querySelector('#max-button').addEventListener('click', () => {
|
||||
ipcRenderer.send('maximize-window');
|
||||
});
|
||||
|
||||
document.body.querySelector('#close-button').addEventListener('click', (event) => {
|
||||
ipcRenderer.send('close-window');
|
||||
console.log(event);
|
||||
});
|
||||
// #endregion
|
||||
|
||||
// #region Notification sound test
|
||||
document.body.querySelector('#SoundTestButton').addEventListener('click', () => {
|
||||
sound.playAudio();
|
||||
});
|
||||
|
||||
// #region Use twitch toggle logic
|
||||
document.body.querySelector('#USE_TWITCH').addEventListener('click', () => {
|
||||
setTwitchToggle();
|
||||
});
|
||||
|
||||
Array.from(ttsSelector.querySelectorAll('[name="voiceService"]')).forEach((node) => {
|
||||
node.addEventListener('change', (e) => {
|
||||
const { target } = e;
|
||||
|
||||
if (!target) { return; }
|
||||
|
||||
settings.TTS.SELECTED_TTS = target.id;
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
|
||||
Array.from(ttsSelector.querySelectorAll('select')).forEach((x) => {
|
||||
const element = x;
|
||||
if (element !== target.parentElement.previousElementSibling) {
|
||||
element.disabled = true;
|
||||
} else { element.disabled = false; }
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Get the selected TTS
|
||||
const currentlySelectedTTS = ttsSelector.querySelector(`#${settings.selectedTts}`);
|
||||
|
||||
if (currentlySelectedTTS) {
|
||||
currentlySelectedTTS.checked = true;
|
||||
|
||||
// Dispatch the event to initialize logic.
|
||||
currentlySelectedTTS.dispatchEvent(new Event('change'));
|
||||
}
|
||||
|
||||
document.body.querySelector('#notificationVolumeSlider').addEventListener('change', () => {
|
||||
const e = document.querySelector('#notificationVolumeSlider');
|
||||
e.style.setProperty('--tiempotemporal', e.value);
|
||||
e.style.setProperty('--min', e.min === '' ? '0' : e.min);
|
||||
e.style.setProperty('--max', e.max === '' ? '100' : e.max);
|
||||
document.querySelector('#notificationVolume').value = e.value;
|
||||
|
||||
e.addEventListener('input', () => {
|
||||
e.style.setProperty('--tiempotemporal', e.value);
|
||||
document.querySelector('#notificationVolume').value = e.value;
|
||||
settings.AUDIO.NOTIFICATION_VOLUME = e.value;
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
});
|
||||
});
|
||||
|
||||
if (settings.AUDIO.NOTIFICATION_VOLUME) {
|
||||
document.querySelector('#notificationVolumeSlider').value = settings.AUDIO.NOTIFICATION_VOLUME;
|
||||
document.querySelector('#notificationVolumeSlider').dispatchEvent(new Event('change'));
|
||||
} else {
|
||||
document.querySelector('#notificationVolumeSlider').dispatchEvent(new Event('change', { value: 50 }));
|
||||
}
|
||||
|
||||
document.body.querySelector('#ttsVolumeSlider').addEventListener('change', () => {
|
||||
const e = document.querySelector('#ttsVolumeSlider');
|
||||
e.style.setProperty('--tiempotemporal', e.value);
|
||||
e.style.setProperty('--min', e.min === '' ? '0' : e.min);
|
||||
e.style.setProperty('--max', e.max === '' ? '100' : e.max);
|
||||
document.querySelector('#ttsVolume').value = e.value;
|
||||
|
||||
e.addEventListener('input', () => {
|
||||
e.style.setProperty('--tiempotemporal', e.value);
|
||||
document.querySelector('#ttsVolume').value = e.value;
|
||||
settings.AUDIO.TTS_VOLUME = e.value;
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
});
|
||||
});
|
||||
|
||||
if (settings.AUDIO.TTS_VOLUME) {
|
||||
document.querySelector('#ttsVolumeSlider').value = settings.AUDIO.TTS_VOLUME;
|
||||
document.querySelector('#ttsVolumeSlider').dispatchEvent(new Event('change'));
|
||||
} else {
|
||||
document.querySelector('#ttsVolumeSlider').dispatchEvent(new Event('change', { value: 50 }));
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
ini,
|
||||
settings,
|
||||
getGeneralSettings,
|
||||
getTwitchSettings,
|
||||
setCustomThemeToggle,
|
||||
setTwitchToggle,
|
||||
};
|
||||
79
src/js/sound.js
Normal file
79
src/js/sound.js
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
let trueMessage = '';
|
||||
let currentLogoUrl = '';
|
||||
let currentUsername = '';
|
||||
let voiceSoundArray = [];
|
||||
let status = 0;
|
||||
|
||||
const playTTS = (ttsData) => new Promise((resolve) => {
|
||||
const tts = new Audio(ttsData.path);
|
||||
|
||||
tts.addEventListener('ended', () => {
|
||||
fs.unlink(ttsData.path, (err) => {
|
||||
if (err) {
|
||||
console.error(err);
|
||||
return;
|
||||
}
|
||||
console.log('Audio file deleted successfully!');
|
||||
resolve('finished');
|
||||
});
|
||||
});
|
||||
|
||||
tts.setSinkId(config.settings.AUDIO.TTS_AUDIO_DEVICE).then(() => {
|
||||
tts.play();
|
||||
socket.emit('xxx', currentLogoUrl, currentUsername, ttsData.message);
|
||||
}).catch((error) => {
|
||||
console.error('Failed to set audio output device:', error);
|
||||
});
|
||||
});
|
||||
|
||||
async function shiftVoice() {
|
||||
status = 1;
|
||||
while (voiceSoundArray.length > 0) {
|
||||
await playTTS(voiceSoundArray.shift());
|
||||
}
|
||||
status = 0;
|
||||
}
|
||||
|
||||
function add(ttsData) {
|
||||
voiceSoundArray.push(ttsData);
|
||||
if (status === 0) {
|
||||
shiftVoice();
|
||||
}
|
||||
}
|
||||
|
||||
// Play sound function
|
||||
function playAudio(ttsData = undefined) {
|
||||
let audioPath;
|
||||
if (!ttsData) {
|
||||
let notfication = undefined;
|
||||
if (envInfo.env) {
|
||||
notfication = new Audio(path.join(envInfo.path, `./sounds/notifications/${notificationSound.options[config.settings.AUDIO.NOTIFICATION_SOUND].text}`));
|
||||
} else {
|
||||
notfication = new Audio(path.join(__dirname, `../sounds/notifications/${notificationSound.options[config.settings.AUDIO.NOTIFICATION_SOUND].text}`));
|
||||
}
|
||||
notfication.play();
|
||||
} else {
|
||||
add(ttsData);
|
||||
}
|
||||
}
|
||||
|
||||
function playVoice(filteredMessage, logoUrl, username, message) {
|
||||
trueMessage = filteredMessage;
|
||||
currentLogoUrl = logoUrl;
|
||||
currentUsername = username;
|
||||
let text = '';
|
||||
let textObject = { "filtered": filteredMessage, "formatted": message };
|
||||
let voice = installedTTS.options[installedTTS.selectedIndex].text;
|
||||
const language = langdetect.detect(filteredMessage);
|
||||
|
||||
if (language[0].lang === 'en') {
|
||||
voice = installedTTS.options[1].text;
|
||||
text = `${username} said: ${filteredMessage}`
|
||||
} else {
|
||||
text = `${username} dice: ${filteredMessage}`
|
||||
}
|
||||
|
||||
talk.add(textObject, voice);
|
||||
}
|
||||
|
||||
module.exports = { playAudio, playVoice };
|
||||
180
src/js/theme.js
Normal file
180
src/js/theme.js
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
function setTheme(USE_CUSTOM_THEME) {
|
||||
document.querySelector('#MAIN_COLOR_1').value = config.settings.THEME.MAIN_COLOR_1;
|
||||
const MAIN_COLOR_1 = document.querySelector('#MAIN_COLOR_1').value;
|
||||
root.style.setProperty('--main-color1-temp', MAIN_COLOR_1);
|
||||
|
||||
document.querySelector('#MAIN_COLOR_2').value = config.settings.THEME.MAIN_COLOR_2;
|
||||
const MAIN_COLOR_2 = document.querySelector('#MAIN_COLOR_2').value;
|
||||
root.style.setProperty('--main-color2-temp', MAIN_COLOR_2);
|
||||
|
||||
document.querySelector('#MAIN_COLOR_3').value = config.settings.THEME.MAIN_COLOR_3;
|
||||
const MAIN_COLOR_3 = document.querySelector('#MAIN_COLOR_3').value;
|
||||
root.style.setProperty('--main-color3-temp', MAIN_COLOR_3);
|
||||
|
||||
document.querySelector('#MAIN_COLOR_4').value = config.settings.THEME.MAIN_COLOR_4;
|
||||
const MAIN_COLOR_4 = document.querySelector('#MAIN_COLOR_4').value;
|
||||
root.style.setProperty('--main-color4-temp', MAIN_COLOR_4);
|
||||
|
||||
document.querySelector('#TOP_BAR').value = config.settings.THEME.TOP_BAR;
|
||||
const TOP_BAR = document.querySelector('#TOP_BAR').value;
|
||||
root.style.setProperty('--top-bar-temp', TOP_BAR);
|
||||
|
||||
document.querySelector('#MID_SECTION').value = config.settings.THEME.MID_SECTION;
|
||||
const MID_SECTION = document.querySelector('#MID_SECTION').value;
|
||||
root.style.setProperty('--mid-section-temp', MID_SECTION);
|
||||
|
||||
document.querySelector('#CHAT_BUBBLE_BG').value = config.settings.THEME.CHAT_BUBBLE_BG;
|
||||
const CHAT_BUBBLE_BG = document.querySelector('#CHAT_BUBBLE_BG').value;
|
||||
root.style.setProperty('--chat-bubble-temp', CHAT_BUBBLE_BG);
|
||||
|
||||
document.querySelector('#CHAT_BUBBLE_HEADER').value = config.settings.THEME.CHAT_BUBBLE_HEADER;
|
||||
const CHAT_BUBBLE_HEADER = document.querySelector('#CHAT_BUBBLE_HEADER').value;
|
||||
root.style.setProperty('--chat-bubble-header-temp', CHAT_BUBBLE_HEADER);
|
||||
|
||||
document.querySelector('#CHAT_BUBBLE_MESSAGE').value = config.settings.THEME.CHAT_BUBBLE_MESSAGE;
|
||||
const CHAT_BUBBLE_MESSAGE = document.querySelector('#CHAT_BUBBLE_MESSAGE').value;
|
||||
root.style.setProperty('--chat-bubble-message-temp', CHAT_BUBBLE_MESSAGE);
|
||||
|
||||
if (USE_CUSTOM_THEME) {
|
||||
root.style.setProperty('--main-color1', MAIN_COLOR_1);
|
||||
|
||||
root.style.setProperty('--main-color2', MAIN_COLOR_2);
|
||||
|
||||
root.style.setProperty('--main-color3', MAIN_COLOR_3);
|
||||
|
||||
root.style.setProperty('--main-color4', MAIN_COLOR_4);
|
||||
|
||||
root.style.setProperty('--top-bar', TOP_BAR);
|
||||
|
||||
root.style.setProperty('--mid-section', MID_SECTION);
|
||||
|
||||
root.style.setProperty('--chat-bubble', CHAT_BUBBLE_BG);
|
||||
|
||||
root.style.setProperty('--chat-bubble-header', CHAT_BUBBLE_HEADER);
|
||||
|
||||
root.style.setProperty('--chat-bubble-message', CHAT_BUBBLE_MESSAGE);
|
||||
} else {
|
||||
root.style.setProperty('--main-color1', '#6e2c8c');
|
||||
|
||||
root.style.setProperty('--main-color2', 'white');
|
||||
|
||||
root.style.setProperty('--main-color3', '#211E1E');
|
||||
|
||||
root.style.setProperty('--main-color4', '#2f2c34');
|
||||
|
||||
root.style.setProperty('--top-bar', '#100B12');
|
||||
|
||||
root.style.setProperty('--mid-section', '#352d3d');
|
||||
|
||||
root.style.setProperty('--chat-bubble', ' #7A6D7F');
|
||||
|
||||
root.style.setProperty('--chat-bubble-header', '#141414');
|
||||
|
||||
root.style.setProperty('--chat-bubble-message', 'white');
|
||||
}
|
||||
}
|
||||
|
||||
// #region Save Theme
|
||||
document.body.querySelector('#MAIN_COLOR_1').addEventListener('input', () => {
|
||||
const x = document.getElementById('MAIN_COLOR_1').value;
|
||||
root.style.setProperty('--main-color1-temp', x);
|
||||
console.log("set");
|
||||
});
|
||||
|
||||
document.body.querySelector('#MAIN_COLOR_1').addEventListener('change', () => {
|
||||
config.settings.THEME.MAIN_COLOR_1 = document.getElementById('MAIN_COLOR_1').value;
|
||||
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings));
|
||||
setTheme(config.settings.THEME.USE_CUSTOM_THEME);
|
||||
});
|
||||
|
||||
document.body.querySelector('#MAIN_COLOR_2').addEventListener('input', () => {
|
||||
const x = document.getElementById('MAIN_COLOR_2').value;
|
||||
root.style.setProperty('--main-color2-temp', x);
|
||||
});
|
||||
|
||||
document.body.querySelector('#MAIN_COLOR_2').addEventListener('change', () => {
|
||||
config.settings.THEME.MAIN_COLOR_2 = document.getElementById('MAIN_COLOR_2').value;
|
||||
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings));
|
||||
setTheme(config.settings.THEME.USE_CUSTOM_THEME);
|
||||
});
|
||||
|
||||
document.body.querySelector('#MAIN_COLOR_3').addEventListener('input', () => {
|
||||
const x = document.getElementById('MAIN_COLOR_3').value;
|
||||
root.style.setProperty('--main-color3-temp', x);
|
||||
});
|
||||
|
||||
document.body.querySelector('#MAIN_COLOR_3').addEventListener('change', () => {
|
||||
config.settings.THEME.MAIN_COLOR_3 = document.getElementById('MAIN_COLOR_3').value;
|
||||
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings));
|
||||
setTheme(config.settings.THEME.USE_CUSTOM_THEME);
|
||||
});
|
||||
|
||||
document.body.querySelector('#MAIN_COLOR_4').addEventListener('input', () => {
|
||||
const x = document.getElementById('MAIN_COLOR_4').value;
|
||||
root.style.setProperty('--main-color4-temp', x);
|
||||
});
|
||||
|
||||
document.body.querySelector('#MAIN_COLOR_4').addEventListener('change', () => {
|
||||
config.settings.THEME.MAIN_COLOR_4 = document.getElementById('MAIN_COLOR_4').value;
|
||||
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings));
|
||||
setTheme(config.settings.THEME.USE_CUSTOM_THEME);
|
||||
});
|
||||
|
||||
document.body.querySelector('#TOP_BAR').addEventListener('input', () => {
|
||||
const x = document.getElementById('TOP_BAR').value;
|
||||
root.style.setProperty('--top-bar-temp', x);
|
||||
});
|
||||
|
||||
document.body.querySelector('#TOP_BAR').addEventListener('change', () => {
|
||||
config.settings.THEME.TOP_BAR = document.getElementById('TOP_BAR').value;
|
||||
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings));
|
||||
setTheme(config.settings.THEME.USE_CUSTOM_THEME);
|
||||
});
|
||||
|
||||
document.body.querySelector('#MID_SECTION').addEventListener('input', () => {
|
||||
const x = document.getElementById('MID_SECTION').value;
|
||||
root.style.setProperty('--mid-section-temp', x);
|
||||
});
|
||||
|
||||
document.body.querySelector('#MID_SECTION').addEventListener('change', () => {
|
||||
config.settings.THEME.MID_SECTION = document.getElementById('MID_SECTION').value;
|
||||
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings));
|
||||
setTheme(config.settings.THEME.USE_CUSTOM_THEME);
|
||||
});
|
||||
|
||||
document.body.querySelector('#CHAT_BUBBLE_BG').addEventListener('input', () => {
|
||||
const x = document.getElementById('CHAT_BUBBLE_BG').value;
|
||||
root.style.setProperty('--chat-bubble-temp', x);
|
||||
});
|
||||
|
||||
document.body.querySelector('#CHAT_BUBBLE_BG').addEventListener('change', () => {
|
||||
config.settings.THEME.CHAT_BUBBLE_BG = document.getElementById('CHAT_BUBBLE_BG').value;
|
||||
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings));
|
||||
setTheme(config.settings.THEME.USE_CUSTOM_THEME);
|
||||
});
|
||||
|
||||
document.body.querySelector('#CHAT_BUBBLE_HEADER').addEventListener('input', () => {
|
||||
const x = document.getElementById('CHAT_BUBBLE_HEADER').value;
|
||||
root.style.setProperty('--chat-bubble-header-temp', x);
|
||||
});
|
||||
|
||||
document.body.querySelector('#CHAT_BUBBLE_HEADER').addEventListener('change', () => {
|
||||
config.settings.THEME.CHAT_BUBBLE_HEADER = document.getElementById('CHAT_BUBBLE_HEADER').value;
|
||||
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings));
|
||||
setTheme(config.settings.THEME.USE_CUSTOM_THEME);
|
||||
});
|
||||
|
||||
document.body.querySelector('#CHAT_BUBBLE_MESSAGE').addEventListener('input', () => {
|
||||
const x = document.getElementById('CHAT_BUBBLE_MESSAGE').value;
|
||||
root.style.setProperty('--chat-bubble-message-temp', x);
|
||||
});
|
||||
|
||||
document.body.querySelector('#CHAT_BUBBLE_MESSAGE').addEventListener('change', () => {
|
||||
config.settings.THEME.CHAT_BUBBLE_MESSAGE = document.getElementById('CHAT_BUBBLE_MESSAGE').value;
|
||||
fs.writeFileSync(path.join(__dirname, '../config/settings.ini'), config.ini.stringify(config.settings));
|
||||
setTheme(config.settings.THEME.USE_CUSTOM_THEME);
|
||||
});
|
||||
|
||||
// #endregion
|
||||
|
||||
module.exports = { setTheme };
|
||||
146
src/js/twitch.js
Normal file
146
src/js/twitch.js
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
const tmi = require('tmi.js');
|
||||
const axios = require('axios');
|
||||
|
||||
const client = new tmi.Client({
|
||||
options: {
|
||||
skipUpdatingEmotesets: true,
|
||||
},
|
||||
identity: {
|
||||
username: config.settings.TWITCH.USERNAME,
|
||||
password: config.settings.TWITCH.OAUTH_TOKEN,
|
||||
},
|
||||
channels: [config.settings.TWITCH.CHANNEL_NAME],
|
||||
});
|
||||
|
||||
function sendMessage(message) {
|
||||
client.say(config.settings.TWITCH.CHANNEL_NAME, message).catch(console.error);
|
||||
}
|
||||
|
||||
client.connect().catch(console.error);
|
||||
|
||||
function displayTwitchMessage(logoUrl, username, messageObject, fileteredMessage) {
|
||||
const article = document.createElement('article');
|
||||
article.className = 'msg-container msg-remote';
|
||||
|
||||
article.innerHTML = messageTemplates.twitchTemplate;
|
||||
|
||||
const userImg = article.querySelector('.icon-container > .user-img');
|
||||
if (userImg) {
|
||||
userImg.src = logoUrl;
|
||||
}
|
||||
|
||||
const usernameHtml = article.querySelector('.username');
|
||||
if (usernameHtml) {
|
||||
usernameHtml.innerText = username;
|
||||
}
|
||||
|
||||
const postTime = article.querySelector('.post-time');
|
||||
if (postTime) {
|
||||
postTime.innerText = getPostTime();
|
||||
}
|
||||
|
||||
const msg = article.querySelector('.msg');
|
||||
if (msg) {
|
||||
msg.innerHTML = "";
|
||||
|
||||
const messageElement = document.createElement("div");
|
||||
|
||||
messageObject.forEach((entry) => {
|
||||
const messageElement = document.createElement("div");
|
||||
if (entry.text) {
|
||||
messageElement.innerText = entry.text;
|
||||
msg.appendChild(messageElement);
|
||||
} else {
|
||||
messageElement.innerHTML = entry.html;
|
||||
msg.appendChild(messageElement);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Appends the message to the main chat box (shows the message)
|
||||
showChatMessage(article);
|
||||
|
||||
if (fileteredMessage) {
|
||||
sound.playVoice(fileteredMessage, logoUrl, username, msg);
|
||||
}
|
||||
|
||||
window.article = article;
|
||||
}
|
||||
|
||||
function getProfileImage(userid, username, message, fileteredMessage) {
|
||||
// Get Access Token
|
||||
let options = {
|
||||
method: 'POST',
|
||||
url: 'https://id.twitch.tv/oauth2/token',
|
||||
data: {
|
||||
grant_type: 'client_credentials',
|
||||
client_Id: config.settings.TWITCH.CLIENT_ID,
|
||||
client_Secret: config.settings.TWITCH.CLIENT_SECRET,
|
||||
audience: 'YOUR_API_IDENTIFIER',
|
||||
},
|
||||
};
|
||||
|
||||
axios.request(options).then((responseAccessToken) => {
|
||||
const accessToken = responseAccessToken.data.access_token;
|
||||
|
||||
// Get user Logo with access token
|
||||
options = {
|
||||
method: 'GET',
|
||||
url: `https://api.twitch.tv/helix/users?id=${userid}`,
|
||||
headers: { 'Client-ID': config.settings.TWITCH.CLIENT_ID, Authorization: `Bearer ${accessToken}` },
|
||||
};
|
||||
|
||||
axios.request(options).then((responseLogoUrl) => {
|
||||
const logoUrl = responseLogoUrl.data.data[0].profile_image_url;
|
||||
displayTwitchMessage(logoUrl, username, message, fileteredMessage);
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
}
|
||||
|
||||
function parseString(inputString) {
|
||||
const regex = /(<img.*?\/>)|([^<]+)/g;
|
||||
const matches = inputString.match(regex) || [];
|
||||
const result = [];
|
||||
|
||||
for (let i = 0; i < matches.length; i++) {
|
||||
const match = matches[i].trim();
|
||||
if (match.startsWith("<img")) {
|
||||
result.push({ html: match });
|
||||
} if (match !== '' && !match.startsWith("<img")) {
|
||||
result.push({ text: match });
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
client.on('message', (channel, tags, message, self) => {
|
||||
if (self) {
|
||||
return;
|
||||
}
|
||||
|
||||
const emotes = tags.emotes || {};
|
||||
const emoteValues = Object.entries(emotes);
|
||||
let fileteredMessage = message;
|
||||
let emoteMessage = message;
|
||||
|
||||
emoteValues.forEach((entry) => {
|
||||
entry[1].forEach((lol) => {
|
||||
const [start, end] = lol.split('-');
|
||||
let emote = `<img src="https://static-cdn.jtvnw.net/emoticons/v2/${entry[0]}/default/dark/1.0"/>`;
|
||||
emoteMessage = emoteMessage.replaceAll(message.slice(parseInt(start), parseInt(end) + 1), emote);
|
||||
fileteredMessage = fileteredMessage.replaceAll(message.slice(parseInt(start), parseInt(end) + 1), '');
|
||||
})
|
||||
});
|
||||
|
||||
let messageObject = parseString(emoteMessage)
|
||||
|
||||
sound.playAudio();
|
||||
getProfileImage(tags['user-id'], tags['display-name'], messageObject, fileteredMessage);
|
||||
});
|
||||
|
||||
|
||||
module.exports = { sendMessage };
|
||||
50
src/js/voiceQueue.js
Normal file
50
src/js/voiceQueue.js
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
let SelectedVoice = '';
|
||||
let Encoding = '';
|
||||
let counter = 0;
|
||||
// wrap in promise
|
||||
const speak = (textObject) => new Promise((resolve) => {
|
||||
// say.setEncoding(Encoding);
|
||||
counter += 1;
|
||||
console.log(textObject);
|
||||
let savePath = '';
|
||||
|
||||
if (envInfo.env) {
|
||||
savePath = path.join(envInfo.path, './sounds/tts/internal_audio_' + counter + '.mp3')
|
||||
} else {
|
||||
savePath = path.join(__dirname, '../sounds/tts/internal_audio_' + counter + '.mp3')
|
||||
}
|
||||
|
||||
say.export(textObject.filtered, SelectedVoice, 1, savePath, (err) => {
|
||||
if (err) {
|
||||
console.error(err);
|
||||
} else {
|
||||
sound.playAudio({ "path": savePath, "message": textObject });
|
||||
}
|
||||
resolve('finished');
|
||||
});
|
||||
});
|
||||
|
||||
// queue system
|
||||
class SayQueue {
|
||||
constructor() {
|
||||
this.messages = [];
|
||||
this.status = 0;
|
||||
}
|
||||
|
||||
async shift() {
|
||||
this.status = 1;
|
||||
while (this.messages.length > 0) {
|
||||
await speak(this.messages.shift(), SelectedVoice, 1);
|
||||
}
|
||||
this.status = 0;
|
||||
}
|
||||
|
||||
add(message, selectedVoice) {
|
||||
this.messages.push(message);
|
||||
SelectedVoice = selectedVoice;
|
||||
if (this.status === 0) { this.shift(); }
|
||||
}
|
||||
}
|
||||
|
||||
const sayQueue = new SayQueue();
|
||||
module.exports = sayQueue;
|
||||
164
src/main.js
Normal file
164
src/main.js
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
const { app, BrowserWindow, ipcMain } = require('electron');
|
||||
const { writeIniFile } = require('write-ini-file')
|
||||
const path = require('path');
|
||||
|
||||
const ini = require('ini');
|
||||
const fs = require('fs');
|
||||
|
||||
let resourcesPath;
|
||||
let settings;
|
||||
let window;
|
||||
|
||||
if (app.isPackaged) {
|
||||
resourcesPath = path.join(process.resourcesPath, './settings.ini');
|
||||
} else {
|
||||
resourcesPath = path.join(__dirname, './config/settings.ini');
|
||||
}
|
||||
|
||||
// Handle creating/removing shortcuts on Windows when installing/uninstalling.
|
||||
if (require('electron-squirrel-startup')) {
|
||||
app.quit();
|
||||
}
|
||||
|
||||
async function createWindow() {
|
||||
if (!fs.existsSync(resourcesPath)) {
|
||||
await createIniFile(resourcesPath);
|
||||
} else {
|
||||
settings = ini.parse(fs.readFileSync(resourcesPath, 'utf-8'));
|
||||
}
|
||||
|
||||
window = new BrowserWindow({
|
||||
icon: path.join(__dirname, '/images/icon.png'),
|
||||
width: parseInt(settings.SETTINGS.WIDTH),
|
||||
height: parseInt(settings.SETTINGS.HEIGHT),
|
||||
minHeight: 800,
|
||||
minWidth: 600,
|
||||
x: parseInt(settings.SETTINGS.POSITION_X),
|
||||
y: parseInt(settings.SETTINGS.POSITION_Y),
|
||||
frame: false,
|
||||
webPreferences: {
|
||||
nodeIntegration: true,
|
||||
contextIsolation: false,
|
||||
enableRemoteModule: true,
|
||||
},
|
||||
});
|
||||
window.loadURL('https://github.com')
|
||||
|
||||
|
||||
window.loadFile(path.join(__dirname, 'index.html'));
|
||||
|
||||
window.webContents.openDevTools();
|
||||
|
||||
window.on('close', e => {
|
||||
const bounds = window.getBounds();
|
||||
|
||||
settings.SETTINGS.WIDTH = bounds.width;
|
||||
settings.SETTINGS.HEIGHT = bounds.height;
|
||||
settings.SETTINGS.POSITION_X = bounds.x;
|
||||
settings.SETTINGS.POSITION_Y = bounds.y;
|
||||
|
||||
fs.writeFileSync(resourcesPath, ini.stringify(settings));
|
||||
})
|
||||
|
||||
};
|
||||
|
||||
app.whenReady().then(() => {
|
||||
createWindow();
|
||||
})
|
||||
|
||||
app.on('window-all-closed', (event) => {
|
||||
if (process.platform !== 'darwin') {
|
||||
app.quit();
|
||||
}
|
||||
});
|
||||
|
||||
app.on('activate', () => {
|
||||
// On OS X it's common to re-create a window in the app when the
|
||||
// dock icon is clicked and there are no other windows open.
|
||||
if (BrowserWindow.getAllWindows().length === 0) {
|
||||
createWindow();
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.on('resize-window', (event, width, height) => {
|
||||
const browserWindow = BrowserWindow.fromWebContents(event.sender);
|
||||
browserWindow.setSize(width, height);
|
||||
});
|
||||
|
||||
ipcMain.on('minimize-window', (event) => {
|
||||
const browserWindow = BrowserWindow.fromWebContents(event.sender);
|
||||
browserWindow.minimize();
|
||||
});
|
||||
|
||||
ipcMain.on('maximize-window', (event) => {
|
||||
const browserWindow = BrowserWindow.fromWebContents(event.sender);
|
||||
|
||||
if (!browserWindow.isMaximized()) {
|
||||
browserWindow.maximize();
|
||||
} else {
|
||||
browserWindow.unmaximize();
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.on('close-window', (event) => {
|
||||
const browserWindow = BrowserWindow.fromWebContents(event.sender);
|
||||
browserWindow.close();
|
||||
app.quit();
|
||||
});
|
||||
|
||||
ipcMain.on('environment', (event) => {
|
||||
event.returnValue = { "env": app.isPackaged, "path": process.resourcesPath };
|
||||
});
|
||||
|
||||
async function createIniFile() {
|
||||
await writeIniFile(resourcesPath, {
|
||||
SETTINGS: {
|
||||
VOICE_ENABLED: true,
|
||||
NOTIFICATION_ENABLED: true,
|
||||
POSITION_X: 0,
|
||||
POSITION_Y: 0,
|
||||
WIDTH: 600,
|
||||
HEIGHT: 800
|
||||
},
|
||||
TTS: {
|
||||
SELECTED_TTS: "InternalTTS",
|
||||
INTERNAL_TTS_VOICE: 0,
|
||||
GOOGLE_VOICE: 0,
|
||||
AMAZON_VOICE: 0
|
||||
},
|
||||
AUDIO: {
|
||||
NOTIFICATION_AUDIO_DEVICE: 0,
|
||||
NOTIFICATION_SOUND: 0,
|
||||
NOTIFICATION_VOLUME: 100,
|
||||
SELECTED_TTS_AUDIO_DEVICE: 0,
|
||||
TTS_AUDIO_DEVICE: "",
|
||||
TTS_VOLUME: 100
|
||||
},
|
||||
THEME: {
|
||||
USE_CUSTOM_THEME: false,
|
||||
MAIN_COLOR_1: "\#cdc1c1",
|
||||
MAIN_COLOR_2: "\#b12020",
|
||||
MAIN_COLOR_3: "\#6c4104",
|
||||
MAIN_COLOR_4: "\#532d2d",
|
||||
TOP_BAR: "\#c8ff00",
|
||||
MID_SECTION: "\#6b8578",
|
||||
CHAT_BUBBLE_BG: "\#447466",
|
||||
CHAT_BUBBLE_HEADER: "\#ffffff",
|
||||
CHAT_BUBBLE_MESSAGE: "\#b5b5b5",
|
||||
},
|
||||
TWITCH: {
|
||||
USE_TWITCH: true,
|
||||
CHANNEL_NAME: "khyretos",
|
||||
USERNAME: "loquendo",
|
||||
OAUTH_TOKEN: "",
|
||||
CLIENT_ID: "",
|
||||
CLIENT_SECRET: "",
|
||||
},
|
||||
AMAZON: {
|
||||
ACCESS_KEY: "",
|
||||
ACCESS_SECRET: "",
|
||||
}
|
||||
}).then(() => {
|
||||
settings = ini.parse(fs.readFileSync(resourcesPath, 'utf-8'));
|
||||
})
|
||||
}
|
||||
BIN
src/modules/chat/chatbox.png
Normal file
BIN
src/modules/chat/chatbox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
src/modules/chat/fonts/FRAMCDN/FRAMDCN-bg.png
Normal file
BIN
src/modules/chat/fonts/FRAMCDN/FRAMDCN-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/modules/chat/fonts/FRAMCDN/FRAMDCN-thumb.png
Normal file
BIN
src/modules/chat/fonts/FRAMCDN/FRAMDCN-thumb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
src/modules/chat/fonts/FRAMCDN/FRAMDCN.png
Normal file
BIN
src/modules/chat/fonts/FRAMCDN/FRAMDCN.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/modules/chat/fonts/FRAMCDN/FRAMDCN.woff
Normal file
BIN
src/modules/chat/fonts/FRAMCDN/FRAMDCN.woff
Normal file
Binary file not shown.
10
src/modules/chat/fonts/FRAMCDN/font.css
Normal file
10
src/modules/chat/fonts/FRAMCDN/font.css
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
@font-face {
|
||||
font-family: 'FRAMDCN';
|
||||
src: local('FRAMDCN'), url('./FRAMDCN.woff') format('woff');
|
||||
}
|
||||
/* use this class to attach this font to any element i.e. <p class="fontsforweb_fontid_1381">Text with this font applied</p> */
|
||||
.fontsforweb_fontid_1381 {
|
||||
font-family: 'FRAMDCN' !important;
|
||||
}
|
||||
|
||||
/* Font downloaded from FontsForWeb.com */
|
||||
21
src/modules/chat/fonts/FRAMCDN/index.html
Normal file
21
src/modules/chat/fonts/FRAMCDN/index.html
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title> web font from FontsForWeb.com</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="font.css">
|
||||
<style type="text/css">
|
||||
/* when @font-face is defined(it is in font.css) you can add the font to any rule by using font-family */
|
||||
h1 {
|
||||
font-family: 'FRAMDCN';
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Thank you for using FontsForWeb.com</h1>
|
||||
<p class="fontsforweb_fontid_1381">Look in the source of this file to see how to embed this font on your website</p>
|
||||
</body>
|
||||
</html>
|
||||
2
src/modules/chat/fonts/FRAMCDN/readme.txt
Normal file
2
src/modules/chat/fonts/FRAMCDN/readme.txt
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
Original download page
|
||||
http://ttfonts.net/font/606_FranklinGothicMediumCond.htm
|
||||
22
src/modules/chat/index.html
Normal file
22
src/modules/chat/index.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Chat</title>
|
||||
<script
|
||||
src="https://cdn.socket.io/4.6.0/socket.io.min.js"
|
||||
integrity="sha384-c79GN5VsunZvi+Q/WObgk2in0CbZsHnjEqvFxC5DxHn9lTfNce2WW6h2pH6u/kF+"
|
||||
crossorigin="anonymous">
|
||||
</script>
|
||||
<link rel="stylesheet" href="./fonts/FRAMCDN/font.css"/>
|
||||
<link href="main.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- #region Main chat box-->
|
||||
<div class="OptionPanel show" id="Chat">
|
||||
<div id="chatBox" class="message-window">
|
||||
<div class="texts"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
173
src/modules/chat/main.css
Normal file
173
src/modules/chat/main.css
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
body {
|
||||
background-color: transparent;
|
||||
font-family: 'FRAMDCN';
|
||||
}
|
||||
|
||||
:root {
|
||||
--variable: 2s;
|
||||
--buttonBackground: #bf2c2c;
|
||||
}
|
||||
|
||||
.thomas {
|
||||
position: relative;
|
||||
float: center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
.speechbubble {
|
||||
display: block;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.fade-outx {
|
||||
animation: fade-outx var(--variable) linear;
|
||||
}
|
||||
|
||||
@keyframes fade-outx {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-outxx {
|
||||
animation: fade-outxx var(--variable) linear;
|
||||
}
|
||||
|
||||
@keyframes fade-outxx {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bounce-in {
|
||||
animation: bounce-in 1s ease;
|
||||
}
|
||||
|
||||
@keyframes bounce-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(.3);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.bounce-inx {
|
||||
animation: bounce-inx 1s ease;
|
||||
}
|
||||
|
||||
@keyframes bounce-inx {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.msg-container {
|
||||
margin-bottom: 10px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.message-window {
|
||||
height: calc(100% - 50px);
|
||||
overflow: hidden;
|
||||
overflow-y: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.message-window::before {
|
||||
content: '';
|
||||
flex: 1 0 0px;
|
||||
}
|
||||
|
||||
.OptionPanel {
|
||||
/* visibility: hidden; */
|
||||
flex: 3;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100% - 25px);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.OptionPanel.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.message {
|
||||
text-align: left;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
min-width: 125px;
|
||||
hyphens: auto;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
float: right;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
|
||||
.message {
|
||||
position: relative;
|
||||
border: 2px solid #ff80e1;
|
||||
box-shadow: 0 2px 10px rgba(255, 128, 225, 0.5);
|
||||
background: linear-gradient(45deg, rgb(15, 12, 41,0.7), rgb(48, 43, 99,0.7));
|
||||
/* background: linear-gradient(45deg, rgba(72, 0, 154, 0.7), rgba(138, 43, 226, 0.7)); */
|
||||
|
||||
color: white;
|
||||
padding: 15px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.message::after {
|
||||
|
||||
}
|
||||
|
||||
.arrow{
|
||||
content: "";
|
||||
border: 2px solid #ff80e1;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 100%;
|
||||
transform: translateX(-50%) rotate(180deg);
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent rgb(255, 128, 225,0.7) transparent;
|
||||
color: #ff80e1
|
||||
}
|
||||
|
||||
.sender{
|
||||
color: #ff80e1;
|
||||
font-size: 14pt;
|
||||
}
|
||||
125
src/modules/chat/main.js
Normal file
125
src/modules/chat/main.js
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
// Connect to the Socket.IO server
|
||||
const socket = io();
|
||||
|
||||
// Emit a message to the server
|
||||
socket.emit('message', 'Hello, Server!');
|
||||
|
||||
function getPostTime() {
|
||||
const d = new Date();
|
||||
document.body.querySelectorAll('.container').innerHTML = d.getHours();
|
||||
const hours = d.getHours();
|
||||
const minutes = (d.getMinutes() < 10 ? '0' : '') + d.getMinutes();
|
||||
const time = `${hours}:${minutes}`;
|
||||
return time;
|
||||
}
|
||||
|
||||
function showChatMessage(article) {
|
||||
const main = document.querySelector('#chatBox');
|
||||
main.appendChild(article);
|
||||
main.scrollTop = main.scrollHeight;
|
||||
}
|
||||
|
||||
let textStreamContainer;
|
||||
let x;
|
||||
// const totalDuration = 5000; // Total duration in milliseconds
|
||||
// const charactersPerSecond = 20; // Adjust the number of characters to display per second
|
||||
|
||||
// const streamingSpeed = totalDuration / (textToStream.length / charactersPerSecond);
|
||||
|
||||
let currentIndex = 0;
|
||||
let messageStream = '';
|
||||
let tempMessageObject = '';
|
||||
let fullMessageLength = 0;
|
||||
|
||||
function getFullMessageLength(text) {
|
||||
let fullMessageLength = 0;
|
||||
text.forEach(element => {
|
||||
if (element.text) {
|
||||
fullMessageLength += element.text.length;
|
||||
}
|
||||
element.html
|
||||
fullMessageLength += 1;
|
||||
});
|
||||
|
||||
return fullMessageLength;
|
||||
}
|
||||
|
||||
function streamText() {
|
||||
// if (currentIndex < fullMessageLength) {
|
||||
|
||||
// textStreamContainer.innerHTML += messageStream.filtered.charAt(currentIndex);
|
||||
// currentIndex++;
|
||||
// setTimeout(streamText, 50);
|
||||
// }
|
||||
if (currentIndex < messageStream.length) {
|
||||
|
||||
textStreamContainer.innerHTML += messageStream.charAt(currentIndex);
|
||||
currentIndex++;
|
||||
setTimeout(streamText, 50);
|
||||
} else {
|
||||
currentIndex = 0;
|
||||
x.classList.add('fade-outx');
|
||||
}
|
||||
}
|
||||
|
||||
function displayTwitchMessage(logoUrl, username, messageObject) {
|
||||
console.log(messageObject);
|
||||
if (!messageObject) {
|
||||
return;
|
||||
}
|
||||
|
||||
const root = document.querySelector(':root');
|
||||
root.style.setProperty('--variable', '5s');
|
||||
|
||||
const article = document.createElement('article');
|
||||
x = article;
|
||||
|
||||
article.className = 'msg-container';
|
||||
|
||||
const placeMessage = `
|
||||
<div class="thomas bounce-in">
|
||||
<div class="message"></div>
|
||||
<div class="sender"></div>
|
||||
<div class="speechbubble"></div>
|
||||
<div class="arrow"></div>
|
||||
</div>
|
||||
`.trim();
|
||||
|
||||
article.innerHTML = placeMessage;
|
||||
const msg = article.querySelector('.message');
|
||||
|
||||
msg.innerHTML = `<div class="sender">${username}</div>`//\n${message}`;
|
||||
|
||||
msg.style.fontSize = '12pt';
|
||||
|
||||
showChatMessage(article);
|
||||
|
||||
const elements = document.getElementsByClassName('msg-container');
|
||||
if (elements.length > 1) {
|
||||
elements[0].remove();
|
||||
}
|
||||
|
||||
article.addEventListener('animationend', (e) => {
|
||||
if (e.animationName == 'fade-outx') {
|
||||
article.remove();
|
||||
}
|
||||
});
|
||||
|
||||
if (elements.length > 1) {
|
||||
elements[0].classList.add('fade-outxx');
|
||||
elements[0].addEventListener('animationend', (e) => {
|
||||
if (e.animationName == 'fade-outxx') {
|
||||
elements[0].remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
// fullMessageLength = getFullMessageLength(messageObject);
|
||||
messageStream = messageObject.filtered;
|
||||
textStreamContainer = document.querySelector('.message');
|
||||
streamText();
|
||||
}
|
||||
|
||||
// // Receive a message from the server
|
||||
socket.on('message', (logoUrl, username, message, messageDuration) => {
|
||||
displayTwitchMessage(logoUrl, username, message);
|
||||
});
|
||||
109
src/modules/vtuber/css/about.css
Normal file
109
src/modules/vtuber/css/about.css
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
* {
|
||||
image-rendering: optimize-quality;
|
||||
}
|
||||
|
||||
html {
|
||||
font: system;
|
||||
width: max-content;
|
||||
height: min-content;
|
||||
overflow: none;
|
||||
background-color: threedface;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#content {
|
||||
background-color: threedhighlight;
|
||||
padding-left: 40dip;
|
||||
padding-right: 10dip;
|
||||
vertical-align: top;
|
||||
foreground-repeat: no-repeat;
|
||||
foreground-position: 16dip 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 10dip 50%;
|
||||
background-size: 64dip 64dip;
|
||||
min-width: 160dip;
|
||||
min-height: 88dip;
|
||||
/* width: *;
|
||||
height: *; */
|
||||
white-space: pre;
|
||||
text-align: center;
|
||||
font-size: 1.3em;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold !important;
|
||||
flow: column !important;
|
||||
text-align: left !important;
|
||||
margin: auto !important;
|
||||
width: min-content !important;
|
||||
transform: translate(1.5em, 1.5em);
|
||||
}
|
||||
|
||||
.title div:last-child {
|
||||
font-weight: 100 !important;
|
||||
text-align: center !important;
|
||||
font-size: 0.5em !important;
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
|
||||
v {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
#content {
|
||||
background-image: url('this://app/png/64.png');
|
||||
background-position: 12% 0.5em;
|
||||
}
|
||||
|
||||
div#info {
|
||||
background-color: threedhighlight;
|
||||
border-bottom: 1px solid threedshadow;
|
||||
padding: 0 10dip 10dip 10dip;
|
||||
/* size: *; */
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: red;
|
||||
}
|
||||
|
||||
img {
|
||||
transform: translate(0, 25%);
|
||||
}
|
||||
|
||||
#button-bar {
|
||||
flow: horizontal;
|
||||
padding: 10dip;
|
||||
border-spacing: 10dip;
|
||||
margin: 0;
|
||||
flow: horizontal;
|
||||
horizontal-align: right;
|
||||
}
|
||||
|
||||
label {
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
#button-bar button {
|
||||
display: block;
|
||||
text-shadow: #fff 0px 1px;
|
||||
min-width: 4em;
|
||||
line-height: 2em;
|
||||
vertical-align: middle;
|
||||
width: min-intrinsic;
|
||||
text-align: center;
|
||||
}
|
||||
386
src/modules/vtuber/css/main.css
Normal file
386
src/modules/vtuber/css/main.css
Normal file
|
|
@ -0,0 +1,386 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
image-rendering: optimize-quality;
|
||||
}
|
||||
|
||||
:disabled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 16dip;
|
||||
position: relative;
|
||||
background-image: url('../png/grid.png');
|
||||
background-size: 70px;
|
||||
background-repeat: repeat;
|
||||
}
|
||||
|
||||
#controls {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
/* flow: horizontal; */
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#controls-left {
|
||||
order: 2px solid cyan;
|
||||
width: 7%;
|
||||
height: 10%;
|
||||
/* flow: vertical; */
|
||||
border-spacing: 1%;
|
||||
}
|
||||
|
||||
#controls-top {
|
||||
height: 10%;
|
||||
width: 100%;
|
||||
/* flow: horizontal; */
|
||||
border-spacing: 1%;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#meters {
|
||||
display: flex;
|
||||
height: 50vh;
|
||||
/* flow: horizontal; */
|
||||
/* border-spacing: *; */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#meter-microphone {
|
||||
margin-left: 10%;
|
||||
margin-right: 10%;
|
||||
}
|
||||
|
||||
#meter-delay {
|
||||
margin-right: 20%;
|
||||
}
|
||||
|
||||
#meter-microphone,
|
||||
#meter-delay {
|
||||
height: 45vh;
|
||||
width: 25%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
input[type='vslider'] > button.slider {
|
||||
background-size: 100% auto;
|
||||
border-radius: 0;
|
||||
width: 275%;
|
||||
height: 5%;
|
||||
background-position: 0 50%;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#meter-microphone > button.slider {
|
||||
background-image: url('../png/controls/meters/left.png');
|
||||
}
|
||||
|
||||
#meter-delay > button.slider {
|
||||
background-image: url('../png/controls/meters/right.png');
|
||||
}
|
||||
|
||||
#meter-microphone {
|
||||
color: #2ebe38;
|
||||
}
|
||||
|
||||
#meter-delay {
|
||||
color: #453be2;
|
||||
}
|
||||
|
||||
#slider-left {
|
||||
left: -25%;
|
||||
}
|
||||
|
||||
#slider-right {
|
||||
right: -25%;
|
||||
}
|
||||
|
||||
#buttons-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#buttons-top {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#buttons-left button {
|
||||
width: 50;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#buttons-top button {
|
||||
background-size: auto 100%;
|
||||
background-position: 50% 50%;
|
||||
border-width: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#buttons-left button:active,
|
||||
#about:active,
|
||||
#close:active {
|
||||
filter: brightness(-10%);
|
||||
}
|
||||
|
||||
popup[role='tooltip'] {
|
||||
color: white;
|
||||
background: rgba(0, 0, 0, 0.666);
|
||||
border-width: 0;
|
||||
padding: 0.333em;
|
||||
font-size: 1.25em;
|
||||
font-family: Calibri;
|
||||
}
|
||||
|
||||
#microphone-device {
|
||||
background-image: url('../png/controls/buttons/left/mic.png');
|
||||
}
|
||||
|
||||
#background-color {
|
||||
background-image: url('../png/controls/buttons/left/bg.png');
|
||||
}
|
||||
|
||||
#open-file {
|
||||
background-image: url('../png/controls/buttons/left/open.png');
|
||||
}
|
||||
|
||||
#save-file {
|
||||
background-image: url('../png/controls/buttons/left/save.png');
|
||||
}
|
||||
|
||||
/* TOP ROW BUTTONS */
|
||||
|
||||
button.mouth-image.border-default {
|
||||
background-image: url('../png/controls/buttons/top/avatar-change/border/default.png');
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
button.mouth-image.border-add {
|
||||
background-image: url('../png/controls/buttons/top/avatar-change/border/add.png');
|
||||
}
|
||||
|
||||
button.mouth-image:active {
|
||||
filter: brightness(-10%);
|
||||
}
|
||||
|
||||
button.mouth-image::before {
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
right: 10%;
|
||||
width: 50px;
|
||||
height: 66%;
|
||||
background-size: 100% 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
button.mouth-image::after {
|
||||
position: absolute;
|
||||
top: 69%;
|
||||
left: 37%;
|
||||
width: 50px;
|
||||
height: 35%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
#closed-mouth-image.border-default::before {
|
||||
background-image: url('../png/avatars/crab/closed.png');
|
||||
}
|
||||
|
||||
#closed-mouth-image::after {
|
||||
background-image: url('../png/controls/buttons/top/avatar-change/closed.png');
|
||||
}
|
||||
|
||||
#open-mouth-image.border-default::before {
|
||||
background-image: url('../png/avatars/crab/open.png');
|
||||
}
|
||||
|
||||
#open-mouth-image::after {
|
||||
background-image: url('../png/controls/buttons/top/avatar-change/open.png');
|
||||
}
|
||||
|
||||
#closed-mouth-blinking-image.border-default::before {
|
||||
background-image: url('../png/avatars/crab/closed-blink.png');
|
||||
}
|
||||
|
||||
#closed-mouth-blinking-image::after {
|
||||
background-image: url('../png/controls/buttons/top/avatar-change/closed-blink.png');
|
||||
}
|
||||
|
||||
#open-mouth-blinking-image.border-default::before {
|
||||
background-image: url('../png/avatars/crab/open-blink.png');
|
||||
}
|
||||
|
||||
#open-mouth-blinking-image::after {
|
||||
background-image: url('../png/controls/buttons/top/avatar-change/open-blink.png');
|
||||
}
|
||||
|
||||
button.motion {
|
||||
/* background-image: url('../png/controls/buttons/top/motion/template.png'); */
|
||||
position: relative;
|
||||
/* var(x): 0dip;
|
||||
var(y): height(33%); */
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
|
||||
.closed-mouth-motion {
|
||||
background-image: url('../png/controls/buttons/top/motion/closed.png');
|
||||
box-sizing: border-box;
|
||||
image-rendering: optimize-quality;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background-color: #9bccd4;
|
||||
}
|
||||
|
||||
.test {
|
||||
width:50px;
|
||||
height: 50px;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-change {
|
||||
background-image: url('../png/controls/buttons/top/avatar-change/border/default.png');
|
||||
background-size: cover;
|
||||
width:50px;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
.border {
|
||||
background-image: url('../png/controls/buttons/top/motion/border.png');
|
||||
background-size: cover;
|
||||
width:50px;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
top: -50px;
|
||||
}
|
||||
|
||||
.open-mouth-motion {
|
||||
background-image: url('../png/controls/buttons/top/motion/open.png');
|
||||
box-sizing: border-box;
|
||||
image-rendering: optimize-quality;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.mouth-transition {
|
||||
background-image: url('../png/controls/buttons/top/avatar-change/border/default.png');
|
||||
box-sizing: border-box;
|
||||
image-rendering: optimize-quality;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background-position: 50% 50%;
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.mouth-transitionx {
|
||||
background-image: url('../png/controls/buttons/top/avatar-change/border/default.png');
|
||||
box-sizing: border-box;
|
||||
image-rendering: optimize-quality;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background-position: 50% 50%;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
|
||||
#mouth-transition::before {
|
||||
background-color: red;
|
||||
background-image: url('../png/controls/buttons/top/avatar-change/border/default.png');
|
||||
}
|
||||
|
||||
button.motion::before {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 90%;
|
||||
background-size: 105% 105%;
|
||||
transform: translate(-11%, -11%);
|
||||
/* background-position: -50% -50%; */
|
||||
overflow: hidden;
|
||||
z-index: -1;
|
||||
/* hit-margin: -999px; */
|
||||
}
|
||||
|
||||
#closed-mouth-motion::before {
|
||||
background-color: #2ebe38;
|
||||
}
|
||||
|
||||
#open-mouth-motion::before {
|
||||
background-image: url('../png/controls/buttons/top/motion/open.png');
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
pointer-events: none;
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
button.motion::after {
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
background-color: red;
|
||||
overflow: hidden;
|
||||
z-index: -2;
|
||||
transform: translate(11%, 11%);
|
||||
/* hit-margin: -999px; */
|
||||
}
|
||||
|
||||
#set-hotkey {
|
||||
background-image: url('../png/controls/buttons/top/hotkey/set/default.png');
|
||||
}
|
||||
|
||||
#hotkey-mode {
|
||||
background-image: url('../png/controls/buttons/top/hotkey/mode/0.png');
|
||||
}
|
||||
|
||||
#delete-state {
|
||||
background-image: url('../png/controls/buttons/right/delete.png');
|
||||
}
|
||||
|
||||
#about {
|
||||
background-image: url('../png/controls/buttons/top/info.png');
|
||||
}
|
||||
|
||||
#close {
|
||||
background-image: url('../png/controls/buttons/top/close.png');
|
||||
}
|
||||
|
||||
#avatar {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 40%;
|
||||
height: width(100%);
|
||||
}
|
||||
|
||||
menu.popup {
|
||||
/* box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.692); */
|
||||
}
|
||||
41
src/modules/vtuber/html/about.html
Normal file
41
src/modules/vtuber/html/about.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html window-resizable="false" window-icon="this://app/png/32.png">
|
||||
|
||||
<head>
|
||||
<title>About</title>
|
||||
<link href="../css/about.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section #content>
|
||||
<div .title>
|
||||
<div>TransTube</div>
|
||||
<div>v0.2.0</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<div #info>
|
||||
<div .row>
|
||||
© <a #terra-informatica>Terra Informatica Software</a>, Inc.
|
||||
</div>
|
||||
<br>
|
||||
<div .row>
|
||||
based on <a #veadotube-mini>veadotube-mini</a>
|
||||
</div>
|
||||
<br>
|
||||
<div .row>
|
||||
— <a #girkov-arpa>Girkov Arpa</a> 2022
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer #button-bar>
|
||||
<!--<div style="height: *; vertical-align: middle; line-height: 0;">
|
||||
Use the tray icon to close.
|
||||
</div>-->
|
||||
<button>Ok</button>
|
||||
</footer>
|
||||
<script src="../js/about.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
76
src/modules/vtuber/index.html
Normal file
76
src/modules/vtuber/index.html
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html window-frame="transparent">
|
||||
<head>
|
||||
<title>TransTube</title>
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.7.0.min.js"
|
||||
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<link href="./css/main.css" rel="stylesheet" />
|
||||
<script src="./js/main.js" type="module"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img id="avatar" src="./png/avatars/crab/closed.png" width="900" height="900" />
|
||||
<div id="controls">
|
||||
<div id="controls-left">
|
||||
<div id="meters">
|
||||
<input id="meter-microphone" value="50" min="0" max="100" title="microphone volume sensitivity" />
|
||||
<input id="meter-delay" value="95" min="0" max="100" title="microphone delay sensitivity" />
|
||||
</div>
|
||||
<div id="buttons-left">
|
||||
<button id="microphone-device" title="microphone device"></button>
|
||||
<button id="background-color" title="background color"></button>
|
||||
<button id="open-file" title="open file"></button>
|
||||
<button id="save-file" title="save file"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="controls-top">
|
||||
<div id="buttons-top">
|
||||
<div>
|
||||
<button class="mouth-image.border-default" id="closed-mouth-image" title="closed mouth image">
|
||||
<div class="avatar-change"></div>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="mouth-image.border-default" id="open-mouth-image" title="open mouth image">
|
||||
<div class="avatar-change"></div>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="mouth-image.border-default" id="closed-mouth-blinking-image" title="closed mouth blinking image">
|
||||
<div class="avatar-change"></div>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="mouth-image.border-default" id="open-mouth-blinking-image" title="open mouth blinking image">
|
||||
<div class="avatar-change"></div>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="motion closed-mouth-motion" id="closed-mouth-motion" title="closed mouth motion" counter="1"></button>
|
||||
<div class="border"></div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="motion open-mouth-motion" id="open-mouth-motion" title="open mouth motion" counter="4"></button>
|
||||
<div class="border"></div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="motion mouth-transition" id="mouth-transition" title="mouth transition"></button>
|
||||
<div class="border"></div>
|
||||
</div>
|
||||
|
||||
<button id="set-hotkey" title="set hotkey"></button>
|
||||
<button id="hotkey-mode" title="hotkey mode"></button>
|
||||
<button id="delete-state" title="delete state"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<menu class="popup">
|
||||
<li id="change-image">change image</li>
|
||||
<li id="remove-image">remove image</li>
|
||||
</menu>
|
||||
</body>
|
||||
</html>
|
||||
322
src/modules/vtuber/js/main.js
Normal file
322
src/modules/vtuber/js/main.js
Normal file
|
|
@ -0,0 +1,322 @@
|
|||
/* global $ */
|
||||
|
||||
import MOTION from './motion.js';
|
||||
import movableView from './movable_view.js';
|
||||
|
||||
globalThis.CHOSEN_CLOSED_MOUTH_ANIMATION = 'vibing';
|
||||
globalThis.CHOSEN_OPEN_MOUTH_ANIMATION = 'bouncy';
|
||||
|
||||
globalThis.MOUTH_IS_OPEN = false;
|
||||
globalThis.BLINKING = false;
|
||||
|
||||
function avatarBlink() {
|
||||
const state = globalThis.BLINKING ? './png/avatars/crab/closed-blink.png' : './png/avatars/crab/closed.png';
|
||||
return state;
|
||||
}
|
||||
|
||||
function avatarTalk() {
|
||||
let state = globalThis.MOUTH_IS_OPEN ? './png/avatars/crab/open.png' : './png/avatars/crab/closed.png';
|
||||
if (globalThis.BLINK) {
|
||||
state = './png/avatars/crab/open-blink.png';
|
||||
}
|
||||
|
||||
return state;
|
||||
}
|
||||
|
||||
function adjustWindow() {
|
||||
// const [width, height] = Window.this.screenBox('frame', 'dimension');
|
||||
// const w = width * 0.666;
|
||||
// const h = height * 0.666;
|
||||
// Window.this.move(width / 2 - w / 2, height / 2 - h / 2, w, h, true);
|
||||
}
|
||||
|
||||
adjustWindow();
|
||||
|
||||
async function monitorDelay() {
|
||||
setInterval(() => { });
|
||||
}
|
||||
|
||||
monitorDelay();
|
||||
|
||||
function animate() {
|
||||
let avatarCurr = $('#avatar').src;
|
||||
|
||||
const animation = globalThis.MOUTH_IS_OPEN
|
||||
? globalThis.CHOSEN_OPEN_MOUTH_ANIMATION
|
||||
: globalThis.CHOSEN_CLOSED_MOUTH_ANIMATION;
|
||||
|
||||
globalThis.ANIMATION = animation;
|
||||
|
||||
clearInterval(globalThis.ANIMATION_INTERVAL);
|
||||
|
||||
globalThis.ANIMATION_INTERVAL = setInterval(() => {
|
||||
// console.log(globalThis.ANIMATION_INTERVAL);
|
||||
const t = Date.now() / 1000;
|
||||
const { x, y } = MOTION[animation](t);
|
||||
const left = -50 - x * 5;
|
||||
const top = -50 - y * 5;
|
||||
document.body.querySelector('#avatar').style.transform = `translate(${left}%, ${top}%)`;
|
||||
|
||||
avatarCurr = $('#avatar').src;
|
||||
|
||||
if (globalThis.MOUTH_IS_OPEN === false) {
|
||||
// const avatarNew = avatarCurr.replace('open', 'closed');
|
||||
|
||||
const avatarNew = avatarTalk();
|
||||
|
||||
if (avatarNew !== avatarCurr) {
|
||||
$('#avatar').src = avatarNew;
|
||||
avatarCurr = avatarNew;
|
||||
}
|
||||
} else {
|
||||
// const avatarNew = avatarCurr.replace('closed', 'open');
|
||||
|
||||
const avatarNew = avatarBlink();
|
||||
|
||||
if (avatarNew !== avatarCurr) {
|
||||
$('#avatar').src = avatarNew;
|
||||
avatarCurr = avatarNew;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
animate();
|
||||
|
||||
function updateMeter() {
|
||||
setInterval(() => {
|
||||
// let volume = 50//Window.this.xcall('get_volume');
|
||||
const volume = 100;
|
||||
document.body.querySelector('#meter-microphone').value = volume;
|
||||
|
||||
const delayVolume = document.body.querySelector('#meter-delay').value;
|
||||
const delaySlider = document.body.querySelector('#meter-delay').value;
|
||||
|
||||
const microphoneVolume = document.body.querySelector('#meter-microphone').value;
|
||||
const microphoneSlider = document.body.querySelector('#meter-microphone').value;
|
||||
|
||||
if (microphoneVolume > microphoneSlider) {
|
||||
document.body.querySelector('#meter-delay').value = 100;
|
||||
} else {
|
||||
document.body.querySelector('#meter-delay').value = Math.max(0, delayVolume - 1);
|
||||
}
|
||||
|
||||
if (delayVolume > delaySlider) {
|
||||
if (globalThis.MOUTH_IS_OPEN === false) {
|
||||
globalThis.MOUTH_IS_OPEN = true;
|
||||
// console.log('monitor delay => delayVolume > delaySlider');
|
||||
$('#avatar').src = avatarTalk();
|
||||
|
||||
animate();
|
||||
}
|
||||
} else if (globalThis.MOUTH_IS_OPEN === true) {
|
||||
globalThis.MOUTH_IS_OPEN = false;
|
||||
// console.log('monitor delay => else');
|
||||
$('#avatar').src = avatarTalk();
|
||||
animate();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateMeter();
|
||||
|
||||
function animateButton(button, animation = 'motionless') {
|
||||
clearInterval(button.BUTTON_INTERVAL);
|
||||
const animatedButton = document.body.querySelector(button);
|
||||
animatedButton.BUTTON_INTERVAL = setInterval(() => {
|
||||
const t = Date.now() / 1000;
|
||||
const { x, y } = MOTION[animation](t);
|
||||
const left = 50 + x * 50;
|
||||
const top = 50 - y * 50;
|
||||
|
||||
// animatedButton
|
||||
|
||||
// animatedButton.style.x = left;
|
||||
// animatedButton.style.y = (top + 500) * -1;
|
||||
// animatedButton.style.transform = `translate(${left}%, -${top + 500}%)`;
|
||||
});
|
||||
}
|
||||
|
||||
animateButton(
|
||||
'#closed-mouth-motion',
|
||||
globalThis.CHOSEN_CLOSED_MOUTH_ANIMATION,
|
||||
);
|
||||
animateButton('#open-mouth-motion', globalThis.CHOSEN_OPEN_MOUTH_ANIMATION);
|
||||
|
||||
function blink() {
|
||||
let avatarCurr = $('#avatar').src;
|
||||
setInterval(() => {
|
||||
avatarCurr = $('#avatar').src;
|
||||
const n = Date.now() % 3200;
|
||||
if (n > 3000) {
|
||||
globalThis.BLINKING = true;
|
||||
const avatarNew = avatarBlink();
|
||||
if (avatarCurr !== avatarNew) {
|
||||
document.body.querySelector('#avatar').src = avatarNew;
|
||||
avatarCurr = avatarNew;
|
||||
}
|
||||
} else {
|
||||
globalThis.BLINKING = false;
|
||||
// const avatarNew = avatarCurr.replace('-blink', '');
|
||||
const avatarNew = avatarBlink();
|
||||
if (avatarCurr !== avatarNew) {
|
||||
document.body.querySelector('#avatar').src = avatarNew;
|
||||
avatarCurr = avatarNew;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
blink();
|
||||
|
||||
async function _cycleAnimations() {
|
||||
const animations = Object.keys(MOTION);
|
||||
let i = 0;
|
||||
while (true) {
|
||||
const key = animations[i % animations.length];
|
||||
animate(key);
|
||||
Window.this.caption = key;
|
||||
i++;
|
||||
await new Promise((r) => setTimeout(r, 2000));
|
||||
}
|
||||
}
|
||||
|
||||
$(document).on(
|
||||
'~mousedown',
|
||||
'#closed-mouth-motion, #open-mouth-motion',
|
||||
motionButtonEvent,
|
||||
);
|
||||
|
||||
$(document).on(
|
||||
'~doubleclick',
|
||||
'#closed-mouth-motion, #open-mouth-motion',
|
||||
motionButtonEvent,
|
||||
);
|
||||
|
||||
function motionButtonEvent(evt) {
|
||||
const { target: button } = evt;
|
||||
button.attributes.counter = button.attributes.counter || 0;
|
||||
|
||||
if (evt.button === 1) {
|
||||
button.attributes.counter++;
|
||||
} else if (evt.button === 2) {
|
||||
button.attributes.counter--;
|
||||
}
|
||||
|
||||
const color = [
|
||||
'white',
|
||||
'#9BCCD4',
|
||||
'#8087D6',
|
||||
'#AB65CF',
|
||||
'#E7FD5B',
|
||||
'#EC9F45',
|
||||
'#E24555',
|
||||
][mod(button.attributes.counter, 7)];
|
||||
button.style.variable('color', color);
|
||||
|
||||
const animation = [
|
||||
'motionless',
|
||||
'vibing',
|
||||
'shaking',
|
||||
'shakingMore',
|
||||
'bouncy',
|
||||
'excited',
|
||||
'nervous',
|
||||
][mod(button.attributes.counter, 7)];
|
||||
|
||||
animateButton(button, animation);
|
||||
|
||||
if (button.id === 'closed-mouth-motion') {
|
||||
globalThis.CHOSEN_CLOSED_MOUTH_ANIMATION = animation;
|
||||
animate();
|
||||
} else if (button.id === 'open-mouth-motion') {
|
||||
globalThis.CHOSEN_OPEN_MOUTH_ANIMATION = animation;
|
||||
animate();
|
||||
}
|
||||
}
|
||||
|
||||
function animateMouthButton() {
|
||||
setInterval(() => {
|
||||
const n = Date.now() % 1200;
|
||||
document.body.querySelector('.mouth-transition').style.backgroundImage = `url('../vtuber/png/controls/buttons/top/motion/${n > 600 ? 'open' : 'closed'
|
||||
}.png')`;
|
||||
});
|
||||
}
|
||||
|
||||
animateMouthButton();
|
||||
|
||||
function mod(n, m) {
|
||||
return ((n % m) + m) % m;
|
||||
}
|
||||
|
||||
globalThis.CURRENT_BUTTON = null;
|
||||
|
||||
$(document).on(
|
||||
'click',
|
||||
'.mouth-image.border-default:not(:first-of-type)',
|
||||
(evt, el) => {
|
||||
globalThis.CURRENT_BUTTON = el;
|
||||
el.popup($('menu'));
|
||||
},
|
||||
);
|
||||
|
||||
function loadImage() {
|
||||
const filename = Window.this.selectFile({
|
||||
mode: 'open',
|
||||
filter:
|
||||
'image files (*.bmp,*.dib,*.gif,*.png,*.apng,*.jpg,*.jpeg,*.jiff)|*.bmp;*.dib;*.gif;*.png;*.apng;*.jpg;*.jpeg;*.jiff',
|
||||
caption: 'select image for closed mouth...',
|
||||
});
|
||||
return filename;
|
||||
}
|
||||
|
||||
function changeImage(evt, el) {
|
||||
// setTimeout to avoid context menu popping up
|
||||
setTimeout(() => {
|
||||
if (el.matches('.mouth-image:first-of-type, .mouth-image.border-add')) {
|
||||
globalThis.CURRENT_BUTTON = el;
|
||||
}
|
||||
|
||||
const filename = loadImage();
|
||||
if (!filename) return;
|
||||
const which = globalThis.CURRENT_BUTTON.id
|
||||
.match(/closed|open|blink/g)
|
||||
.join('-');
|
||||
document.style.variable(which, `url('${filename}')`);
|
||||
|
||||
globalThis.CURRENT_BUTTON.classList.add('border-default');
|
||||
globalThis.CURRENT_BUTTON.classList.remove('border-add');
|
||||
});
|
||||
}
|
||||
|
||||
$(document).on(
|
||||
'click',
|
||||
'.mouth-image:first-of-type, .mouth-image.border-add',
|
||||
changeImage,
|
||||
);
|
||||
|
||||
$(document).on('click', '#change-image', changeImage);
|
||||
|
||||
$(document).on('click', '#remove-image', (evt, el) => {
|
||||
globalThis.CURRENT_BUTTON.classList.remove('border-default');
|
||||
globalThis.CURRENT_BUTTON.classList.add('border-add');
|
||||
|
||||
const which = globalThis.CURRENT_BUTTON.id
|
||||
.match(/closed|open|blink/g)
|
||||
.join('-');
|
||||
document.style.variable(which, null);
|
||||
});
|
||||
|
||||
movableView('body');
|
||||
|
||||
// Window.this.on('activate', (evt) => {
|
||||
// if (evt.reason === 0) {
|
||||
// document.classList.add('transparent');
|
||||
// } else {
|
||||
// document.classList.remove('transparent');
|
||||
// }
|
||||
// });
|
||||
|
||||
// setInterval(() => (Window.this.isTopmost = true));
|
||||
|
||||
$('#close').on('click', () => Window.this.close());
|
||||
65
src/modules/vtuber/js/motion.js
Normal file
65
src/modules/vtuber/js/motion.js
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import { pnoise1 } from './perlin_noise.js';
|
||||
|
||||
export default {
|
||||
motionless,
|
||||
vibing,
|
||||
shaking,
|
||||
shakingMore,
|
||||
bouncy,
|
||||
excited,
|
||||
nervous,
|
||||
};
|
||||
|
||||
function motionless(t) {
|
||||
return { x: 0, y: 0 };
|
||||
}
|
||||
|
||||
function clamp01(number) {
|
||||
return Math.max(0, Math.min(number, 1));
|
||||
}
|
||||
|
||||
function _shake(t, amount, velocity) {
|
||||
let num = clamp01(pnoise1(t * velocity, 0));
|
||||
let num2 = clamp01(pnoise1(t * velocity, 50));
|
||||
num = num * 2 - 1;
|
||||
num2 = num2 * 2 - 1;
|
||||
return {
|
||||
x: amount * (num * Math.sqrt(1 - (num2 * num2) / 2)),
|
||||
y: amount * (num2 * Math.sqrt(1 - (num * num) / 2)),
|
||||
};
|
||||
}
|
||||
|
||||
function _jumpy(t, amountX, amountY, velocity) {
|
||||
t *= velocity;
|
||||
const num = t % 1;
|
||||
const num2 = -8 * num * (num - 1) - 1;
|
||||
let num3 = t % 2;
|
||||
if (num3 > 1) {
|
||||
num3 = 2 - num3;
|
||||
}
|
||||
return { x: (num3 * 2 - 1) * amountX, y: num2 * amountY };
|
||||
}
|
||||
|
||||
function vibing(t) {
|
||||
return _shake(t, 0.7, 0.5);
|
||||
}
|
||||
|
||||
function shaking(t) {
|
||||
return _shake(t, 0.3, 10);
|
||||
}
|
||||
|
||||
function shakingMore(t) {
|
||||
return _shake(t, 1, 8);
|
||||
}
|
||||
|
||||
function bouncy(t) {
|
||||
return _jumpy(t, 0, 0.5, 1);
|
||||
}
|
||||
|
||||
function excited(t) {
|
||||
return _jumpy(t, 0.5, 0.5, 2);
|
||||
}
|
||||
|
||||
function nervous(t) {
|
||||
return _jumpy(t, 1, 1, 4);
|
||||
}
|
||||
65
src/modules/vtuber/js/movable_view.js
Normal file
65
src/modules/vtuber/js/movable_view.js
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
if (!Number.prototype.limit) {
|
||||
Number.prototype.limit = function (min, max) {
|
||||
if (this < min) return min;
|
||||
if (this > max) return max;
|
||||
return this;
|
||||
};
|
||||
}
|
||||
|
||||
function movableView(s, screenBound = false) {
|
||||
let xoff; let yoff; let minXY; let maxX; let
|
||||
maxY;
|
||||
let dragging = false;
|
||||
|
||||
function screenBounds() {
|
||||
if (screenBound) {
|
||||
[maxX, maxY] = Window.this.screenBox('workarea', 'dimension');
|
||||
const [w, h] = Window.this.box('dimension', 'border');
|
||||
maxX -= w;
|
||||
maxY -= h;
|
||||
minXY = 0;
|
||||
} else {
|
||||
maxX = Number.MAX_SAFE_INTEGER;
|
||||
maxY = Number.MAX_SAFE_INTEGER;
|
||||
minXY = Number.MIN_SAFE_INTEGER;
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseDown(e) {
|
||||
screenBounds();
|
||||
e.target.state.capture(true);
|
||||
|
||||
const [x, y] = Window.this.box('position', 'border', 'screen');
|
||||
xoff = e.screenX - x;
|
||||
yoff = e.screenY - y;
|
||||
|
||||
dragging = true;
|
||||
}
|
||||
|
||||
function onMouseMove(e) {
|
||||
if (dragging) {
|
||||
Window.this.move(
|
||||
(e.screenX - xoff).limit(minXY, maxX),
|
||||
(e.screenY - yoff).limit(minXY, maxY),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseUp(e) {
|
||||
if (dragging) {
|
||||
dragging = false;
|
||||
e.target.state.capture(false);
|
||||
}
|
||||
}
|
||||
|
||||
const elements = document.querySelectorAll(s);
|
||||
for (let i = 0; i < elements.length; ++i) {
|
||||
// elements[i].on('mousedown', onMouseDown);
|
||||
// elements[i].on('mousemove', onMouseMove);
|
||||
// elements[i].on('mouseup', onMouseUp);
|
||||
}
|
||||
return !!elements.length;
|
||||
}
|
||||
|
||||
// | Module export (uncomment bellow)
|
||||
export { movableView as default };
|
||||
1215
src/modules/vtuber/js/perlin_noise.js
Normal file
1215
src/modules/vtuber/js/perlin_noise.js
Normal file
File diff suppressed because it is too large
Load diff
BIN
src/modules/vtuber/png/128.png
Normal file
BIN
src/modules/vtuber/png/128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/modules/vtuber/png/16.png
Normal file
BIN
src/modules/vtuber/png/16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 628 B |
BIN
src/modules/vtuber/png/192.png
Normal file
BIN
src/modules/vtuber/png/192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
src/modules/vtuber/png/24.png
Normal file
BIN
src/modules/vtuber/png/24.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/modules/vtuber/png/256.png
Normal file
BIN
src/modules/vtuber/png/256.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
src/modules/vtuber/png/32.png
Normal file
BIN
src/modules/vtuber/png/32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/modules/vtuber/png/48.png
Normal file
BIN
src/modules/vtuber/png/48.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue