Added profile block

2025-03-04 15:11:46 +05:00 · 2025-03-04 15:11:46 +05:00 · 5f569ff556
commit 5f569ff556
parent 83cbb5efc8
6 changed files with 145 additions and 1 deletions
--- a/public/Fonts/PetrovSans-Trial-Bold.otf
+++ b/public/Fonts/PetrovSans-Trial-Bold.otf
--- a/public/Fonts/PetrovSans-Trial-Light.otf
+++ b/public/Fonts/PetrovSans-Trial-Light.otf
--- a/public/Fonts/PetrovSans-Trial-Regular.otf
+++ b/public/Fonts/PetrovSans-Trial-Regular.otf
--- a/public/Images/Screenshot
+++ b/public/Images/Screenshot
--- a/public/index.html
+++ b/public/index.html
@ -1 +1,25 @@
-<script src="https://telegram.org/js/telegram-web-app.js"></script>
+<script src="https://telegram.org/js/telegram-web-app.js"></script>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>CampfireID</title>
+    <link rel="stylesheet" href="./styles/main.css">
+</head>
+<body>
+        <div class="container">
+                <div class="profileblock">
+                    <img src="Images/Screenshot 2023-09-01 135601.png" alt="" class="profileimage">
+                    <p class="profilename">shelby</p>
+                </div>
+                <div class="statsblock">
+                    <p class="profilestats1">Роль: <span>Campfire</span>
+                    </p>
+                    <p class="profilestats2">Дата регистрации:</p>
+                    <p class="profilestats3">VPN доступ:</p>
+                    <p class="profilestats4">Minecraft доступ:</p>
+                </div>    
+        </div> 
+</body>
+</html>
--- a/public/styles/main.css
+++ b/public/styles/main.css
@ -0,0 +1,120 @@
+@font-face {
+    font-family: PetrovSans;
+    src: url(../Fonts/PetrovSans-Trial-Light.otf) format('opentype');
+    font-weight: 100;
+}
+@font-face {
+    font-family: PetrovSans;
+    src: url(../Fonts/PetrovSans-Trial-Regular.otf) format('opentype');
+    font-weight: 400;
+}
+@font-face {
+    font-family: PetrovSans;
+    src: url(../Fonts/PetrovSans-Trial-Bold.otf) format('opentype');
+    font-weight: 700;
+}
+
+
+
+:root {
+    --black: #171717;
+    --white: white;
+    --orange: #ff5e00;
+    --oragne-emission: #702900;
+}
+
+ul {
+    list-style: none;
+}
+
+body {
+    background-color: var(--black);
+    color: var(--white);
+    font-family: PetrovSans;
+    user-select: none;
+}
+
+header {
+ 
+}
+.container {
+    display: flex;
+    column-gap: 10%px;
+    padding: 10px 10%;
+    max-width: 500px;
+    max-height: 500px;
+    background-color: var(--white);
+    color: var(--black);
+    list-style: none;
+    border-radius: 30px;
+    justify-content: center;
+    
+}
+
+.profileimage {
+    max-width: 100px;
+    border-radius: 10rem;
+}
+.profilename {
+    font-family: PetrovSans;
+    font-weight: 700;
+    text-align: center;
+    font-size: 0.8em;
+}
+.profileblock {
+    animation: profileanimation 2s 0.5 normal;
+    animation-fill-mode: forwards;
+}
+
+@keyframes profileanimation {
+    0% {
+        transform: translate(0%, 0%);
+    }
+    100% {
+        transform: translate(-63%, 0%);
+    }
+}
+
+.statsblock {
+    line-height: 100%;
+    font-size: 0.8em;
+}
+
+.profilestats1 {
+    animation: profilestatsanimation 1s 1 normal;
+    animation-fill-mode: forwards;
+    transition: all 3s ease-in;
+    animation-delay: 0s;
+    opacity: 0%;
+}
+.profilestats2 {
+    animation: profilestatsanimation 1s 1 normal;
+    animation-fill-mode: forwards;
+    transition: all 3s ease-in;
+    animation-delay: 0.2s;
+    opacity: 0%;
+}
+.profilestats3 {
+    animation: profilestatsanimation 1s 1 normal;
+    animation-fill-mode: forwards;
+    transition: all 3s ease-in;
+    animation-delay: 0.4s;
+    opacity: 0%;
+}
+.profilestats4 {
+    animation: profilestatsanimation 1s 1 normal;
+    animation-fill-mode: forwards;
+    transition: all 3s ease-in;
+    animation-delay: 0.8s;
+    opacity: 0%;
+}
+@keyframes profilestatsanimation {
+    0% {
+        transform: translate(300%, 0);
+        opacity: 0%;
+    }
+    100% {
+        transform: translate(0, 0);
+        opacity: 100%;
+    }
+}