uploaded site and api data
This commit is contained in:
Dumitrana-Mihnea
@@ -0,0 +1,50 @@
|
||||
import os
|
||||
import mediapipe as mp
|
||||
import cv2
|
||||
import pickle
|
||||
from sklearn.ensemble import RandomForestClassifier
|
||||
from sklearn.model_selection import train_test_split
|
||||
from sklearn.metrics import accuracy_score
|
||||
import numpy as np
|
||||
|
||||
mp_hands = mp.solutions.hands
|
||||
hands = mp_hands.Hands(static_image_mode=True, min_detection_confidence=0.5)
|
||||
data_dir = "./data"
|
||||
data = []
|
||||
labels = []
|
||||
|
||||
for dir_ in os.listdir(data_dir):
|
||||
print(dir_)
|
||||
for img_path in os.listdir(os.path.join(data_dir, dir_)):
|
||||
data_aux = []
|
||||
img = cv2.imread(os.path.join(data_dir, dir_, img_path))
|
||||
|
||||
img_rgb = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)
|
||||
results = hands.process(img_rgb)
|
||||
if results.multi_hand_landmarks:
|
||||
for hand_landmarks in results.multi_hand_landmarks:
|
||||
for i in range(len(hand_landmarks.landmark)):
|
||||
x = hand_landmarks.landmark[i].x
|
||||
y = hand_landmarks.landmark[i].y
|
||||
data_aux.append(x)
|
||||
data_aux.append(y)
|
||||
# print(f"Poza {img_path} cu ", end=' ')
|
||||
# print(x, y)
|
||||
data.append(data_aux)
|
||||
labels.append(dir_)
|
||||
|
||||
|
||||
data = np.asarray(data)
|
||||
labels = np.asarray(labels)
|
||||
x_train, x_test, y_train, y_test = train_test_split(data, labels, test_size=0.2, shuffle=True, stratify=labels)
|
||||
model = RandomForestClassifier()
|
||||
model.fit(x_train, y_train)
|
||||
y_predict = model.predict(x_test)
|
||||
score = accuracy_score(y_predict, y_test)
|
||||
|
||||
print(f"{score * 100}% classified correctly")
|
||||
f = open("model.p", "wb")
|
||||
pickle.dump({"model": model}, f)
|
||||
f.close()
|
||||
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
[[{"x":0.8352290987968445,"y":1.0246509313583374,"z":6.380777790582215e-7},{"x":0.7852715849876404,"y":0.992743968963623,"z":-0.02249276265501976},{"x":0.7460511326789856,"y":0.9277198910713196,"z":-0.040133822709321976},{"x":0.7261029481887817,"y":0.8596256971359253,"z":-0.05214756354689598},{"x":0.7156654596328735,"y":0.806212842464447,"z":-0.065250463783741},{"x":0.7528064846992493,"y":0.9252693057060242,"z":-0.07445880025625229},{"x":0.7142532467842102,"y":0.8472095727920532,"z":-0.10898181796073914},{"x":0.6942790746688843,"y":0.7844054102897644,"z":-0.1276625096797943},{"x":0.6811489462852478,"y":0.7316831350326538,"z":-0.13941222429275513},{"x":0.7964140176773071,"y":0.8995473384857178,"z":-0.07670313119888306},{"x":0.7756801843643188,"y":0.7937293648719788,"z":-0.1070675328373909},{"x":0.7689130306243896,"y":0.718907356262207,"z":-0.12218372523784637},{"x":0.7662367820739746,"y":0.6581640839576721,"z":-0.13254722952842712},{"x":0.8419972062110901,"y":0.8913975358009338,"z":-0.07802332192659378},{"x":0.8377389311790466,"y":0.8043600916862488,"z":-0.11083008348941803},{"x":0.8356887102127075,"y":0.7433968186378479,"z":-0.127068430185318},{"x":0.8340345025062561,"y":0.6942105889320374,"z":-0.13611175119876862},{"x":0.8862054347991943,"y":0.8947083353996277,"z":-0.07868341356515884},{"x":0.9083899259567261,"y":0.8240664601325989,"z":-0.1105000302195549},{"x":0.9251305460929871,"y":0.7798703908920288,"z":-0.12317387014627457},{"x":0.9397422075271606,"y":0.7432297468185425,"z":-0.1296428143978119}],
|
||||
[{"x":0.15515635907649994,"y":0.9633815288543701,"z":7.199977289928938e-7},{"x":0.20031718909740448,"y":0.9605085849761963,"z":-0.03806344047188759},{"x":0.23353257775306702,"y":0.9522206783294678,"z":-0.06956487894058228},{"x":0.24222178757190704,"y":0.9587247967720032,"z":-0.0999852865934372},{"x":0.24733389914035797,"y":0.9740628004074097,"z":-0.13321256637573242},{"x":0.2604224681854248,"y":0.8114917278289795,"z":-0.06296493113040924},{"x":0.30314508080482483,"y":0.7292249798774719,"z":-0.09619221091270447},{"x":0.3255283236503601,"y":0.6730362176895142,"z":-0.12107474356889725},{"x":0.34156253933906555,"y":0.6200391054153442,"z":-0.1400400847196579},{"x":0.2171422243118286,"y":0.7836028337478638,"z":-0.06895798444747925},{"x":0.24275580048561096,"y":0.6850705742835999,"z":-0.09884735941886902},{"x":0.25457364320755005,"y":0.6168791651725769,"z":-0.12403333187103271},{"x":0.2625443637371063,"y":0.5596932768821716,"z":-0.14239178597927094},{"x":0.170135498046875,"y":0.7859712839126587,"z":-0.07722687721252441},{"x":0.1786479949951172,"y":0.6838392615318298,"z":-0.10688867419958115},{"x":0.17985376715660095,"y":0.6157321333885193,"z":-0.1315436065196991},{"x":0.18125669658184052,"y":0.5590601563453674,"z":-0.14800553023815155},{"x":0.12401241064071655,"y":0.8124399781227112,"z":-0.0879233255982399},{"x":0.10290519893169403,"y":0.7394360899925232,"z":-0.11872303485870361},{"x":0.08626630902290344,"y":0.6938216090202332,"z":-0.13427463173866272},{"x":0.07402856647968292,"y":0.6551141142845154,"z":-0.14299866557121277}]]
|
||||
@@ -0,0 +1,562 @@
|
||||
mesh_viewer.ts:97 Uncaught ReferenceError: javascript is not defined
|
||||
at mesh_viewer.ts:97:45
|
||||
(anonymous) @ mesh_viewer.ts:97
|
||||
mesh_viewer.ts:97 GET http://localhost/dist8/deps.js net::ERR_ABORTED 404 (Not Found)
|
||||
goog.Dependency.load @ mesh_viewer.ts:97
|
||||
(anonymous) @ mesh_viewer.ts:97
|
||||
goog.DebugLoader_.loadDeps_ @ mesh_viewer.ts:97
|
||||
goog.DebugLoader_.loadClosureDeps @ mesh_viewer.ts:97
|
||||
(anonymous) @ mesh_viewer.ts:97
|
||||
wave.js:23 <div class="landmark-grid-container"> </div>flex
|
||||
script.js:54 div.landmark-grid-container
|
||||
hands_solution_simd_wasm_bin.js:9 I0000 00:00:1683939511.204000 1 gl_context_webgl.cc:151] Successfully created a WebGL context with major version 3 and handle 3
|
||||
put_char @ hands_solution_simd_wasm_bin.js:9
|
||||
write @ hands_solution_simd_wasm_bin.js:9
|
||||
write @ hands_solution_simd_wasm_bin.js:9
|
||||
doWritev @ hands_solution_simd_wasm_bin.js:9
|
||||
_fd_write @ hands_solution_simd_wasm_bin.js:9
|
||||
$func8152 @ hands_solution_simd_wasm_bin.wasm:0x503240
|
||||
$func8162 @ hands_solution_simd_wasm_bin.wasm:0x5039b1
|
||||
$func8163 @ hands_solution_simd_wasm_bin.wasm:0x503a5c
|
||||
$func7782 @ hands_solution_simd_wasm_bin.wasm:0x4d7edf
|
||||
$func7781 @ hands_solution_simd_wasm_bin.wasm:0x4d7ebe
|
||||
$func7779 @ hands_solution_simd_wasm_bin.wasm:0x4d7b6a
|
||||
$func7760 @ hands_solution_simd_wasm_bin.wasm:0x4d6781
|
||||
$func7759 @ hands_solution_simd_wasm_bin.wasm:0x4d5a01
|
||||
$func6988 @ hands_solution_simd_wasm_bin.wasm:0x495061
|
||||
$func6477 @ hands_solution_simd_wasm_bin.wasm:0x457e96
|
||||
$func6272 @ hands_solution_simd_wasm_bin.wasm:0x44323d
|
||||
$func251 @ hands_solution_simd_wasm_bin.wasm:0x1e50a
|
||||
$func221 @ hands_solution_simd_wasm_bin.wasm:0x19cb6
|
||||
(anonymous) @ hands_solution_simd_wasm_bin.js:9
|
||||
(anonymous) @ hands.js:82
|
||||
ua @ hands.js:14
|
||||
next @ hands.js:15
|
||||
b @ hands.js:15
|
||||
Promise.then (async)
|
||||
g @ hands.js:15
|
||||
Promise.then (async)
|
||||
g @ hands.js:15
|
||||
(anonymous) @ hands.js:15
|
||||
wa @ hands.js:15
|
||||
E @ hands.js:16
|
||||
x.send @ hands.js:79
|
||||
(anonymous) @ hands.js:94
|
||||
ua @ hands.js:14
|
||||
next @ hands.js:15
|
||||
(anonymous) @ hands.js:15
|
||||
wa @ hands.js:15
|
||||
E @ hands.js:16
|
||||
x.send @ hands.js:94
|
||||
onFrame @ script.js:155
|
||||
U.tick @ control_utils.js:44
|
||||
(anonymous) @ control_utils.js:43
|
||||
requestAnimationFrame (async)
|
||||
V @ control_utils.js:43
|
||||
c @ control_utils.js:45
|
||||
hands_solution_simd_wasm_bin.js:9 I0000 00:00:1683939511.206000 1 gl_context.cc:359] GL version: 3.0 (OpenGL ES 3.0 (WebGL 2.0 (OpenGL ES 3.0 Chromium)))
|
||||
put_char @ hands_solution_simd_wasm_bin.js:9
|
||||
write @ hands_solution_simd_wasm_bin.js:9
|
||||
write @ hands_solution_simd_wasm_bin.js:9
|
||||
doWritev @ hands_solution_simd_wasm_bin.js:9
|
||||
_fd_write @ hands_solution_simd_wasm_bin.js:9
|
||||
$func8152 @ hands_solution_simd_wasm_bin.wasm:0x503240
|
||||
$func8162 @ hands_solution_simd_wasm_bin.wasm:0x5039b1
|
||||
$func8163 @ hands_solution_simd_wasm_bin.wasm:0x503a5c
|
||||
$func7782 @ hands_solution_simd_wasm_bin.wasm:0x4d7edf
|
||||
$func7781 @ hands_solution_simd_wasm_bin.wasm:0x4d7ebe
|
||||
$func7779 @ hands_solution_simd_wasm_bin.wasm:0x4d7b6a
|
||||
$func7760 @ hands_solution_simd_wasm_bin.wasm:0x4d6781
|
||||
$func7759 @ hands_solution_simd_wasm_bin.wasm:0x4d5a01
|
||||
$func6933 @ hands_solution_simd_wasm_bin.wasm:0x493386
|
||||
$func6861 @ hands_solution_simd_wasm_bin.wasm:0x490d93
|
||||
$func6860 @ hands_solution_simd_wasm_bin.wasm:0x490c61
|
||||
$func6988 @ hands_solution_simd_wasm_bin.wasm:0x495114
|
||||
$func6477 @ hands_solution_simd_wasm_bin.wasm:0x457e96
|
||||
$func6272 @ hands_solution_simd_wasm_bin.wasm:0x44323d
|
||||
$func251 @ hands_solution_simd_wasm_bin.wasm:0x1e50a
|
||||
$func221 @ hands_solution_simd_wasm_bin.wasm:0x19cb6
|
||||
(anonymous) @ hands_solution_simd_wasm_bin.js:9
|
||||
(anonymous) @ hands.js:82
|
||||
ua @ hands.js:14
|
||||
next @ hands.js:15
|
||||
b @ hands.js:15
|
||||
Promise.then (async)
|
||||
g @ hands.js:15
|
||||
Promise.then (async)
|
||||
g @ hands.js:15
|
||||
(anonymous) @ hands.js:15
|
||||
wa @ hands.js:15
|
||||
E @ hands.js:16
|
||||
x.send @ hands.js:79
|
||||
(anonymous) @ hands.js:94
|
||||
ua @ hands.js:14
|
||||
next @ hands.js:15
|
||||
(anonymous) @ hands.js:15
|
||||
wa @ hands.js:15
|
||||
E @ hands.js:16
|
||||
x.send @ hands.js:94
|
||||
onFrame @ script.js:155
|
||||
U.tick @ control_utils.js:44
|
||||
(anonymous) @ control_utils.js:43
|
||||
requestAnimationFrame (async)
|
||||
V @ control_utils.js:43
|
||||
c @ control_utils.js:45
|
||||
hands_solution_simd_wasm_bin.js:9 W0000 00:00:1683939511.207000 1 gl_context.cc:1000] OpenGL error checking is disabled
|
||||
put_char @ hands_solution_simd_wasm_bin.js:9
|
||||
write @ hands_solution_simd_wasm_bin.js:9
|
||||
write @ hands_solution_simd_wasm_bin.js:9
|
||||
doWritev @ hands_solution_simd_wasm_bin.js:9
|
||||
_fd_write @ hands_solution_simd_wasm_bin.js:9
|
||||
$func8152 @ hands_solution_simd_wasm_bin.wasm:0x503240
|
||||
$func8162 @ hands_solution_simd_wasm_bin.wasm:0x5039b1
|
||||
$func8163 @ hands_solution_simd_wasm_bin.wasm:0x503a5c
|
||||
$func7782 @ hands_solution_simd_wasm_bin.wasm:0x4d7edf
|
||||
$func7781 @ hands_solution_simd_wasm_bin.wasm:0x4d7ebe
|
||||
$func7779 @ hands_solution_simd_wasm_bin.wasm:0x4d7b6a
|
||||
$func7760 @ hands_solution_simd_wasm_bin.wasm:0x4d6781
|
||||
$func7759 @ hands_solution_simd_wasm_bin.wasm:0x4d5a01
|
||||
$func6861 @ hands_solution_simd_wasm_bin.wasm:0x490df7
|
||||
$func6860 @ hands_solution_simd_wasm_bin.wasm:0x490c61
|
||||
$func6988 @ hands_solution_simd_wasm_bin.wasm:0x495114
|
||||
$func6477 @ hands_solution_simd_wasm_bin.wasm:0x457e96
|
||||
$func6272 @ hands_solution_simd_wasm_bin.wasm:0x44323d
|
||||
$func251 @ hands_solution_simd_wasm_bin.wasm:0x1e50a
|
||||
$func221 @ hands_solution_simd_wasm_bin.wasm:0x19cb6
|
||||
(anonymous) @ hands_solution_simd_wasm_bin.js:9
|
||||
(anonymous) @ hands.js:82
|
||||
ua @ hands.js:14
|
||||
next @ hands.js:15
|
||||
b @ hands.js:15
|
||||
Promise.then (async)
|
||||
g @ hands.js:15
|
||||
Promise.then (async)
|
||||
g @ hands.js:15
|
||||
(anonymous) @ hands.js:15
|
||||
wa @ hands.js:15
|
||||
E @ hands.js:16
|
||||
x.send @ hands.js:79
|
||||
(anonymous) @ hands.js:94
|
||||
ua @ hands.js:14
|
||||
next @ hands.js:15
|
||||
(anonymous) @ hands.js:15
|
||||
wa @ hands.js:15
|
||||
E @ hands.js:16
|
||||
x.send @ hands.js:94
|
||||
onFrame @ script.js:155
|
||||
U.tick @ control_utils.js:44
|
||||
(anonymous) @ control_utils.js:43
|
||||
requestAnimationFrame (async)
|
||||
V @ control_utils.js:43
|
||||
c @ control_utils.js:45
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 [[{"x":0.8140498995780945,"y":1.155534029006958,"z":0.0000010514937685002224},{"x":0.7359741926193237,"y":1.0859907865524292,"z":-0.03146498277783394},{"x":0.6988840103149414,"y":0.9564893841743469,"z":-0.06314167380332947},{"x":0.7039138078689575,"y":0.8355244994163513,"z":-0.08410068601369858},{"x":0.726629912853241,"y":0.750944197177887,"z":-0.10955847799777985},{"x":0.7080771327018738,"y":0.9438077211380005,"z":-0.14544285833835602},{"x":0.6564611792564392,"y":0.7907771468162537,"z":-0.20122770965099335},{"x":0.6265214681625366,"y":0.6916421055793762,"z":-0.23605354130268097},{"x":0.6009018421173096,"y":0.6081937551498413,"z":-0.2610349655151367},{"x":0.7865785360336304,"y":0.9510325789451599,"z":-0.15634576976299286},{"x":0.7815659046173096,"y":0.7740107774734497,"z":-0.20514428615570068},{"x":0.7765318155288696,"y":0.6572185754776001,"z":-0.23160769045352936},{"x":0.7660412788391113,"y":0.5650690793991089,"z":-0.25320181250572205},{"x":0.8642588257789612,"y":0.9737101197242737,"z":-0.162696972489357},{"x":0.8906987905502319,"y":0.7985145449638367,"z":-0.21562379598617554},{"x":0.9004497528076172,"y":0.6689568161964417,"z":-0.24854426085948944},{"x":0.9049975275993347,"y":0.5695917010307312,"z":-0.2726788818836212},{"x":0.9294121265411377,"y":1.0054806470870972,"z":-0.16661357879638672},{"x":0.9852825403213501,"y":0.9116175770759583,"z":-0.22081062197685242},{"x":1.01906156539917,"y":0.8806132078170776,"z":-0.2398642599582672},{"x":1.045973300933838,"y":0.8570849895477295,"z":-0.2519315779209137}]]
|
||||
script.js:124 [[{"x":0.8322381973266602,"y":1.0162608623504639,"z":9.723190714794328e-7},{"x":0.747757077217102,"y":0.9798997640609741,"z":-0.03337813913822174},{"x":0.6753461956977844,"y":0.9310736060142517,"z":-0.07073889672756195},{"x":0.6143061518669128,"y":0.9143345355987549,"z":-0.10576065629720688},{"x":0.5562354326248169,"y":0.9335223436355591,"z":-0.14704079926013947},{"x":0.69749516248703,"y":0.731829822063446,"z":-0.08730152994394302},{"x":0.6400586366653442,"y":0.5744540095329285,"z":-0.1286448985338211},{"x":0.611598789691925,"y":0.4722822904586792,"z":-0.1556382030248642},{"x":0.5902823805809021,"y":0.38392505049705505,"z":-0.17510879039764404},{"x":0.7820249795913696,"y":0.7123401761054993,"z":-0.10481241345405579},{"x":0.7626743912696838,"y":0.5235517024993896,"z":-0.1402134746313095},{"x":0.7528814673423767,"y":0.3993535339832306,"z":-0.17106296122074127},{"x":0.74772709608078,"y":0.29079756140708923,"z":-0.1934414654970169},{"x":0.8607425689697266,"y":0.7370054721832275,"z":-0.12276580184698105},{"x":0.866374671459198,"y":0.5532642006874084,"z":-0.1690400391817093},{"x":0.8686074018478394,"y":0.4267726242542267,"z":-0.21038341522216797},{"x":0.8674495816230774,"y":0.3199838697910309,"z":-0.23731349408626556},{"x":0.9321892261505127,"y":0.7892143726348877,"z":-0.13958130776882172},{"x":0.9803751707077026,"y":0.6789135336875916,"z":-0.18509693443775177},{"x":1.0127334594726562,"y":0.6282098889350891,"z":-0.20355607569217682},{"x":1.0357786417007446,"y":0.5887877941131592,"z":-0.21291205286979675}],[{"x":0.8498014211654663,"y":1.0710203647613525,"z":0.000001164914124274219},{"x":0.7486876249313354,"y":1.013598084449768,"z":-0.026714980602264404},{"x":0.6837756037712097,"y":0.9565881490707397,"z":-0.051181405782699585},{"x":0.6340632438659668,"y":0.9390504360198975,"z":-0.07414879649877548},{"x":0.5887877941131592,"y":0.9596759676933289,"z":-0.10166682302951813},{"x":0.7089052200317383,"y":0.7908656001091003,"z":-0.04424835741519928},{"x":0.6742098927497864,"y":0.6782524585723877,"z":-0.06515457481145859},{"x":0.6534513831138611,"y":0.5959567427635193,"z":-0.08844318240880966},{"x":0.6361015439033508,"y":0.5206927061080933,"z":-0.10760944336652756},{"x":0.784972608089447,"y":0.762688934803009,"z":-0.05276075005531311},{"x":0.7709494829177856,"y":0.640825629234314,"z":-0.06670714914798737},{"x":0.7649253010749817,"y":0.5491682291030884,"z":-0.09577775001525879},{"x":0.759592592716217,"y":0.4663121998310089,"z":-0.11949466913938522},{"x":0.8654502630233765,"y":0.7626949548721313,"z":-0.06146051734685898},{"x":0.8667386770248413,"y":0.6432316303253174,"z":-0.08373191952705383},{"x":0.8681396842002869,"y":0.5473146438598633,"z":-0.11767440289258957},{"x":0.8685454726219177,"y":0.4643867611885071,"z":-0.1426226645708084},{"x":0.9407880902290344,"y":0.7885806560516357,"z":-0.0701870545744896},{"x":0.9821084141731262,"y":0.6941385865211487,"z":-0.09336858987808228},{"x":1.0133854150772095,"y":0.6354882121086121,"z":-0.10514674335718155},{"x":1.042013168334961,"y":0.5879390835762024,"z":-0.11232069879770279}]]
|
||||
script.js:124 [[{"x":0.8744906783103943,"y":1.0113388299942017,"z":0.0000016394551494158804},{"x":0.7643049955368042,"y":0.9914852976799011,"z":-0.05137281119823456},{"x":0.6645444631576538,"y":0.9439111948013306,"z":-0.09482662379741669},{"x":0.5649287700653076,"y":0.9376358985900879,"z":-0.13422027230262756},{"x":0.47993800044059753,"y":0.9410340785980225,"z":-0.1797209531068802},{"x":0.728915810585022,"y":0.6543309092521667,"z":-0.07610289752483368},{"x":0.6869057416915894,"y":0.5063509345054626,"z":-0.11408723890781403},{"x":0.6637019515037537,"y":0.4040322005748749,"z":-0.15381643176078796},{"x":0.6419637203216553,"y":0.3096970319747925,"z":-0.18602930009365082},{"x":0.815497875213623,"y":0.6185013055801392,"z":-0.08858537673950195},{"x":0.8095181584358215,"y":0.4541466534137726,"z":-0.1191876009106636},{"x":0.8079002499580383,"y":0.34311604499816895,"z":-0.163346067070961},{"x":0.8017667531967163,"y":0.24449360370635986,"z":-0.1977064609527588},{"x":0.8944206833839417,"y":0.6361277103424072,"z":-0.10334961116313934},{"x":0.9133416414260864,"y":0.47029370069503784,"z":-0.15086358785629272},{"x":0.9263125061988831,"y":0.3586118221282959,"z":-0.20441746711730957},{"x":0.9297343492507935,"y":0.2608588933944702,"z":-0.24374401569366455},{"x":0.956680178642273,"y":0.6983981728553772,"z":-0.11912048608064651},{"x":1.030639410018921,"y":0.6155490875244141,"z":-0.18160003423690796},{"x":1.0884859561920166,"y":0.6042100191116333,"z":-0.20924940705299377},{"x":1.1325582265853882,"y":0.603702962398529,"z":-0.223610982298851}]]
|
||||
script.js:124 [[{"x":0.8803628087043762,"y":1.0014629364013672,"z":0.0000014593846344723715},{"x":0.7713954448699951,"y":0.9917486310005188,"z":-0.07023174315690994},{"x":0.6567171812057495,"y":0.9428564310073853,"z":-0.11787640303373337},{"x":0.5484996438026428,"y":0.9306182861328125,"z":-0.15846259891986847},{"x":0.45203131437301636,"y":0.9358161687850952,"z":-0.20434263348579407},{"x":0.7307270169258118,"y":0.6322365403175354,"z":-0.09952437877655029},{"x":0.68035888671875,"y":0.45874059200286865,"z":-0.14275749027729034},{"x":0.6545394062995911,"y":0.34464821219444275,"z":-0.17610874772071838},{"x":0.6361608505249023,"y":0.24633392691612244,"z":-0.20187216997146606},{"x":0.8230410814285278,"y":0.5939611196517944,"z":-0.10499469935894012},{"x":0.825035035610199,"y":0.38512033224105835,"z":-0.13552255928516388},{"x":0.8303371667861938,"y":0.24905839562416077,"z":-0.16807974874973297},{"x":0.836621105670929,"y":0.13350504636764526,"z":-0.19516661763191223},{"x":0.9048917889595032,"y":0.6164177060127258,"z":-0.11628825217485428},{"x":0.9281401634216309,"y":0.4230707585811615,"z":-0.16807974874973297},{"x":0.9420567750930786,"y":0.30110469460487366,"z":-0.2204006463289261},{"x":0.9535149931907654,"y":0.1962016224861145,"z":-0.25957512855529785},{"x":0.9735214114189148,"y":0.6842241883277893,"z":-0.13066986203193665},{"x":1.0599873065948486,"y":0.6041153073310852,"z":-0.19904875755310059},{"x":1.1255981922149658,"y":0.5811589360237122,"z":-0.23504696786403656},{"x":1.1767141819000244,"y":0.565033495426178,"z":-0.2569282054901123}]]
|
||||
script.js:124 [[{"x":0.8750336170196533,"y":0.9908167123794556,"z":0.0000012551245163194835},{"x":0.7648800015449524,"y":0.973118782043457,"z":-0.07036110758781433},{"x":0.6479532718658447,"y":0.9213394522666931,"z":-0.11904314160346985},{"x":0.5410860180854797,"y":0.9169502258300781,"z":-0.16230539977550507},{"x":0.44352078437805176,"y":0.9242358207702637,"z":-0.2106516808271408},{"x":0.7142426371574402,"y":0.608866274356842,"z":-0.08748376369476318},{"x":0.6647303700447083,"y":0.4406206011772156,"z":-0.13304820656776428},{"x":0.6396316885948181,"y":0.3296501040458679,"z":-0.17228162288665771},{"x":0.6215206384658813,"y":0.2316095530986786,"z":-0.20393691956996918},{"x":0.807329535484314,"y":0.570217490196228,"z":-0.09650072455406189},{"x":0.8063603639602661,"y":0.36497920751571655,"z":-0.12873157858848572},{"x":0.8118831515312195,"y":0.23504072427749634,"z":-0.16393612325191498},{"x":0.8161804676055908,"y":0.1196364164352417,"z":-0.1945362538099289},{"x":0.8918552994728088,"y":0.5944584608078003,"z":-0.11319170147180557},{"x":0.9075238704681396,"y":0.39764949679374695,"z":-0.16384020447731018},{"x":0.9234153032302856,"y":0.2843173146247864,"z":-0.2071983814239502},{"x":0.9313442707061768,"y":0.17628028988838196,"z":-0.24096404016017914},{"x":0.966572105884552,"y":0.6652205586433411,"z":-0.13400746881961823},{"x":1.02266263961792,"y":0.5689550042152405,"z":-0.1926177591085434},{"x":1.0669612884521484,"y":0.5431395769119263,"z":-0.21679089963436127},{"x":1.098677396774292,"y":0.5169825553894043,"z":-0.23329001665115356}]]
|
||||
script.js:124 [[{"x":0.8665289282798767,"y":0.9848954677581787,"z":0.0000013209360076871235},{"x":0.7609226703643799,"y":0.9648950695991516,"z":-0.07197963446378708},{"x":0.6480709314346313,"y":0.9116542339324951,"z":-0.12011947482824326},{"x":0.5411328673362732,"y":0.9049577713012695,"z":-0.16246043145656586},{"x":0.4500688314437866,"y":0.9175719022750854,"z":-0.21004799008369446},{"x":0.7176499366760254,"y":0.6001684069633484,"z":-0.09292000532150269},{"x":0.6621071696281433,"y":0.4306213855743408,"z":-0.13935700058937073},{"x":0.6352125406265259,"y":0.31676575541496277,"z":-0.1772797703742981},{"x":0.6183992028236389,"y":0.2175496220588684,"z":-0.20765480399131775},{"x":0.8082113862037659,"y":0.5574846267700195,"z":-0.10069786012172699},{"x":0.8021847009658813,"y":0.35260292887687683,"z":-0.13659563660621643},{"x":0.8050499558448792,"y":0.21853852272033691,"z":-0.17415021359920502},{"x":0.8102002143859863,"y":0.10472840070724487,"z":-0.20562979578971863},{"x":0.8905263543128967,"y":0.577374279499054,"z":-0.11606945842504501},{"x":0.9036345481872559,"y":0.3835495412349701,"z":-0.17332181334495544},{"x":0.9175413250923157,"y":0.2644346058368683,"z":-0.227352574467659},{"x":0.9285590648651123,"y":0.16010862588882446,"z":-0.2671162486076355},{"x":0.9619537591934204,"y":0.6445280313491821,"z":-0.13521495461463928},{"x":1.0390549898147583,"y":0.5483458042144775,"z":-0.20470935106277466},{"x":1.1031619310379028,"y":0.5169990062713623,"z":-0.24134349822998047},{"x":1.1517221927642822,"y":0.4936438798904419,"z":-0.2649071216583252}]]
|
||||
script.js:124 [[{"x":0.8703764081001282,"y":0.9768186211585999,"z":0.0000012558249409266864},{"x":0.7657812833786011,"y":0.9565961956977844,"z":-0.07109589874744415},{"x":0.6517131328582764,"y":0.9052735567092896,"z":-0.12119261175394058},{"x":0.5451292991638184,"y":0.9060387015342712,"z":-0.16592182219028473},{"x":0.4516203701496124,"y":0.9205896854400635,"z":-0.21583019196987152},{"x":0.7138724327087402,"y":0.5984061360359192,"z":-0.0901646688580513},{"x":0.6639502644538879,"y":0.42965298891067505,"z":-0.13738928735256195},{"x":0.6392043828964233,"y":0.315335214138031,"z":-0.17797516286373138},{"x":0.6221522688865662,"y":0.215796560049057,"z":-0.21018019318580627},{"x":0.8053074479103088,"y":0.5581952333450317,"z":-0.09849842637777328},{"x":0.8013037443161011,"y":0.35290876030921936,"z":-0.13286928832530975},{"x":0.8055440783500671,"y":0.22059544920921326,"z":-0.1694059818983078},{"x":0.8087284564971924,"y":0.10411399602890015,"z":-0.2007635235786438},{"x":0.8892788887023926,"y":0.5780625343322754,"z":-0.11441259831190109},{"x":0.9027993679046631,"y":0.3813081979751587,"z":-0.1658276468515396},{"x":0.9194008708000183,"y":0.2641948461532593,"z":-0.21055684983730316},{"x":0.9281132221221924,"y":0.1560976207256317,"z":-0.2448335587978363},{"x":0.9645347595214844,"y":0.643187403678894,"z":-0.13456428050994873},{"x":1.0217101573944092,"y":0.54313063621521,"z":-0.19285351037979126},{"x":1.0712286233901978,"y":0.5081151723861694,"z":-0.2180902063846588},{"x":1.1070854663848877,"y":0.4762517213821411,"z":-0.2352285534143448}]]
|
||||
script.js:124 [[{"x":0.8703004121780396,"y":0.9648945927619934,"z":0.0000013311509974300861},{"x":0.7689233422279358,"y":0.9532482624053955,"z":-0.07444275170564651},{"x":0.6585955023765564,"y":0.9074979424476624,"z":-0.1251223087310791},{"x":0.5567349791526794,"y":0.9055793285369873,"z":-0.1697239726781845},{"x":0.46537983417510986,"y":0.9173372983932495,"z":-0.21990086138248444},{"x":0.7198460102081299,"y":0.5923007130622864,"z":-0.09706347435712814},{"x":0.6630349159240723,"y":0.42493629455566406,"z":-0.1448640376329422},{"x":0.6365411877632141,"y":0.31033754348754883,"z":-0.1843474805355072},{"x":0.6199336051940918,"y":0.2101970911026001,"z":-0.2158793956041336},{"x":0.8100979328155518,"y":0.5513138771057129,"z":-0.10492360591888428},{"x":0.8018510341644287,"y":0.34806469082832336,"z":-0.14157375693321228},{"x":0.8056693077087402,"y":0.21214821934700012,"z":-0.18114858865737915},{"x":0.8115657567977905,"y":0.09598743915557861,"z":-0.21441704034805298},{"x":0.8922126293182373,"y":0.5714350342750549,"z":-0.12027827650308609},{"x":0.9049876928329468,"y":0.38115814328193665,"z":-0.1776755154132843},{"x":0.9220544695854187,"y":0.26010647416114807,"z":-0.23269642889499664},{"x":0.9345092177391052,"y":0.15459248423576355,"z":-0.27364224195480347},{"x":0.9637272357940674,"y":0.637814462184906,"z":-0.13965441286563873},{"x":1.0386666059494019,"y":0.5442309379577637,"z":-0.2094816118478775},{"x":1.1037882566452026,"y":0.5106533169746399,"z":-0.24622316658496857},{"x":1.1531044244766235,"y":0.486528217792511,"z":-0.27035194635391235}]]
|
||||
script.js:124 [[{"x":0.8781510591506958,"y":0.9898098707199097,"z":0.0000011465513125585858},{"x":0.7696915864944458,"y":0.9590485095977783,"z":-0.06420252472162247},{"x":0.6612800359725952,"y":0.8978290557861328,"z":-0.11075739562511444},{"x":0.5617229342460632,"y":0.8798172473907471,"z":-0.15257865190505981},{"x":0.4719560444355011,"y":0.8879283666610718,"z":-0.19780075550079346},{"x":0.7095574736595154,"y":0.5895835161209106,"z":-0.07661102712154388},{"x":0.655483067035675,"y":0.42233580350875854,"z":-0.1217871829867363},{"x":0.6259021759033203,"y":0.31378069519996643,"z":-0.16048333048820496},{"x":0.6031301617622375,"y":0.2199588418006897,"z":-0.1909990757703781},{"x":0.797824501991272,"y":0.5526458621025085,"z":-0.08552677929401398},{"x":0.7879494428634644,"y":0.349084734916687,"z":-0.12050037831068039},{"x":0.7869051098823547,"y":0.22318875789642334,"z":-0.15533609688282013},{"x":0.7855789065361023,"y":0.11279380321502686,"z":-0.18392163515090942},{"x":0.8808967471122742,"y":0.5728333592414856,"z":-0.10202548652887344},{"x":0.8869067430496216,"y":0.37287142872810364,"z":-0.14669610559940338},{"x":0.8993657827377319,"y":0.2526383101940155,"z":-0.18291054666042328},{"x":0.9049922227859497,"y":0.14251527190208435,"z":-0.21048501133918762},{"x":0.958966076374054,"y":0.6340690851211548,"z":-0.12316590547561646},{"x":1.0091760158538818,"y":0.513163685798645,"z":-0.1669173687696457},{"x":1.0500398874282837,"y":0.4401213526725769,"z":-0.18539226055145264},{"x":1.0784142017364502,"y":0.3717501163482666,"z":-0.19871991872787476}]]
|
||||
script.js:124 [[{"x":0.8776692748069763,"y":0.9794930219650269,"z":8.433294738097175e-7},{"x":0.766642689704895,"y":0.9466441869735718,"z":-0.05124255269765854},{"x":0.6594768762588501,"y":0.8723697662353516,"z":-0.08625027537345886},{"x":0.5718791484832764,"y":0.8253118991851807,"z":-0.11823857575654984},{"x":0.4991890490055084,"y":0.8105403184890747,"z":-0.1528962105512619},{"x":0.7049950957298279,"y":0.5987946391105652,"z":-0.05566227436065674},{"x":0.6567143201828003,"y":0.4445483684539795,"z":-0.09828417748212814},{"x":0.6250503659248352,"y":0.35092055797576904,"z":-0.13565491139888763},{"x":0.5972045660018921,"y":0.2665860652923584,"z":-0.1640111654996872},{"x":0.7888489961624146,"y":0.565778911113739,"z":-0.06668970733880997},{"x":0.7700496912002563,"y":0.3724973797798157,"z":-0.09802161902189255},{"x":0.7606698274612427,"y":0.25348588824272156,"z":-0.1286533772945404},{"x":0.7526750564575195,"y":0.1461450457572937,"z":-0.1534213274717331},{"x":0.8700288534164429,"y":0.5803363919258118,"z":-0.08493747562170029},{"x":0.8613367080688477,"y":0.39746761322021484,"z":-0.12068911641836166},{"x":0.8624588251113892,"y":0.28641998767852783,"z":-0.14563211798667908},{"x":0.8600950241088867,"y":0.18428021669387817,"z":-0.16497386991977692},{"x":0.9486103653907776,"y":0.6308736801147461,"z":-0.10791129618883133},{"x":0.9692126512527466,"y":0.5038874745368958,"z":-0.13871809840202332},{"x":0.9849631786346436,"y":0.4236794114112854,"z":-0.14747002720832825},{"x":0.9936079978942871,"y":0.34860876202583313,"z":-0.15447156131267548}]]
|
||||
script.js:124 [[{"x":0.848159670829773,"y":1.0008916854858398,"z":-0.0000011557824564079056},{"x":0.7417598962783813,"y":0.9552924633026123,"z":-0.05090413615107536},{"x":0.6432437896728516,"y":0.8645215034484863,"z":-0.08779945969581604},{"x":0.5934991836547852,"y":0.7656782865524292,"z":-0.12811553478240967},{"x":0.5840463638305664,"y":0.6548700332641602,"z":-0.15898381173610687},{"x":0.6728586554527283,"y":0.6117318868637085,"z":-0.019537007436156273},{"x":0.6446182131767273,"y":0.4605117440223694,"z":-0.09431519359350204},{"x":0.6451900601387024,"y":0.5802738070487976,"z":-0.1383778154850006},{"x":0.6639842391014099,"y":0.6768710017204285,"z":-0.15662185847759247},{"x":0.750218391418457,"y":0.6014033555984497,"z":-0.028139809146523476},{"x":0.7336814999580383,"y":0.4404744505882263,"z":-0.10710230469703674},{"x":0.7233364582061768,"y":0.6113216280937195,"z":-0.12909288704395294},{"x":0.7289826273918152,"y":0.7160245180130005,"z":-0.1229843944311142},{"x":0.825264036655426,"y":0.6112036108970642,"z":-0.04972316324710846},{"x":0.8089388012886047,"y":0.46831607818603516,"z":-0.1244504377245903},{"x":0.7914180755615234,"y":0.6325792074203491,"z":-0.11027873307466507},{"x":0.7950381636619568,"y":0.7391717433929443,"z":-0.07875888049602509},{"x":0.9036799669265747,"y":0.6446822881698608,"z":-0.07615258544683456},{"x":0.8772179484367371,"y":0.5380708575248718,"z":-0.12274006009101868},{"x":0.8535578846931458,"y":0.6540143489837646,"z":-0.10579916089773178},{"x":0.8527462482452393,"y":0.7431488633155823,"z":-0.07916611433029175}]]
|
||||
script.js:124 [[{"x":0.841061532497406,"y":1.0571227073669434,"z":-0.0000013352405403566081},{"x":0.7331993579864502,"y":0.9930845499038696,"z":-0.03946785628795624},{"x":0.636512815952301,"y":0.8924055099487305,"z":-0.07126521319150925},{"x":0.5897271037101746,"y":0.7811851501464844,"z":-0.10707393288612366},{"x":0.5900688171386719,"y":0.6652304530143738,"z":-0.13392068445682526},{"x":0.6749743223190308,"y":0.6711767911911011,"z":-0.008179258555173874},{"x":0.6393575072288513,"y":0.5549972057342529,"z":-0.08093161135911942},{"x":0.6437657475471497,"y":0.6815142035484314,"z":-0.12405861169099808},{"x":0.667112410068512,"y":0.7675915956497192,"z":-0.14268696308135986},{"x":0.7480028867721558,"y":0.6602217555046082,"z":-0.020291604101657867},{"x":0.7143656015396118,"y":0.5466830134391785,"z":-0.09110676497220993},{"x":0.7081539034843445,"y":0.703610360622406,"z":-0.10809145122766495},{"x":0.7219190001487732,"y":0.7798627614974976,"z":-0.10261251777410507},{"x":0.8230068683624268,"y":0.6709165573120117,"z":-0.04504462704062462},{"x":0.7884954214096069,"y":0.5707893967628479,"z":-0.1117701530456543},{"x":0.779591977596283,"y":0.722224235534668,"z":-0.09141984581947327},{"x":0.7940711379051208,"y":0.7928798198699951,"z":-0.060229089111089706},{"x":0.9028377532958984,"y":0.7030512094497681,"z":-0.07408294826745987},{"x":0.8578648567199707,"y":0.6329119205474854,"z":-0.11239631474018097},{"x":0.8424752354621887,"y":0.7446366548538208,"z":-0.08993270248174667},{"x":0.8545011878013611,"y":0.8054699301719666,"z":-0.062107574194669724}]]
|
||||
script.js:124 [[{"x":0.8202288150787354,"y":1.1722571849822998,"z":-0.0000014220609045878518},{"x":0.7181037664413452,"y":1.131995439529419,"z":-0.02344546653330326},{"x":0.6213394403457642,"y":1.0292171239852905,"z":-0.04407235234975815},{"x":0.5845188498497009,"y":0.9353037476539612,"z":-0.06878068298101425},{"x":0.6016528606414795,"y":0.8462224006652832,"z":-0.08865717053413391},{"x":0.6548718214035034,"y":0.7721044421195984,"z":-0.006744460202753544},{"x":0.6075148582458496,"y":0.7307649850845337,"z":-0.06167932599782944},{"x":0.6010696291923523,"y":0.833366870880127,"z":-0.10198137164115906},{"x":0.6173583269119263,"y":0.9188797473907471,"z":-0.12248013913631439},{"x":0.7325752973556519,"y":0.7495954036712646,"z":-0.022255804389715195},{"x":0.679798424243927,"y":0.7393556237220764,"z":-0.0716724768280983},{"x":0.6729722619056702,"y":0.854890763759613,"z":-0.09165877848863602},{"x":0.688216507434845,"y":0.9349474310874939,"z":-0.09539247304201126},{"x":0.8119821548461914,"y":0.763379693031311,"z":-0.04549994319677353},{"x":0.7565029859542847,"y":0.7801496386528015,"z":-0.09370864927768707},{"x":0.7537546753883362,"y":0.9015036225318909,"z":-0.08558235317468643},{"x":0.7691783905029297,"y":0.9729694128036499,"z":-0.06976901739835739},{"x":0.8901439905166626,"y":0.8061813116073608,"z":-0.07207512855529785},{"x":0.8336741328239441,"y":0.8312281370162964,"z":-0.10454371571540833},{"x":0.8205039501190186,"y":0.9323990345001221,"z":-0.09063383936882019},{"x":0.8299579620361328,"y":0.9952386617660522,"z":-0.07097698003053665}]]
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 [[{"x":0.9059802889823914,"y":0.4420326352119446,"z":-1.9939236040045216e-7},{"x":0.8867474794387817,"y":0.40834441781044006,"z":-0.0032773083075881004},{"x":0.8620104193687439,"y":0.37859779596328735,"z":-0.011041558347642422},{"x":0.8375500440597534,"y":0.36288562417030334,"z":-0.01932063326239586},{"x":0.8170599937438965,"y":0.3501429855823517,"z":-0.02862936072051525},{"x":0.8793790936470032,"y":0.34129658341407776,"z":-0.018600713461637497},{"x":0.8612026572227478,"y":0.312574177980423,"z":-0.031023511663079262},{"x":0.8398833274841309,"y":0.3080388605594635,"z":-0.03941141068935394},{"x":0.8219737410545349,"y":0.3116580545902252,"z":-0.04473546892404556},{"x":0.885513186454773,"y":0.35877788066864014,"z":-0.02297045849263668},{"x":0.8444751501083374,"y":0.3664717376232147,"z":-0.03363531455397606},{"x":0.823562741279602,"y":0.386599063873291,"z":-0.036933548748493195},{"x":0.8139265179634094,"y":0.40186384320259094,"z":-0.04011458903551102},{"x":0.886612057685852,"y":0.38659533858299255,"z":-0.027223005890846252},{"x":0.848463773727417,"y":0.394472599029541,"z":-0.036062948405742645},{"x":0.8313329219818115,"y":0.40783146023750305,"z":-0.03442220017313957},{"x":0.8211755156517029,"y":0.4189153015613556,"z":-0.03402038291096687},{"x":0.886059582233429,"y":0.41559526324272156,"z":-0.03150904178619385},{"x":0.855987012386322,"y":0.4241280257701874,"z":-0.03921050578355789},{"x":0.8420834541320801,"y":0.4319705367088318,"z":-0.03716794028878212},{"x":0.8338919878005981,"y":0.43831610679626465,"z":-0.03482401743531227}]]
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
script.js:124 []
|
||||
@@ -0,0 +1,53 @@
|
||||
from fastapi import FastAPI, Request
|
||||
import uvicorn
|
||||
from starlette.middleware.cors import CORSMiddleware
|
||||
import pickle
|
||||
import numpy as np
|
||||
|
||||
app = FastAPI()
|
||||
|
||||
origins = ["http://localhost"]
|
||||
app.add_middleware(
|
||||
CORSMiddleware,
|
||||
allow_origins=["*"],
|
||||
allow_credentials=True,
|
||||
allow_methods=["*"],
|
||||
allow_headers=["*"],
|
||||
)
|
||||
|
||||
model_dict = pickle.load(open("./model.p", "rb"))
|
||||
model = model_dict["model"]
|
||||
labels_dict = {0: "hello", 1: "i love you", 2: "yes", 3: "good", 4: "bad", 5: "okay", 6: "you", 7: "i/i'm", 8: "why", 9: "no"}
|
||||
|
||||
@app.get("/")
|
||||
async def read_root():
|
||||
return {"message": "Hello World"}
|
||||
|
||||
@app.post("/")
|
||||
async def process_json(request: Request):
|
||||
# Get the JSON data from the request
|
||||
data = await request.json()
|
||||
if len(data) == 0:
|
||||
return {"result": "no data"}
|
||||
hands_data = data
|
||||
data_aux = []
|
||||
|
||||
# hand landmarks are taken from data.json
|
||||
if len(hands_data) == 42:
|
||||
hand = hands_data[:21]
|
||||
else:
|
||||
hand = hands_data
|
||||
|
||||
for landmark in hand:
|
||||
x = landmark["x"]
|
||||
y = landmark["y"]
|
||||
data_aux.append(x)
|
||||
data_aux.append(y)
|
||||
|
||||
prediction = model.predict([np.asarray(data_aux)])
|
||||
predicted_sign = labels_dict[int(prediction[0])]
|
||||
print(predicted_sign)
|
||||
return {"result": predicted_sign}
|
||||
|
||||
if __name__ == "__main__":
|
||||
uvicorn.run(app, host="0.0.0.0", port=8000)
|
||||
Binary file not shown.
@@ -0,0 +1,8 @@
|
||||
home = C:\Users\mihne\AppData\Local\Programs\Python\Python310
|
||||
implementation = CPython
|
||||
version_info = 3.10.7.final.0
|
||||
virtualenv = 20.16.7
|
||||
include-system-site-packages = false
|
||||
base-prefix = C:\Users\mihne\AppData\Local\Programs\Python\Python310
|
||||
base-exec-prefix = C:\Users\mihne\AppData\Local\Programs\Python\Python310
|
||||
base-executable = C:\Users\mihne\AppData\Local\Programs\Python\Python310\python.exe
|
||||
@@ -0,0 +1,60 @@
|
||||
# DEPENDENCIES ------>
|
||||
import json
|
||||
import pickle
|
||||
import numpy as np
|
||||
|
||||
|
||||
model_dict = pickle.load(open("./model.p", "rb"))
|
||||
model = model_dict["model"]
|
||||
labels_dict = {1: "hello", 2: "Nothing"}
|
||||
|
||||
hands_data = json.load(open("./data.json", "r"))
|
||||
data_aux = []
|
||||
|
||||
# hand landmarks are taken from data.json
|
||||
hand = hands_data[0]
|
||||
for landmark in hand:
|
||||
x = landmark["x"]
|
||||
y = landmark["y"]
|
||||
z = landmark["z"]
|
||||
data_aux.append(x)
|
||||
data_aux.append(y)
|
||||
data_aux.append(z)
|
||||
|
||||
prediction = model.predict([np.asarray(data_aux)])
|
||||
print(prediction)
|
||||
predicted_sign = labels_dict[int(prediction[0])]
|
||||
print(predicted_sign)
|
||||
data_aux = []
|
||||
|
||||
|
||||
# if results.multi_hand_landmarks:
|
||||
# for hand_landmarks in results.multi_hand_landmarks:
|
||||
# mp_drawing.draw_landmarks(
|
||||
# frame,
|
||||
# hand_landmarks,
|
||||
# mp_hands.HAND_CONNECTIONS,
|
||||
# mp_drawing_styles.get_default_hand_landmarks_style(),
|
||||
# mp_drawing_styles.get_default_hand_connections_style())
|
||||
#
|
||||
# for i in range(len(hand_landmarks.landmark)):
|
||||
# x = hand_landmarks.landmark[i].x
|
||||
# y = hand_landmarks.landmark[i].y
|
||||
# z = hand_landmarks.landmark[i].z
|
||||
# data_aux.append(x)
|
||||
# data_aux.append(y)
|
||||
# data_aux.append(z)
|
||||
# x_.append(x)
|
||||
# y_.append(y)
|
||||
# prediction = model.predict([np.asarray(data_aux)])
|
||||
# predicted_sign = labels_dict[int(prediction[0])]
|
||||
# data_aux = []
|
||||
# x_ = []
|
||||
# y_ = []
|
||||
#
|
||||
# cv2.imshow("Handy", frame)
|
||||
# cv2.waitKey(1)
|
||||
|
||||
#
|
||||
# capture.release()
|
||||
# cv2.destroyAllWindows()
|
||||
@@ -0,0 +1,35 @@
|
||||
import os
|
||||
import cv2
|
||||
|
||||
DATA_DIR = "./data"
|
||||
if not os.path.exists(DATA_DIR):
|
||||
os.makedirs(DATA_DIR)
|
||||
|
||||
cap = cv2.VideoCapture(0)
|
||||
while True:
|
||||
# ask user for word number to collect data for
|
||||
i = int(input("Enter word number (-1 to eit): "))
|
||||
if i == -1:
|
||||
break
|
||||
if os.path.exists(os.path.join(DATA_DIR, str(i))):
|
||||
# find last image number
|
||||
count = len(os.listdir(os.path.join(DATA_DIR, str(i))))
|
||||
else:
|
||||
os.makedirs(os.path.join(DATA_DIR, str(i)))
|
||||
count = 0
|
||||
print("Collecting data")
|
||||
done = False
|
||||
# takes a picture every time the space bar is pressed, ends when q is pressed
|
||||
print("Press space to take a picture, press q to stop")
|
||||
while not done:
|
||||
ret, frame = cap.read()
|
||||
cv2.imshow("Frame", frame)
|
||||
if cv2.waitKey(25) == ord(" "):
|
||||
print("Saving image " + str(count))
|
||||
cv2.imwrite(os.path.join(DATA_DIR, str(i), str(count) + ".jpg"), frame)
|
||||
count += 1
|
||||
if cv2.waitKey(25) == ord("q"):
|
||||
done = True
|
||||
break
|
||||
cap.release()
|
||||
cv2.destroyAllWindows()
|
||||
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<link rel="stylesheet" href="./control_utils3d.css">
|
||||
<link rel="stylesheet" href="./control_utils.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils@0.3/camera_utils.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils@0.6/control_utils.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils_3d@0.3/control_utils_3d.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils@0.3/drawing_utils.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.4/hands.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--div class="topnav">
|
||||
<img class = "Home-page-2" src ="./logoacasa.png">
|
||||
<a href="./index.html" cursor = "pointer"> </a>
|
||||
</img-->
|
||||
|
||||
<style>
|
||||
.landmark-grid-container {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
background-color: transparent;
|
||||
opacity: 75%;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="container-item-11">
|
||||
<div class="landmark-grid-container"> </div>
|
||||
</div>
|
||||
<div class="container-item-22">
|
||||
<video class="input_video"></video>
|
||||
<canvas class="output_canvas"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rezultat-cuvinte">
|
||||
<div class = "container-item-11">
|
||||
<div class = "p41" id = "p4">
|
||||
<a href="#" class="btn-neon">
|
||||
<div class="fade-out-image"></div>
|
||||
<svg height="50" width="180">
|
||||
<polyline points="0,0 180,0 180,50 0,50 0,00">
|
||||
</polyline>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "container-item-22">
|
||||
<div class ="buton-fill">
|
||||
<div class = "p31" id="p3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="loading">
|
||||
<div class="spinner"></div>
|
||||
<div class="message">
|
||||
Loading
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-panel">
|
||||
</div>
|
||||
|
||||
|
||||
<canvas id="background"></canvas>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js'></script>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js'></script>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.0.3/chroma.min.js'></script>
|
||||
<script type="module" src="./script.js"></script>
|
||||
<script src="./wave.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,339 @@
|
||||
.control-panel-shell {
|
||||
position: absolute;
|
||||
display: none;
|
||||
margin-left: 20px;
|
||||
margin-top: 20px;
|
||||
left: 0;
|
||||
transition: 150ms
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
color: #fff;
|
||||
z-index: 100
|
||||
}
|
||||
|
||||
.control-panel.hide {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.control-panel-expander {
|
||||
position: relative;
|
||||
top: 30px;
|
||||
height: 14px;
|
||||
background-color: #5e5757;
|
||||
padding: 2px;
|
||||
border-radius: 0 3px 3px 0;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.hamburger-menu {
|
||||
width: 12px;
|
||||
height: 2px;
|
||||
background-color: #111;
|
||||
margin: 2px
|
||||
}
|
||||
|
||||
.control-panel-entry {
|
||||
width: 250px;
|
||||
background-color: #222;
|
||||
border-radius: 0;
|
||||
box-sizing: content-box;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-family: "Google Sans", "Titillium Web", sans-serif;
|
||||
font-size: 15px;
|
||||
line-height: 25px;
|
||||
padding: 12px 16px;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
border: none;
|
||||
border-bottom: 1px solid #333
|
||||
}
|
||||
|
||||
.control-panel-entry:first-child {
|
||||
border-radius: 28px 28px 0 0
|
||||
}
|
||||
|
||||
.control-panel-entry:last-child {
|
||||
border-radius: 0 0 28px 28px;
|
||||
border: none
|
||||
}
|
||||
|
||||
.control-panel-text {
|
||||
cursor: default;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.control-panel-toggle .label {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.control-panel-toggle .value {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 15px;
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 40px;
|
||||
background: #000
|
||||
}
|
||||
|
||||
.control-panel-toggle.yes .value {
|
||||
background-color: #309f93;
|
||||
color: #a3faa3
|
||||
}
|
||||
|
||||
.control-panel-toggle.no .value {
|
||||
background-color: #d32f50;
|
||||
color: #f19e9e
|
||||
}
|
||||
|
||||
.control-panel-slider .value {
|
||||
position: relative;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.control-panel-slider .callout {
|
||||
position: absolute;
|
||||
right: 25px
|
||||
}
|
||||
|
||||
.control-panel-fps {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.control-panel-fps canvas {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
background-color: #222;
|
||||
margin: 5px 0;
|
||||
z-index: 0
|
||||
}
|
||||
|
||||
.control-panel-fps .fps-text {
|
||||
position: absolute;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
backface-visibility: hidden
|
||||
}
|
||||
|
||||
.control-panel-source-picker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.control-panel-source-picker .inputs {
|
||||
display: none
|
||||
}
|
||||
|
||||
.control-panel-source-picker .file-selection div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-items: center
|
||||
}
|
||||
|
||||
.control-panel-source-picker .file-selection div img {
|
||||
margin-left: 8px
|
||||
}
|
||||
|
||||
.source-selection {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.video-controls {
|
||||
width: 100%;
|
||||
display: none;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
margin: 12px 0 4px
|
||||
}
|
||||
|
||||
.video-controls * {
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.video-controls img {
|
||||
margin: 0 8px 0 -6px
|
||||
}
|
||||
|
||||
.pause-button {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.video-track {
|
||||
height: 5px;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
flex-grow: 1;
|
||||
margin-right: 10px
|
||||
}
|
||||
|
||||
.video-slider-ball {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
display: none;
|
||||
border-radius: 50%
|
||||
}
|
||||
|
||||
.video-time {
|
||||
padding-left: .1rem
|
||||
}
|
||||
|
||||
.dropdown-wrapper {
|
||||
position: relative;
|
||||
user-select: none;
|
||||
width: calc(100% - 28px)
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.dropdown-trigger {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background: #333;
|
||||
color: #fff;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.dropdown-trigger span {
|
||||
max-width: calc(100% - 30px);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.dropdown-options {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
color: #fff;
|
||||
background: #333;
|
||||
transition: all .5s;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
z-index: 2
|
||||
}
|
||||
|
||||
.dropdown.open .dropdown-options {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: all
|
||||
}
|
||||
|
||||
.dropdown-option {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
padding: 0 5px;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
transition: all .5s;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.dropdown-option * {
|
||||
padding-right: .5rem
|
||||
}
|
||||
|
||||
.dropdown-option:hover {
|
||||
cursor: pointer;
|
||||
background-color: #b2b2b2
|
||||
}
|
||||
|
||||
.dropdown-option.selected {
|
||||
color: #fff;
|
||||
background-color: #305c91
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: relative;
|
||||
height: 15px;
|
||||
width: 10.6066017178px;
|
||||
margin-left: 10.6066017178px;
|
||||
transform: scale(0.8)
|
||||
}
|
||||
|
||||
.arrow::before,
|
||||
.arrow::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: .15rem;
|
||||
height: 100%;
|
||||
transition: all .5s;
|
||||
backface-visibility: hidden
|
||||
}
|
||||
|
||||
.arrow::before {
|
||||
left: -5px;
|
||||
transform: rotate(135deg);
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.arrow::after {
|
||||
left: 5px;
|
||||
transform: rotate(-135deg);
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.open .arrow::before {
|
||||
left: -5px;
|
||||
transform: rotate(45deg)
|
||||
}
|
||||
|
||||
.open .arrow::after {
|
||||
left: 5px;
|
||||
transform: rotate(-45deg);
|
||||
backface-visibility: hidden
|
||||
}
|
||||
|
||||
.fps-30 {
|
||||
position: absolute;
|
||||
font-size: 8px;
|
||||
top: 45%;
|
||||
left: 10px
|
||||
}
|
||||
|
||||
.fps-60 {
|
||||
position: absolute;
|
||||
font-size: 8px;
|
||||
top: 15%;
|
||||
left: 10px
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
.viewer-widget-js {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.viewer-widget-js .controls {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.viewer-widget-js .landmark-label-js {
|
||||
font-size: 0%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0
|
||||
}
|
||||
|
||||
.viewer-widget-js * {
|
||||
user-select: none
|
||||
}
|
||||
|
||||
.viewer-widget-js:active {
|
||||
cursor: grabbing
|
||||
}
|
||||
@@ -0,0 +1,221 @@
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Poppins", serif;
|
||||
}
|
||||
|
||||
#background {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
html
|
||||
{
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 1.2em
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(-45deg, #2a5596, #cf8fa7, #23a6d5, #23d5ab);
|
||||
background-size: 400% 400%;
|
||||
animation: gradient 14s ease infinite;
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
h2{
|
||||
font-size: 2.4rem;
|
||||
font-family: "Lexend Deca Light", serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p,a{
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.feedback-section{
|
||||
box-shadow: 0 0 10rem #fff,
|
||||
0 0 15rem #fff,
|
||||
0 0 12rem #b05af7,
|
||||
0 0 15rem #d99ef0,
|
||||
0 0 15rem #7305f9,
|
||||
inset 0 0 12rem #2f0a6c;
|
||||
padding: 5rem;
|
||||
}
|
||||
|
||||
.rating{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 3.2rem;
|
||||
margin: 4.8rem 0 3.2rem 0;
|
||||
}
|
||||
|
||||
/*.child p:first-child{}*/
|
||||
|
||||
/*.unhappy p, .happy p, .satisfied p{}*/
|
||||
:is(.unhappy, .happy, .satisfied) h3{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:is(.unhappy, .happy, .satisfied, .response-screen) p:first-child{
|
||||
background-color: #2f0a6c;
|
||||
border-radius: 1rem;
|
||||
font-size: 5.6rem;
|
||||
padding: 1.6rem 2.4rem;
|
||||
cursor: pointer;
|
||||
margin-bottom: 1.2rem;
|
||||
transition: all .3s linear;
|
||||
}
|
||||
|
||||
|
||||
:is(.unhappy, .happy, .satisfied) p:first-child:hover{
|
||||
scale: 1.05;
|
||||
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
|
||||
}
|
||||
|
||||
.feedback-btn{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a{
|
||||
padding: 1.2rem 3.2rem;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
background-color: #20262E;
|
||||
color: #fff;
|
||||
font-size: 1.8rem;
|
||||
border-radius: .5rem;
|
||||
/*display: inline-block;*/
|
||||
font-family: "Lexend Deca Light", serif;
|
||||
}
|
||||
|
||||
.active{
|
||||
scale: 1.05;
|
||||
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 2px, rgb(51, 51, 51) 0px 0px 0px 2px;
|
||||
border-radius: .6rem;
|
||||
}
|
||||
.response-screen {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.response-screen h3{
|
||||
margin: 1.2rem 0 3.2rem 0;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.response-screen .feedback-button{
|
||||
margin-top: 3.2rem;
|
||||
}
|
||||
|
||||
.glow-on-hover {
|
||||
width: 220px;
|
||||
height: 46px;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
background: #111;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
border-radius: 10px;
|
||||
font-size: 22px;
|
||||
bottom: -12px;
|
||||
text-align: center;
|
||||
color:white;
|
||||
letter-spacing: .2rem;
|
||||
padding: 5px;
|
||||
font-family: 'Montserrat',sans-serif;
|
||||
|
||||
}
|
||||
|
||||
.glow-on-hover:before {
|
||||
content: '';
|
||||
background: linear-gradient(45deg, #1e0e85, #00ffd5, #002bff, #7a00ff, #ff00c8);
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left:-2px;
|
||||
background-size: 400%;
|
||||
z-index: -1;
|
||||
filter: blur(5px);
|
||||
width: calc(100% + 4px);
|
||||
height: calc(100% + 4px);
|
||||
animation: glowing 20s linear infinite;
|
||||
opacity: 0;
|
||||
transition: opacity .3s ease-in-out;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.glow-on-hover:active {
|
||||
color: #000
|
||||
}
|
||||
|
||||
.glow-on-hover:active:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.glow-on-hover:hover:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.glow-on-hover:after {
|
||||
z-index: -1;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #290760;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@keyframes glowing {
|
||||
0% { background-position: 0 0; }
|
||||
50% { background-position: 400% 0; }
|
||||
100% { background-position: 0 0; }
|
||||
}
|
||||
|
||||
.input1
|
||||
{
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
background-color: #290760;
|
||||
|
||||
display: flex;
|
||||
font-size: 28px;
|
||||
color:white;
|
||||
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
|
||||
border-style: solid;
|
||||
border-width: 3px;
|
||||
border-color: #140760;
|
||||
|
||||
|
||||
}
|
||||
|
||||
::placeholder
|
||||
{
|
||||
color: white;
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<link rel="stylesheet" href="./control_utils3d.css">
|
||||
<link rel="stylesheet" href="./control_utils.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils@0.3/camera_utils.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils@0.6/control_utils.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils_3d@0.3/control_utils_3d.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils@0.3/drawing_utils.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.4/hands.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="./feedback.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<section class="feedback-section">
|
||||
<h2>How satisfied are you <br> with our services?</h2>
|
||||
<div class="rating">
|
||||
<div class="child unhappy">
|
||||
<p>👎</p>
|
||||
<h3>Unhappy</h3>
|
||||
</div>
|
||||
<div class="child happy ">
|
||||
<p>👍</p>
|
||||
<h3>Happy</h3>
|
||||
</div>
|
||||
<div class="child satisfied">
|
||||
<p>😁</p>
|
||||
<h3>Satisfied</h3>
|
||||
</div>
|
||||
</div>
|
||||
<form action="https://formspree.io/medeleanrafael@yahoo.com" method="POST">
|
||||
<input class = "input1" id = "text" placeholder = "Give us ur honest opinion!">
|
||||
<div class="feedback-btn">
|
||||
<button class="glow-on-hover"id="btn" type="button">Send Review</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<canvas id="background"></canvas>
|
||||
|
||||
</body>
|
||||
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js'></script>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js'></script>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.0.3/chroma.min.js'></script>
|
||||
<script type="module" src="./feedback.jss"></script>
|
||||
<script src="./wave.js"></script>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,52 @@
|
||||
const rating = document.querySelector('.rating');
|
||||
const child = document.querySelectorAll('.child');
|
||||
const feedback_section = document.querySelector('.feedback-section');
|
||||
const btn = document.querySelector('#btn');
|
||||
|
||||
let icon;
|
||||
rating.addEventListener('click', (event) => {
|
||||
|
||||
icon = event.target.parentNode;
|
||||
|
||||
for(let i=0; i<child.length; i++){
|
||||
console.log(child[i])
|
||||
child[i].classList.remove('active');
|
||||
}
|
||||
|
||||
if(!icon.classList.contains('active')){
|
||||
icon.classList.add('active');
|
||||
}
|
||||
// console.log(event.target.parentNode);
|
||||
})
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
console.log(icon);
|
||||
|
||||
let user_feedback;
|
||||
let user_feedback_icon;
|
||||
|
||||
if(icon === undefined){
|
||||
user_feedback = "";
|
||||
}else{
|
||||
user_feedback = icon.children[1].innerText;
|
||||
user_feedback_icon = icon.children[0].innerText;
|
||||
}
|
||||
|
||||
if(user_feedback !== ""){
|
||||
// console.log(user_feedback_icon)
|
||||
feedback_section.innerHTML = `
|
||||
<div class="response-screen ">
|
||||
<p>${user_feedback_icon}</p>
|
||||
<h3>your Feedback: ${user_feedback}</h3>
|
||||
<p>💖 Thank You for your response</p>
|
||||
|
||||
<div class="feedback-button">
|
||||
<a href="index.html">Back</a>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
|
||||
|
||||
})
|
||||
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title></title>
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="topnav">
|
||||
<img class = "logo1" src="./logo.png"></img>
|
||||
<div class="dropdown">
|
||||
<button class="dropbtn"><img class = "linkedin" src="./linkedin.png"></img>
|
||||
<i class="fa fa-caret-down"></i>
|
||||
</button>
|
||||
<div class="dropdown-content">
|
||||
<a href="https://www.linkedin.com/in/mihnea-dumitrana-7b9a68244/">Dumitrana Mihnea</a>
|
||||
<a href="https://www.linkedin.com/in/daniel-cujba-23aba0201/">Cujba Daniel</a>
|
||||
<a href="https://www.linkedin.com/in/rafael-catalin-medelean-052771268/">Medelean Rafael</a>
|
||||
<a href="https://www.linkedin.com/in/dinu-teodor-gabriel-57361a276/">Dinu Gabriel</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class = "tabel-mijloc">
|
||||
|
||||
<div class = "coloana-stanga">
|
||||
|
||||
<div>
|
||||
<h1>UnMute-IT ->Reach as far as you can see.</h1>
|
||||
<h1>UnMute-IT ->Reach as far as you can see.</h1>
|
||||
</div>
|
||||
|
||||
<h3> We have an innovative project powered by Mediapipe AI technology, by connecting with those who use American Sign Language, regardless of hearing ability.The combination of real-time hand gesture recognition and machine learning algorithms, enables users to effortlessly translate ASL signs into written text or even speech.
|
||||
Our goal aims to empower individuals with hearing impairments and a reliable, intuitive tool.
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class = "coloana-dreapta">
|
||||
</div>
|
||||
<div class = "buton">
|
||||
<div class = "mijloc">
|
||||
<a class="glow-on-hover" type="button" href="./app.html">Sign-Text</a>
|
||||
<a class="glow-on-hover" type="button" href="./reverse.html">Text-Sign</a>
|
||||
<a class="glow-on-hover" type="button" href="./feedback.html">Feedback</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
<canvas id="background"></canvas>
|
||||
|
||||
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js'></script>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js'></script>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.0.3/chroma.min.js'></script>
|
||||
<script src="./wave.js"></script>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<link rel="stylesheet" href="./control_utils3d.css">
|
||||
<link rel="stylesheet" href="./control_utils.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils@0.3/camera_utils.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils@0.6/control_utils.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils_3d@0.3/control_utils_3d.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils@0.3/drawing_utils.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.4/hands.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="./style-reverse.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<div class="container">
|
||||
|
||||
<div class="container-item-1">
|
||||
<div class="landmark-grid-container"> </div>
|
||||
</div>
|
||||
|
||||
<div class = "container-item-2">
|
||||
<div class = "input1">
|
||||
<input class = "btn-neon" id = "text" placeholder="Scrie aici mesajul pentru text-to-sign" >
|
||||
</input>
|
||||
</div>
|
||||
<div class = "reguli">
|
||||
<div class = "scriere-reguli">
|
||||
<div class = "btn-neon1">
|
||||
Press for Speech-to-Sign
|
||||
</div>
|
||||
<div class = "btn-neon2">
|
||||
Enter
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<canvas id="background"></canvas>
|
||||
|
||||
</body>
|
||||
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js'></script>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js'></script>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.0.3/chroma.min.js'></script>
|
||||
<script type="module" src="./reverse.js"></script>
|
||||
<script src="./wave.js"></script>
|
||||
|
||||
|
||||
</html>
|
||||
+477
@@ -0,0 +1,477 @@
|
||||
import DeviceDetector from "https://cdn.skypack.dev/device-detector-js@2.2.10";
|
||||
import ungapstructuredClone from 'https://cdn.jsdelivr.net/npm/@ungap/structured-clone@1.2.0/+esm'
|
||||
const mpHands = window;
|
||||
const drawingUtils = window;
|
||||
const controls = window;
|
||||
const controls3d = window;
|
||||
|
||||
let dict;
|
||||
|
||||
await fetch("./reverse_data.json").then(response => response.text()).then((text) => {dict = JSON.parse(text);});
|
||||
|
||||
let connections_one_hand=[
|
||||
[
|
||||
0,
|
||||
1
|
||||
],
|
||||
[
|
||||
1,
|
||||
2
|
||||
],
|
||||
[
|
||||
2,
|
||||
3
|
||||
],
|
||||
[
|
||||
3,
|
||||
4
|
||||
],
|
||||
[
|
||||
0,
|
||||
5
|
||||
],
|
||||
[
|
||||
5,
|
||||
6
|
||||
],
|
||||
[
|
||||
6,
|
||||
7
|
||||
],
|
||||
[
|
||||
7,
|
||||
8
|
||||
],
|
||||
[
|
||||
5,
|
||||
9
|
||||
],
|
||||
[
|
||||
9,
|
||||
10
|
||||
],
|
||||
[
|
||||
10,
|
||||
11
|
||||
],
|
||||
[
|
||||
11,
|
||||
12
|
||||
],
|
||||
[
|
||||
9,
|
||||
13
|
||||
],
|
||||
[
|
||||
13,
|
||||
14
|
||||
],
|
||||
[
|
||||
14,
|
||||
15
|
||||
],
|
||||
[
|
||||
15,
|
||||
16
|
||||
],
|
||||
[
|
||||
13,
|
||||
17
|
||||
],
|
||||
[
|
||||
0,
|
||||
17
|
||||
],
|
||||
[
|
||||
17,
|
||||
18
|
||||
],
|
||||
[
|
||||
18,
|
||||
19
|
||||
],
|
||||
[
|
||||
19,
|
||||
20
|
||||
]
|
||||
]
|
||||
|
||||
let connections_two_hands=[
|
||||
[
|
||||
0,
|
||||
1
|
||||
],
|
||||
[
|
||||
1,
|
||||
2
|
||||
],
|
||||
[
|
||||
2,
|
||||
3
|
||||
],
|
||||
[
|
||||
3,
|
||||
4
|
||||
],
|
||||
[
|
||||
0,
|
||||
5
|
||||
],
|
||||
[
|
||||
5,
|
||||
6
|
||||
],
|
||||
[
|
||||
6,
|
||||
7
|
||||
],
|
||||
[
|
||||
7,
|
||||
8
|
||||
],
|
||||
[
|
||||
5,
|
||||
9
|
||||
],
|
||||
[
|
||||
9,
|
||||
10
|
||||
],
|
||||
[
|
||||
10,
|
||||
11
|
||||
],
|
||||
[
|
||||
11,
|
||||
12
|
||||
],
|
||||
[
|
||||
9,
|
||||
13
|
||||
],
|
||||
[
|
||||
13,
|
||||
14
|
||||
],
|
||||
[
|
||||
14,
|
||||
15
|
||||
],
|
||||
[
|
||||
15,
|
||||
16
|
||||
],
|
||||
[
|
||||
13,
|
||||
17
|
||||
],
|
||||
[
|
||||
0,
|
||||
17
|
||||
],
|
||||
[
|
||||
17,
|
||||
18
|
||||
],
|
||||
[
|
||||
18,
|
||||
19
|
||||
],
|
||||
[
|
||||
19,
|
||||
20
|
||||
],
|
||||
[
|
||||
21,
|
||||
22
|
||||
],
|
||||
[
|
||||
22,
|
||||
23
|
||||
],
|
||||
[
|
||||
23,
|
||||
24
|
||||
],
|
||||
[
|
||||
24,
|
||||
25
|
||||
],
|
||||
[
|
||||
21,
|
||||
26
|
||||
],
|
||||
[
|
||||
26,
|
||||
27
|
||||
],
|
||||
[
|
||||
27,
|
||||
28
|
||||
],
|
||||
[
|
||||
28,
|
||||
29
|
||||
],
|
||||
[
|
||||
26,
|
||||
30
|
||||
],
|
||||
[
|
||||
30,
|
||||
31
|
||||
],
|
||||
[
|
||||
31,
|
||||
32
|
||||
],
|
||||
[
|
||||
32,
|
||||
33
|
||||
],
|
||||
[
|
||||
30,
|
||||
34
|
||||
],
|
||||
[
|
||||
34,
|
||||
35
|
||||
],
|
||||
[
|
||||
35,
|
||||
36
|
||||
],
|
||||
[
|
||||
36,
|
||||
37
|
||||
],
|
||||
[
|
||||
34,
|
||||
38
|
||||
],
|
||||
[
|
||||
21,
|
||||
38
|
||||
],
|
||||
[
|
||||
38,
|
||||
39
|
||||
],
|
||||
[
|
||||
39,
|
||||
40
|
||||
],
|
||||
[
|
||||
40,
|
||||
41
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
let colors=[
|
||||
{
|
||||
"list": [
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
6,
|
||||
7,
|
||||
8,
|
||||
9,
|
||||
10,
|
||||
11,
|
||||
12,
|
||||
13,
|
||||
14,
|
||||
15,
|
||||
16,
|
||||
17,
|
||||
18,
|
||||
19,
|
||||
20
|
||||
],
|
||||
"color": "Left"
|
||||
}
|
||||
]
|
||||
|
||||
let colors_two_hands=[
|
||||
{
|
||||
"list": [
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
6,
|
||||
7,
|
||||
8,
|
||||
9,
|
||||
10,
|
||||
11,
|
||||
12,
|
||||
13,
|
||||
14,
|
||||
15,
|
||||
16,
|
||||
17,
|
||||
18,
|
||||
19,
|
||||
20,
|
||||
21,
|
||||
22,
|
||||
23,
|
||||
24,
|
||||
25,
|
||||
26,
|
||||
27,
|
||||
28,
|
||||
29,
|
||||
30,
|
||||
31,
|
||||
32,
|
||||
33,
|
||||
34,
|
||||
35,
|
||||
36,
|
||||
37,
|
||||
38,
|
||||
39,
|
||||
40,
|
||||
41
|
||||
],
|
||||
"color": "Left"
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
|
||||
const landmarkContainer = document.getElementsByClassName('landmark-grid-container')[0];
|
||||
const buton1 = document.getElementsByClassName("btn-neon1")[0];
|
||||
const buton2 = document.getElementsByClassName("btn-neon2")[0];
|
||||
|
||||
|
||||
const grid = new controls3d.LandmarkGrid(landmarkContainer, {
|
||||
connectionColor: 0xCCCCCC,
|
||||
definedColors: [{ name: 'Left', value: 0xffa500 }, { name: 'Right', value: 0x00ffff }],
|
||||
range: 0.2,
|
||||
fitToGrid: false,
|
||||
labelSuffix: 'm',
|
||||
landmarkSize: 2.4,
|
||||
numCellsPerAxis: 0,
|
||||
showHidden: false,
|
||||
centered: false,
|
||||
isRotating: false,
|
||||
connectionWidth: 6.5,
|
||||
});
|
||||
grid.axesMaterial.visible = false;
|
||||
grid.gridMaterial.visible = false;
|
||||
grid.updateLandmarks([{"x":0,"y":0,"z":0},{"x":0.1,"y":0.1,"z":0.1}]);
|
||||
|
||||
document.body.classList.add('loaded');
|
||||
|
||||
let text = "";
|
||||
|
||||
function update() {
|
||||
if (dict[text] != undefined){
|
||||
if(dict[text].length == 21)
|
||||
grid.updateLandmarks(dict[text],connections_one_hand,colors);
|
||||
else{
|
||||
let landmarkTwoHands = structuredClone(dict[text]);
|
||||
for(let i = 0; i < landmarkTwoHands.length/2; i++){
|
||||
landmarkTwoHands[i].x = landmarkTwoHands[i].x + 0.07;
|
||||
landmarkTwoHands[i+21].x = landmarkTwoHands[i+21].x - 0.07;
|
||||
}
|
||||
grid.updateLandmarks(landmarkTwoHands,connections_two_hands,colors_two_hands);
|
||||
}
|
||||
}
|
||||
else{
|
||||
grid.updateLandmarks([{}]);
|
||||
}
|
||||
}
|
||||
|
||||
async function main() {
|
||||
setInterval(update, 50);
|
||||
}
|
||||
main();
|
||||
|
||||
async function translate(){
|
||||
let words_a = [];
|
||||
text = document.getElementById("text").value.toLowerCase();
|
||||
text = text.replace(/[^a-zA-Z ']/g, "");
|
||||
text = text.replace(/\s+/g, ' ').trim();
|
||||
let words = text.split(" ");
|
||||
for (let i = 0; i < words.length; i++) {
|
||||
text = words[i];
|
||||
if(dict[text] == undefined)
|
||||
continue;
|
||||
words_a.push(text);
|
||||
await new Promise(r => setTimeout(r, 1000));
|
||||
}
|
||||
text = "";
|
||||
}
|
||||
|
||||
let isRecording = false;
|
||||
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
|
||||
const recognition = new SpeechRecognition();
|
||||
recognition.lang = 'en-US';
|
||||
recognition.interimResults = true;
|
||||
recognition.continuous = true;
|
||||
recognition.maxAlternatives = 1;
|
||||
|
||||
recognition.onstart = (event) => {
|
||||
document.getElementById("text").value = "Listening...";
|
||||
}
|
||||
|
||||
recognition.onresult = (event) => {
|
||||
const speechToText = event.results[0][0].transcript;
|
||||
document.getElementById("text").value = speechToText;
|
||||
}
|
||||
|
||||
recognition.onend = (event) => {
|
||||
translate();
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener('keydown', (event) => {
|
||||
const keyName = event.key;
|
||||
if (keyName === 'Enter') {
|
||||
translate();
|
||||
return;
|
||||
}
|
||||
if(event.target.localName!="input"&&keyName === ' ' && isRecording){
|
||||
recognition.stop();
|
||||
isRecording = false;
|
||||
return;
|
||||
}
|
||||
if(event.target.localName!="input" && keyName === ' ' && !isRecording){
|
||||
recognition.start();
|
||||
isRecording = true;
|
||||
return;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
buton1.addEventListener("click" ,(event)=>{
|
||||
console.log("ads")
|
||||
if(isRecording){
|
||||
recognition.stop();
|
||||
isRecording = false;
|
||||
return;
|
||||
}
|
||||
if(!isRecording){
|
||||
recognition.start();
|
||||
isRecording = true;
|
||||
return;
|
||||
}
|
||||
})
|
||||
|
||||
buton2.addEventListener("click" ,(event)=>{
|
||||
translate();
|
||||
})
|
||||
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
+286
@@ -0,0 +1,286 @@
|
||||
import DeviceDetector from "https://cdn.skypack.dev/device-detector-js@2.2.10";
|
||||
const mpHands = window;
|
||||
const drawingUtils = window;
|
||||
const controls = window;
|
||||
const controls3d = window;
|
||||
|
||||
// Usage: testSupport({client?: string, os?: string}[])
|
||||
// Client and os are regular expressions.
|
||||
// See: https://cdn.jsdelivr.net/npm/device-detector-js@2.2.10/README.md for
|
||||
// legal values for client and os
|
||||
testSupport([
|
||||
{ client: 'Chrome' },
|
||||
]);
|
||||
|
||||
const utterThis = new SpeechSynthesisUtterance();
|
||||
const synth = window.speechSynthesis;
|
||||
let ourText = "";
|
||||
|
||||
let j = 0, res = "", diff_res = "", contor = 0,inauntru = 0;
|
||||
function changeInHtml(data){
|
||||
if(res == data.result)
|
||||
j++;
|
||||
else{
|
||||
j = 1;
|
||||
res = data.result;
|
||||
}
|
||||
if(j == 3 && (diff_res != res || res == "")){
|
||||
console.log(data.result)
|
||||
console.log(inauntru)
|
||||
if(data.result == "greeting" && contor == 0)
|
||||
{
|
||||
addBuffer("Hi everyone,so nice to see you all here today!");
|
||||
ourText = "Hi everyone,so nice to see you all here today!";
|
||||
utterThis.text = ourText
|
||||
synth.speak(utterThis)
|
||||
contor++;
|
||||
}
|
||||
if(data.result == "how" && contor == 1)
|
||||
{
|
||||
document.getElementById("p3").innerHTML = " ";
|
||||
addBuffer("How are you all feeling today?");
|
||||
ourText = "How are you all feeling today?";
|
||||
utterThis.text = ourText
|
||||
synth.speak(utterThis)
|
||||
contor++;
|
||||
}
|
||||
if(data.result == "custom2" && contor == 2)
|
||||
{
|
||||
document.getElementById("p3").innerHTML = " ";
|
||||
addBuffer("Our inability to form deep connections in a world where we are more connected than ever!");
|
||||
ourText = "Today I wanted to come here and raise some awareness about a big problem everyone encounters. Our inability to form deep connections in a world where we are more connected than ever!";
|
||||
utterThis.text = ourText
|
||||
synth.speak(utterThis)
|
||||
contor++;
|
||||
}
|
||||
if(contor > 2)
|
||||
{
|
||||
if(data.result != "custom1")
|
||||
{
|
||||
if(data.result == "okay" && inauntru == 0)
|
||||
{
|
||||
|
||||
ourText = document.getElementById("p3").innerHTML;
|
||||
utterThis.text = ourText
|
||||
synth.speak(utterThis)
|
||||
|
||||
document.getElementById("p3").innerHTML = " ";
|
||||
return;
|
||||
}
|
||||
if(data.result == "custom2")
|
||||
{
|
||||
addBuffer("Together we can change the world!This is only the beginning!");
|
||||
}
|
||||
else
|
||||
{
|
||||
addBuffer(data.result);
|
||||
}
|
||||
|
||||
}
|
||||
if(data.result == "custom1" && inauntru == 0)
|
||||
{
|
||||
document.getElementById("p3").innerHTML = " ";
|
||||
inauntru = 1;
|
||||
}
|
||||
else if(data.result == "custom1" && inauntru == 1)
|
||||
{
|
||||
ourText = document.getElementById("p3").innerHTML;
|
||||
utterThis.text = ourText
|
||||
synth.speak(utterThis)
|
||||
|
||||
document.getElementById("p3").innerHTML = " ";
|
||||
inauntru = 0;
|
||||
}
|
||||
}
|
||||
|
||||
diff_res = res;
|
||||
j = 0;
|
||||
}
|
||||
}
|
||||
function addBuffer(data){
|
||||
|
||||
document.getElementById("p3").innerHTML += " " + data;
|
||||
}
|
||||
function isCorrectData(data){
|
||||
if(data.result != "no data"){
|
||||
|
||||
changeInHtml(data);
|
||||
document.getElementById("p4").innerHTML = '<a href="#" class="btn-neon_a"><div class="fade-out-image"> </div><svg height="50" width="180"><div id="p2"> </div><polyline points="0,0 180,0 180,50 0,50 0,00"></polyline></svg></a>';
|
||||
document.getElementById("p2").innerHTML = data.result;
|
||||
}
|
||||
else{
|
||||
document.getElementById("p4").innerHTML = '<a href="#" class="btn-neon"><div class="fade-out-image"> </div><svg height="50" width="180"><div id="p2"> </div><polyline points="0,0 180,0 180,50 0,50 0,00"></polyline></svg></a>';
|
||||
}
|
||||
|
||||
}
|
||||
function exportToJsonFile(jsonData) {
|
||||
if(jsonData != []){
|
||||
let dataStr = JSON.stringify(jsonData);
|
||||
if(dataStr != []){
|
||||
fetch('http://10.10.11.2:8000/', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(jsonData)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
// Handle the response data
|
||||
if(data != [])
|
||||
isCorrectData(data);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function testSupport(supportedDevices) {
|
||||
const deviceDetector = new DeviceDetector();
|
||||
const detectedDevice = deviceDetector.parse(navigator.userAgent);
|
||||
let isSupported = false;
|
||||
for (const device of supportedDevices) {
|
||||
if (device.client !== undefined) {
|
||||
const re = new RegExp(`^${device.client}$`);
|
||||
if (!re.test(detectedDevice.client.name)) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
if (device.os !== undefined) {
|
||||
const re = new RegExp(`^${device.os}$`);
|
||||
if (!re.test(detectedDevice.os.name)) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
isSupported = true;
|
||||
break;
|
||||
}
|
||||
if (!isSupported) {
|
||||
alert(`This demo, running on ${detectedDevice.client.name}/${detectedDevice.os.name}, ` +
|
||||
`is not well supported at this time, continue at your own risk.`);
|
||||
}
|
||||
}
|
||||
// Our input frames will come from here.
|
||||
const videoElement = document.getElementsByClassName('input_video')[0];
|
||||
const canvasElement = document.getElementsByClassName('output_canvas')[0];
|
||||
const controlsElement = document.getElementsByClassName('control-panel')[0];
|
||||
const canvasCtx = canvasElement.getContext('2d');
|
||||
const config = { locateFile: (file) => {
|
||||
return `https://cdn.jsdelivr.net/npm/@mediapipe/hands@${mpHands.VERSION}/${file}`;
|
||||
} };
|
||||
// We'll add this to our control panel later, but we'll save it here so we can
|
||||
// call tick() each time the graph runs.
|
||||
// Optimization: Turn off animated spinner after its hiding animation is done.
|
||||
const spinner = document.querySelector('.loading');
|
||||
spinner.ontransitionend = () => {
|
||||
spinner.style.display = 'none';
|
||||
};
|
||||
const landmarkContainer = document.getElementsByClassName('landmark-grid-container')[0];
|
||||
const grid = new controls3d.LandmarkGrid(landmarkContainer, {
|
||||
connectionColor: 0x23a6d5,
|
||||
definedColors: [{ name: 'Left', value: 0x23d5ab }, { name: 'Right', value: 0xcf8fa7 }],
|
||||
range: 0.2,
|
||||
fitToGrid: false,
|
||||
labelSuffix: 'm',
|
||||
landmarkSize: 2.4,
|
||||
numCellsPerAxis: 0,
|
||||
showHidden: false,
|
||||
centered: false,
|
||||
isRotating: false,
|
||||
connectionWidth: 6.5,
|
||||
});
|
||||
grid.axesMaterial.visible = false;
|
||||
grid.gridMaterial.visible = false;
|
||||
let i = 0;
|
||||
function onResults(results) {
|
||||
// Hide the spinner.
|
||||
document.body.classList.add('loaded');
|
||||
// Draw the overlays.
|
||||
canvasCtx.save();
|
||||
canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
|
||||
canvasCtx.drawImage(results.image, 0, 0, canvasElement.width, canvasElement.height);
|
||||
if (results.multiHandLandmarks && results.multiHandedness) {
|
||||
for (let index = 0; index < results.multiHandLandmarks.length; index++) {
|
||||
const classification = results.multiHandedness[index];
|
||||
const isRightHand = classification.label === 'Right';
|
||||
const landmarks = results.multiHandLandmarks[index];
|
||||
drawingUtils.drawConnectors(canvasCtx, landmarks, mpHands.HAND_CONNECTIONS, { color: isRightHand ? '#00FF00' : '#FF0000' });
|
||||
drawingUtils.drawLandmarks(canvasCtx, landmarks, {
|
||||
color: isRightHand ? '#00FF00' : '#FF0000',
|
||||
fillColor: isRightHand ? '#FF0000' : '#00FF00',
|
||||
radius: (data) => {
|
||||
return drawingUtils.lerp(data.from.z, -0.15, .1, 10, 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
canvasCtx.restore();
|
||||
if (results.multiHandWorldLandmarks) {
|
||||
// We only get to call updateLandmarks once, so we need to cook the data to
|
||||
// fit. The landmarks just merge, but the connections need to be offset.
|
||||
const landmarks = results.multiHandWorldLandmarks.reduce((prev, current) => [...prev, ...current], []);
|
||||
const colors = [];
|
||||
let connections = [];
|
||||
for (let loop = 0; loop < results.multiHandWorldLandmarks.length; ++loop) {
|
||||
const offset = loop * mpHands.HAND_CONNECTIONS.length;
|
||||
const offsetConnections = mpHands.HAND_CONNECTIONS.map((connection) => [connection[0] + offset, connection[1] + offset]);
|
||||
connections = connections.concat(offsetConnections);
|
||||
const classification = results.multiHandedness[loop];
|
||||
for(let i = loop*21; i < (loop+1)*21; i++){
|
||||
if(classification.label === 'Right'){
|
||||
landmarks[i].x = landmarks[i].x+0.1;
|
||||
}
|
||||
else{
|
||||
landmarks[i].x = landmarks[i].x-0.1;
|
||||
}
|
||||
}
|
||||
colors.push({
|
||||
list: offsetConnections.map((unused, i) => i + offset),
|
||||
color: classification.label,
|
||||
});
|
||||
}
|
||||
grid.updateLandmarks(landmarks, connections, colors);
|
||||
}
|
||||
else {
|
||||
grid.updateLandmarks([]);
|
||||
}
|
||||
i += 1;
|
||||
if(i == 20){
|
||||
exportToJsonFile(results.multiHandLandmarks.reduce((prev, current) => [...prev, ...current], []));
|
||||
i = 0
|
||||
}
|
||||
}
|
||||
const hands = new mpHands.Hands(config);
|
||||
hands.onResults(onResults);
|
||||
// Present a control panel through which the user can manipulate the solution
|
||||
// options.
|
||||
new controls
|
||||
.ControlPanel(controlsElement, {
|
||||
maxNumHands: 2,
|
||||
modelComplexity: 1,
|
||||
minDetectionConfidence: 0.5,
|
||||
minTrackingConfidence: 0.5
|
||||
})
|
||||
.add([
|
||||
new controls.StaticText({ title: 'Sign language recognition' }),
|
||||
new controls.SourcePicker({
|
||||
onFrame: async (input, size) => {
|
||||
const aspect = size.height / size.width;
|
||||
let width, height;
|
||||
if (window.innerWidth > window.innerHeight) {
|
||||
height = window.innerHeight;
|
||||
width = height / aspect;
|
||||
}
|
||||
else {
|
||||
width = window.innerWidth;
|
||||
height = width * aspect;
|
||||
}
|
||||
canvasElement.width = width;
|
||||
canvasElement.height = height;
|
||||
await hands.send({ image: input });
|
||||
},
|
||||
}),
|
||||
])
|
||||
.on(x => {
|
||||
const options = x;
|
||||
hands.setOptions(options);
|
||||
});
|
||||
@@ -0,0 +1,285 @@
|
||||
|
||||
#background {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
html
|
||||
{
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 1.2em
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(-45deg, #2a5596, #cf8fa7, #23a6d5, #23d5ab);
|
||||
background-size: 400% 400%;
|
||||
animation: gradient 14s ease infinite;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.container
|
||||
{
|
||||
position: absolute;
|
||||
top: 5vh;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
.container-item-1
|
||||
{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
float: left;
|
||||
justify-content: center;
|
||||
}
|
||||
.landmark-grid-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
background-color: transparent;
|
||||
opacity: 50%;
|
||||
}
|
||||
.container-item-2
|
||||
{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
float: right;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
.input1
|
||||
{
|
||||
position: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 80%;
|
||||
height: 50%;
|
||||
float: top;
|
||||
background-color: transparent;
|
||||
}
|
||||
.reguli
|
||||
{
|
||||
position: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 45%;
|
||||
height: 50%;
|
||||
top: 30vh;
|
||||
float: bottom;
|
||||
position: absolute;
|
||||
background-color: transparent;
|
||||
}
|
||||
.scriere-reguli
|
||||
{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
height: 20%;
|
||||
float: top;
|
||||
padding: 60px;
|
||||
}
|
||||
|
||||
|
||||
.btn-neon{
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
line-height: 50px;
|
||||
border-style: solid;
|
||||
border-width: 3px;
|
||||
border-color: white;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: 1s;
|
||||
transition-delay: .9s;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
box-shadow: 0 0 2rem #cf8fa7,
|
||||
0 0 5rem #623ac8,
|
||||
0 0 2rem #cf8fa7,
|
||||
0 0 5rem #623ac8,
|
||||
0 0 5rem #cf8fa7,
|
||||
inset 0 0 2rem #623ac8;
|
||||
|
||||
}
|
||||
|
||||
::placeholder
|
||||
{
|
||||
color:white
|
||||
}
|
||||
|
||||
.btn-neon:hover{
|
||||
box-shadow: 0 0 10px #cf8fa7,
|
||||
0 0 40px #cf8fa7,
|
||||
0 0 80px #cf8fa7;
|
||||
background-color: #cf8fa7;
|
||||
}
|
||||
|
||||
.btn-neon:hover polyline{
|
||||
stroke-dashoffset: -460;
|
||||
}
|
||||
|
||||
.btn-neon svg{
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.btn-neon svg polyline{
|
||||
fill: transparent;
|
||||
stroke: #ff6f61;
|
||||
stroke-width: 0px;
|
||||
stroke-dasharray: 40 460;
|
||||
stroke-dashoffset: 40;
|
||||
transition: .8s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
.regulament
|
||||
{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
height: 80%;
|
||||
float: bottom;
|
||||
}
|
||||
|
||||
.btn-neon1{
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
line-height: 50px;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
border-style: solid;
|
||||
border-width: 3px;
|
||||
border-color: white;
|
||||
padding: 90px;
|
||||
transition: 1s;
|
||||
transition-delay: .9s;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
box-shadow: 0 0 2rem #623ac8,
|
||||
0 0 2rem #603be7,
|
||||
0 0 2rem #623ac8,
|
||||
0 0 2rem #603be7,
|
||||
0 0 2rem #623ac8,
|
||||
inset 0 0 3rem #603be7;
|
||||
|
||||
}
|
||||
|
||||
.btn-neon1:hover{
|
||||
box-shadow: 0 0 10px #2a5596,
|
||||
0 0 40px #2a5596,
|
||||
0 0 80px #2a5596;
|
||||
background-color: #2a5596;
|
||||
}
|
||||
|
||||
.btn-neon1:hover polyline{
|
||||
stroke-dashoffset: -460;
|
||||
}
|
||||
|
||||
.btn-neon1 svg{
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.btn-neon1 svg polyline{
|
||||
fill: transparent;
|
||||
stroke: #ff6f61;
|
||||
stroke-width: 0px;
|
||||
stroke-dasharray: 40 460;
|
||||
stroke-dashoffset: 40;
|
||||
transition: .8s ease-in-out;
|
||||
}
|
||||
|
||||
.btn-neon2{
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
line-height: 50px;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
border-style: solid;
|
||||
border-width: 3px;
|
||||
border-color: white;
|
||||
padding: 90px;
|
||||
transition: 1s;
|
||||
transition-delay: .9s;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
box-shadow: 0 0 2rem #623ac8,
|
||||
0 0 2rem #603be7,
|
||||
0 0 2rem #623ac8,
|
||||
0 0 2rem #603be7,
|
||||
0 0 2rem #623ac8,
|
||||
inset 0 0 3rem #603be7;
|
||||
|
||||
}
|
||||
|
||||
.btn-neon2:hover{
|
||||
box-shadow: 0 0 10px #2a5596,
|
||||
0 0 40px #2a5596,
|
||||
0 0 80px #2a5596;
|
||||
background-color: #2a5596;
|
||||
}
|
||||
|
||||
.btn-neon2:hover polyline{
|
||||
stroke-dashoffset: -460;
|
||||
}
|
||||
|
||||
.btn-neon2 svg{
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.btn-neon2 svg polyline{
|
||||
fill: transparent;
|
||||
stroke: #ff6f61;
|
||||
stroke-width: 0px;
|
||||
stroke-dasharray: 40 460;
|
||||
stroke-dashoffset: 40;
|
||||
transition: .8s ease-in-out;
|
||||
}
|
||||
|
||||
+754
@@ -0,0 +1,754 @@
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
}
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: lightblue;
|
||||
}
|
||||
html
|
||||
{
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-size: 1.2em
|
||||
}
|
||||
body {
|
||||
background: linear-gradient(-45deg, #2a5596, #cf8fa7, #23a6d5, #23d5ab);
|
||||
background-size: 400% 400%;
|
||||
animation: gradient 14s ease infinite;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.topnav a {
|
||||
color: black;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
word-spacing: 3px;
|
||||
}
|
||||
|
||||
.topnav a:hover {
|
||||
background-color: transparent;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.topnav a.active {
|
||||
float: left;
|
||||
background-color: transparent;
|
||||
color: black;
|
||||
}
|
||||
.logo1
|
||||
{
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
position: absolute;
|
||||
}
|
||||
a.dreapta{
|
||||
float: right;
|
||||
text-align: center;
|
||||
}
|
||||
.dropdown {
|
||||
padding: 5.5px 25px;
|
||||
float: right;
|
||||
}
|
||||
.linkedin{
|
||||
width: 100px;
|
||||
height: 28px;
|
||||
}
|
||||
.mana{
|
||||
width: 800px;
|
||||
height: 580px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 8px 8px white inset;
|
||||
}
|
||||
.dropdown .dropbtn {
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: inherit;
|
||||
background-color: inherit;
|
||||
font-family: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navbar a:hover, .dropdown:hover .dropbtn {
|
||||
background-color: transparent;
|
||||
}
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: transparent;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
float: none;
|
||||
color:black;
|
||||
font-family: 'Montserrat',sans-serif;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tabel-mijloc
|
||||
{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
position: absolute;
|
||||
bottom: 25vh;
|
||||
color:white;
|
||||
font-family: 'Montserrat',sans-serif;
|
||||
}
|
||||
|
||||
.buton
|
||||
{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
position: absolute;
|
||||
bottom: -30vh;
|
||||
color:white;
|
||||
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: .2rem;
|
||||
font-family: 'Montserrat',sans-serif;
|
||||
}
|
||||
.mijloc
|
||||
{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
.mijloc > a{
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.coloana-stanga
|
||||
{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 3x black;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
float:left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.coloana-dreapta
|
||||
{
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
float: right;
|
||||
}
|
||||
|
||||
h3 {
|
||||
clear: left;
|
||||
opacity: 0;
|
||||
filter: blur(4px);
|
||||
letter-spacing: .1rem;
|
||||
line-height: 1.2cm;
|
||||
padding: 1px;
|
||||
font-size: 1.2vw;
|
||||
}
|
||||
|
||||
h3:nth-child(1) {
|
||||
animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
|
||||
}
|
||||
|
||||
h3:nth-child(2) {
|
||||
animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
|
||||
}
|
||||
|
||||
.waviy {
|
||||
position: relative;
|
||||
font-size: 60px;
|
||||
color: #480777;
|
||||
}
|
||||
.waviy span {
|
||||
font-family: 'Alfa Slab One', cursive;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
animation: waviy 1s infinite;
|
||||
animation-delay: calc(.1s * var(--i));
|
||||
|
||||
}
|
||||
@keyframes waviy {
|
||||
0%,40%,100% {
|
||||
transform: translateY(0)
|
||||
}
|
||||
20% {
|
||||
transform: translateY(-20px)
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #fff;
|
||||
font-size: 2vw;
|
||||
letter-spacing: .2rem;
|
||||
position: absolute;
|
||||
top: 0.5px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
h1:nth-child(2) {
|
||||
color: transparent;
|
||||
-webkit-text-stroke: 2px #161622;
|
||||
}
|
||||
|
||||
h1:nth-child(1) {
|
||||
color: #541184;
|
||||
animation: animate 5s ease-in-out infinite;
|
||||
}
|
||||
@media(max-width: 767px){
|
||||
h1{
|
||||
display: none;
|
||||
}
|
||||
.logo1{
|
||||
width: 40%;
|
||||
height: 20%;
|
||||
}
|
||||
h3{
|
||||
font-size: 3.6vw;
|
||||
line-height: 1cm;
|
||||
}
|
||||
.dropdown{
|
||||
padding: 25.5px 10px;
|
||||
}
|
||||
.glow-on-hover{
|
||||
display: flex;
|
||||
cursor:none;
|
||||
}
|
||||
}
|
||||
@keyframes animate {
|
||||
100%,
|
||||
0% {
|
||||
clip-path: polygon(
|
||||
45% 0%,
|
||||
44% 16%,
|
||||
50% 33%,
|
||||
60% 54%,
|
||||
59% 65%,
|
||||
89% 95%,
|
||||
95% 97%,
|
||||
98% 99%,
|
||||
100% 0%
|
||||
);
|
||||
}
|
||||
|
||||
50% {
|
||||
clip-path: polygon(
|
||||
0% 60%,
|
||||
15% 65%,
|
||||
34% 66%,
|
||||
51% 62%,
|
||||
67% 50%,
|
||||
84% 45%,
|
||||
100% 46%,
|
||||
100% 100%,
|
||||
0% 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
100% {
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale {
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
.cover-container {
|
||||
max-width: 42em;
|
||||
}
|
||||
|
||||
.masthead {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.masthead-brand {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.fade-out-image { animation: fadeout 5s; }
|
||||
@keyframes fadeout {
|
||||
0% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
.nav-masthead .nav-link {
|
||||
padding: .25rem 0;
|
||||
font-weight: 700;
|
||||
color: #212529;
|
||||
background-color: transparent;
|
||||
border-bottom: .25rem solid transparent;
|
||||
}
|
||||
|
||||
.nav-masthead .nav-link:hover,
|
||||
.nav-masthead .nav-link:focus {
|
||||
border-bottom-color: rgba(0, 0, 0, .25);
|
||||
}
|
||||
|
||||
.nav-masthead .nav-link+.nav-link {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 48em) {
|
||||
.masthead-brand {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.nav-masthead {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.cover {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
#background {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.logo {
|
||||
bottom: 10px;
|
||||
right: 20px;
|
||||
}
|
||||
.logo .title {
|
||||
color: white;
|
||||
}
|
||||
.logo .subtitle {
|
||||
position: relative;
|
||||
color: white;
|
||||
left: -30px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
position: absolute;
|
||||
float: left;
|
||||
background-color: transparent;
|
||||
height: 25%;
|
||||
width: 25%;
|
||||
top: 500vh;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
align-items: center;
|
||||
backface-visibility: hidden;
|
||||
justify-content: center;
|
||||
opacity: 1;
|
||||
transition: opacity 1s;
|
||||
}
|
||||
.loading .message {
|
||||
font-size: x-large;
|
||||
}
|
||||
.loading .spinner {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
animation: spin 1s linear infinite;
|
||||
border: 32px solid #bebebe;
|
||||
border-top: 32px solid #3498db;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.loaded .loading {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.shoutout {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 40px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
.glow-on-hover {
|
||||
width: 220px;
|
||||
height: 25px;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
background: #111;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
border-radius: 10px;
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
color:white;
|
||||
font-family: 'Montserrat',sans-serif;
|
||||
|
||||
}
|
||||
|
||||
.glow-on-hover:before {
|
||||
content: '';
|
||||
background: linear-gradient(45deg, #31074e, #00ffd5, #002bff, #7a00ff, #ff00c8);
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left:-2px;
|
||||
background-size: 400%;
|
||||
z-index: -1;
|
||||
filter: blur(5px);
|
||||
width: calc(100% + 4px);
|
||||
height: calc(100% + 4px);
|
||||
animation: glowing 20s linear infinite;
|
||||
opacity: 0;
|
||||
transition: opacity .3s ease-in-out;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.glow-on-hover:active {
|
||||
color: #000
|
||||
}
|
||||
|
||||
.glow-on-hover:active:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.glow-on-hover:hover:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.glow-on-hover:after {
|
||||
z-index: -1;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #290760;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@keyframes glowing {
|
||||
0% { background-position: 0 0; }
|
||||
50% { background-position: 400% 0; }
|
||||
100% { background-position: 0 0; }
|
||||
}
|
||||
|
||||
.container {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
bottom: 45vh;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.container-item-1{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
}
|
||||
.container-item-11{
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
}
|
||||
.p41
|
||||
{
|
||||
height: 100%;
|
||||
}
|
||||
.container-item-2{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
border-radius: 10%;
|
||||
}
|
||||
.container-item-22{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
border-radius: 10%;
|
||||
}
|
||||
|
||||
.input_video {
|
||||
display: none;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
|
||||
}
|
||||
.input_video.selfie {
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
.input_image {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.canvas-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
|
||||
}
|
||||
|
||||
.output_canvas {
|
||||
width: 55%;
|
||||
height: 85%;
|
||||
position: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
bottom: 49vh;
|
||||
border-radius: 10%;
|
||||
}
|
||||
|
||||
.rezultat-cuvinte
|
||||
{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
float: left;
|
||||
align-content: left;
|
||||
top: 50vh;
|
||||
}
|
||||
|
||||
.ultimu
|
||||
{
|
||||
width: 100%;
|
||||
height: 3%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
align-content: right;
|
||||
bottom: 25vh;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.buton-fill2
|
||||
{
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-align: right;
|
||||
|
||||
font-size: 20px;
|
||||
color: #f5f5f5;
|
||||
background-color: #2e2e38;
|
||||
opacity: 50%;
|
||||
|
||||
width: 150px;
|
||||
height: 70px;
|
||||
|
||||
box-shadow: 0 0 10rem #fff,
|
||||
0 0 15rem #fff,
|
||||
0 0 12rem #b05af7,
|
||||
0 0 15rem #d99ef0,
|
||||
0 0 15rem #7305f9,
|
||||
inset 0 0 12rem #2f0a6c;
|
||||
|
||||
position: flex;
|
||||
justify-content: right;
|
||||
float: right;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.btn-neon{
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
|
||||
font-size: 20px;
|
||||
color: #f5f5f5;
|
||||
background-color: palevioletred;
|
||||
opacity: 10%;
|
||||
|
||||
box-shadow: 0 0 4rem #b411ef,
|
||||
0 0 12rem #691ad0,
|
||||
0 0 12rem #b05af7,
|
||||
0 0 18rem #d99ef0,
|
||||
0 0 28rem #7305f9,
|
||||
inset 0 0 20rem #2f0a6c;
|
||||
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
|
||||
transition: 1s;
|
||||
transition-delay: .9s;
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
.btn-neon_a{
|
||||
display: hidden;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
|
||||
font-size: 45px;
|
||||
align-items: center;
|
||||
color: #f5f5f5;
|
||||
background-color: #2e2e38;
|
||||
opacity: 50%;
|
||||
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
|
||||
transition: 1s;
|
||||
transition-delay: .9s;
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-shadow: 0 0 50px #17b25d,
|
||||
0 0 100px #17b25d,
|
||||
0 0 150px #17b25d;
|
||||
background-color: #17b25d;
|
||||
}
|
||||
|
||||
.btn-neon_a polyline{
|
||||
stroke-dashoffset: -460;
|
||||
}
|
||||
svg
|
||||
{
|
||||
left: 50%;
|
||||
height:50;
|
||||
width:180;
|
||||
}
|
||||
.btn-neon svg{
|
||||
position: flex;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.btn-neon svg polyline{
|
||||
fill: transparent;
|
||||
stroke: #17b25d;
|
||||
stroke-width: 1px;
|
||||
stroke-dasharray: 40 460;
|
||||
stroke-dashoffset: 60;
|
||||
transition: .8s ease-in-out;
|
||||
}
|
||||
|
||||
.p31
|
||||
{
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.buton-fill
|
||||
{
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
|
||||
font-size: 39px;
|
||||
color: #f5f5f5;
|
||||
background-color: #1387a4;
|
||||
opacity: 50%;
|
||||
|
||||
width: 90%;
|
||||
height: 450px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.clear
|
||||
{
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
|
||||
font-size: 20px;
|
||||
color: #f5f5f5;
|
||||
background-color: #2e2e38;
|
||||
opacity: 50%;
|
||||
|
||||
width: 650px;
|
||||
height: 70px;
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.Home-page-2
|
||||
{
|
||||
padding: 0px;
|
||||
position: absolute;
|
||||
display: absolute;
|
||||
margin: 0px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background-color: transparent;
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
body {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #000;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.progress {
|
||||
background: white;
|
||||
justify-content: flex-start;
|
||||
border-radius: 100px;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 0 5px;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.progress-value {
|
||||
animation: load 3s normal forwards;
|
||||
box-shadow: 0 10px 40px -10px #2a5596;
|
||||
border-radius: 100px;
|
||||
background: #2a5596;
|
||||
height: 30px;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
@keyframes load {
|
||||
0% { width: 0; }
|
||||
100% { width: 100%; }
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
<html>
|
||||
<body>
|
||||
<link rel="stylesheet" href="./test.css">
|
||||
<div class="progress">
|
||||
<div class="progress-value"></div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="./test.js"></script>
|
||||
</html>
|
||||
+159
@@ -0,0 +1,159 @@
|
||||
|
||||
App({ el: 'background' });
|
||||
|
||||
function App(conf) {
|
||||
conf = {
|
||||
fov: 70,
|
||||
cameraZ: 75,
|
||||
xyCoef: 50,
|
||||
zCoef: 10,
|
||||
lightIntensity: 0.7,
|
||||
ambientColor: 0x000000,
|
||||
light1Color: 0x0E09DC,
|
||||
light2Color: 0x1CD1E1,
|
||||
light3Color: 0x18C02C,
|
||||
light4Color: 0xee3bcf,
|
||||
...conf };
|
||||
|
||||
|
||||
let renderer, scene, camera, cameraCtrl;
|
||||
let width, height, cx, cy, wWidth, wHeight;
|
||||
const TMath = THREE.Math;
|
||||
const waveHeight = document.getElementsByClassName('landmark-grid-container')[0];
|
||||
console.log(waveHeight);
|
||||
let plane;
|
||||
const simplex = new SimplexNoise();
|
||||
|
||||
|
||||
|
||||
const mouse = new THREE.Vector2();
|
||||
const mousePlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
|
||||
const mousePosition = new THREE.Vector3();
|
||||
const raycaster = new THREE.Raycaster();
|
||||
|
||||
conf.xyCoef = 6;
|
||||
conf.zCoef = 7;
|
||||
|
||||
|
||||
init();
|
||||
|
||||
function init() {
|
||||
renderer = new THREE.WebGLRenderer({ canvas: document.getElementById(conf.el), antialias: true, alpha: true });
|
||||
camera = new THREE.PerspectiveCamera(conf.fov);
|
||||
camera.position.z = conf.cameraZ;
|
||||
|
||||
updateSize();
|
||||
window.addEventListener('resize', updateSize, false);
|
||||
|
||||
initScene();
|
||||
animate();
|
||||
}
|
||||
|
||||
function initScene() {
|
||||
scene = new THREE.Scene();
|
||||
initLights();
|
||||
|
||||
let mat = new THREE.MeshLambertMaterial({ color: 0xffffff, side: THREE.DoubleSide });
|
||||
// let mat = new THREE.MeshPhongMaterial({ color: 0xffffff });
|
||||
// let mat = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.5, metalness: 0.8 });
|
||||
let geo = new THREE.PlaneBufferGeometry(wWidth, wHeight, wWidth / 2, wHeight / 2);
|
||||
plane = new THREE.Mesh(geo, mat);
|
||||
scene.add(plane);
|
||||
|
||||
plane.rotation.x = -Math.PI / 2 - 0.2;
|
||||
plane.position.y = -25;
|
||||
camera.position.z = 60;
|
||||
}
|
||||
|
||||
function initLights() {
|
||||
const r = 30;
|
||||
const y = 10;
|
||||
const lightDistance = 500;
|
||||
|
||||
// light = new THREE.AmbientLight(conf.ambientColor);
|
||||
// scene.add(light);
|
||||
|
||||
light1 = new THREE.PointLight(conf.light1Color, conf.lightIntensity, lightDistance);
|
||||
light1.position.set(0, y, r);
|
||||
scene.add(light1);
|
||||
light2 = new THREE.PointLight(conf.light2Color, conf.lightIntensity, lightDistance);
|
||||
light2.position.set(0, -y, -r);
|
||||
scene.add(light2);
|
||||
light3 = new THREE.PointLight(conf.light3Color, conf.lightIntensity, lightDistance);
|
||||
light3.position.set(r, y, 0);
|
||||
scene.add(light3);
|
||||
light4 = new THREE.PointLight(conf.light4Color, conf.lightIntensity, lightDistance);
|
||||
light4.position.set(-r, y, 0);
|
||||
scene.add(light4);
|
||||
}
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
animatePlane();
|
||||
animateLights();
|
||||
|
||||
renderer.render(scene, camera);
|
||||
};
|
||||
|
||||
function animatePlane() {
|
||||
gArray = plane.geometry.attributes.position.array;
|
||||
const time = Date.now() * 0.0002;
|
||||
|
||||
for (let i = 0; i < gArray.length; i += 3) {
|
||||
if(!waveHeight)
|
||||
gArray[i + 2] = simplex.noise4D(gArray[i] / conf.xyCoef, gArray[i + 1] / conf.xyCoef, time, 5) * conf.zCoef;
|
||||
else
|
||||
gArray[i + 2] = simplex.noise4D(gArray[i] / conf.xyCoef, gArray[i + 1] / conf.xyCoef, time, 100) * conf.zCoef;
|
||||
|
||||
}
|
||||
plane.geometry.attributes.position.needsUpdate = true;
|
||||
// plane.geometry.computeBoundingSphere();
|
||||
}
|
||||
|
||||
function animateLights() {
|
||||
const time = Date.now() * 0.001;
|
||||
const d = 50;
|
||||
light1.position.x = Math.sin(time * 0.1) * d;
|
||||
light1.position.z = Math.cos(time * 0.2) * d;
|
||||
light2.position.x = Math.cos(time * 0.3) * d;
|
||||
light2.position.z = Math.sin(time * 0.4) * d;
|
||||
light3.position.x = Math.sin(time * 0.5) * d;
|
||||
light3.position.z = Math.sin(time * 0.6) * d;
|
||||
light4.position.x = Math.sin(time * 0.7) * d;
|
||||
light4.position.z = Math.cos(time * 0.8) * d;
|
||||
}
|
||||
|
||||
function updateLightsColors() {
|
||||
conf.light1Color = chroma.random().hex();
|
||||
conf.light2Color = chroma.random().hex();
|
||||
conf.light3Color = chroma.random().hex();
|
||||
conf.light4Color = chroma.random().hex();
|
||||
light1.color = new THREE.Color(conf.light1Color);
|
||||
light2.color = new THREE.Color(conf.light2Color);
|
||||
light3.color = new THREE.Color(conf.light3Color);
|
||||
light4.color = new THREE.Color(conf.light4Color);
|
||||
// console.log(conf);
|
||||
}
|
||||
|
||||
function updateSize() {
|
||||
width = window.innerWidth;cx = width / 2;
|
||||
height = window.innerHeight;cy = height / 2;
|
||||
if (renderer && camera) {
|
||||
renderer.setSize(width, height);
|
||||
camera.aspect = width / height;
|
||||
camera.updateProjectionMatrix();
|
||||
const wsize = getRendererSize();
|
||||
wWidth = wsize[0];
|
||||
wHeight = wsize[1];
|
||||
}
|
||||
}
|
||||
|
||||
function getRendererSize() {
|
||||
const cam = new THREE.PerspectiveCamera(camera.fov, camera.aspect);
|
||||
const vFOV = cam.fov * Math.PI / 180;
|
||||
const height = 2 * Math.tan(vFOV / 2) * Math.abs(conf.cameraZ);
|
||||
const width = height * cam.aspect;
|
||||
return [width, height];
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user