Initial commit

.replit

@@ -0,0 +1,179 @@
+hidden=[".config"]
+
+# hosting is currently hardcoded for this language
+# [hosting]
+# route = "/"
+# directory= "/"
+
+[nix]
+channel = "stable-21_11"
+
+[languages.html]
+pattern = "**/*.html"
+  [languages.html.languageServer]
+start = "vscode-html-language-server --stdio"
+  [languages.html.languageServer.initializationOptions]
+  provideFormatter = true
+  [languages.html.languageServer.configuration.html]
+  customData = [ ]
+  autoCreateQuotes = true
+  autoClosingTags = true
+  mirrorCursorOnMatchingTag = false
+
+    [languages.html.languageServer.configuration.html.completion]
+    attributeDefaultValue = "doublequotes"
+
+    [languages.html.languageServer.configuration.html.format]
+    enable = true
+    wrapLineLength = 120
+    unformatted = "wbr"
+    contentUnformatted = "pre,code,textarea"
+    indentInnerHtml = false
+    preserveNewLines = true
+    indentHandlebars = false
+    endWithNewline = false
+    extraLiners = "head, body, /html"
+    wrapAttributes = "auto"
+    templating = false
+    unformattedContentDelimiter = ""
+
+    [languages.html.languageServer.configuration.html.suggest]
+    html5 = true
+
+    [languages.html.languageServer.configuration.html.validate]
+    scripts = true
+    styles = true
+
+    [languages.html.languageServer.configuration.html.hover]
+    documentation = true
+    references = true
+
+    [languages.html.languageServer.configuration.html.trace]
+    server = "off"
+
+[languages.javascript]
+pattern = "**/{*.js,*.jsx,*.ts,*.tsx,*.mjs,*.cjs}"
+  [languages.javascript.languageServer]
+start = "typescript-language-server --stdio"
+
+[languages.css]
+pattern = "**/{*.less,*.scss,*.css}"
+  [languages.css.languageServer]
+start = "vscode-css-language-server --stdio"
+    [languages.css.languageServer.configuration.css]
+      customData = [ ]
+      validate = true
+
+      [languages.css.languageServer.configuration.css.completion]
+      triggerPropertyValueCompletion = true
+      completePropertyWithSemicolon = true
+
+      [languages.css.languageServer.configuration.css.hover]
+      documentation = true
+      references = true
+
+      [languages.css.languageServer.configuration.css.lint]
+      # Configure linting
+      # ignore = don't show any warning or error
+      # warning = show yellow underline
+      # error = show red underline
+      argumentsInColorFunction = "error" # Invalid number of parameters
+      boxModel = "ignore" # Do not use width or height when using padding or border
+      compatibleVendorPrefixes = "ignore"  # When using a vendor-specific prefix make sure to also include all other vendor-specific properties"
+      duplicateProperties = "warning" # Do not use duplicate style definitions
+      emptyRules = "warning" # Do not use empty rulesets
+      float = "ignore" # Avoid using 'float'. Floats lead to fragile CSS that is easy to break if one aspect of the layout changes.
+      fontFaceProperties = "warning" # @font-face rule must define 'src' and 'font-family' properties 
+      hexColorLength = "error" # Hex colors must consist of three, four, six or eight hex numbers
+      idSelector = "ignore" # Selectors should not contain IDs because these rules are too tightly coupled with the HTML.
+      ieHack = "ignore" # IE hacks are only necessary when supporting IE7 and older
+      important = "ignore" # Avoid using !important. It is an indication that the specificity of the entire CSS has gotten out of control and needs to be refactored.
+      importStatement = "ignore" # Import statements do not load in parallel
+      propertyIgnoredDueToDisplay = "warning" # Property is ignored due to the display
+      universalSelector = "ignore" # The universal selector (*) is known to be slow
+      unknownAtRules = "warning" # Unknown at-rule
+      unknownProperties = "warning" # Unknown property.
+      validProperties = [ ] # add some properties that the linter doesn't know about
+      unknownVendorSpecificProperties = "ignore" # Unknown vendor specific property.
+      vendorPrefix = "warning" # When using a vendor-specific prefix also include the standard property
+      zeroUnits = "ignore" # No unit for zero needed
+
+      [languages.css.languageServer.configuration.css.trace]
+      server = "off"
+
+    [languages.css.languageServer.configuration.scss]
+    validate = true
+
+      [languages.css.languageServer.configuration.scss.completion]
+      triggerPropertyValueCompletion = true
+      completePropertyWithSemicolon = true
+
+      [languages.css.languageServer.configuration.scss.hover]
+      documentation = true
+      references = true
+
+      [languages.css.languageServer.configuration.scss.lint]
+      # Configure linting
+      # ignore = don't show any warning or error
+      # warning = show yellow underline
+      # error = show red underline
+      argumentsInColorFunction = "error" # Invalid number of parameters
+      boxModel = "ignore" # Do not use width or height when using padding or border
+      compatibleVendorPrefixes = "ignore"  # When using a vendor-specific prefix make sure to also include all other vendor-specific properties"
+      duplicateProperties = "warning" # Do not use duplicate style definitions
+      emptyRules = "warning" # Do not use empty rulesets
+      float = "ignore" # Avoid using 'float'. Floats lead to fragile CSS that is easy to break if one aspect of the layout changes.
+      fontFaceProperties = "warning" # @font-face rule must define 'src' and 'font-family' properties 
+      hexColorLength = "error" # Hex colors must consist of three, four, six or eight hex numbers
+      idSelector = "ignore" # Selectors should not contain IDs because these rules are too tightly coupled with the HTML.
+      ieHack = "ignore" # IE hacks are only necessary when supporting IE7 and older
+      important = "ignore" # Avoid using !important. It is an indication that the specificity of the entire CSS has gotten out of control and needs to be refactored.
+      importStatement = "ignore" # Import statements do not load in parallel
+      propertyIgnoredDueToDisplay = "warning" # Property is ignored due to the display
+      universalSelector = "ignore" # The universal selector (*) is known to be slow
+      unknownAtRules = "warning" # Unknown at-rule
+      unknownProperties = "warning" # Unknown property.
+      validProperties = [ ] # add some properties that the linter doesn't know about
+      unknownVendorSpecificProperties = "ignore" # Unknown vendor specific property.
+      vendorPrefix = "warning" # When using a vendor-specific prefix also include the standard property
+      zeroUnits = "ignore" # No unit for zero needed"
+
+    [languages.css.languageServer.configuration.less]
+    validate = true
+
+      [languages.css.languageServer.configuration.less.completion]
+      triggerPropertyValueCompletion = true
+      completePropertyWithSemicolon = true
+
+      [languages.css.languageServer.configuration.less.hover]
+      documentation = true
+      references = true
+
+      [languages.css.languageServer.configuration.less.lint]
+      # Configure linting
+      # ignore = don't show any warning or error
+      # warning = show yellow underline
+      # error = show red underline
+      argumentsInColorFunction = "error" # Invalid number of parameters
+      boxModel = "ignore" # Do not use width or height when using padding or border
+      compatibleVendorPrefixes = "ignore"  # When using a vendor-specific prefix make sure to also include all other vendor-specific properties"
+      duplicateProperties = "warning" # Do not use duplicate style definitions
+      emptyRules = "warning" # Do not use empty rulesets
+      float = "ignore" # Avoid using 'float'. Floats lead to fragile CSS that is easy to break if one aspect of the layout changes.
+      fontFaceProperties = "warning" # @font-face rule must define 'src' and 'font-family' properties 
+      hexColorLength = "error" # Hex colors must consist of three, four, six or eight hex numbers
+      idSelector = "ignore" # Selectors should not contain IDs because these rules are too tightly coupled with the HTML.
+      ieHack = "ignore" # IE hacks are only necessary when supporting IE7 and older
+      important = "ignore" # Avoid using !important. It is an indication that the specificity of the entire CSS has gotten out of control and needs to be refactored.
+      importStatement = "ignore" # Import statements do not load in parallel
+      propertyIgnoredDueToDisplay = "warning" # Property is ignored due to the display
+      universalSelector = "ignore" # The universal selector (*) is known to be slow
+      unknownAtRules = "warning" # Unknown at-rule
+      unknownProperties = "warning" # Unknown property.
+      validProperties = [ ] # add some properties that the linter doesn't know about
+      unknownVendorSpecificProperties = "ignore" # Unknown vendor specific property.
+      vendorPrefix = "warning" # When using a vendor-specific prefix also include the standard property
+      zeroUnits = "ignore" # No unit for zero needed"
+
+[gitHubImport]
+requiredFiles = [".replit", "replit.nix", ".config"]

index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Rocket Animation</title>
+  <link href="style.css" rel="stylesheet" type="text/css" />
+</head>
+
+<body>
+  <div class="scene">
+    <div class="rocket">
+      <img src="rocket.png" />
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>

replit.nix

@@ -0,0 +1,6 @@
+{ pkgs }: {
+  deps = [
+    pkgs.nodePackages.vscode-langservers-extracted
+    pkgs.nodePackages.typescript-language-server
+  ];
+}

script.js

@@ -0,0 +1,21 @@
+function stars() {
+  let count = 50;
+  let scene = document.querySelector('.scene');
+  let i = 0;
+  while (i < count) {
+    let star = document.createElement('i');
+    let x = Math.floor(Math.random() * window.innerWidth);
+    let duration = Math.random() * 1;
+    let h = Math.random() * 100;
+
+    star.style.left = x + 'px';
+    star.style.width = 1 + 'px';
+    star.style.height = h + 'px';
+    star.style.animationDuration = duration + 's';
+
+    scene.appendChild(star);
+    i++;
+  }
+}
+
+stars();

style.css

@@ -0,0 +1,69 @@
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.scene{
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  background: #01070a;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.scene .rocket{
+  position: relative;
+  animation: animate 0.2s ease infinite;
+}
+
+@keyframes animate {
+  0%,100%{
+    transform: translateY(-2px);
+  }
+  50%{
+    transform: translateY(2px); 
+  }
+}
+
+.scene .rocket::before{
+  content: '';
+  position: absolute;
+  bottom: -200px;
+  left: 40%;
+  transform: translateX(-50);
+  width: 15px;
+  height: 200px;
+  background: linear-gradient(#00d0ff,transparent);  
+}
+
+.scene .rocket::after{
+  content: '';
+  position: absolute;
+  bottom: -200px;
+  left: 40%;
+  transform: translateX(-50);
+  width: 15px;
+  height: 200px;
+  background: linear-gradient(#00d0ff,transparent);
+  filter: blur(20px);
+}
+
+.scene i{
+  position: absolute;
+  top: -250px; 
+  background: #C0C0C0;
+  animation: animateStar linear infinite;
+}
+
+@keyframes animateStar{
+  0%{
+    transform: translateY(0);
+  }
+  100%{
+    transform: translateY(600vh);
+  }
+}