uniknow/chat_front_svelte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

добавил регу и функцию на регу

Browse source
This commit is contained in:
UNIKNOW 2024-03-19 20:48:33 +04:00
parent e60c734c23
commit 5aecfa21a2
8 changed files with 232 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/app.css
View file

@ -1,3 +1,14 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: 'Comfortaa';
src: url('./fonts/Comfortaa-VariableFont_wght.ttf') format('truetype');
font-weight: 1 1000; /* Объявляем диапазон веса шрифта */
font-style: normal;
font-stretch: normal;
}
:root{
--fontColor: #FFFFFF;
}

8
src/app.html
View file

@ -13,6 +13,14 @@
html,body{
margin: 0;
padding: 0;
background-color: #101010;
}
:root{
--bg: #101010;
--gradient: linear-gradient(to right, #3C53FF, #7734AA);
--fontColor: #FFFFFF;
font-family: Comfortaa;
}
</style>
</body>

26
src/lib/userFunction.js
View file

@ -7,7 +7,6 @@ export async function UserCheck(){
})
if(!response.ok){
window.location.href = '/login'
return(response.status)
}
@ -17,6 +16,31 @@ export async function UserCheck(){
}
}
export async function handleRegister(username,password,email,date_of_birth){
const response = await fetch('http://localhost:8000/api/users/register',{
method:'POST',
credentials:"include",
headers:{
'Content-Type': 'application/json'
},
body: JSON.stringify({
"email": email,
"username": username,
"password": password,
"date_of_birth": date_of_birth
})
})
if(!response.ok){
console.log(response.status)
}
else{
const data = await response.json();
return data;
}
}
export async function handleLogin(username, password) {
const response = await fetch('http://localhost:8000/api/users/login', {

23
src/routes/+page.svelte
View file

@ -0,0 +1,23 @@
<script>
import Header from './Header.svelte';
import { onMount } from 'svelte';
import {UserCheck} from '$lib/userFunction.js';
onMount(async () => {
const userData = await UserCheck();
let userId = userData.id;
let chatId = 2;
if(userId === undefined)
window.location.href = '/login'
})
</script>
<Header />
<style>
</style>

5
src/routes/chatPage/+page.svelte
View file

@ -21,8 +21,12 @@
onMount(async () => {
const userData = await UserCheck();
let userId = userData.id;
let chatId = 2;
if(userId === undefined)
window.location.href = '/login'
const websocketUrl = `ws://localhost:8000/api/chat/ws/${chatId}?user_id=${userId}`;
messages = await getLastMessages();
@ -58,6 +62,7 @@
if (event.key === 'Enter' && !event.shiftKey) {
// Если нажат Enter и не нажат Shift, отправляем сообщение
sendMessage(event);
messageText = ""
event.preventDefault();
}

155
src/routes/register/+page.svelte
View file

@ -1,8 +1,153 @@
<script lang="ts">
import Header from '../Header.svelte';
<script>
import {handleRegister} from '$lib/userFunction.js'
let name,mail,password,password2,dateDay,dateMonth,dateYear;
async function SendData(){
let date = `${dateYear}-${dateMonth}-${dateDay}`;
console.log("Имя:", name, "Эл. почта:", mail, "Пароль:", password, "Повтор пароля:", password2, "Дата рождения:", date);
let jopa = await handleRegister(name,password,mail,date)
console.log(jopa)
}
let days = []
for(let i = 1;i <= 31;i++){
let day = i.toString().padStart(2,'0');
days.push(day)
}
const now = new Date();
const legalyear = now.getFullYear();
let years = []
for(let i = legalyear - 16;i > legalyear - 100;i--)
years.push(i)
</script>
<Header />
import
<button>нажми</button>
<body>
<div class="mainDiv">
<div class="jopa1">
<div class="marginDiv">
<h1>ЖОПА</h1>
<form on:submit|preventDefault={SendData}>
<h3>имя</h3>
<input type="text" maxlength="100" bind:value={name}>
<h3>эл почта</h3>
<input type="email" maxlength="100" bind:value={mail}>
<h3>пароль</h3>
<input type="password" maxlength="100" bind:value={password}>
<h3>повтори пароль (для уверенности)</h3>
<input type="password" maxlength="100" bind:value={password2}>
<h3>Дата рождения</h3>
<div class="birthday">
<select id="dayDropDown" bind:value={dateDay}>
{#each days as day}
<option value="{day}">{day}</option>
{/each}
</select>
<select id="monthDropDown" bind:value={dateMonth}>
<option value="01">Январь</option>
<option value="02">Февраль</option>
<option value="03">Март</option>
<option value="04">Апрель</option>
<option value="05">Май</option>
<option value="06">Июнь</option>
<option value="07">Июль</option>
<option value="08">Август</option>
<option value="09">Сентябрь</option>
<option value="10">Октябрь</option>
<option value="11">Ноябрь</option>
<option value="12">Декабрь</option>
</select>
<select id="yearDropDown" bind:value={dateYear}>
{#each years as year}
<option value="{year}">{year}</option>
{/each}
</select>
</div>
<button type="submit">Зарегаться</button>
</form>
</div>
</div>
</div>
</body>
<style lang="scss">
.marginDiv{
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
background-color: rgba($color: #509cc9, $alpha: 0.3);
}
.birthday{
display: flex;
flex-direction:row;
justify-content: space-between;
}
.jopa1{
width: 100%;
height: 100%;
}
.jopa1::before{
content: "";
background-image: url(../nnnoise.svg); opacity: 0.05;
width: 100%; height: 100%;
position: absolute; top: 50%; left: 50%;
transform: translate(-50%,-50%);
pointer-events: none;
}
.jopa1::after{
content: ""; background-image:
linear-gradient(rgba(255, 255, 255, 0.1),rgba(255, 255, 255, 0.1));
opacity: 0.15;
width: 100%; height: 100%;
position: absolute; top: 50%; left: 50%;
transform: translate(-50%,-50%);
pointer-events: none;
}
.mainDiv{
border: 2px solid transparent;
background: linear-gradient(#101010,#101010) padding-box,
var(--gradient) border-box;
border-radius: 15px;
aspect-ratio: 1 / 1.6;
height: calc(100% - 100px);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
h1,h2,h3,h4,h5,h6,p{
color: var(--fontColor);
}
h1{
display: flex;
justify-content: center;
}
</style>

BIN
static/fonts/Comfortaa-VariableFont_wght.ttf Normal file
View file

Binary file not shown.

7
static/nnnoise.svg Normal file
View file

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 700 700" width="700" height="700" opacity="1"><defs><filter id="nnnoise-filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
<feTurbulence type="turbulence" baseFrequency="0.2" numOctaves="4" seed="15" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"></feTurbulence>
<feSpecularLighting surfaceScale="12" specularConstant="3" specularExponent="20" lighting-color="#ffffff" x="0%" y="0%" width="100%" height="100%" in="turbulence" result="specularLighting">
<feDistantLight azimuth="3" elevation="86"></feDistantLight>
</feSpecularLighting>
</filter></defs><rect width="700" height="700" fill="#ffffff00" data-darkreader-inline-fill="" style="--darkreader-inline-fill: rgba(24, 26, 27, 0);"></rect><rect width="700" height="700" fill="#ffffff" filter="url(#nnnoise-filter)" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #181a1b;"></rect></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB